窥探jQuery——面向JavaScript程序员（2）

把玩一下（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如何取得第一个匹配到的对象的值：


var width = jQuery('div').width();
页面上第一个div的宽度
var src = jQuery('img').attr('src');
页面上第一张图片的src属性值
var color = jQuery('h1').css('color');
第一个<h1>的颜色样式值

在jQuery 的方法构造中，蕴含着令人惬意的对称性：当向方法传递两个参数或一个对象时，方法可被用来执行设置操作；如果只向方法传递一个参数，则可以让它执行取值操作（译注：读者可对照上面的示例代码感受一下）。这种对称性设计贯穿了jQuery体系，使得API的文法更容易被记忆。

本节最后的例子，展示了一些可变更被选取的元素集合的方法。这些方法大多都提高了检索DOM的简易程度：

jQuery('div').not('[@id]')
返回那些没有id属性的div
jQuery('h2').parent()
返回那些是<h2>的直接父节点元素
jQuery('blockquote').children()
返回所有<blockquote>的子节点元素
jQuery('p').eq(4).next()
在页面上找到第五个段落（译注：因为集合的元素索引从0开始），然后根据节点的树层结构关系，找到并返回这个段落节点右侧的兄弟节点元素
jQuery('input:text:first').parents('form')

找到并返回页面上第一个type="text"的输入域所在的form节点元素，parents()的可选参数是另一个选择器

链盒（Chaining）

jQuery 开发团队经常夸耀jQuery的链盒理念（译注[2]），甚至在网站首页上宣扬“jQuery将改变你编写JavaScript的方式”。我个人感觉，这么做多少有点误导大众，我愿意告诉大家，你完全可以取jQuery之长，却应避免冗长的方法链盒（chains of methods）。

也就是说，链盒有时会像变戏法一样。除了使用链盒将各种操作DOM的方法粘到一起，你也可以使用jQuery的end()方法，来实现在特定范围内推进或回溯你需要得到的元素。这个概念很难解释清楚。本质上讲，每次使用（诸如children()或filter()）方法来改变元素集合时，你可以在这些方法之后使用end()，来重新定位你最初选取的元素集合。关于这点，Jesse Skinner在他的Simplify Ajax development with jQuery（译注[3]）教程中给出了实例：

$('form#login')    // 第一步，隐藏表单中那些带有'optional'类的<label>    .find('label.optional').hide().end()    // 第二步，为表单的密码输入域渲染上红色边框    .find('input:password').css('border', '1px solid red').end()    // 第三步，为表单加上提交处理    .submit(function(){        return confirm('Are you sure you want to submit?');    });

这个示例读起来就像句俏皮话。整个过程是，先选取一个表单，再在其中选取一些元素做修改，然后回溯到表单，为它定义一个submit()处理。

示例很酷，但如果你不习惯，也可以不这么用。我就很乐意用自定义变量来规划代码。