1.3 第一个jQuery驱动的页面
1.3 第一个jQuery驱动的页面
了解jQuery能够提供的丰富特性之后,我们可以来看一看这个库的实际应用了。为此,我们需要下载一个jQuery的副本。
1.3.1 下载jQuery
jQuery不需要安装,要使用它只需该文件的一个副本,该副本可以放在外部站点上,也可以放在自己的服务器上。由于JavaScript是一种解释型语言,所以不必担心编译和构建。什么时候需要使用jQuery,只要在HTML文档中使用<script>元素把它导入进来即可。jQuery官方网站始终都包含该库最新的稳定版本,通过官网的首页就可以下载。官方网站在任何时候都会提供几种不同版本的jQuery库,但其中最适合我们的是该库最新的**未压缩版(uncompressed)**。而在正式发布的页面中,则可以使用压缩版(minified)。
随着jQuery的日益流行,很多公司都通过自己的CDN(Content Delivery Networks,内容分发网络)来托管其库文件,让开发人员能更方便地使用它。最典型的就是谷歌(https://developers.google.com/speed/libraries/devguide)和微软(http://www.asp.net/ajaxlibrary/cdn.ashx)和jQuery项目自己的服务器(http://code.jquery.com/),jQuery库文件被放在了强劲、低延时的服务器上,这些服务器遍布全球各地,无论用户在哪个国家,都能以最快速度下载到jQuery。虽然托管在CDN上的文件由于分布式和缓存的原因有速度优势,但在实际开发中还是使用本地副本更方便一些。
1.3.2 本书使用jQuery的哪个版本
为了确保在现代浏览器中速度更快,代码更简洁,jQuery从2.0版开始不再支持IE6、IE7和IE8。
不过支持这些老版本浏览器也很重要。正因为如此,jQuery开发团队还会继续维护jQuery 1.x版。
如果项目中有针对jQuery 1.9之前的版本编写的代码,可以使用jQuery迁移插件实现与jQuery 1.10兼容。
1.3.3 在HTML文档中引入jQuery
下载示例代码
如同本书其他HTML、CSS以及JavaScript示例一样,上面的标记只是完整文档的一个片段。如果读者想试一试这些示例,可以从本书网站下载随书代码.
引用jQuery库文件的<script>标签,必须放在引用自定义脚本文件的<script>标签之前。否则,在我们编写的代码中将引用不到jQuery框架。
1.3.4 编写jQuery代码
1. 查找诗歌文本
jQuery中基本的操作就是选择文档中的某一部分,这是通过$()函数来完成的。通常,$()函数需要一个字符串参数,该字符串参数中可以包含任何**CSS选择符表达式。在这个例子中,我们想要找到带有poem-stanza类的所有<div>元素,因此选择符非常简单。不过,在本书其他章中,我们还会介绍很多更复杂的选择符表达式。在第2章中,我们要讨论的就是查找文档部分的不同方式。
这里用到的$()函数会返回一个新的jQuery对象实例**,它是我们从现在开始就要打交道的基本的构建块。**jQuery对象中会封装零个或多个DOM元素,并允许我们以多种不同的方式与这些DOM元素进行交互**。在这个例子中,我们希望修改页面中这些部分的外观,而为了完成这个任务,就需要改变应用到诗歌文本的类。
2. 加入新类
1本例中,.addClass()方法会将一个CSS类应用到我们选择的页面元素。.addClass()方法唯一的参数就是要添加的类名。 .addClass()方法及其反方法.removeClass(),为我们探索jQuery支持的各种选择符表达式提供了便利。现在,这个例子只是简单地添加了highlight类,而我们的样式表中为这个类定义的是带边框和灰色背景的斜体文本样式。
我们注意到,无需迭代操作就能为所有诗歌中的节添加这个类(所谓节就是类为.poem-stanza的文档部分.)。前面我们提到过,jQuery在.addClass()等方法中使用了隐式迭代机制,因此一次函数调用就可以完成对所有选择的文档部分的修改。
3. 执行代码
综合起来,$()和.addClass()对我们修改诗歌中文本的外观已经够用了。但是,如果将这行代码单独插入文档的头部,不会有任何效果。通常,JavaScript代码在浏览器初次遇到它们时就会执行,而在浏览器处理头部时,HTML还不会呈现样式。因此,我们需要将代码延迟到DOM可用时再执行。
通过使用$(document).ready()方法, jQuery支持我们预定在DOM加载完毕后调用某个函数,而不必等待页面中的图像加载。尽管不使用jQuery,也可以做到这种预定,但$(document).ready()为我们提供了很好的跨浏览器解决方案,涉及如下功能:
- 尽可能使用浏览器原生的
DOM就绪实现,并以window.onload事件处理程序作为后备; - 可以多次调用
$(document).ready()并按照调用它们的顺序执行; - 即便是在浏览器事件发生之后把函数传给
$(document).ready(), 这些函数也会执行; - 异步处理事件的预定,必要时脚本可以延迟执行;
- 通过重复检查一个几乎与
DOM同时可用的方法,在较早版本的浏览器中模拟DOM就绪事件。
$(document).ready()方法的参数可以函数名称,如下面的代码所示
1 | function addHighlightClass() { |
这个方法也可以接收一个匿名函数.
1 | $(document).ready(function() { |
这种匿名函数的写作在jQuery中十分方便,特别适合传递那些不会被重用的函数。而且,与此同时创建的闭包也是一种非常高级和强大的工具。但是,假如处理不当的话,闭包也会给我们带来意想不到的后果以及内存占用问题。附录A详细介绍了闭包。
1.3.5 最终结果
在编写好JavaScript代码之后,现在的页面如下图:
由于JavaScript插入了highlight类,页面中的两节诗歌文本变成了斜体,带有了灰色背景,并且被包含在方框中;这些样式来源于01.css样式表。