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


Posted in Javascript onApril 07, 2013

本文翻译自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://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
 <script type="text/JavaScript"
  src="http://ajax.googleapis.com/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();

如果加上代码缩进就是:

jQuery('div')
 .hide()
 .text('new content')
 .addClass("updatedContent")
 .show();

简单地说,链式调用允许在当前选择的元素集上,将无限个jQuery方法连在一起使用。究其实质,用jQuery方法处理的元素总会在方法处理完毕之后得到返回,因此链式调用可以一直继续。jQuery的插件也是这样设计的(返回封装的元素集),因此使用插件并不会影响链式调用。

链式调用的另一个好处是通过只选择一次DOM元素来节省开销。避免遍历DOM树,对于网页性能提升来说至关重要,因此需要尽可能重用或者缓存已选择的DOM元素集。

jQuery封装

在大多数情况下,如果使用了jQuery,那么必定会和一个叫做“jQuery封装”的东西打交道。换而言之,用jQuery从HTML页面上选择出来的元素会被封装上一层jQuery提供的功能。我个人喜欢把这个东西叫做“封装元素集”,因为它是一个封装了jQuery功能的元素集合。这个封装元素集有时包含一个DOM元素,有时包含多个,有时甚至里面什么都没有。当封装元素集为空时,在其上调用的jQuery方法/属性不会抛出任何错误 — 这样做可以避免不必要的if语句。

还是以上面的HTML代码为例,当网页中存在多个<div>元素的时候会怎么样?在下面的例子中,HTML页面多了3个<div>元素:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
 <script type="text/JavaScript" src="http://ajax.googleapis.com/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())。


Javascript 相关文章推荐
JScript中的&quot;this&quot;关键字使用方式补充材料
Mar 08 Javascript
Dom与浏览器兼容性说明
Oct 25 Javascript
JS 自定义带默认值的函数
Jul 21 Javascript
Javascript面向对象设计一 工厂模式
Dec 20 Javascript
基于jquery的鼠标拖动效果代码
May 30 Javascript
JS连接SQL数据库与ACCESS数据库的方法实例
Nov 21 Javascript
javascript基于DOM实现省市级联下拉框的方法
May 14 Javascript
jQuery UI结合Ajax创建可定制的Web界面
Jun 22 Javascript
jQuery实现的简单悬浮层功能完整实例
Jan 23 Javascript
小程序Request的另类用法详解
Aug 09 Javascript
如何通过JS实现转码与解码
Feb 21 Javascript
vue 动态组件用法示例小结
Mar 06 Javascript
jQuery操作checkbox选择(list/table)
Apr 07 #Javascript
关于jQuery参考实例2.0 用jQuery选择元素
Apr 07 #Javascript
js将long日期格式转换为标准日期格式实现思路
Apr 07 #Javascript
jQuery对象数据缓存Cache原理及jQuery.data方法区别介绍
Apr 07 #Javascript
关于jQuery对象数据缓存Cache原理以及jQuery.data详解
Apr 07 #Javascript
有关于eclipse配置spket需要注意的一些地方
Apr 07 #Javascript
如何在一个页面显示多个百度地图
Apr 07 #Javascript
You might like
聊天室php&amp;mysql(二)
2006/10/09 PHP
解析php中如何调用用户自定义函数
2013/08/06 PHP
编译PHP报错configure error Cannot find libmysqlclient under usr的解决方法
2014/06/27 PHP
php实现通用的从数据库表读取数据到数组的函数实例
2015/03/21 PHP
PHP7 新特性详细介绍
2016/09/06 PHP
Thinkphp结合ajaxFileUpload实现异步图片传输示例
2017/03/13 PHP
PHP基于接口技术实现简单的多态应用完整实例
2017/04/26 PHP
深入解析PHP底层机制及相关原理
2020/12/11 PHP
ExtJs之带图片的下拉列表框插件
2010/03/04 Javascript
js定义对象或数组直接量时各浏览器对多余逗号的处理(json)
2011/03/05 Javascript
jQuery中extend函数详解
2015/02/13 Javascript
javascript实现多栏闭合展开式广告位菜单效果实例
2015/08/05 Javascript
JavaScript ParseFloat()方法
2015/12/18 Javascript
JavaScript中apply方法的应用技巧小结
2016/09/29 Javascript
JS去除重复并统计数量的实现方法
2016/12/15 Javascript
jquery Banner轮播选项卡
2016/12/26 Javascript
JavaScript实现网页头部进度条刷新
2017/04/16 Javascript
详解原生JS回到顶部
2019/03/25 Javascript
vue单应用在ios系统中实现微信分享功能操作
2020/09/07 Javascript
Ant-design-vue Table组件customRow属性的使用说明
2020/10/28 Javascript
[54:29]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第二场
2018/04/09 DOTA
Python自定义函数的创建、调用和函数的参数详解
2014/03/11 Python
Python常见格式化字符串方法小结【百分号与format方法】
2016/09/18 Python
python opencv检测目标颜色的实例讲解
2018/04/02 Python
谈谈Python中的while循环语句
2019/03/10 Python
将python运行结果保存至本地文件中的示例讲解
2019/07/11 Python
NumPy排序的实现
2020/01/21 Python
python中@contextmanager实例用法
2021/02/07 Python
一份恶作剧的检讨书
2014/09/13 职场文书
闪闪红星观后感
2015/06/08 职场文书
2019新员工心得体会
2019/06/25 职场文书
Nginx + consul + upsync 完成动态负载均衡的方法详解
2021/03/31 Servers
Mysql Online DDL的使用详解
2021/05/20 MySQL
html css3不拉伸图片显示效果
2021/06/07 HTML / CSS
vue 自定义的组件绑定点击事件
2022/04/21 Vue.js
Python查找算法的实现 (线性、二分,分块、插值查找算法)
2022/04/24 Python