jQuery

一、定义

Jquery是一套Javascript脚本库
– JQuery == Javascript Library

• 解决浏览器兼容性问题
• 轻量级
• 强大的选择器
• 出色的DOM操作的封装
• 可靠的时间处理机制
• 完善的Ajax
• 链式操作方式 //返回当前操作的对象
• 实现丰富的UI

二、jQuery

• jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多
javascript高手加入其team。

• jQuery是继prototype乊后又一个优秀的Javascript框架。其宗旨是——
WRITE LESS,DO MORE,写更少的代码,做更多的事情。

• 它是轻量级的js库(压缩后只有80+k) ，这是其它的js库所不及的，它兼容
CSS3，还兼容各种浏览器 （IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+
）。

• jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理
HTML documents、events、实现动画效果，并且方便地为网站提供
AJAX交互。

• jQuery的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟
的插件可供选择。

• jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用
再在html里面插入一堆js来调用命令了，只需定义id即可。

三、使用jQuery 

• 导入Jquery库
• jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。
• 基础语法是：$(selector).action()
• 美元符号定义 jQuery
• 选择符（selector）“查询”和“查找” HTML 元素
• jQuery 的 action() 执行对元素的操作

四、DOM 对象和jQuery 对象的转换

• 1.DOM  ==> jQuery

– var cr=document.getElementById("cr"); //dom对象
– var jocr = $(cr); //转换成jquery对象

• 2.jQuery ==> DOM

– var jocr=$("#cr"); //jquery对象
– var cr = jocr[0]; //dom对象 也可写成 var cr=$cr.get(0);

五、选择器

1、基本选择器

• ID选择器

– 根据ID匹配一个元素。id="myDiv"
– $("#myDiv");

• 元素选择器<dive>

– 根据元素名匹配所有元素
– $("div");

• 类选择器

– 根据类匹配元素class="myClass"
– $(".myClass");

• 全选中选择器

– $("*")

• 多重选择器

– $("div,span,p.myClass")

2、筛选选择器

• :first
– $('li:first');
• :last
– $('li:last')
• :header
– 匹配如 h1, h2, h3之类的标题元素
– $(":header").css("background", "#EEE");
• :empty
– 匹配所有不包含子元素或者文本的空元素
– $("td:empty")
• :parent
– 匹配含有子元素或者文本的元素，与:empty相反
– $("td:parent")

• :even

– 查找表格的1、3、5...行（即索引值0、2、4...）
– $("tr:even");
• :odd
– 查找表格的2、4、6...行（即索引值1、3、5...）
– $("tr:odd");
• :eq(index)
– 返回第“index+1”个元素（一个元素）
– $("tr:eq(index)")
• :gt(index) :lt(index)
– gt查找比（index）大的元素不包括此元素， lt相反
– $("tr:gt(0)") $("tr:lt(2)")

3、层级选择器

• 子元素选择器 (“parent > child”)
• 后代元素选择器 (“ancestor descendant”)
• 下一个相邻选择器 (“prev + next”)
• 下一个同辈选择器 Selector (“prev ~ siblings”)

4、属性选择器

• [attribute]
– 返回包含"attribute"属性的元素 $("div[id]")
• [attribute=value]
– 返回包含"attribute"属性，值等于"value"的元素$("div[id='xx']")
• [attribute!=value]
– 与[attribute=value]相反 $("div[id!='xx']")
• [attribute^=value]
– 返回包含"attribute"属性，值以"value"的开头元素$("div[id^='x']")
• [attribute$=value]
– 与[attribute^=value]相反，值以"value"结束的元素$("div[id$='x']")
• [attribute*=value]
– 匹配属性是以包含某些值的元素$("div[id$='xxx']")