本文翻译自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://.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <script type="text/JavaScript" src="http://ajax.googleapis/ajax/libs/jquery/1.3.2/jquery.min.js"></script> </head> <body> <div>old content</div> <script> //隐藏页面上所有的div元素 jQuery('div').hide(); //更新所有div元素内的文本 jQuery('div').text('new content'); //在所有的div元素上添加值为updatedContent的class属性 jQuery('div').addClass("updatedContent"); //显示页面上所有的div元素 jQuery('div').show(); </script> </body> </html>
我们来逐一看一下这四个jQuery语句:
- 隐藏页面上所有的div元素,让它们变得不可见
- 用新文本('new content')来替换隐藏的div元素中的原有文本
- 向div元素添加新的class属性值(updatedContent)
- 在页面上重新显示div元素
上面的例子使用jQuery函数查找HTML页面中所有的<div>元素,然后用jQuery方法对其进行操作(hide(), text(), addClass(), show())。
链式调用
在调用jQuery方法的时候,按照jQuery的设计,可以对这些方法进行链式调用。比如,只做一次元素查找,然后在找到的元素上展开一系列操作。之前的代码示例可以用链式调用重写为一句JavaScript语句。
使用链式调用,可以将下面的代码:
//隐藏页面上所有的div元素 jQuery('div').hide(); //更新所有div元素内的文本 jQuery('div').text('new content'); //在所有的div元素上添加值为updatedContent的class属性 jQuery('div').addClass("updatedContent"); //显示页面上所有的div元素 jQuery('div').show();
重写成:
jQuery('div').hide().text('new content').addClass("updatedContent").show();
www.002pc.com对《关于jQuery参考实例 1.0 jQuery的哲学》总结来说,为我们帝国cms源码很实用。
更多:learning node.js关于jQuery参考实例 1.0 jQuery的哲学
https://www.002pc.comhttps://www.002pc.com/javascript/763.html
你可能感兴趣的jQuery,1.0,实例,参考,哲学,关于
