2.6 DOM遍历方法

利用前面介绍的jQuery选择符取得一组元素,就像是我们在DOM树中纵横遍历再经过筛选得到的结果一样。很多情况下,取得某个元素的父元素或者祖先元素都是基本的操作,而这正是jQuery的DOM遍历方法的用武之地。有了这些方法,我们可以轻而易举地在DOM树中上下左右地自由漫步。
其中一些方法与选择符表达式有异曲同工之妙。例如,这行用于添加alt类的代码:

1

$('tr:even').addClass('alt');

可以通过.filter()方法重写成下面这样:

1

$('tr').filter(':even').addClass('alt');

而且,这两种取得元素的方式在很大程度上可以互补。同样, .filter()的功能也十分强大,因为它可以接受函数参数。通过传入的函数,可以执行复杂的测试,以决定相应元素是否应该保留在匹配的集合中。例如,假设我们要为所有外部链接添加一个类。

1
2
3
4

a.external { 
  background: #fff url(images/external.png) no-repeat 100% 2px; 
  padding-right: 16px; 
} 

jQuery中没有针对这种需求的选择符。如果没有筛选函数,就必须显式地遍历每个元素,对它们单独进行测试。但是,有了下面的筛选函数,就仍然可以利用jQuery的隐式迭代能力,保持代码的简洁,如代码清单2-9所示。

1
2
3

$('a').filter(function() { 
  return this.hostname && this.hostname != location.hostname; 
}).addClass('external'); 

第二行代码可以筛选出符合下面两个条件的<a>元素。
必须包含一个带有域名(this.hostname)的href属性。这个测试可以排除mailto及类似链接。
链接指向的域名(还是this.hostname)必须不等于(!=)页面当前所在域的名称(location.hostname)。

更准确地说,.filter()方法会迭代所有匹配的元素,对每个元素都调用传入的函数并测试函数的返回值。如果函数返回false,则从匹配集合中删除相应元素;如果返回true,则保留相应元素。
有了这些代码,Henry V就被标记为外链了,如图2-12所示。
下面,我们再通过前面添加了条纹效果的表格,来演示一些遍历方法的其他用途。

2.6.1 为特定单元格添加样式

此前,我们已经为所有包含文本Henry的单元格添加了highlight类。如果想改为给每个包含Henry的单元格的下一个单元格添加样式,可以将已经编写好的选择符作为起点,然后连缀一个.next()方法即可,参见代码清单2-10。

1
2
3

$(document).ready(function() { 
  $('td:contains(Henry)').next().addClass('highlight'); 
}); 

表格现在的效果如图2-13所示。

图2-13

.next()方法只选择下一个最接近的同辈元素。要想突出显示Henry所在单元格后面的全部单元格,可以使用.nextAll()方法,如代码清单2-11所示。

1
2
3

$(document).ready(function() { 
  $('td:contains(Henry)').nextAll().addClass('highlight'); 
}); 

因为包含Henry的单元格位于表格的第一列,因此以上代码会导致相应行中的其他单元格突出显示,如图2-14所示。

有读者可能已经猜到了,.next()和.nextAll()方法分别有一个对应方法,即.prev()和.prevAll()。此外,.siblings()能够选择处于相同DOM层次的所有其他元素,无论这些元素处于当前元素之前还是之后。
要在这些单元格中再包含原来的单元格(即包含Henry的那个单元格),可以添加.addBack()方法,参见代码清单2-12。

1
2
3
4

$(document).ready(function() { 
  $('td:contains(Henry)').nextAll().addBack() 
  .addClass('highlight'); 
}); 

作了这个修改之后,相应行中的所有单元格就都会应用highlight类的样式了,如图2-15所示。
事实上,要选择同一组元素,可以采用的选择符和遍历方法的组合很多。 例如, 代码清单2-13就是选择所有包含Henry的单元格所在行的另一种方式。

1
2
3
4

$(document).ready(function() { 
  $('td:contains(Henry)').parent().children() 
  .addClass('highlight'); 
}); 

这种组合方式没有遍历同辈元素,而是通过.parent()方法在DOM中上溯一层到达<tr>,然后再通过.children()选择该行的所有单元格。

2.6.2 连缀

