关于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 相关文章推荐
javascript 页面划词搜索JS
Sep 28 Javascript
javascript 读取XML数据,在页面中展现、编辑、保存的实现
Oct 27 Javascript
用最通俗易懂的代码帮助新手理解javascript闭包 推荐
Mar 01 Javascript
使用OpenLayers3 添加地图鼠标右键菜单
Dec 29 Javascript
浅谈JS原生Ajax,GET和POST
Jun 08 Javascript
浅谈Node.js之异步流控制
Oct 25 Javascript
开发Vue树形组件的示例代码
Dec 21 Javascript
vue通过路由实现页面刷新的方法
Jan 25 Javascript
JS设计模式之策略模式概念与用法分析
Feb 05 Javascript
JavaScript使用math.js进行精确计算操作示例
Jun 19 Javascript
vue2.x 通过后端接口代理,获取qq音乐api的数据示例
Oct 30 Javascript
js实现点击按钮随机生成背景颜色
Sep 05 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 友好URL的实现(吐血推荐)
2008/10/04 PHP
2014过年倒计时示例
2014/01/31 PHP
destoon官方标签大全
2014/06/20 PHP
php获得客户端浏览器名称及版本的方法(基于ECShop函数)
2015/12/23 PHP
基于jQuery的弹出框插件
2012/03/18 Javascript
jquery在IE、FF浏览器的差别详细探讨
2013/04/28 Javascript
JavaScript的9种继承实现方式归纳
2015/05/18 Javascript
JS实现点击Radio动态更新table数据
2017/07/18 Javascript
seajs模块压缩问题与解决方法实例分析
2017/10/10 Javascript
原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果
2018/05/03 Javascript
vue封装swiper代码实例解析
2019/10/08 Javascript
JS数组的高级使用方法示例小结
2020/03/14 Javascript
js实现简单五子棋游戏
2020/05/28 Javascript
Vue的Options用法说明
2020/08/14 Javascript
如何手动实现一个 JavaScript 模块执行器
2020/10/16 Javascript
[04:04]显微镜下的DOTA2第六期——电影级别的华丽团战
2014/06/20 DOTA
python的描述符(descriptor)、装饰器(property)造成的一个无限递归问题分享
2014/07/09 Python
Python中的两个内置模块介绍
2015/04/05 Python
Python的净值数据接口调用示例分享
2016/03/15 Python
python3实现基于用户的协同过滤
2018/05/31 Python
python调试神器PySnooper的使用
2019/07/03 Python
Python编程快速上手——选择性拷贝操作案例分析
2020/02/28 Python
Python内建序列通用操作6种实现方法
2020/03/26 Python
Python sklearn中的.fit与.predict的用法说明
2020/06/28 Python
临床医学专业毕业生的自我评价
2013/10/17 职场文书
财务会计专业推荐信
2013/11/30 职场文书
商务英语专业求职信范文
2014/01/28 职场文书
个人社会实践自我鉴定
2014/03/24 职场文书
我的求职择业计划书
2014/04/04 职场文书
就业协议书范本
2014/04/11 职场文书
财会专业毕业生自荐信
2014/07/09 职场文书
部队个人年终总结
2015/03/02 职场文书
2015年事业单位办公室文员工作总结
2015/04/24 职场文书
python3美化表格数据输出结果的实现代码
2021/04/14 Python
Redis+Lua脚本实现计数器接口防刷功能(升级版)
2022/02/12 Redis
Win11怎么添加用户?Win11添加用户账户的方法
2022/07/15 数码科技