关于jQuery参考实例 1.0 jQuery的哲学

时间:2021-05-25

本文翻译自jQuery Cookbook (O'Reilly 2009) 1.0 The jQuery Philosophy

jQuery的哲学是“写更少的代码,做更多的事情”,这一哲学可分述为三个概念:

  • 用CSS选择器查找元素,并通过jQuery方法来操作这些元素
  • 在元素集上链式调用多个jQuery方法
  • jQuery封装与隐式遍历

充分理解这三个概念对于编写jQuery代码来说至关重要。我们来详细看一下这三个概念。

查找元素并进行操作

更准确的说,是在DOM树中定位一批元素,然后对该元素集进行操作。比如下面这个例子:首先向用户隐藏一个<div>元素,然后向这个隐藏了的<div>元素内插入一些新文本,之后更改其属性,最后重新显示这个<div>元素。相应的jQuery代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http:///ajax/libs/ jquery/1.3.0/jquery.min.js"></script> </head><body> <div>old content</div> <div>old content</div> <div>old content</div> <div>old content</div> <script> jQuery('div').hide().text('new content').addClass("updatedContent").show(); </script></body></html>

在上面的例子中并没有任何表示循环的编程代码。但奇妙的是,jQuery会扫描整个页面,然后将所有的<div>元素放到封装元素集中,之后对该封装集中的每一个元素(隐式遍历)执行代码定义的一系列jQuery方法。比如,封装集中的每一个元素都调用了.hide()。在上述代码中,实际上我们使用的每一个方法(hide(), text(), addClass(), show())都在页面中所有的div元素上起了作用,就像人为写了一个循环方法来遍历DOM元素一样。上述代码的执行结果是:页面中的每一个<div>元素都被隐藏,更改内含文本,添加class属性,并最终重新显现。

熟悉封装元素集和隐式遍历对于编写复杂的循环逻辑来说非常重要 — 需要留意的是,在写任何额外的循环代码之前,一个简单的循环操作已经存在了(比如:jQuery(‘div').each(function(){})。换而言之,jQuery方法的调用会影响封装元素集中的每一个元素。

需要注意的是,有一些jQuery方法的行为特殊,只会影响封装元素集中的第一个元素(比如:attr())。


声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章