刚刚介绍的遍历方法组合展示了jQuery的连缀能力。在jQuery中,可以通过一行代码取得多个元素集合并对这些元素集合执行多次操作。jQuery的这种连缀能力不仅有助于保持代码简洁,而且在替代组合重新指定选择符时,还有助于提升脚本性能。
方法连缀的原理:
几乎所有jQuery方法都会返回一个jQuery对象,因而可连缀调用多个jQuery方法。
在使用连缀时,为照顾到代码的可读性,还可以把一行代码分散到几行来写。例如,一组连缀的方法可以写成3行,参见代码清单2-14。

1
2
3

$('td:contains(Henry)').parent().find('td:eq(1)') 
    .addClass('highlight').end().find('td:eq(2)') 
                           .addClass('highlight'); 

甚至,也可以写成7行,参见代码清单2-15。

1
2
3
4
5
6
7

$('td:contains(Henry)') //取得包含Henry的所有单元格 
  .parent() //取得它的父元素 
  .find('td:eq(1)') //在父元素中查找第2个单元格 
  .addClass('highlight') //为该单元格添加hightlight类 
  .end() //恢复到包含Henry的单元格的父元素 
  .find('td:eq(2)') //在父元素中查找第3个单元格 
  .addClass('highlight'); //为该单元格添加hightlight类 

不可否认,这个例子中展示的迂回曲折的DOM遍历过程几近荒谬。我们当然不建议读者使用如此复杂的连缀方式,因为还有更简单、更直接的方法。这个例子的用意只是演示一下连缀为我们带来的极大灵活性。
连缀就像是一口气说出一大段话——虽然效率很高,但对别人来说可能会难于理解。而将它分开放到多行并添加明确的注释,从长远来看则可以节省更多的时间。

2.5 自定义选择符

除了各种CSS选择符之外,jQuery还添加了独有的完全不同的自定义选择符。这些自定义选择符进一步增强了已经十分强大的CSS选择符,为我们提供了在页面上选择元素的新手段。
性能提示
只要可能,jQuery就会使用浏览器原生的DOM选择符引擎去查找元素。但在使用自定义选择符的时候,就无法使用速度最快的原生方法了。因此,建议读者在能够使用原生方法的情况下,就不要频繁地使用自定义选择符,以确保性能。
jQuery中的多数自定义选择符都可以让我们从已经找到的元素中选出一或多个元素。
自定义选择符通常跟在一个CSS选择符后面,基于已经选择的元素集的位置来查找元素。自定义选择符的语法与CSS中的伪类选择符语法相同,即选择符以冒号(:)开头。例如,我们想要从带有horizontal类的<div>集合中选择第2项,那么应该使用下面的代码:

1

$('div.horizontal:eq(1)') 

