jQuery children() find()和contents()方法

2020-07-16 10:05:27
在 jQuery 中,如果想要查詢當前元素的後代元素(子元素、孫元素等),我們有以下 3 種方法。
  • children();
  • find();
  • contents()。

下面我們來一一介紹。

jQuery children()方法

在 jQuery 中,我們可以使用 children() 方法來查詢當前元素的“子元素”。注意,children() 方法只能查詢子元素,不能查詢其他後代元素。

語法:

$().children(selector)

selector 是一個選擇器,用來查詢符合條件的子元素。selector 是一個可選引數,當引數省略時,表示選擇所有子元素;當引數沒有省略時,表示選擇符合條件的子元素。

舉例:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style lang="">
        p{margin:6px 0;}
    </style>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            $("#wrapper").hover(function(){
                $(this).children(".select").css("color", "red");
            },function(){
                $(this).children(".select").css("color", "black");
            })
        })
    </script>
</head>
<body>
    <div id="wrapper">
        <p>子元素</p>
        <p class="select">子元素</p>
        <div>
            <p>孫元素</p>
            <p class="select">孫元素</p>
        </div>
        <p>子元素</p>
        <p class="select">子元素</p>
    </div>
</body>
</html>
預設情況下,預覽效果如圖 1 所示。
默認效果
圖 1:預設效果