DOM 脚本和事件处理

          或许 jQuery 最擅长的就是简化 DOM 脚本和事件处理。遍历和处理 DOM 非常简单，同时附加、移除和调用事件也十分容易，且不像手动操作那样容易出错。 从本质上说，jQuery 可以使 DOM 脚本中的常用操作变得更加容易。您可以创建元素并且使用 append() 函数把它们与其它的一些元素链接到一起，使用 clone() 复制元素，使用 html() 设置内容，使用 empty() 函数删除内容，使用 remove() 函数删除所有的元素，即便是使用 wrap() 函数，用其他元素将这些元素包装起来。

通过遍历 DOM，一些函数可以用于更改 jQuery 对象本身的内容。可以获得元素所有的 siblings()、parents() 和 children()。还可以选择 next() 和 prev() 兄弟元素。find() 函数或许是功能最强大的函数，它允许使用 jQuery 选择器搜索 jQuery 对象中元素的后代元素。如果结合使用 end() 函数，那么这些函数将变得更加强大。这个函数的功能类似于 undo 函数，用于返回到调用 find() 或 parents() 函数（或者其它遍历函数）之前的 jQuery 对象.如果配合方法链接（method chaining）一起使用，这些函数可以使复杂的操作看上去非常简单。清单 7 显示了一个示例，其中包含有一个登录表单并处理了一些与之有关的元素。

清单 1. 轻松地遍历和处理 DOM

$('form#login')
    // hide all the labels inside the form with the 'optional' class
    .find('label.optional').hide().end()    

    // add a red border to any password fields in the form
    .find('input:password').css('border', '1px solid red').end()    

    // add a submit handler to the form
    .submit(function(){
        return confirm('Are you sure you want to submit?');
    });   

    不管您是否相信，这个示例只是一行满是空白的被链接的代码。首先，选择登录表单。然后，发现其中含有可选标签，隐藏它们，并调用 end() 返回表单。然后，我创建了密码字段，将其边界变为红色，再次调用 end() 返回表单。最后，我在表单中添加了一个提交事件处理程序。其中尤为有趣的就是（除了其简洁性以外），jQuery 完全优化了所有的查询操作，确保将所有内容很好地链接在一起后，不需要对一个元素执行两次查询。处理常见事件就像调用函数（比方说 click()、submit() 或 mouseover()）和为其传递事件处理函数一样简单。此外，还可以使用 bind(‘eventname’, function(){}) 指定自定义的事件处理程序。可以使用 unbind(‘eventname’) 删除某些事件或者使用 unbind() 删除所有的事件。有关这些函数的使用方法的完整列表，请参阅 参考资料 中的 jQuery 应用程序编程接口（Application Program Interface，API）文档。

结束语

    我只是简要地介绍了使用 jQuery 可能完成的任务。jQuery 使用起来非常有趣，因此我们总是能学到看上去很简单的新技巧和新特性。从刚开始使用 jQuery 的那一刻起，jQuery 便可以完全简化您的 JavaScript 和 Ajax 编程；每学会一点新知识，您的代码就会更简单一点。学习了 jQuery 之后，我在使用 JavaScript 语言进行编程的同时也获得了许多的乐趣。不用操心所有无聊的内容，我可以专注地编写有趣的内容。使用 jQuery 后，我几乎就告别了编写 for 循环代码的时代。甚至在想到要使用其它 JavaScript 库时，不禁会有所畏缩不前。jQuery 确确实实改变了我对 JavaScript 编程的看法。