JQuery從0到大技術牛人學習之路！

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  

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