关于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 相关文章推荐
jQuery focus和blur事件的应用详解
Jan 26 Javascript
js创建一个input数组并绑定click事件的方法
Jun 12 Javascript
在AngularJS应用中实现一些动画效果的代码
Jun 18 Javascript
JS+CSS实现仿msn风格选项卡效果代码
Oct 22 Javascript
Bootstrap导航条学习使用(一)
Feb 08 Javascript
AngularJS实现进度条功能示例
Jul 05 Javascript
浅谈vue项目4rs vue-router上线后history模式遇到的坑
Sep 27 Javascript
Element 默认勾选表格 toggleRowSelection的实现
Sep 04 Javascript
javascript的惯性运动实现代码实例
Sep 07 Javascript
es6中reduce的基本使用方法
Sep 10 Javascript
layui table 列宽百分比显示的实现方法
Sep 28 Javascript
JS数据类型STRING使用实例解析
Dec 18 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开发大型项目的一点经验
2006/10/09 PHP
PHP精确计算功能示例
2016/11/29 PHP
ExtJS 学习专题(一) 如何应用ExtJS(附实例)
2010/03/11 Javascript
超炫的jquery仿flash导航栏特效
2014/11/11 Javascript
轻松创建nodejs服务器(5):事件处理程序
2014/12/18 NodeJs
JavaScript Sort 的一个错误用法示例
2015/03/20 Javascript
Jquery promise实现一张一张加载图片
2015/11/13 Javascript
JavaScript函数节流概念与用法实例详解
2016/06/20 Javascript
jquery日历插件e-calendar升级版
2016/11/10 Javascript
JS实现仿UC浏览器前进后退效果的实例代码
2017/07/17 Javascript
ionic 3.0+ 项目搭建运行环境的教程
2017/08/09 Javascript
VsCode插件整理(小结)
2017/09/14 Javascript
实例分析JS与Node.js中的事件循环
2017/12/12 Javascript
Vue SPA单页应用首屏优化实践
2018/06/28 Javascript
JavaScript中变量提升与函数提升经典实例分析
2018/07/26 Javascript
layui的table中显示图片方法
2018/08/17 Javascript
记一次vue跨域的解决
2020/10/21 Javascript
Python 过滤字符串的技巧,map与itertools.imap
2008/09/06 Python
Python中统计函数运行耗时的方法
2015/05/05 Python
Python实现随机创建电话号码的方法示例
2018/12/07 Python
Python读取xlsx文件的实现方法
2019/07/04 Python
python里运用私有属性和方法总结
2019/07/08 Python
Python学习笔记之For循环用法详解
2019/08/14 Python
Django 再谈一谈json序列化
2020/03/16 Python
python 利用toapi库自动生成api
2020/10/19 Python
python中PyQuery库用法分享
2021/01/15 Python
html5 video全屏播放/自动播放的实现示例
2020/08/06 HTML / CSS
日本无添加化妆品:HABA
2016/08/18 全球购物
俄罗斯和世界各地的酒店预订:Hotels.com俄罗斯
2016/08/19 全球购物
Schutz鞋官方网站:Schutz Shoes
2017/12/13 全球购物
小学生红领巾广播稿
2014/01/21 职场文书
2014年综治宣传月活动总结
2014/04/28 职场文书
2016年艾滋病宣传活动总结
2016/04/01 职场文书
导游词之太行山青龙峡
2020/01/14 职场文书
教你利用Selenium+python自动化来解决pip使用异常
2021/05/20 Python
使用pipenv管理python虚拟环境的全过程
2021/09/25 Python