注意,因为JavaScript数组采用从0开始的编号方式, 所以eq(1)取得的是集合中的第2个元素。而CSS则是从1开始的,因此CSS选择符$(div:nth-child(1)')取得的是作为其父元素第1个子元素的所有div元素。如果记不清哪个从0开始,哪个从1开始,可以参考jQuery API文档

2.5.1 每隔一行为表格添加样式

jQuery库中的两个十分有用的自定义选择符是:odd和:even。下面,我们就来看一看如何通过这两个选择符为表格添加基本的条纹样式,针对下面的表格:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

<h2>Shakespeare's Plays</h2>
<table>
  <tr>
    <td>As You Like It</td>
    <td>Comedy</td>
    <td></td>
  </tr>
  <tr>
    <td>All's Well that Ends Well</td>
    <td>Comedy</td>
    <td>1601</td>
  </tr>
  <tr>
    <td>Hamlet</td>
    <td>Tragedy</td>
    <td>1604</td>
  </tr>
  <tr>
    <td>Macbeth</td>
    <td>Tragedy</td>
    <td>1606</td>
  </tr>
  <tr>
    <td>Romeo and Juliet</td>
    <td>Tragedy</td>
    <td>1595</td>
  </tr>
  <tr>
    <td>Henry IV, Part I</td>
    <td>History</td>
    <td>1596</td>
  </tr>
  <tr>
    <td>Henry V</td>
    <td>History</td>
    <td>1599</td>
  </tr>
</table>
<h2>Shakespeare's Sonnets</h2>
<table>
  <tr>
    <td>The Fair Youth</td>
    <td>1–126</td>
  </tr>
  <tr>
    <td>The Dark Lady</td>
    <td>127–152</td>
  </tr>
  <tr>
    <td>The Rival Poet</td>
    <td>78–86</td>
  </tr>
</table>

在样式表中添加一点样式,表格的表头和单元格就清晰了许多。现在,这个表格有白色的背景,但行与行之间没有区别,如图2-8所示。

可以在样式表中为所有表格行添加一种样式,然后再为奇数行定义一个alt类。

1
2
3
4
5
6

tr { 
  background-color: #fff;  
} 
.alt { 
  background-color: #ccc;  
} 

最后编写jQuery代码,将这个类添加到表格中的奇数行(<tr>标签),如代码清单2-6所示。

1
2
3

$(document).ready(function() { 
  $('tr:even').addClass('alt'); 
}); 

等一等!为什么针对奇数行使用:even选择符呢?很简单,:eq()选择符、:odd和:even选择符都使用JavaScript内置从0开始的编号方式,因此,第一行的编号为0(偶数),第二行的编号为1(奇数) ,依此类推。知道这一点之后,我们希望上面那几行代码能够生成如图2-9所示的结果。
图2-9

不过,要注意的是,如果一个页面上存在另外一个表格,我们则真有可能会看到意料之外的结果。例如,因为Plays表格中的最后一行为”另一种”浅灰色背景,所以Sonnets表格的第一行的背景就会为白色。解决这个问题的一种方法是使用:nth-child()选择符。这个选择符相对于元素的父元素而非当前选择的所有元素来计算位置,它可以接受数值、odd或even作为参数,如代码清单2-7所示。

1
2
3

$(document).ready(function() { 
  $('tr:nth-child(odd)').addClass('alt'); 
}); 

值得一提的是,:nth-child()是jQuery中唯一从1开始计数的选择符。要实现与图2-8所示相同的条纹交替效果,并且确保同一文档中的多个表格的效果一致,需要使用odd而不是even参数。替换了参数之后,两个表格出现了一致的条纹交替效果,如图2-10所示。

2.5.2 基于上下文内容选择元素

下面,我们介绍最后一个自定义选择符。假设出于某种原因,我们希望突出显示提到任何一种Henry游戏的所有表格单元。为此,我们所要做的就是在样式表中添加一个声明了粗体和斜体文本的类:

1
2
3
4

.highlight{
    font-weight:bold;
    font-style:italic;
}

然后向jQuery代码中添加一行代码,其中使用的是:contains()选择符,参见代码清单2-8。

1
2
3
4

$(document).ready(function() { 
  $('tr:nth-child(odd)').addClass('alt'); 
  $('td:contains(Henry)').addClass('highlight'); 
}); 

这样,在可爱的条纹表格中,就能够看到突出显示的Henry游戏了,如图2-11所示。

必须注意,:contains()选择符区分大小写。换句话说,使用不带大写”H”的$('td:contains(henry)'),不会选择任何单元格。
诚然,不使用jQuery(或任何客户端编程语言)也可以通过其他方式实现这种行条纹和突出显示效果。然而,在内容由程序动态生成,而我们又无权改动HTML和服务器端代码的情况下,jQuery加上CSS对这种样式化操作提供了优秀的替换方案。

2.5.3 基于表单的选择符

自定义选择符并不局限于基于元素的位置选择元素。比如,在操作表单时,jQuery的自定义选择符以及后来补充的CSS3选择符同样可以简化选择元素的任务。表2-2列出了其中一些适用于表单的选择符。

与其他选择符类似,组合使用表单选择符可以更有针对性。例如,使用$('input[type="radio"]:checked')可以选择所有选中的单选按钮(而不是复选框) ,而使用$('input[type="password"],input[type="text"]:disabled')则可以选择所有密码输入字段和禁用的文本输入字段。可见,即便是使用自定义选择符,也可以按照基本的CSS语法来定义匹配的元素列表。

2.4 属性选择符

属性选择符是CSS选择符中特别有用的一类选择符。顾名思义,属性选择符通过HTML元素的属性选择元素,例如链接的title属性或图像的alt属性。例如,要选择带有alt属性的所有图像元素,可以使用以下代码:

1

$('img[alt]') 

为链接添加样式

属性选择符使用一种从正则表达式中借鉴来的通配符语法,

• 以^表示值在字符串的开始,
• 以$表示值在字符串的结尾。
• 用星号*表示要匹配的值可以出现在字符串中的任意位置,
• 用叹号!表示对值取反。

假设我们想以不同的文本颜色来显示不同类型的链接,那么首先要在样式表中定义如下样式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

a { 
  color: #00c;  
} 
a.mailto { 
  background: url(images/email.png) no-repeat right top; 
  padding-right: 18px; 
} 
a.pdflink { 
  background: url(images/pdf.png) no-repeat right top; 
  padding-right: 18px; 
} 
a.henrylink { 
  background-color: #fff; 
  padding: 2px; 
  border: 1px solid #000; 
} 

然后,可以使用jQuery为符合条件的链接添加3个类:mailto、pdflink和henrylink。

要为所有电子邮件链接添加类,需要构造一个选择符,用来寻找所有带href属性([href])且以mailto开头(^="mailto:"])的锚元素(a)。结果如代码清单2-3所示。

