相思资源网 Design By www.200059.com

本文翻译自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="/UploadFiles/2021-04-02/jquery.min.js">

我们来逐一看一下这四个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="/UploadFiles/2021-04-02/jquery.min.js">

在上面的例子中并没有任何表示循环的编程代码。但奇妙的是,jQuery会扫描整个页面,然后将所有的<div>元素放到封装元素集中,之后对该封装集中的每一个元素(隐式遍历)执行代码定义的一系列jQuery方法。比如,封装集中的每一个元素都调用了.hide()。在上述代码中,实际上我们使用的每一个方法(hide(), text(), addClass(), show())都在页面中所有的div元素上起了作用,就像人为写了一个循环方法来遍历DOM元素一样。上述代码的执行结果是:页面中的每一个<div>元素都被隐藏,更改内含文本,添加class属性,并最终重新显现。

熟悉封装元素集和隐式遍历对于编写复杂的循环逻辑来说非常重要 — 需要留意的是,在写任何额外的循环代码之前,一个简单的循环操作已经存在了(比如:jQuery(‘div').each(function(){})。换而言之,jQuery方法的调用会影响封装元素集中的每一个元素。

需要注意的是,有一些jQuery方法的行为特殊,只会影响封装元素集中的第一个元素(比如:attr())。


标签:
jQuery参考实例1.0,jQuery的哲学

相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com

评论“关于jQuery参考实例 1.0 jQuery的哲学”

暂无关于jQuery参考实例 1.0 jQuery的哲学的评论...

稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!

昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?