jquery中children()和find()有什么區(qū)別

發(fā)布時(shí)間：2020-12-15 09:47:00 來(lái)源：億速云閱讀：228 作者：小新欄目：web開發(fā)

小編給大家分享一下jquery中children()和find()有什么區(qū)別，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

jquery children()和find()區(qū)別：1、【children()】方法返回返回被選元素的所有直接子元素；2、【find()】方法獲得當(dāng)前元素集合中每個(gè)元素的后代。

jquery children()和find()區(qū)別：

查看children()代碼

<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元素 這時(shí)你會(huì)發(fā)現(xiàn)結(jié)果為 undefined 
 
// $("div").find(".no1").css({color:'#a61c00',backgroundColor:"#0000ff"});
</script>
</html>

jquery中children()和find()有什么區(qū)別

此時(shí)我們?cè)侔裦ind 這項(xiàng)打開注釋

<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>

對(duì)應(yīng)截圖：

jquery中children()和find()有什么區(qū)別

總結(jié) 一下區(qū)別：

children() 方法返回返回被選元素的所有直接子元素（直接子元素，只找兒子不要孫子（：也就是說(shuō)不會(huì)遞歸去遍歷）
find() 方法獲得當(dāng)前元素集合中每個(gè)元素的后代（注意find（）方法，必須傳參數(shù)，否者無(wú)效）

以上是“jquery中children()和find()有什么區(qū)別”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問(wèn)一下細(xì)節(jié)

jquery中children()和find()有什么區(qū)別

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