jquery children()和find()區別

本文轉載自查看原文 2019-11-27 11:49 298

<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            /*background-color: pink;*/
        }
    </style>
</head>
<body>
    <div>
        <span>11</span>
        <span>
            <ul>
                <li class="no1">aaa</li>
                <li>bbb</li>
                <li>ccc</li>
            </ul>
        </span>
        <span>222</span>
        <ul>
            <li>ddd</li>
            <li>eee</li>
            <li>fff</li>
        </ul>
    </div>
 
 
</body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
    $("div").children(".no1").css({color:'#a61c00',backgroundColor:"#0000ff"});
    console.log($("div").children(".no1")[0]); // 打印獲取到的dom元素 這時你會發現結果為 undefined 
 
    // $("div").find(".no1").css({color:'#a61c00',backgroundColor:"#0000ff"});
</script>
</html>

此時我們再把find 這項打開注釋

<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            /*background-color: pink;*/
        }
    </style>
</head>
<body>
    <div>
        <span>11</span>
        <span>
            <ul>
                <li class="no1">aaa</li>
                <li>bbb</li>
                <li>ccc</li>
            </ul>
        </span>
        <span>222</span>
        <ul>
            <li>ddd</li>
            <li>eee</li>
            <li>fff</li>
        </ul>
    </div>
 
</body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
    // $("div").children(".no1").css({color:'#a61c00',backgroundColor:"#0000ff"});
    // console.log($("div").children(".no1")[0]);
 
 
    $("div").find(".no1").css({color:'#a61c00',backgroundColor:"#0000ff"});
    console.log($("div").find(".no1")[0]);
</script>
</html>

對應截圖：

總結一下區別：

children() 方法返回返回被選元素的所有直接子元素（直接子元素，只找兒子不要孫子（：也就是說不會遞歸去遍歷）

find（）方法獲得當前元素集合中每個元素的后代（注意find（）方法，必須傳參數，否者無效）

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 jQuery：find()方法與children()方法的區別 jquery查找后代元素 children() contents() find() jquery 查找指定元素方法 .children and .find Jquery學習筆記：利用find和children方法獲取后代元素 React中props.children和React.Children的區別 jQuery find 方式 jquery find 推薦 jQuery遍歷之find()方法 ……find與findOne的區別……// mongoDB find的$in $all的區別