对树进行选择和转换

选择

就想树一样，网站结构中叶存在子与父。在jQuery中，我们可以利用这一结构。假设我们拥有相同的html，但是现在我们想要选择名为“main”的div中的p元素，但是不想对任何有关p元素的东西造成变化。

我们有三种可能的方案，如下：

    

     

      
       
        $("#wrapper").children('#main').children('p').css("color","orange");  
       
      
     
     

      
       $("#wrapper").children().children('p').css("color","orange");  
      
     
     

      
       $("#main").children('p').css("color","orange"); 
      
     
    
   

利用children方法可以选择树中位于其他元素下的某个元素。如果我们传递给它一个选择器，该方法将仅选择我们需要的元素，如果不是这样，父元素的所有子元素都将被选中。让我们看看第一个和第二个选择器直接的区别。

唯一的不同之处在于：第二个选择器中我们什么也没有指定，所有每一个子元素都会被选中。此处的关键在于：在上图中wrapper这个div元素下除main之外并没有其他子元素，所以我们得到的结果是一样的。

添加元素

现在我们在树中添加元素。这个元素可以是段落、div元素、表格等等，假设我们想要添加一个列表，如下：

    

     

      
       
        <
       
       
        ul
       
       
        >
       
       
         
       
      
     
     

      
        
      
     
     

      
           
      
      
       <
      
      
       li
      
      
       >
      
      
       Dog
      
      
       </
      
      
       li
      
      
       >
      
      
        
      
     
     

      
        
      
     
     

      
           
      
      
       <
      
      
       li
      
      
       >
      
      
       Cat
      
      
       </
      
      
       li
      
      
       >
      
      
        
      
     
     

      
        
      
     
     

      
           
      
      
       <
      
      
       li
      
      
       >
      
      
       Frog
      
      
       </
      
      
       li
      
      
       >
      
      
        
      
     
     

      
        
      
     
     

      
       </
      
      
       ul
      
      
       >
      
      
        
      
     
    
   

只是一些字符串，所以我们可以在JavaScript代码中这样写：

    

     

      
       
        var 
       
       
        list
       
       
        = 
       
       
        "<ul>\n"
       
       
         
       
      
     
     

      
        
      
     
     

      
                   + "
      
      
       <
      
      
       li
      
      
       >
      
      
       Dog
      
      
       </
      
      
       li
      
      
       >
      
      
       \n"  
      
     
     

      
        
      
     
     

      
                   + "
      
      
       <
      
      
       li
      
      
       >
      
      
       Cat
      
      
       </
      
      
       li
      
      
       >
      
      
       \n"  
      
     
     

      
        
      
     
     

      
                   + "
      
      
       <
      
      
       li
      
      
       >
      
      
       Frog
      
      
       </
      
      
       li
      
      
       >
      
      
       \n"  
      
     
     

      
        
      
     
     

      
                   "
      
      
       </
      
      
       ul
      
      
       >
      
      
       "; 
      
     
    
   

现在我们要在html中某个地方添加字符串。比如，在之前我们选择的p元素之后。

最后我们可以输入完整的代码，如下所示：

    

     

      
       
        $(document).ready(function(){  
       
      
     
     

      
        
      
     
     

      
           var 
      
      
       list
      
      
       = 
      
      
       "<ul>\n"
      
      
        
      
     
     

      
        
      
     
     

      
                       + "
      
      
       <
      
      
       li
      
      
       >
      
      
       Dog
      
      
       </
      
      
       li
      
      
       >
      
      
       \n"  
      
     
     

      
        
      
     
     

      
                       + "
      
      
       <
      
      
       li
      
      
       >
      
      
       Cat
      
      
       </
      
      
       li
      
      
       >
      
      
       \n"  
      
     
     

      
        
      
     
     

      
                       + "
      
      
       <
      
      
       li
      
      
       >
      
      
       Frog
      
      
       </
      
      
       li
      
      
       >
      
      
       \n"  
      
     
     

      
        
      
     
     

      
                       "
      
      
       </
      
      
       ul
      
      
       >
      
      
       ";         
      
     
     

      
        
      
     
     

      
       $("#wrapper").children('#main').append(list);  
      
     
     

      
        
      
     
     

      
       }); 
      
     
    
   

字面上我们将字符串附加到HTML中的</p>，结果是这个列表显示在p元素之后。

移除元素

移除元素并不难，当我们谈到对树进行转换时，在这一过程一定会涉及元素的移除。下面我们来移除之前选择的那个段落（注意我们可以再次使用选择器）。

    

     

      
       
        $("#wrapper").children('#main').children('p').remove(); 
       
      
     
     

       
     
    
   

在这一代码中，位于选中元素之中的所有元素都将被移除，所以必须十分小心。如果div下有一个列表，当我们移除该div时，div和列表都会被移除。

表面之下

jQuery类似只露出一角的冰山，在水面之下还有更多内容。这一小结中，我们将向你展示某些表面之下的内容。

绑定（Bind）

绑定是一种方法，利用它，我们可以将一个事件（鼠标点击、悬置等等）与一个方法连接起来。这有点类似：当用户单击此处时，调用该方法。听起来很熟悉，对吗？没错，我们经常这样做。看看以下示例：

    

     

      
       
        $(document).ready(function(){  
       
      
     
     

      
        
      
     
     

      
          $("#id").click(function(){  
      
     
     

      
        
      
     
     

      
            alert("Thatclickwasamazing!");  
      
     
     

      
        
      
     
     

      
          });  
      
     
     

      
        
      
     
     

      
       }); 
      
     
    
   

上文中click()方法在以下代码相对于wrapper：

    

     

      
       
        $(document).ready(function(){  
       
      
     
     

      
        
      
     
     

      
         $('#id').bind('click', function (){  
      
     
     

      
        
      
     
     

      
           alert("Thatclickwasamazing!");  
      
     
     

      
        
      
     
     

      
         });  
      
     
     

      
        
      
     
     

      
       }); 
      
     
    
   

此外，使用unbind()方法可以解除事件与元素的连接。