13.6 jQuery
jQuery是一个JavaScript库，使用jQuery极大地简化了JavaScript编程。JavaScript是世界上最流行的脚本语言，而jQuery集成了JavaScript语法和函数，甚至可以在不了解JavaScript技术的情况下使用脚本。本节介绍jQuery的基础知识。
13.6.1 jQuery简介
jQuery很容易学习，jQuery库包含以下特性：HTML元素选取、HTML元素操作、CSS操作、HTML事件函数、JavaScript特效和动画、HTML DOM遍历和修改、AJAX和Utilities。
jQuery库位于一个JavaScript文件中，其中包含所有的jQuery函数。在使用jQuery之前需要在页面中引用该文件，放在页面的＜head＞标记下，如下所示。
<head>
<script src="jquery.js"></script>
</head>
上述代码中的src属性指出该页面所引用的jQuery库，该地址可以是网络中的地址，也可以是下载到本地的地址。通常可以在http://jquery.com/download/网址下下载jQuery库，如图13-3所示。
图13-3 下载jQuery
从图13-3可以看出，有两个版本的jQuery可供下载，如下所示。
（1）Production version：用于实际的网站中，已被精简和压缩。
（2）Development version：用于测试和开发（未压缩，是可读的代码）。
可以把下载文件放到与页面相同的目录中，方便使用。如果不希望下载并存放jQuery，那么也可以通过CDN（Contenr Delivery Network，内容分发网络）引用它。谷歌和微软的服务器都存有jQuery库，可以在官方网站上找到最新版本的jQuery来引用。如谷歌1.8.0版本的jQuery，其地址为http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js，使用如下代码引用。
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
</script>
jQuery语法是为HTML元素的选取编制的，可以对元素执行某些操作。基础语法是：
$(selector).action()
对上述代码解释如下。
（1）美元符号定义jQuery。
（2）选择符（selector）“查询”和“查找”HTML元素。
（3）jQuery的action()执行对元素的操作。
例如，可使用下列语句执行指定操作。
（1）$(this).hide()：隐藏当前元素。
（2）$("p").hide()：隐藏所有段落。
（3）$(".test").hide()：隐藏所有class="test"的元素。
（4）$("#test").hide()：隐藏所有id="test"的元素。
jQuery使用的语法是XPath与CSS选择器语法的组合。本节接下来将介绍更多有关选择器的语法。
13.6.2 jQuery选择器
jQuery学习的重点是如何准确地选取需要应用效果的元素，即jQuery选择器的定义。jQuery元素选择器和属性选择器允许通过标签名、属性名或内容对HTML元素进行选择。以下分别从元素选择器、属性选择器和CSS选择器几个方面，来介绍选择器的使用。
1．jQuery元素选择器
jQuery使用CSS选择器来选择HTML元素，常见的有如下几种。
（1）$("p")选取＜p＞元素。
（2）$("p.intro")选取所有class=“intro”的＜p＞元素。
（3）$("p#demo")选取所有id=“demo”的＜p＞元素。
2．jQuery属性选择器
jQuery使用XPath表达式来选择带有给定属性的元素，常见的有如下几种。
（1）$("[href]")选取所有带有href属性的元素。
（2）$("[href='#']")选取所有带有href值等于“#”的元素。
（3）$("[href! ='#']")选取所有带有href值不等于“#”的元素。
（4）$("[href$='.jpg']")选取所有href值以“.jpg”结尾的元素。
3．jQuery CSS选择器
jQuery CSS选择器可用于改变HTML元素的CSS属性。如把所有p元素的背景颜色更改为红色，代码如下。
$("p").css("background-color", "red");
4．选择器实例
其他常见的选择器示例，如表13-7所示。
表13-7 常见的选择器示例
13.6.3 jQuery事件
jQuery是为事件处理特别设计的。事件处理程序指的是当HTML中发生某些事件时所调用的方法。jQuery事件处理方法是jQuery中的核心函数，通常会把jQuery代码放到＜head＞部分的事件处理方法中。
如果一个网站包含许多页面，那么若希望jQuery函数易于维护，可以把jQuery函数放到独立的.js文件中。表13-8列举了jQuery事件方法的一些例子。
表13-8 常用的jQuery事件方法
jQuery使用$符号作为jQuery的简介方式。某些其他JavaScript库中的函数（比如Prototype）同样使用$符号，这样就可能产生冲突。jQuery使用名为noConflict()的方法来解决该问题。varjq=jQuery.noConflict()语句使用自己的名称（比如jq）来代替$符号。
由于jQuery是为处理HTML事件而特别设计的，那么当遵循以下原则时，代码会更恰当且更易维护。
（1）把所有jQuery代码置于事件处理函数中。
（2）把所有事件处理函数置于文档就绪事件处理器中。
（3）把jQuery代码置于单独的.js文件中。
（4）如果存在名称冲突，则重命名jQuery库。
13.6.4 jQuery特效
jQuery的常见应用是页面特效，在页面上实现动态的样式，如折叠菜单，图片的隐藏、显现，动画特效等。这些特效由jQuery效果方法来实现，如表13-9所示。
表13-9 jQuery效果方法
以滑动方法为例，jQuery拥有以下滑动方法：slideDown()、slideUp()和slideToggle()，对其解释如下。
（1）slideDown()方法用于向下滑动元素，语法如下。
$(selector).slideDown(speed, callback);
对上述语法解释如下。
①可选的speed参数规定效果的时长。它可以取以下值：slow、fast或毫秒。
②可选的callback参数是滑动完成后所执行的函数名称。
（2）slideUp()方法用于向上滑动元素，语法如下。
$(selector).slideUp(speed, callback);
①可选的speed参数规定效果的时长。它可以取以下值：slow、fast或毫秒。
②可选的callback参数是滑动完成后所执行的函数名称。
（3）slideToggle()方法可以在slideDown()与slideUp()方法之间进行切换，语法如下。
$(selector).slideToggle(speed, callback);
①如果元素向下滑动，则slideToggle()可向上滑动它们。
②如果元素向上滑动，则slideToggle()可向下滑动它们。