窥探jQuery——面向JavaScript程序员

核心提示： 上述例子中，:visible和:odd是jQuery实现的扩展，窥探jQuery——面向JavaScript程序员(3)，很具特色，而属性的选取使用@作为标记，这个示例用到了链盒（chaining），稍后会做介绍，其方式和XPath一样，要优于CSS 2

上述例子中，:visible和:odd是jQuery实现的扩展，很具特色。而属性的选取使用@作为标记，其方式和XPath一样，要优于CSS 2。

jQuery的这套选取语法包罗万象，有些类似正则表达式，想完全消化是需要花上一段时间的。

把玩一下（Doing stuff with them）

通过jQuery的选取操作，我们能得到一些很棒的“素材”（beast）。它们是一个集合，包含了DOM元素，并且类似数组那样，拥有length属性；通过索引可以访问集合中的元素。在Firebug console的交互模式下，集合也被显示成一个数组，这个特性非常有用。集合实际上是一个jQuery对象，这个对象被赋予了很多方法（methods），用来查询，修改，扩展集合中的元素。

jQuery的方法（methods），本质上可分成三种：一种可以操作那些符合匹配的元素；一种可以返回第一个匹配到的对象的值；一种可以变更被选取的集合。

我不会列出所有的方法（可参考visualjquery.com），但我用例子做一下说明。如果你的浏览器装了Firebug，你可以以交互方式运行这些示例代码：首先使用这个bookmarklet（译注[1]）把jQuery库载入至浏览器的任意页面，然后把示例代码粘贴到Firebug console中。

jQuery('div#primary').width(300);
把id="primary"的div的宽度设为300px
jQuery('p').css('line-height', '1.8em');
把所有段落的line-height设为1.8em
jQuery('li:odd').css({color: 'white', backgroundColor: 'black'});
向间隔的list项添加两个CSS规则；注意css()函数可以用一个对象来代替两个字符串作为参数
jQuery('a[@href^="http://"]').addClass('external').attr('target', '_blank');
向所有（以http://开头的）外部链接添加“external”类，然后策略性地加上target="_blank"属性。这个示例用到了链盒（chaining），稍后会做介绍。
jQuery('blockquote').each(function(el) { alert(jQuery(this).text()) });
遍历页面上的每个<blockquote>，并显示出它的文字内容（包括HTML标签）
jQuery('a').html('Click here!');
用阴险的“Click here!”代替页面上所有的链接<a>的文字

下面的示例展示了jQuery如何取得第一个匹配到的对象的值：