学习JQuery（一）

除了学好原生的JavaScript（推荐看《JavaScript高级程序设计》第二版，觉得这本书讲的特别好），还需要了解JavaScript的常见库，更方便于开发。

JQuery是一个优秀的JavaScript库，广受欢迎。最近通过《锋利的JQuery》和《JQuery基础教程》两本书来系统的学习下JQuery。

一、为什么使用JQuery，它具有以下几个优势

1）轻量级；

2）类似于CSS的强大的选择器；

3）出色的DOM操作的封装，封装了大量DOM操作；

4）可靠的事件处理机制；

5）完善的Ajax，JQuery将所有的Ajax操作封装到$.ajax()里，无需关心浏览器兼容性问题和XMLHttpRequest对象的创建和使用问题；

6）不污染顶级变量，JQuery只建立一个JQuery对象，所有的函数方法都在这个对象之下；

7）出色的浏览器兼容性；

8）链式操作方式，即同一个JQuery对象上的一组操作，可以直接连写而无需重复获取对象；

9）隐式迭代，JQuery里方法都被设计成自动操作对象的集合，而不是单独的对象，不用循环去寻找；

10）行为层与结构层分离，可使用JQuery选择器选中元素，然后直接给元素添加事件；

11）丰富的插件支持，开发者可自己编写JQuery的扩展插件；

12）完善的文档；

二、JQuery对象与DOM对象互换

1）获取JQuery对象

var $variable=JQuery对象

2）获取DOM对象

var variable=DOM对象

3）JQuery对象与DOM对象互相转换

var $cr=$("#cr");     //JQuery对象var cr=$cr[0];        //Jquery对象转DOM对象var cr=$cr.get(0);var cr=document。getElementById("cr"); //DOM对象var $cr=$(cr);        //DOM对象转JQuery对象

三、JQuery选择器

利用JQuery选择器可以快速的获取指定的DOM元素，然后为它们添加行为，无需考虑浏览器兼容性问题，而且写法很简洁，若所获取的元素不存在也可以避免错误。

1）基本选择器

• 标签名，$("p")；
• ID，$("#some-id")；
• 类，$(".some-class")；

*可以匹配所有，(selector1,selector2,selector3......)将每个匹配到的元素合并并一起返回的集合。

2）层次选择器

• $("ancestor descendant")，获取ancestor元素的所有descendant（后代）元素；
• $("parent > child")，获取parent元素的child（子）元素；
• $("prev + next")；获取prev元素后的next元素，等价于next()方法；
• $("prev ~ siblings")，获取prev元素后的所有siblings元素，等价于nextAll()；

siblings()方法用于选中一层中所有的元素，与元素前后位置无关。

3）过滤选择器

a、基本过滤选择器

:first、:last、:not(selector)、:even、:odd、:eq(index)、:gt(index)、:lt(index)、:header、:animated

JavaScript中数组采用从0开始编号，而CSS中则从1开始。以上even、odd、eq、gt、lt索引都是从0开始。header用于选取所有的标题元素，animated用户获取正在执行动画的所有元素。

b、内容过滤器

• :contains(text)，选取含有文本内容为“text”的元素；
• :empty，选取不含子元素或文本的空元素；
• :has(selector)；
• :parent，选取含有子元素或文本的元素；

c、可见性过滤器

• :hidden，选取所有不可见的元素；
• :visible，选取所有可见的元素；

d、属性过滤器

• [attribute]，获取拥有此属性的元素；
• [attribute=value]，获取属性值为value的元素；
• [attribute^=value]，获取属性值以value开头的元素；
• [attribute$=value]，获取属性值以value结尾的元素；
• [attribute!=value]，获取属性值不等于value的元素；
• [attribute*=value]，获取属性值中包含value的元素

e、子元素过滤选择器——为每个父元素匹配子元素

• :nth-child(index/even/odd/equation)；
• :frist-child；
• :last-child；
• :only-child，父元素仅有唯一子元素；

:nth-child()是JQuery中唯一一个从1开始计数的选择符，:nth-child(2)，:nth-child(3n)，:nth-child(3n+1)。

f、表单对象过滤选择器

• :enabled，启用的表单元素；
• :disabled，禁用的表单元素；
• :checked，勾选的单选按钮或复选框；
• :selected，选择的选项元素（下拉列表）；

4）表单选择器

• :input，选取对应<input>、<textarea>、<select>、<button>的元素；
• :text、:checkbox、:radio、:image、:submit、:reset、:password、:file，选取type属性值为选择符名称的输入元素
• :button，选取所有按钮元素

以上即为JQuery选择器的知识点总结，另外注意使用\\转义特殊字符，例如：$("#id\\[\\]")，还需注意空格的使用，例如：$(".test  :hidden")和$(".test:hidden")，前者为后代选择器，而后者为过滤选择器。