jQuery遍歷之find()...LOGIN

jQuery遍歷之find()方法

jQuery是個合集對象,如果想快速找出DOM樹中的這些元素的後代元素,此時可以用find()方法,這也是發展使用頻率很高的方法。這裡要注意children與find方法的區別,children是父子關係查找,find是後代關係(包含父子關係)

理解節點查找關係:

<div class="div" >
   <ul class="son">
       <li class="grandson">1</li>
   </ul>
</li>
   </ul>

<

##程式碼如果是$("div").find("li"),此時,li與div是祖輩關係,透過find方法就可以快速的查找到了。

find()方法要注意的知識點:

    find是遍歷目前元素集合中每個元素的後代。只要符合,不管是兒子輩,孫子輩都可以。

    與其他的樹遍歷方法不同,選擇器表達式對於 .find() 是必要的參數。如果我們需要實現所有後代元素的取回,可以傳遞通配選擇器 '*'。

    find只在後人遍歷,不包括自己。

    選擇器context 是由.find() 方法實現的;因此,$('.item-ii').find('li') 等價於$('li', '.item- ii')(找到類別名為item-ii的標籤下的li標籤)。

注意重點:


    find()和.children()方法是類似的
        1.children只找出第一級的子節點
      1.children只找出第一級的子節點

      1.children只找出第一級的子節點

     子節點的所有後代節點


#下面我們來寫一個實例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    <div>
        <p>php.cn</p>
        <ul>
            <li>php<span> 中文网</span></li>
        </ul>
    </div>


    <script>
        $("div").find("span").css("color",'red');
    </script>
</body>
</html>
#########下一節
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> </head> <body> <div> <p>php.cn</p> <ul> <li>php<span> 中文网</span></li> </ul> </div> <script> $("div").find("span").css("color",'red'); </script> </body> </html>
章節課件