1、JQuery简介

1.1简介

jQuery是继prototype以后又1个优秀的JavaScript库。它是轻量级的js库 ，它兼容CSS3，还兼容各种阅读器（IE 6.0+, FF1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8阅读器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的1个利用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有1个比较大的优势是，它的文档说明很全，而且各种利用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入1堆js来调用命令了，只需要定义id便可。

jQuery是免费、开源的，使用MIT许可协议。jQuery的语法设计可使开发更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax和其他功能。除此之外，jQuery提供API让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。

1.2优点

2、JQuery的9类选择器

2.1 基本选择器

[javascript] view plain copy

 print?

1. //1)查找ID为"div1ID"的元素个数  
2.     alert(  $("#div1ID").size());  
3.       
4.       
5.     //2)查找DIV元素的个数  
6.      alert( $("div").length);  
7.       
8.       
9.     //3)查找所有样式是"myClass"的元素的个数  
10.     alert($(".myClass").size());  
11.       
12.   
13.     //4)查找所有DIV,SPAN,P元素的个数  
14.     alert($("div,span,p").size());  
15.       
16.   
17.     //5)查找所有ID为div1ID,CLASS为myClass,P元素的个数  
18.     alert($("#div1ID,.myClass,p").size());  

2.2 层次选择器

[javascript] view plain copy

 print?

1. //1)找到表单form里所有的input元素的个数  
2.     alert($("form input").size());  
3.       
4.     //2)找到表单form下所有的子级input元素个数  
5.     alert($(" form > input").size());  
6.       
7.       
8.     //3)找到表单form同级第1个input元素的value属性值  
9.     alert($("form + input").val());  
10.       
11.       
12.     //4)找到所有与表单form同级的input元素个数  
13.     alert($("form ~ input").size());  
14.       

2.3 增强基本选择器

[javascript] view plain copy

 print?

1. //1)查找UL中第1个元素li的内容  
2.     alert($("ul li:first").html());    
3.     alert($("ul li:first").text());   
4.     //html()要用在html/jsp中，不能用在xml中，而text()都可以用  
5.       
6.       
7.     //2)查找UL中最后1个元素的内容  
8.     alert($("ul li:last").text());   
9.       
10.       
11.     //3)查找所有未选中的input元素个数  
12.     alert($(":checkbox:checked").size());  //选中的    2  
13.     alert($(":checkbox:not(:checked)").size());  //未选中  
14.       
15.       
16.     //4)查找表格的1、3、5...奇数行个数  
17.     alert($("table tr:odd").size());  //3  
18.       
19.       
20.     //5)查找表格的2、4、6...偶数行个数  
21.     alert($("table tr:even").size());  //3  
22.       
23.       
24.     //6)查找表格中第2行的内容，从索引号0开始  
25.     alert($("table tr:eq(1)").text());  
26.     //html()强调的是标签中的内容，即使标签中有子标签，也会显示出来，而text()强调的是标签中的文本内容，不会显示子标签  
27.       
28.       
29.     //7)查找表格中第2第3行的个数，即索引值是1和2，也就是比0大  
30.     alert($("table tr:gt(0)").size());  //5  
31.       
32.       
33.     //8)查找表格中第1第2行的个数，即索引值是0和1，也就是比2小  
34.     alert($("table tr:lt(3)").size());   
35.       
36.       
37.     //9)给页面内所有标题

    加上红色背风景  

38.     alert($(":header").css("background-color","red").css("color","white"));  

[javascript] view plain copy

 print?

1. //1)查找所有包括文本"John"的div元素的个数  
2.     alert($("div:contains('John')").size());  //2  
3.       
4.       
5.     //2)查找所有p元素为空的元素个数  
6.     alert($("p:empty").size());  //2  
7.       
8.       
9.     //3)给所有包括p元素的div元素添加1个myClass样式  
10.     $("div:has(p)").addClass("myClass");  
11.       
12.       
13.     //4)查找所有含有子元素或文本的p元素个数,即p为父元素  
14.     alert($("p:parent").size());  //2