3.4 jQuery
在HTML、CSS、JavaScript成为实际的互联网标准时，专门对它们进行封装和开发的客户端框架库出现了，最优秀的客户端框架库之一就是jQuery。jQuery发布于2006年1月，使用jQuery能更方便地处理HTML、响应事件、实现动画效果，并且方便地为网站提供Ajax交互。在世界前10 000个访问最多的网站中，有超过55%的网站在使用jQuery。用一句话总结jQuery：可以让开发者更轻松地写JavaScript代码。
3.4.1 使用jQuery
jQuery是一个纯JavaScript客户端库，全部代码被封装在一个文件中。jQuery有以下两种形式的发布版。
• 压缩发布版：compressed，用于正式发布，以*.min.js命名，如jquery-1.11.2.min.js。
• 正常发布版：uncompressed，用于阅读和调试，以*.js命名，如jquery-1.11.2.js。
每个版本的两种形式在功能上完全相同，只是压缩发布的文件更小。开发者通常在项目开发中使用正常发布版，在项目实际运行中为了使网页更快地被加载而使用压缩发布版。
开发者可以直接在HTML源文件中引用Internet上的jQuery库链接，比如：
技巧：使用Internet上的jQuery库，而不是将其下载到本地再引用有好处，即Internet上的这些jQuery库都做了CDN加速，通常在客户端下载这些文件的速度比下载开发者站点的速度要快。
在JavaScript中调用jQuery的基础语法如下：
其中$指明引用jQuery库；selector即选择器，用来筛选页面标签元素；action即行为，是对筛选出的元素进行的操作。
【示例3-12】下面是一段用jQuery实现段落隐藏、显示功能的示例代码：
本例中<button>标签的事件处理属性onclick用到了jQuery，该语句的意思是：选择所有<p>标签，并对其进行toggle()操作。toggle()是一个对元素进行隐藏、显示转换的行为。本章的剩余部分将详述jQuery的选择器和行为。
3.4.2 选择器
jQuery中的选择器的概念与CSS中的选择器类似，但是除了按标签名、id等进行选择，jQuery的选择器的功能更丰富。例如，根据标签的特定属性进行选择、根据标签相对于父标签的位置进行选择、根据元素内容进行选择等。表3.14列出了常用的jQuery选择器。
表3.14 常用的jQuery选择器
3.4.3 行为
jQuery基础语法中的行为（action）包含很多内容，如读取标签内容、设置CSS样式、绑定事件响应代码、jQuery动画等。本节对这些行为进行举例和分析。
1. 标签内容操作
脚本编程中最常用的操作就是读取、修改某元素的内容和属性，在jQuery中标签内容通过以下几种方式实现。
• .text()：设置或返回标签中的文本内容。
• .html()：设置或返回标签中的HTML内容。
• .val()：设置或返回表单控件的用户输入数据。
• .attr("attr_name")：设置或返回标签的某属性。
• .css("property_name")：设置或返回标签的某CSS属性。
【示例3-13】标签内容操作的代码示例如下：
jQuery的每个行为一般有两种使用方式：读取和设置。所以行为普遍具有如下特点：用作读取时，开发者可以从行为的返回值获得读到的数据；用作设置时，开发者应该把设置的值作为最后一个参数传递给行为。
2. 标签的新增与删除
对标签进行新增与删除的相关行为如下。
• .append()：在父标签的最后部分插入标签。
• .prepend()：在父元素的最前面部分插入标签。
• .after()：紧随某元素的后面插入标签。
• .before()：在某元素之前插入标签。
• .remove()：删除标签，同时删除它的所有子标签。
• .empty()：清空标签内容，但不删除标签本身。
对于新增标签，仍然需要通过JavaScript的document.createElement()函数建立，然后通过上述函数之一插入现有标签中。比如：
3. 事件响应
jQuery还封装了对HTML事件的响应处理，每个事件都被定义成一个jQuery行为。用jQuery响应HTML事件的基本语法如下：
其中EVENT是HTML事件除去开头“on”字样的名字，例如，对于HTML的“onclick”事件，jQuery对应的事件行为是“click”。另外，jQuery中有一个特殊的事件$(document).ready()，用于响应文档已全部加载的事件。示例如下：
常用的HTML事件都有相应的jQuery行为，名称可以参考表3.13，此处不再列出。
4. 标签遍历
与用JavaScript遍历DOM树的一系列相对位置的函数（nextSibling、parentNode等，参考表3.6）类似，jQuery也提供了一系列对选择器所定位的元素进行前后遍历的行为，其中常用的标签遍历行为如表3.15所示。
表3.15 jQuery常用的标签遍历行为
【示例3-14】标签遍历行为的代码示例如下：
5. jQuery特效
除了对HTML、CSS、JavaScript相关行为的简单封装，jQuery还提供了一些用JavaScript实现难度较高的动画特效行为，如下所述。
• .hide()/.show()：隐藏、显示元素。
• .toggle()：在元素的hide()与show()状态之间切换。
• .fadeIn()/.fadeOut()：淡入/淡出效果。
• .fadeToggle()：在fadeIn()和fadeOut()状态之间切换。
• .fadeTo(speed,opacity,callback)：渐变为给定的不透明度。其中，speed可以取值为slow、fast或毫秒数；opacity值介于0与1之间；callback为动作完成后需要回调的函数。
• .slideDown()/.slideUp()：向下滑动出现、向上滑动隐藏。
• .slideToggle()：在slideDown()和slideUp()状态之间切换。
• .animate({params},speed,callback)：自定义动画效果。其中，params可以是任意CSS属性。
• .stop()：停止动画。
【示例3-15】jQuery特效的示例代码如下：
通过这些方法，开发者已经能实现非常丰富的动态页面功能了。