服務(wù)熱線
153 8323 9821
咨詢熱線 ：
15383239821
現(xiàn)在使用jQuery的網(wǎng)站數(shù)不勝數(shù)，它能夠成為成最為知名的JavaScript框架，肯定存在著某種原因。作為開(kāi)發(fā)者，我們必須更深入地思考問(wèn)題，應(yīng)該能夠使用每一種我們想要了解的語(yǔ)言和框架所具有最高級(jí)技巧。
高級(jí)選擇器（Ｓelector）
在jQuery中，我們可以使用各種各樣的選擇器，這使得選擇器的使用變得非常精確。下面我們來(lái)一步一步地講解這些選擇器并看看在其他語(yǔ)境中如何使用這些選擇器。
基于屬性的選擇器
在HTML中，幾乎所有元素都具有屬性，比如：
01.<img src="" alt="" width="" height="" border="0" /> 02.<input type="text" name="email" value="" size="80" /> 上面兩個(gè)HMTL元素中包含了九個(gè)屬性。利用jQuery，我們可以根據(jù)元素的屬性和屬性值來(lái)對(duì)元素進(jìn)行選擇。一起看看以下例子中的選擇器：
01.$(document).ready(function(){ 02. 03. //Alltheimageswhosewidthis600px 04. 05. $("img[width=600]").click(function(){ 06. 07. alert("You'vejustＳelectedanimagewhosewidthis600px"); 08. 09. }); 10. 11. //Alltheimageshavingawidthdifferentto600px 12. 13. $("img[width!=600]").click(function(){ 14. 15. alert("You'vejustＳelectedanimagewhosewidthisnot600px"); 16. 17. }); 18. 19. //Alltheinputswhosenameendswith'email' 20. 21. $("input[name$='email']").focus(function(){ 22. 23. alert("Thisinputhasanamewhichendswith'email'."); 24. 25. }); 26. 27.}); 在官方文檔中，我們可以看到許多選擇器與上例中的選擇器非常類似。但關(guān)鍵點(diǎn)是一樣的，屬性和屬性值。
多重選擇器
如果你開(kāi)放的是一個(gè)較為大型的網(wǎng)站，選擇器的使用會(huì)變得困難。有時(shí)為了讓代碼變得更為簡(jiǎn)單，最好將它們分割為兩個(gè)或三個(gè)選擇器。實(shí)際上這是非常簡(jiǎn)單和基礎(chǔ)的知識(shí)，不過(guò)非常有用，我們應(yīng)該把這些知識(shí)熟記于心。
$(document).ready(function(){
//Alltheimageswhosewidthis600pxORheightis400px
$("img[width=600],img[height=400]").click(function(){
alert("Selectedanimagewhosewidthis600pxORheightis400px");
});
//Allpelementswithclassorange_text,divsandimages.
$("p.orange_text,div,img").hover(function(){
alert("Selectedapelementwithclassorange_text,adivORanimage.");
});
//WecanalsocombinetheattributesＳelectors
//Allthejpgimageswithanaltattribute(thealt'svaluedoesn'tmatter)
$("img[alt][src$='.jpg']").click(function(){
alert("YouＳelectedajpgimagewiththealtattribute.");
});
});
Widget組件選擇器除了插件的選擇器之前，還有一些基于元素某些屬性或位置的選擇器。下面讓我們看看這些更為重要的選擇器：01.$(document).ready(function(){ 02. 03. //Allthehiddenimagesareshown 04. 05. $("img:hidden").show(); 06. 07.//Thefirstpisgoingtobeorange 08. 09. $("p:first").css("color","orange"); 10. 11. //Inputwithtypepassword 12. 13. //thisis$("input[type='password']") 14. 15. $("input:password").focus(function(){ 16. 17. alert("Thisisapassword!"); 18. 19. }); 20. 21.//Divswithparagraph 22. 23. $("div:has(p)").css("color","green"); 24. 25.//Wecanalsocombinethem.with() 26. 27. //Allnotdisabledcheckboxes 28. 29. $("input:checkbox(:not(:disabled))").hover(function(){ 30. 31. alert("Thischeckboxisworking."); 32. 33. }); 34. 35. });
如上例所示，可供使用的選擇器是多種多樣的，并且它們之前不是互相獨(dú)立的，所以我們可以將這些選擇器組合起來(lái)進(jìn)行使用，如上例中的選擇器。
理解網(wǎng)站的結(jié)構(gòu)
網(wǎng)絡(luò)的結(jié)構(gòu)可能看起來(lái)非常復(fù)雜，但事實(shí)上并非如此，如果我們想要使用某些選擇器以及作用于網(wǎng)絡(luò)結(jié)構(gòu)之上的方法。我們可以將網(wǎng)站視為一個(gè)顛倒的樹(shù)，樹(shù)根在頂部，而其他元素從根部延伸出來(lái)。查看下面的代碼，試著想象一棵樹(shù)，樹(shù)根是body標(biāo)簽。
01.<html xmlns="http://www.w3.org/1999/xhtml"> 02.<head>...</head> 03.<body> 04. 05. <div id="wrapper"> 06. 07. <div id="main"> 08. 09. <h1>CreateanAccount!</h1> 10. 11. <form id="myform" action="#" method="post"> 12. 13. <legend>PersonalInformation</legend> 14. 15. <input type="text" name="email_address" value="EmailAddress"/> 16. 17. <input type="checkbox" name="checking" value=""/> 18. 19. </form> 20. 21. <p>Message</p> 22. 23. </div><!--Endmain--> 24. 25. </div><!--Endwrapper--> 26. 27. <div id="footer"> 28. 29. <p>Footermessage</p> 30. 31. </div><!--Endfooter--> 32. 33.</body> 34.</html>
以上示例代碼的樹(shù)形圖如下：
很簡(jiǎn)單，是不是？從現(xiàn)在開(kāi)始我們可以將html或xhtml看做一棵樹(shù)，不過(guò)我們想做的是程序員，這些植物學(xué)的理論有什么用處？答案就在下一個(gè)要點(diǎn)之中。
對(duì)樹(shù)進(jìn)行選擇和轉(zhuǎn)換
選擇
就想樹(shù)一樣，網(wǎng)站結(jié)構(gòu)中葉存在子與父。在jQuery中，我們可以利用這一結(jié)構(gòu)。假設(shè)我們擁有相同的html，但是現(xiàn)在我們想要選擇名為“main”的div中的p元素，但是不想對(duì)任何有關(guān)p元素的東西造成變化。
我們有三種可能的方案，如下：
01.$("#wrapper").children('#main').children('p').css("color","orange"); 02.$("#wrapper").children().children('p').css("color","orange"); 03.$("#main").children('p').css("color","orange"); 利用children方法可以選擇樹(shù)中位于其他元素下的某個(gè)元素。如果我們傳遞給它一個(gè)選擇器，該方法將僅選擇我們需要的元素，如果不是這樣，父元素的所有子元素都將被選中。讓我們看看第一個(gè)和第二個(gè)選擇器直接的區(qū)別。
唯一的不同之處在于：第二個(gè)選擇器中我們什么也沒(méi)有指定，所有每一個(gè)子元素都會(huì)被選中。此處的關(guān)鍵在于：在上圖中wrapper這個(gè)div元素下除main之外并沒(méi)有其他子元素，所以我們得到的結(jié)果是一樣的。
添加
上一篇：jQuery入門簡(jiǎn)介
下一篇：jQuery方法大全
