jquery中children()與find()用法區別詳解

1.children()是一個篩選器,顧名思義就是篩選子元素,篩選那些符合條件的子元素。

完整的格式如下:.children(expr)

其中children是篩選器的名稱,expr是表達式,所有選擇器中的表達式都可以用在這,比如按標籤名”div”,按類名”.class”,按序號”:first”等等,如果表達式爲空,那麼返回的是所有的孩子,返回的結果仍爲jQuery對象。

jquery取索引使用eq函數。

eq() 選擇器選取帶有指定 index 值的元素。

index 值從 0 開始,所有第一個元素的 index 值是 0(不是 1)。

經常與其他元素/選擇器一起使用,來選擇指定的組中特定序號的元素。

例子:

$(‘#test’).children().eq(1).css({‘display’:’inline-block’});

將id爲test的元素的第二個子元素樣式設置爲’display’:’inline-block’。

另一種寫法

$(“:eq(index)”)如:$(“p:eq(1)”)

 

2.find() 搜索所有段落中的後代 span 元素,並將其顏色設置爲紅色:

例子:

$(“p”).find(“span”).css(‘color’,’red’);

定義和用法

find() 方法獲得當前元素集合中每個元素的後代,通過選擇器、jQuery 對象或元素來篩選。

語法

.find(selector)

find() 方法第一個明顯特徵是,其接受的選擇器表達式與我們向 $() 函數傳遞的表達式的類型相同。將通過測試這些元素是否匹配該表達式來對元素進行過濾。

請思考下面這個簡單的嵌套列表:

<ul class=”level-1″>

<li class=”item-i”>I</li>

<li class=”item-ii”>II

<ul class=”level-2″>

<li class=”item-a”>A</li>

<li class=”item-b”>B

<ul class=”level-3″>

<li class=”item-1″>1</li>

<li class=”item-2″>2</li>

<li class=”item-3″>3</li>

</ul>

</li>

<li class=”item-c”>C</li>

</ul>

</li>

<li class=”item-iii”>III</li>

</ul>

我們將從列表 II 開始來查找其中的列表項:

$(‘li.item-ii’).find(‘li’).css(‘background-color’, ‘red’);

.item-ii下的所有li的背景色全變成紅色

 

通過以上的解釋,可以總結如下:

1:children及find方法都用是用來獲得element的子elements的,兩者都不會返回 text node,就像大多數的jQuery方法一樣。

2:children方法獲得的僅僅是元素一下級的子元素

3:find方法獲得所有下級元素

4:children方法的參數selector 是可選的(optionally),用來過濾子元素,但find方法的參數selector方法是必選的。

發佈了27 篇原創文章 · 獲贊 12 · 訪問量 7萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章