1
2
3

$(document).ready(function() { 
  $('a[href^="mailto:"]').addClass('mailto'); 
}); 

因为我们在页面的样式表中定义了相应的规则,所以页面中所有mailto:链接的后面都会出现一个信封图标,如图2-5所示。

要为所有指向PDF文件的链接添加类,需要使用美元符号($)而不是脱字符号(^) 。这是因为我们要选择所有href属性以.pdf结尾的链接,如代码清单2-4所示。

1
2
3
4

$(document).ready(function() { 
  $('a[href^="mailto:"]').addClass('mailto'); 
  $('a[href$=".pdf"]').addClass('pdflink'); 
}); 

因为有已经定义的样式表规则,新添加的pdflink类也会导致每个PDF文档链接后面出现Adobe Acrobat图标,如图2-6所示。

属性选择符也可以组合使用。例如,可以为href属性即以http开头且任意位置包含henry的所有链接添加一个henrylink类,如代码清单2-5所示。

1
2
3
4
5
6
7
8

$(document).ready(function() {
  $('#selected-plays > li').addClass('horizontal');
  $('#selected-plays li:not(.horizontal)').addClass('sub-level');

  $('a[href^="mailto:"]').addClass('mailto');
  $('a[href$=".pdf"]').addClass('pdflink');
  $('a[href^="http"][href*="henry"]').addClass('henrylink');
});

在把这3个类应用到3种类型的链接之后,应该看到如图2-7所示的结果。

我们注意到,在这个屏幕截图中,Hamlet链接右侧有一个PDF图标,email链接旁边有一个信封图标,而Henry V链接则带有白色背景和黑色边框。

2.3 CSS选择符

jQuery支持CSS规范1到CSS规范3中的几乎所有选择符,具体内容可以参考W3C (World Wide Web Consortium,万维网联盟)网站。这种对CSS选择符的支持,使得开发者在增强自己的网站时,不必为哪种浏览器不理解某种不太常用的选择符而担心,只要该浏览器启用了JavaScript就没有问题。
渐进增强
负责任的jQuery开发者应该在编写自己的程序时,始终坚持渐进增强(progressive enhancement)和平稳退化(graceful degradation)的理念,做到在JavaScript禁用时,页面仍然能够与启用JavaScript时一样准确地呈现,即使没有那么美观。贯穿本书,我们还将继续探讨这些理念。关于渐进增强的更多信息,请参考。
为了学习在jQuery中如何使用CSS选择符,我们选择了一个很多网站中都会有的通常用于导航的结构——嵌套的无序列表。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<ul id="selected-plays"> 
  <li>Comedies 
    <ul> 
      <li><a href="/asyoulikeit/">As You Like It</a></li> 
      <li>All's Well That Ends Well</li> 
      <li>A Midsummer Night's Dream</li> 
      <li>Twelfth Night</li> 
    </ul> 
  </li> 
  <li>Tragedies 
    <ul> 
      <li><a href="hamlet.pdf">Hamlet</a></li> 
      <li>Macbeth</li> 
      <li>Romeo and Juliet</li> 
    </ul> 
  </li> 
  <li>Histories 
    <ul> 
      <li>Henry IV (<a href="mailto:henryiv@king.co.uk">email</a>) 
         <ul> 
           <li>Part I</li> 
           <li>Part II</li>  
         </ul> 
      <li><a href="http://www.shakespeare.co.uk/henryv.htm">Henry V</a></li> 
      <li>Richard II</li> 
    </ul> 
  </li> 
