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

本文翻译自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()）。

赞 (0)

相关推荐

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

    本文翻译自jQuery Cookbook (O'Reilly 2009) 1.0 The jQuery Philosophy jQuery的哲学是"写更少的代码,做更多的事情",这一哲学可分述为三个概念: 用CSS选择器查找元素,并通过jQuery方法来操作这些元素 在元素集上链式调用多个jQuery方法 jQuery封装与隐式遍历 充分理解这三个概念对于编写jQuery代码来说至关重要.我们来详细看一下这三个概念. 查找元素并进行操作 更准确的说,是在DOM树中定位一批元素,然后对该

  • 关于jQuery参考实例2.0 用jQuery选择元素

    译自jQuery Cookbook (O'Reilly 2009) Chapter 2 Selecting Elements with jQuery, 2.0 Introduction jQuery的核心是它的选择器引擎,其作用是从文档中通过名称.属性.状态等将元素筛选出来.由于CSS的广泛使用,在jQuery中采用CSS的选择器语法就成了很自然的选择.在支持绝大多数CSS1-3规范中的选择器之外,jQuery还增加了很多自定义的选择器来根据一些特殊的状态选择元素:与此同时,我们还可以自己编写选

  • jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解

    jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解

    简单的两个步骤即可实现分页功能 <script src="<%=basePath%>/resources/js/jquery-1.7.1.min.js"></script> <script src="<%=basePath%>/resources/js/jquery.loehpagerv1.0.js"></script> <script type="text/JavaScript

  • js案例之鼠标跟随jquery版(实例讲解)

    废话不多说,直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body,div{ margin:0; padding:0; } img{ display:block; border:none; } .box{ position:rel

  • jquery+CSS3模拟Path2.0动画菜单效果代码

    jquery+CSS3模拟Path2.0动画菜单效果代码

    本文实例讲述了jquery+CSS3模拟Path2.0动画菜单效果代码.分享给大家供大家参考.具体如下: CSS3实现的仿手机软件菜单,动画菜单,注意的地方,小按钮位移后有个缓冲,每个小按钮缓冲的距离不一样,每个小按钮位移的时间有间隔,处理好这些细节才能体现出灵动的效果. CSS3代码:(请用非IE标准浏览器访问)由于代码运行框缺陷,请先刷新一下页面动画运行更流畅.Path菜单的小按钮本来应该也可以旋转的,但CSS3动画的位移和旋转同时出现时不知道为何旋转就没效果了,所以这里没弄出来,感兴趣的朋

  • jQuery的实例及必知重要的jQuery选择器详解

    Jquery能做什么 访问和操作DOM元素   控制页面样式    对页面事件进行处理    扩展新的jQuery插件   与Ajax技术完美结合 Jquery的优势 体积小,压缩后只有100KB左右   l强大的选择器   出色的DOM封装   l可靠的事件处理机制   出色的浏览器兼容性   使用隐式迭代简化编程   丰富的插件支持 jQuery的知识的分解: 1.关于window.onload和$(function(){})区别   解析:window.onload等待页面上所有资源(ht

  • JS拖动选择table里的单元格完整实例【基于jQuery】

    JS拖动选择table里的单元格完整实例【基于jQuery】

    本文实例讲述了JS拖动选择table里的单元格.分享给大家供大家参考,具体如下: 用JS 实现类似Excel里面动态选择单元格的例子,从网上得到的例子,先记录在这里,以后参考用. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>www.jb51.net JS拖动选择table里的单元格&

  • JS实现点击生成UUID的方法完整实例【基于jQuery】

    JS实现点击生成UUID的方法完整实例【基于jQuery】

    本文实例讲述了JS实现点击生成UUID的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net 用JS生成UUID的方法实例</title> <script src="http://libs.baidu.com/jquery/2.0

  • 什么是json和jsonp,jQuery json实例详详细说明

    什么是JSON? 前面简单说了一下,JSON是一种基于文本的数据交换方式,或者叫做数据描述格式,你是否该选用他首先肯定要关注它所拥有的优点. JSON的优点: 1.基于纯文本,跨平台传递极其简单: 2.Javascript原生支持,后台语言几乎全部支持: 3.轻量级数据格式,占用字符数量极少,特别适合互联网传递: 4.可读性较强,虽然比不上XML那么一目了然,但在合理的依次缩进之后还是很容易识别的: 5.容易编写和解析,当然前提是你要知道数据结构: JSON的缺点当然也有,但在作者看来实在是无关

  • jQuery UI 实例讲解 - 日期选择器(Datepicker)

    默认功能 日期选择器(Datepicker)绑定到一个标准的表单 input 字段上.把焦点移到 input 上(点击或者使用 tab 键),在一个小的覆盖层上打开一个交互日历.选择一个日期,点击页面上的任意地方(输入框即失去焦点),或者点击 Esc 键来关闭.如果选择了一个日期,则反馈显示为 input 的值. <!doctype html> <html lang="en"> <head> <meta charset="utf-8&

随机推荐