或许 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 显示了一个示例,其中包含有一个登录表单并处理了一些与之有关的元素。
清单 7. 轻松地遍历和处理 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)文档。