选择器可以看作是一个增强的getElementById方法。getElementById方法返回一个HTML元素，jQuery选择器返回该HTML元素的包装。有了这个包装器集，jQuery给了HTML元素更多的操作方式。在JQuery中，核心的一个函数是$。是的，它是一个函数，它的名字有点奇怪。这个函数是一个选择函数，一般用法是var obj=$(selector)；其中，选择器是字符串，是下面要强调的选择器。返回的是元素的包装集合。事实上，JQuery的核心$函数的力量远不止用作选择器。当它的参数是一个函数时，它就像一个onload事件。当页面的DOM元素完全加载后，其参数中的方法将被执行。它比有载更有优势。onload只能注册一个函数，但可以多次调用，即可以注册多个函数在DOM完全加载后执行。onload应该在执行之前等待页面上的所有内容被加载。如果有大图片等内容，可能会造成函数执行延迟。只要DOM结构完全加载，就可以执行$函数。看下面一个简单的例子：复制代码如下： html xmns=' http://www.w3.org/1999/XHTML' head title jquery首页/title script type=' text/JavaScript ' src=' http : jquery-1 . 3 . 2 . js '/script script type=' text/JavaScript ' $(function(){ var p=$(' # P1 ')；警报(p)；});/script/headbody p ID=' P1 '我是一个p/p/body/html如您所见，最简单的选择器类似于getElementById，它使用元素的ID作为选择器。你可以看到P是什么，用js调试器也可以看到：。

p是一个类似数组的对象，里面包含了被选中的元素。打开[方法]结点可以看到很多方法，都是框架提供的方法。在这个例子中，元素只有一个，因此通过p[0]就能获得该超文本标记语言元素，p[0]就是和的元素获得的对象是一样的jQuery。选择符的强大之处在于它几乎完全兼容CSS2的选择符，而不管你的浏览器是否兼容CSS2。如果对半铸钢钢性铸铁(铸造半钢)选择符还不熟悉的，请参考我的上一篇日志：CSS选择符。对于选择到的元素，可以给他施加很多方法，这些方法不是本文介绍的重点，这里先介绍一个，就是css(属性，值)方法，这个方法可以给包装元素的钢性铸铁属性中的属性属性的值设置为价值。下面举的例子就是利用这个方法给页面元素增加一点字体上的变化，我们可以以此区分出某个选择符到底选中了哪些元素。这个例子和我上一篇的例子的内容几乎是一样的，我就不加解释了，只是这篇的例子也都适用于IE6！复制代码代码如下：DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML L1/DTD/XHTML L1-过渡。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' head title jquery Selector/title脚本类型=' text/JAVAScript ' src=' http 3360 jquery-1。3 .2 .js /脚本类型='css('颜色','红色');//元素选择器$('。警告')。css(“”字体样式','斜体');//class selecotr $('p.warning ').css(“”颜色','红色');$('p.big.warning ').css('font-size '，' x-large ')；//多类选择器$("*[id]").css('color '，' red ')；//属性选择器$('p[class]').css('color '，' blue ')；$('p[class][id]').css('font-size '，' x-large ')；$('div[title='title']').css('font-weight '，' bold ')；$('div[title^='title']').css('color '，' red ')；$('div[title$='World']').css('color '，' blue ')；$('div[title~='Hello']').css('font-size '，' x-large ')；$('div[title*='Hello']').css(“”字体样式','斜体');$('div[title|='Hello']').css(“”背景色','银色');$("p。警告")。css('font-size '，' x-large ')；//偏心选择器$('body .警告')。css(“”边框，' 1px实心');//子选择器});/脚本/头体氕这是H1/h1 h2这是H2/h2 h3这是H3/H3 p='警告'真正的警告！/p span class=' Warning '常见警告/span p class=' Big Warning '警告和Big/p div id=' title '我是title/div p class=' Warning '真实警告！/p p id='idp1' class='myclass' P带有一个编号和类/p p最后一行/p p id='idp2' P带ID/p div title='title '我是title/div title=' title 2 '我是标题2/div标题=' Hello World ' Hello World/div标题=' Hello World ' Hello World/div标题=' Hello-World ' Hello-World/div PS pan class=' warning '类警告在p/span/p /body /html内部效果如下：

jQuery的力量不仅限于此。除了CSS选择器，jQuery本身也支持其他选择器，其中之一就是基于位置的选择器。例如，选择列表中的第一行，甚至是表中的行，等等。这种选择器的一般形式是：location，比如a:first，匹配页面上的第一个a，p :甚至匹配页面上的偶数p。选择器描述：第一页的第一次出现。a : first Li标签下最先出现的a:last与上面相同，最后出现。first-child的第一个子元素：last-child的最后一个子元素： th-child(n)返回第n个子元素(从1开始): th-child(偶数|奇数)返回偶数|奇数子元素：偶数：奇数元素：eq(n)。gt(n) :lt(n (n)返回第n个元素(从0开始)，第n个元素之后的元素，第n个元素之前的元素先看一个例子来解释：复制代码如下： html xmlns=' http://www.w3.org/1999/XHTML'头标题自定义选择器/标题style type=' text/CSS ' table { border-collapse 3360 collapse；font-family : verdana；} TD { padding-left : 10px；填充-右： 10px；border:固体1px黑色；}/style script type=' text/JavaScript ' src=' http : jquery-1 . 3 . 2 . js '/script script type=' text/JavaScript ' $(function(){ $(' tr : first ')。css({fontWeight:'bold '，font size : ' large ' })；$('tr:even ')。css('背景色'，'银色')；$(“tr TD : first”)。css('color '，' red ')；$(' tr : gt(0): first-child ')。css('字体样式'，'斜体')；$('p:eq(0)')。css({fontFamily:'Arial '，font size : ' x-large ' })；});/script/head body pEntry Level DSLR价格/p table Tr tdCompany/TD tdModel/TD tdPrice/TD/Tr tdCanon/TD TD TD 1000d/TD Tr tdCanon/TD TD TD TD 450d/TD TD TD TD 4100/TD/Tr tdCanon/TD td500 d/TD TD TD TD 4900/TD/Tr tdCanon/TD td550 d/TD TD TD TD 6100/TD/Tr tdNikon/TD TDD 3000/TD TD TD TD TD 3600第二句是将偶数行的背景设置为银灰色。第三句话是将tr中的第一个td元素设置为红色。第四句话是把all tr的第一个子元素设置在斜体的第二行开头。第4条展示了选择器的组合使用。这种选择器类似于CSS选择器，也可以组合使用。特别注意p :first和p:first的区别。前者表示整个页面中的第一个p，而后者表示包含在p中的第一个元素.基于以上解释，最终结果应该是：。

况且上图是IE8下剪的，不得不说IE渲染字体真的很顺眼。Chrome FF没那么好看。言归正传，继续介绍jQuery的最后一个选择器。这种选择器非常类似于css的伪类。例如，button选择通过输入[type=button]:checked 3360包含(' xxx ')选择的复选框或按钮。包含字符串XXX的元素的具体用法比较简单，不再详细介绍。