JQuery從0到大技術(shù)牛人學(xué)習(xí)之路！

1、JQuery簡(jiǎn)介

1.1簡(jiǎn)介

jQuery是繼prototype以后又1個(gè)優(yōu)秀的JavaScript庫(kù)。它是輕量級(jí)的js庫(kù) ，它兼容CSS3，還兼容各種閱讀器（IE 6.0+, FF1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后續(xù)版本將不再支持IE6/7/8閱讀器。jQuery使用戶能更方便地處理HTML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言下的1個(gè)利用）、events、實(shí)現(xiàn)動(dòng)畫(huà)效果，并且方便地為網(wǎng)站提供AJAX交互。jQuery還有1個(gè)比較大的優(yōu)勢(shì)是，它的文檔說(shuō)明很全，而且各種利用也說(shuō)得很詳細(xì)，同時(shí)還有許多成熟的插件可供選擇。jQuery能夠使用戶的html頁(yè)面保持代碼和html內(nèi)容分離，也就是說(shuō)，不用再在html里面插入1堆js來(lái)調(diào)用命令了，只需要定義id便可。

jQuery是免費(fèi)、開(kāi)源的，使用MIT許可協(xié)議。jQuery的語(yǔ)法設(shè)計(jì)可使開(kāi)發(fā)更加便捷，例如操作文檔對(duì)象、選擇DOM元素、制作動(dòng)畫(huà)效果、事件處理、使用Ajax和其他功能。除此之外，jQuery提供API讓開(kāi)發(fā)者編寫(xiě)插件。其模塊化的使用方式使開(kāi)發(fā)者可以很輕松的開(kāi)發(fā)出功能強(qiáng)大的靜態(tài)或動(dòng)態(tài)網(wǎng)頁(yè)。

1.2優(yōu)點(diǎn)

2、JQuery的9類(lèi)選擇器

2.1 基本選擇器

[javascript] view plain copy

 print?

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

2.2 層次選擇器

[javascript] view plain copy

 print?

1. //1)找到表單form里所有的input元素的個(gè)數(shù)  
2.     alert($("form input").size());  
3.       
4.     //2)找到表單form下所有的子級(jí)input元素個(gè)數(shù)  
5.     alert($(" form > input").size());  
6.       
7.       
8.     //3)找到表單form同級(jí)第1個(gè)input元素的value屬性值  
9.     alert($("form + input").val());  
10.       
11.       
12.     //4)找到所有與表單form同級(jí)的input元素個(gè)數(shù)  
13.     alert($("form ~ input").size());  
14.       

2.3 增強(qiáng)基本選擇器

[javascript] view plain copy

 print?

1. //1)查找UL中第1個(gè)元素li的內(nèi)容  
2.     alert($("ul li:first").html());    
3.     alert($("ul li:first").text());   
4.     //html()要用在html/jsp中，不能用在xml中，而text()都可以用  
5.       
6.       
7.     //2)查找UL中最后1個(gè)元素的內(nèi)容  
8.     alert($("ul li:last").text());   
9.       
10.       
11.     //3)查找所有未選中的input元素個(gè)數(shù)  
12.     alert($(":checkbox:checked").size());  //選中的    2  
13.     alert($(":checkbox:not(:checked)").size());  //未選中  
14.       
15.       
16.     //4)查找表格的1、3、5...奇數(shù)行個(gè)數(shù)  
17.     alert($("table tr:odd").size());  //3  
18.       
19.       
20.     //5)查找表格的2、4、6...偶數(shù)行個(gè)數(shù)  
21.     alert($("table tr:even").size());  //3  
22.       
23.       
24.     //6)查找表格中第2行的內(nèi)容，從索引號(hào)0開(kāi)始  
25.     alert($("table tr:eq(1)").text());  
26.     //html()強(qiáng)調(diào)的是標(biāo)簽中的內(nèi)容，即使標(biāo)簽中有子標(biāo)簽，也會(huì)顯示出來(lái)，而text()強(qiáng)調(diào)的是標(biāo)簽中的文本內(nèi)容，不會(huì)顯示子標(biāo)簽  
27.       
28.       
29.     //7)查找表格中第2第3行的個(gè)數(shù)，即索引值是1和2，也就是比0大  
30.     alert($("table tr:gt(0)").size());  //5  
31.       
32.       
33.     //8)查找表格中第1第2行的個(gè)數(shù)，即索引值是0和1，也就是比2小  
34.     alert($("table tr:lt(3)").size());   
35.       
36.       
37.     //9)給頁(yè)面內(nèi)所有標(biāo)題

    加上紅色背風(fēng)景  

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

[javascript] view plain copy

 print?

1. //1)查找所有包括文本"John"的div元素的個(gè)數(shù)  
2.     alert($("div:contains('John')").size());  //2  
3.       
4.       
5.     //2)查找所有p元素為空的元素個(gè)數(shù)  
6.     alert($("p:empty").size());  //2  
7.       
8.       
9.     //3)給所有包括p元素的div元素添加1個(gè)myClass樣式  
10.     $("div:has(p)").addClass("myClass");  
11.       
12.       
13.     //4)查找所有含有子元素或文本的p元素個(gè)數(shù),即p為父元素  
14.     alert($("p:parent").size());  //2  

生活不易，碼農(nóng)辛苦
如果您覺(jué)得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)