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

操作DOM（DOM Manipulation）

jQuery提供了几个大规模操作DOM的卓越方法。第一种非常让人惊叹：jQuery()函数能把HTML片段插入DOM元素中（实际上，函数会留意以'<'打头的字符串参数）：

var div = jQuery('<div>Some text</div>');一旦你创建好了div，便可以继续用链盒向其添加属性：

var div = jQuery('<div>Some text</div>').addClass('inserted').attr('id', 'foo');现在把div加到body上：

div.appendTo(document.body)或用选择器把div加到已知元素的前面：

div.prependTo('div#primary')处理事件（Handling events）

任何JavaScript库都需要事件处理能力，jQuery也不例外。类似attr()和css()的行为，各种与事件处理相关的方法也有双重用途：一种是把函数当作参数，赋给事件处理器；一种是不带参数，可以模拟事件被触发（译注：前提是事件已经定义，可参考visualjquery.com > Events > click()）：

jQuery('p').click(function() { jQuery(this).css('background-color', 'red'); });
为所有段落增加点击事件，当你点击它们时，段落背景会变成红色
jQuery('p:first').click()
然后在第一个段落上模拟点击的动作，它的背景会变成红色

类似的函数还包括mouseover，keyup等，对应着浏览器通常支持的那些动作。留意一下事件处理中的'this'关键字，它代表触发事件的元素；jQuery(this)是一种惯用语法，可以让this所代表的元素应用各种jQuery方法。

这里有两个与事件相关的函数值得仔细说一下：

jQuery('a').hover(function() {    jQuery(this).css('background-color', 'orange');}, function() {    jQuery(this).css('background-color', 'white');});hover()可设定两个函数，分别对应onmouseover和onmouseout事件。

jQuery('p').one('click', function() { alert(jQuery(this).html()); });one()设定的事件在第一次被触发后便被移除。上面的示例会让所有段落在第一次被点击时显示其文字内容。

凭借bind()和trigger()方法，jQuery也可以支持自定义事件（click()家族仅仅是便捷方法，只支持有限的事件）。自定义事件可接受参数，trigger()可接受数组作为参数，来做各种处理操作：

jQuery(document).bind('stuffHappened', function(event, msg) {    alert('stuff happened: ' + msg);});jQuery(document).trigger('stuffHappened', ['Hello!']);渐进式编码（Unobtrusive scripting）

本小节的标题很令我钟意。我一直认为，最好的Web应用程序，往往是那些在脚本被禁用后仍能正常使用的程序。想建立这样的应用程序，最好的方法就是遵循渐进式编码，让普通页面完全加载后，再为页面中的元素赋以事件处理（更多信息可参考渐进式编码和Hijax）。

jQuery对这种编码策略提供了绝好支持。首先，从整体上看，节点选取暗合jQuery以及渐进式编码的核心理念。其次，针对window.onload问题，jQuery提供了一套解决方案，这套方案借鉴了Dean Edward的成果，使得以“DOM加载完毕”为信号的事件能跨浏览器工作。你可以在浏览器完全加载DOM后设定并运行一个函数，如下所示：

jQuery(document).ready(function() {    alert('The DOM is ready!');});你甚至可以直接传递一个函数给jQuery()，以更简洁的方式达到同样效果：

jQuery(function() {    alert('The DOM is ready!');});jQuery与Ajax（jQuery and Ajax）

在我所知道的主流JavaScript库中，jQuery拥有最棒的Ajax API。最简单的Ajax调用如：

jQuery('div#intro').load('/some/fragment.html');代码以GET请求方式，从/some/fragment.html文件中获取HTML片段，并把片段装载到id="intro"的div中。

当我第一次看到这行代码时，几乎对它没什么印象。这看起来非常简洁，但如果你想用jQuery做些更复杂的事情，比如显示Ajax装载进度，该如何做呢？ jQuery为你准备了一些可自定义的事件（ajaxStart，ajaxComplete，ajaxError等等），来实现你想要的代码。同时 jQuery也提供了广泛的底层API，来实现更复杂的Ajax交互：

jQuery.get('/some/script.php', {'name': 'Simon'}, function(data) {    alert('The server said: ' + data);}); // 以GET方式通过/some/script.php?name=Simon获取数据jQuery.post('/some/script.php', {'name': 'Simon'}, function(data) {    alert('The server said: ' + data);}); // 以POST方式向/some/script.php发送请求jQuery.getJSON('/some.json', function(json) {    alert('JSON rocks: ' + json.foo + ' ' + json.bar);}); // 从/some.json接收并解析数据，把数据转换成JSON格式jQuery.getScript('/script.js'); // 以GET方式获取/script.js脚本并用eval()执行插件（Plugins）

就你所能获得的功能的数量而言，jQuery库其实是相当小的——对代码做紧凑处理后只有20KB左右，甚至用gzip压缩后会变得更小。向标准库添加额外功能时，需用插件的方式来做，它可以（也确实能够）向现有的jQuery实例对象添加全新的方法。如果你想执行：


jQuery('p').bounceAroundTheScreenAndTurnGreen();jQuery的插件机制提供了文档说明型的挂载方式（documented hooks），可以实现把上述方法添加到jQuery中。这种简易的创建形式，吸引了很多插件作者，他们让人印象深刻；现在插件目录中已经有超过100个插件了。

真正绝妙的，是你可以像自定义方法那样，来定义选择器。比如，moreSelectors插件实现了诸如“div:color(red)”的方法，来匹配包含红色文本的div。