除了插件的选择器之前，还有一些基于元素某些属性或位置的选择器。下面让我们看看这些更为重要的选择器：

    

     

      
       
        $(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标签。

    

     

      
       
        <
       
       
        html
       
       
         
       
       
        xmlns
       
       
        =
       
       
        "http://www.w3.org/1999/xhtml"
       
       
        >
       
       
         
       
      
     
     

      
       <
      
      
       head
      
      
       >
      
      
       ...
      
      
       </
      
      
       head
      
      
       >
      
      
        
      
     
     

      
       <
      
      
       body
      
      
       >
      
      
        
      
     
     

      
        
      
     
     

      
           
      
      
       <
      
      
       div
      
      
        
      
      
       id
      
      
       =
      
      
       "wrapper"
      
      
       >
      
      
        
      
     
     

      
        
      
     
     

      
               
      
      
       <
      
      
       div
      
      
        
      
      
       id
      
      
       =
      
      
       "main"
      
      
       >
      
      
        
      
     
     

      
        
      
     
     

      
                   
      
      
       <
      
      
       h1
      
      
       >
      
      
       CreateanAccount!
      
      
       </
      
      
       h1
      
      
       >
      
      
        
      
     
     

      
        
      
     
     

      
                   
      
      
       <
      
      
       form
      
      
        
      
      
       id
      
      
       =
      
      
       "myform"
      
      
        
      
      
       action
      
      
       =
      
      
       "#"
      
      
        
      
      
       method
      
      
       =
      
      
       "post"
      
      
       >
      
      
        
      
     
     

      
        
      
     
     

      
                       
      
      
       <
      
      
       legend
      
      
       >
      
      
       PersonalInformation
      
      
       </
      
      
       legend
      
      
       >
      
      
        
      
     
     

      
        
      
     
     

      
                       
      
      
       <
      
      
       input
      
      
        
      
      
       type
      
      
       =
      
      
       "text"
      
      
        
      
      
       name
      
      
       =
      
      
       "email_address"
      
      
        
      
      
       value
      
      
       =
      
      
       "EmailAddress"
      
      
       />
      
      
        
      
     
     

      
        
      
     
     

      
                       
      
      
       <
      
      
       input
      
      
        
      
      
       type
      
      
       =
      
      
       "checkbox"
      
      
        
      
      
       name
      
      
       =
      
      
       "checking"
      
      
        
      
      
       value
      
      
       =
      
      
       ""
      
      
       />
      
      
        
      
     
     

      
        
      
     
     

      
                   
      
      
       </
      
      
       form
      
      
       >
      
      
        
      
     
     

      
        
      
     
     

      
                   
      
      
       <
      
      
       p
      
      
       >
      
      
       Message
      
      
       </
      
      
       p
      
      
       >
      
      
        
      
     
     

      
        
      
     
     

      
               
      
      
       </
      
      
       div
      
      
       >
      
      
       <!--Endmain-->
      
      
        
      
     
     

      
        
      
     
     

      
           
      
      
       </
      
      
       div
      
      
       >
      
      
       <!--Endwrapper-->
      
      
        
      
     
     

      
        
      
     
     

      
           
      
      
       <
      
      
       div
      
      
        
      
      
       id
      
      
       =
      
      
       "footer"
      
      
       >
      
      
        
      
     
     

      
        
      
     
     

      
               
      
      
       <
      
      
       p
      
      
       >
      
      
       Footermessage
      
      
       </
      
      
       p
      
      
       >
      
      
        
      
     
     

      
        
      
     
     

      
           
      
      
       </
      
      
       div
      
      
       >
      
      
       <!--Endfooter-->
      
      
        
      
     
     

      
        
      
     
     

      
       </
      
      
       body
      
      
       >
      
      
        
      
     
     

      
       </
      
      
       html
      
      
       >
      
      
        
      
     
    
   

以上示例代码的树形图如下：

很简单，是不是？从现在开始我们可以将html或xhtml看做一棵树，不过我们想做的是程序员，这些植物学的理论有什么用处？答案就在下一个要点之中。