【獨家特稿】現在使用jQuery的網站數不勝數，它能夠成為成最為知名的JavaScript框架，肯定存在著某種原因。作為開發(fā)者，我們必須更深入地思考問題，應該能夠使用每一種我們想要了解的語言和框架所具有***級技巧。

關于jQuery更多內容，歡迎訪問： jQuery從入門到精通

高級選擇器（selector）

在jQuery中，我們可以使用各種各樣的選擇器，這使得選擇器的使用變得非常精確。也曾經和讀者分享過jQuery選擇器深入分析：避免不必要的調用，下面我們來一步一步地講解這些選擇器并看看在其他語境中如何使用這些選擇器。

基于屬性的選擇器

在HTML中，幾乎所有元素都具有屬性，比如：

上面兩個HMTL元素中包含了九個屬性。利用jQuery，我們可以根據元素的屬性和屬性值來對元素進行選擇。一起看看以下例子中的選擇器：

 
 
 
 

  
  
  
  
$(document).ready(function(){  
  
  
  
  
 
  
  
  
  
    //Alltheimageswhosewidthis600px  
  
  
  
  
 
  
  
  
  
    $("img[width=600]").click(function(){  
  
  
  
  
 
  
  
  
  
       alert("You'vejustselectedanimagewhosewidthis600px");  
  
  
  
  
 
  
  
  
  
    });  
  
  
  
  
 
  
  
  
  
  //Alltheimageshavingawidthdifferentto600px  
  
  
  
  
 
  
  
  
  
    $("img[width!=600]").click(function(){  
  
  
  
  
 
  
  
  
  
        alert("You'vejustselectedanimagewhosewidthisnot600px");  
  
  
  
  
 
  
  
  
  
    });  
  
  
  
  
 
  
  
  
  
 //Alltheinputswhosenameendswith'email'  
  
  
  
  
 
  
  
  
  
    $("input[name$='email']").focus(function(){  
  
  
  
  
 
  
  
  
  
       alert("Thisinputhasanamewhichendswith'email'.");  
  
  
  
  
 
  
  
  
  
    });  
  
  
  
  
 
  
  
  
  
}); 
 
 
 
 

在官方文檔中，我們可以看到許多選擇器與上例中的選擇器非常類似。但關鍵點是一樣的，屬性和屬性值。

多重選擇器

如果你開放的是一個較為大型的網站，選擇器的使用會變得困難。有時為了讓代碼變得更為簡單，***將它們分割為兩個或三個選擇器。實際上這是非常簡單和基礎的知識，不過非常有用，我們應該把這些知識熟記于心。

 
 
 
 

  
  
  
  
$(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.");  
  
  
  
  
 
  
  
  
  
    });   
  
  
  
  
 
  
  
  
  
//Wecanalsocombinetheattributesselectors  
  
  
  
  
 
  
  
  
  
    //Allthejpgimageswithanaltattribute(thealt'svaluedoesn'tmatter)  
  
  
  
  
 
  
  
  
  
    $("img[alt][src$='.jpg']").click(function(){  
  
  
  
  
 
  
  
  
  
       alert("Youselectedajpgimagewiththealtattribute.");  
  
  
  
  
 
  
  
  
  
    });  
  
  
  
  
 
  
  
  
  
}); 
 
 
 
 

#p#

Widget組件選擇器

除了插件的選擇器之前，還有一些基于元素某些屬性或位置的選擇器。下面讓我們看看這些更為重要的選擇器：

 
 
 
 

  
  
  
  
$(document).ready(function(){  
  
  
  
  
 
  
  
  
  
    //Allthehiddenimagesareshown  
  
  
  
  
 
  
  
  
  
    $("img:hidden").show();         
  
  
  
  
 
  
  
  
  
//Thefirstpisgoingtobeorange  
  
  
  
  
 
  
  
  
  
    $("p:first").css("color","orange");  
  
  
  
  
 
  
  
  
  
 //Inputwithtypepassword  
  
  
  
  
 
  
  
  
  
    //thisis$("input[type='password']")  
  
  
  
  
 
  
  
  
  
    $("input:password").focus(function(){  
  
  
  
  
 
  
  
  
  
       alert("Thisisapassword!");  
  
  
  
  
 
  
  
  
  
    });                    
  
  
  
  
 
  
  
  
  
//Divswithparagraph  
  
  
  
  
 
  
  
  
  
    $("div:has(p)").css("color","green");  
  
  
  
  
 
  
  
  
  
//Wecanalsocombinethem.with()  
  
  
  
  
 
  
  
  
  
    //Allnotdisabledcheckboxes  
  
  
  
  
 
  
  
  
  
    $("input:checkbox(:not(:disabled))").hover(function(){  
  
  
  
  
 
  
  
  
  
       alert("Thischeckboxisworking.");  
  
  
  
  
 
  
  
  
  
    });   
  
  
  
  
 
  
  
  
  
 }); 
 
 
 
 

如上例所示，可供使用的選擇器是多種多樣的，并且它們之前不是互相獨立的，所以我們可以將這些選擇器組合起來進行使用，如上例中的選擇器。

理解網站的結構

網絡的結構可能看起來非常復雜，但事實上并非如此，如果我們想要使用某些選擇器以及作用于網絡結構之上的方法。我們可以將網站視為一個顛倒的樹，樹根在頂部，而其他元素從根部延伸出來。查看下面的代碼，試著想象一棵樹，樹根是body標簽。

 
 
 
 

  
  
  
  
 
  
  
  
  
... 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
     
  
  
  
  
 
  
  
  
  
         
  
  
  
  
 
  
  
  
  
            
CreateanAccount!
 
  
  
  
  
 
  
  
  
  
             
  
  
  
  
 
  
  
  
  
                
PersonalInformation
 
  
  
  
  
 
  
  
  
  
                 
  
  
  
  
 
  
  
  
  
                 
  
  
  
  
 
  
  
  
  
             
  
  
  
  
 
  
  
  
  
            
Message