第六章 初识jQuery

6.1.1 认识jQuery

为解决开发过程中的页面显示兼容性问题,网页脚本技术产生了许多JavaScript库。目前，被频繁使用的JavaScript库包括jQuery、Prototype、Spry和Ext JS。其中使用最广泛的JavaScript库是jQuery。它的主旨是以更少的代码，实现更多的功能（Write less,do more）。

6.1.2 jQuery基本功能

1.访问和操作DOM元素
使用jQuery库，可以很方便地获取页面中的元素，并能方便地修改其样式和内容。无论是删除还是复制元素，jQuery都提供了一整套方便且快捷的方法，既减少了代码的编写，又提高了用户对页面的体验度。相关示例将在后续章节中展示。

2.对页面事件的处理
引入jQuery库，可以使页面的表现层与功能开发分离。开发者可以更多地关注于程序的逻辑与功效；页面设计者侧重于页面的优化与用户体验。然后，通过事件绑定机制，实现两者的结合。

3.大量插件在页面中的运用
在引入jQuery库后，还可以使用大量的插件来完善页面的功能和效果，如验证插件和UI插件。使用这些插件极大地丰富了页面的展示效果，通过插件的引入轻松实现JavaScript代码之前未能涉及的功能。

4.与Ajax技术的完美结合
Ajax异步读取服务器数据的方法，极大地方便了程序的开发，增强了用户页面体验度。引入jQuery库后，Ajax不仅完善了原有的功能，而且简化了代码，只要通过其内部对象或函数，再添加几行代码可实现复杂的功能。

6.1.3 编写一个简单的jQuery应用

在jQuery的官网网站（http：//jquery.com）中，可以下载最新版本的jQuery文件库，下载文件的大小仅在100kb左右。通常在页面的中加入引用。

如：

下面通过一个简单的示例，来演讲jQuery的基本使用。在页面上有一个按钮和一个隐藏的div元素，div中嵌套一幅图片，当单机按钮时，此隐藏的div放大并显示出来。
示例 6.1：

对示例6.1的说明如下:
（1）在示例6.1中，有一段代码如下：

$(document).ready(function(){
             //程序段
});

该段代码类似于传统的JavaScript代码：

window.onload=function(){
//程序段
}

虽然上述两段代码在功能上是可以互换的，但它们之间又存在着一定的区别。这表现在执行的
时间上： (document).ready只需图片标签完成，而不用等该图片加载完成，即可设置图片宽和高的属性或样式等。而window.onload需要等图片加载完成之后，才能设置图片的宽和高的属性或样式等。

$(document).ready(function(){})可以写成$(function(){})，因此下述代码是等价的。
        $(document).ready(function(){
              //程序
        });
等价于
$(function(){
             //程序段
});

（2）使用下述代码为id="btn"按钮的单击事件绑定响应的函数。

 $("#btn").click(function(){
        //可执行代码
    });  //为事件添加响应函数

使用click方法，将函数绑定到制定元素的click事件中，单击按钮时，绑定的函数就会执行。

6.1.4 jQuery代码特点

1.符号，它的对象jQuery的形式，$()等效于jQuery()。实际上，几乎每一行jQuery命令的开头都需要使用该符号，页面元素的选择和功能函数的前缀，也都使用该符号，它是jQuery程序的标志。
2.隐式循环
当使用jQuery查找到符合要求的全部元素后，无需循环遍历每一个元素。实现循环结构的元素的同时，从而大幅度减少代码量。
3.链式书写
jQuery程序中允许将发生在同一个对象上的一组命令直接连写在一个语句中，还可以插入换行和空格。

6.2 jQuery选择器

语法结构为：

$(selector).action()

jQuery选择器的4大类：
基本选择器、过滤选择器、层次选择器、表单选择器
jQuery中提供的方法，包括单击事件处理和绑定事件处理的方法：

$("#btn").click(function(){
//执行代码
})；

6.2.1 基本选择器

id：根据id属性值选取元素

.class：根据class属性值选取元素
element：根据给定的标签名选取元素
*：选取所有元素，包括html和body
selector1，selector2，... ：将每一个选择器匹配到的元素合并后一起返回

6.2.2 过滤选择器

过滤选择器分为基本过滤选择器、内容过滤选择器和属性过滤选择器
基本过滤选择器：
first()或:first
last()或:last
:not(selector)
:even
:odd
:eq(index)
:gt(index)
:lt(index)
:header
:animated

内容过滤选择器：
:contains(text)
:empty
:has(selector)
:parent

属性过滤选择器：
[attribute] 获取拥有该属性的所有元素
[attribute=value] 获取某属性值为value的所有元素
[attribute!=value] 获取某属性值不等于value的所有元素
[attribute^=value] 选取属性值以value开头的所有元素
[attribute$=value] 选取属性值以value结束的所有元素
[attribute*=value] 选取属性值中包含value的所有元素
[selector1][selector2]... 合并多个选择器，满足多个条件，每选择一次将缩小一次范围

6.2.3 层次选择器

后代选择器：selector1 selector2(从selector1的后代元素中选取selector2)
子选择器：selector1>selector2(从selector的子元素中选取selector2)
相邻元素选择器：selector1+selector2(从selector1后面的第一个兄弟元素中选取selector2)
同辈元素选择器：selector1~selector2(从selector1后面的所有兄弟元素中选取selector2)