</ul> 

我们注意到,其中第一个<ul>的ID值为selected-plays,但<li>标签则全都没有与之关联的类。在没有应用任何样式的情况下,这个列表的外观如图2-2所示。

图2-2中的嵌套列表按照我们期望的方式显示——一组带符号的列表项垂直排列,并且每个列表都按照各自的级别进行了缩进。

基于列表项的级别添加样式

假设我们想让顶级的项(Comedies、Tragedies和Histories) ,而且只有顶级的项水平排列,那么可以先在样式表中定义一个horizontal类:

1
2
3
4
5

.horizontal { 
  float: left; 
  list-style: none; 
  margin: 10px; 
} 

这个horizontal类会将元素浮动到它后面元素的左侧,如果这个元素是一个列表项,那么会移除其项目符号,最后再为该元素的每一边各添加10像素的外边距。

子元素组合符

这里,我们没有直接在HTML中添加horizontal类,而只是将它动态地添加给位于顶级的列表项Comedies、Tragedies和Histories,以便示范jQuery中选择符的用法,如代码清单2-1所示。
清单2-1:

1
2
3

$(document).ready(function() {
  $('#selected-plays > li').addClass('horizontal');
});

我们在第1章讨论过,当在jQuery代码中使用$(document).ready()时,位于其中的所有代码都会在DOM加载后立即执行。
第2行代码使用子元素组合符(>)将horizontal类只添加到位于顶级的项中。实际上,位于$()函数中的选择符#selected-plays>li的含义是,查找ID为selected-plays的元素(#selected-plays)的子元素(>)中所有的列表项(li)。
随着这个类的应用,列表项应该水平对齐,而不是垂直对齐,如图2-3所示。

否定式伪类选择符

要为其他项(非顶级的项)添加样式,有很多种方式。因为已经为顶级项添加了horizontal类,所以取得全部非顶级项的一种方式,就是使用否定式伪类选择符来识别没有horizontal类的所有列表项。注意代码清单2-2添加的第3行代码。

1
2
3
4

$(document).ready(function() { 
  $('#selected-plays > li').addClass('horizontal'); 
  $('#selected-plays li:not(.horizontal)').addClass('sub-level'); 
}); 

这一次取得的每个列表项(<li>):

