1. 程式人生 > >在jquery中,find()和children()函式之間的不同之處

在jquery中,find()和children()函式之間的不同之處

find()和children()方法被用來過濾匹配元素的子元素,前者可以在所有的後代中進行過濾,而後者僅在子級層進行過濾。

簡單的說:

1 find()—搜尋匹配元素的孩子,孫子等所有的後代層。

2 child()—僅搜尋匹配元素的孩子層。

以下是一個完整的例項來闡述它們之間的不同之處:

<html>
<head>
<script type="text/javascript" src="../jquery-1.11.1.min.js" ></script>
<style type="text/css">
    div{
    padding:8px;
    border:1px solid;
       
    }
</style>
</head>
<body>
     <h1>jquery find() vs children() example</h1>
       <script type="text/javascript">
             $(document).ready(function(){
              $("#testChildren").click(function(){
                $("div").css("background","white");
                $('.B1').children('.child').css('background','red');
              
              });
             $("#testFind").click(function(){
              $('div').css('background',"white");
              $(".B1").find('.child').css("background","red");
             
             });
             
             
             });
       
       </script>
       <div class="B1">
       <div class="child">B1-1</div>
       <div class="child">B1-2</div>
       <div class="orphan">B1-3</div>
         <div class="child">B1-4</div>      
       <div class="B2">
            <div class="child">B2-1</div>
<div class="child">B2-2</div>
<div class="orphan">B2-2 - Orphan</div>
 
<div class="B3">
<div class="child">B3-1</div>
<div class="orphan">B3-2 - Orphan</div>
<div class="child">B3-3</div>
</div>
          
          </div>      
       </div>
       <br/>
<br/>
<br/>
 
<input type='button' value='.B1 children(child)' id='testChildren'>
<input type='button' value='.B1 find(child)' id='testFind'>
 
</body>
</html>

效果: