在jQuery中，children()方法是非常有用的，它可以幫助我們更好地遍歷DOM樹，同時返回指定元素下的子元素。讓我們深入探討一下這個方法。
一、選取元素的所有子元素
$('#parent').children();
children()方法可以選取指定元素的所有子元素，例如：
<div id="parent">
<p>child1</p>
<p>child2</p>
</div>
以上代碼中，children()方法將返回div元素下的兩個
元素，即”child1″和”child2″。
二、選取指定子元素
$('#parent').children('p');
如果我們想要選擇指定類型的子元素，可以在children()方法的參數中指定選擇器。例如：
<div id="parent">
<p>child1</p>
<a><p>child2</p></a>
<p>child3</p>
</div>
以上代碼中，children('p')方法將只返回div元素下的
元素，即”child1″和”child3″，而不包括嵌套在<a>元素中的
元素。
三、選取指定子元素的後代元素
$('#parent').children('p').find('span');
如果我們只想要選擇指定類型子元素下的後代元素，則可以鏈式操作find()方法。例如：
<div id="parent">
<p>child1</p>
<p><span>child2</span></p>
<p>child3</p>
</div>
以上代碼中，children('p').find('span')方法將返回div元素下的包含在
元素中的<span>元素，即”child2″。
四、不傳遞參數
$('#parent').children();
不傳遞參數時，children()方法與設置為*.children()相同。例如：
<div id="parent">
<p>child1</p>
<ul>
<li>child2</li>
<p>child3</p>
</ul>
</div>
以上代碼中，children()方法將返回div元素下的兩個直接子元素，即”child1″和<ul>元素，不會返回在<ul>元素內部的
元素。
五、總結
通過以上幾種方式，我們可以更好地使用jQuery中的children()方法來操作DOM樹。
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/231930.html
微信掃一掃 
支付寶掃一掃 