• 是ID为selected-plays的元素(#selected-plays)的后代元素。
• 没有horizontal类(:not(.horizontal))。

在为这些列表项添加了sub-level类之后,它们的背景颜色变为在样式表规则中定义的浅灰色。

1
2
3

.sub-level { 
  background: #ccc; 
} 

此时的嵌套列表如图2-4所示。

2.2 使用$()函数

我们通过jQuery的各种选择符和方法取得的结果集合会被包装在jQuery对象中。通过jQuery对象实际地操作这些元素会非常简单。可以轻松地为jQuery对象绑定事件、添加漂亮的效果,也可以将多重修改或效果通过jQuery对象连缀到一起。
然而,jQuery对象与常规的DOM元素不同,而且也没有必要为实现某些任务给纯DOM元素或节点列表添加相同的方法和属性。在本章的最后一部分中,我们会介绍如何直接访问收集在jQuery对象中的DOM元素。
为了创建jQuery对象,就要使用$()函数。这个函数接受CSS选择符作为参数,充当一个工厂,返回包含页面中对应元素的jQuery对象。所有能在样式表中使用的选择符都可以传给这个函数,随后我们就可以对匹配的元素集合应用jQuery方法。

让jQuery与其他JavaScript库协同工作

在jQuery中, 美元符号$只不过标识符jQuery的 “别名” 。 由于$()在JavaScript库中很常见,所以,如果在一个页面中使用了几个这样的库,那么就会导致冲突。在这种情况下,可以在我们自定义的jQuery代码中,通过将每个$的实例替换成jQuery来避免这种冲突。第10章还会介绍这个问题的其他解决方案。

3种基本的选择符

有3种基本的选择符:标签名选择符、ID选择符和类选择符。这些选择符可以单独使用,也可以与其他选择符组合使用。表2-1展示了这3种基本的选择符。

第1章曾经提到过,在将方法连缀到$()工厂函数后面时,包装在jQuery对象中的元素会被自动、隐式地循环遍历。换句话说,这样就避免了使用for循环之类的显式迭代(这种迭代在DOM脚本编程中非常常见)。

2.1 理解DOM

jQuery最强大的特性之一就是它能够简化在DOM中选择元素的任务。 DOM (Document Object``Model,文档对象模型)充当了JavaScript与网页之间的接口;它以对象网络而非纯文本的形式来表现HTML的源代码。
DOM中的对象网络与家谱有几分类似。当我们提到网络中元素之间的关系时,会使用类似描述家庭关系的术语,比如父元素、子元素,等等。通过一个简单的例子,可以帮助我们理解文档各元素构成的树形结构:

1
2
3
4
5
6
7
8
9
10
11
12

<html>
    <head>
        <title>the title</title>
    </head>
    <body>
        <div>
            <p>This is a paragraph.</p>
            <p>This is another paragraph.</p>
            <p>This is yet another paragraph.</p>
        </div> 
    </body>
</html>

这里,<html>是其他所有元素的祖先元素,换句话说,其他所有元素都是<html>的后代元素。<head>和<body>元素是<html>的子元素(但并不是它唯一的子元素) 。因此除了作为<head>和<body>的祖先元素之外,<html>也是它们的父元素。 而<p>元素则是<div>的子元素(也是后代元素),是<body>和<html>的后代元素,是其他<p>元素的同辈元素。这些元素之间的关系从下面的图2-1中可以看得更清楚。
为了把DOM结构更形象地表现出来,可以使用很多工具,例如Firefox的Firebug插件、Safari和Chrome中的Web Inspector等。
有了这个元素树,就可以使用jQuery从中取得任何元素了。而我们用来取得元素的工具,就是jQuery选择符和遍历方法。

第2章 选择元素

jQuery利用了**CSS选择符**的能力,让我们能够在DOM中快捷而轻松地获取元素或元素集合。本章将介绍如下内容:

• 网页中元素的结构;
• 如何通过CSS选择符在页面中查找元素;
• 扩展jQuery标准的CSS选择符;
• 让选择页面元素更灵活的DOM遍历方法。

1.4 纯JavaScript与jQuery

jQuery代码不仅写起来省事,读起来简单,而且也比纯JavaScript代码的执行速度更快。

1.5 使用开发工具

通过上面代码的比较,我们知道jQuery代码与对应的纯JavaScript代码相比更短也更清楚。可是,这并不意味着我们写出的代码永远不会有bug,或者永远都能直观地理解页面中都发生了什么。如果能有一些标准的开发工具辅助,编写起jQuery代码来就会更轻松流畅。
现代浏览器中一般都内置了高质量的开发工具。我们可以从中选择自己觉得最方便的工具。下面列出了一些推荐工具:

• Chrome Developer Tools;
• Firefox插件Firebug;
  • Firebug已停止继续开发,更新维护,现在可以下载Firefox Quantum:开发者版本使用.
• Safari Web Inspector;
• Opera Dragonfly
• Internet Explorer Developer Tools;

上面列出来的这些工具都提供了类似的功能,比如:

• 探测及修改DOM;
• 研究CSS及页面表现之间的关系;
• 通过特殊的方法方便地跟踪脚本执行;
• 暂停脚本运行及检查变量值。

虽然这些功能在不同的工具中会有所变化,但大体上概念是相同的。本书中的某些示例需要用到这么一个工具,因此我们就以Firebug为例,不过使用其他浏览器的开发工具也没有什么问题。

1.6 小结

本章,我们学习了怎样设置jQuery,以便在网页中通过JavaScript使用它;

• 学习了使用$()工厂函数查找具有给定类的页面部分;
• 学习了调用.addClass()为页面的这些部分应用额外的样式;
• 还学习了调用$(document).ready()基于页面加载来执行代码。

此外,我们也探讨了在编写、测试和调试jQuery代码时将会用到的开发工具。

经过对本章的学习,我们对开发者选择使用JavaScript框架,而不是从零开始编写代码(即使是最基本的任务)的原因有了一个概念。同时,也理解了jQuery作为一个框架,都有哪些值得称道的地方以及我们选择它而不是选别的框架的理由。我们也大体上知道了jQuery能够简化哪些任务。
本章中给出的示范如何使用jQuery的简单例子,在现实中并不是很有用。在下一章中,我们将在此基础上继续探索jQuery中高级的选择符使用方式,并介绍这一技术的实际应用。