欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

juqery 學習之四 篩選查找

 更新時間:2010年11月30日 16:17:07   作者:  
juqery 學習之四 篩選查找,學習jquery的朋友可以參考下。

add(expr)

把與表達式匹配的元素添加到jQuery對象中。這個函數(shù)可以用于連接分別與兩個表達式匹配的元素結果集。

返回值

jQuery

參數(shù)

expr (String, DOMElement, Array<DOMElement>) : 用于匹配元素并添加的表達式字符串,或者用于動態(tài)生成的HTML代碼,如果是一個字符串數(shù)組則返回多個元素

示例

添加一個新元素到一組匹配的元素中,并且這個新元素能匹配給定的表達式。

HTML 代碼:

<p>Hello</p><span>Hello Again</span>

jQuery 代碼:

$("p").add("span")

結果:

[ <p>Hello</p>, <span>Hello Again</span> ]

動態(tài)生成一個元素并添加至匹配的元素中

HTML 代碼:

<p>Hello</p>

jQuery 代碼:

$("p").add("<span>Again</span>")

結果:

[ <p>Hello</p>, <span>Hello Again</span> ]

為匹配的元素添加一個或者多個元素

HTML 代碼:

<p>Hello</p><p><span id="a">Hello Again</span></p>

jQuery 代碼:

$("p").add(document.getElementById("a"))

結果:

[ <p>Hello</p>, <p><span id="a">Hello Again</span></p>, <span id="a">Hello Again</span> ]

----------------------------------------------------------------------------------------------------------------

children([expr])

取得一個包含匹配的元素集合中每一個元素的所有子元素的元素集合。
可以通過可選的表達式來過濾所匹配的子元素。注意:parents()將查找所有祖輩元素,而children()之考慮子元素而不考慮所有后代元素。

返回值

jQuery

參數(shù)

expr (String) : (可選) 用以過濾子元素的表達式

示例

查找DIV中的每個子元素。

HTML 代碼:

<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>

jQuery 代碼:

$("div").children()

結果:

[ <span>Hello Again</span> ]

在每個div中查找 .selected 的類。

HTML 代碼:

<div><span>Hello</span><p class="selected">Hello Again</p><p>And Again</p></div>

jQuery 代碼:

$("div").children(".selected")

結果:

[ <p class="selected">Hello Again</p> ]

----------------------------------------------------------------------------------------------------------------

contents()

查找匹配元素內部所有的子節(jié)點(包括文本節(jié)點)。如果元素是一個iframe,則查找文檔內容

返回值

jQuery

示例

查找所有文本節(jié)點并加粗

HTML 代碼:

<p>Hello <a >John</a>, how are you doing?</p>

jQuery 代碼:

$("p").contents().not("[@nodeType=1]").wrap("<b/>");

結果:

<p><b>Hello</b> <a >John</a>, <b>how are you doing?</b></p>

往一個空框架中加些內容

HTML 代碼:

<iframe src="/index-blank.html" width="300" height="100"></iframe>

jQuery 代碼:

$("iframe").contents().find("body")   .append("I'm in an iframe!");

----------------------------------------------------------------------------------------------------------------

find(expr)

搜索所有與指定表達式匹配的元素。這個函數(shù)是找出正在處理的元素的后代元素的好方法。
所有搜索都依靠jQuery表達式來完成。這個表達式可以使用CSS1-3的選擇器語法來寫。

返回值

jQuery

參數(shù)

expr (String) :用于查找的表達式

示例

從所有的段落開始,進一步搜索下面的span元素。與$("p span")相同。

HTML 代碼:

<p><span>Hello</span>, how are you?</p>

jQuery 代碼:

$("p").find("span")

結果:

[ <span>Hello</span> ]

----------------------------------------------------------------------------------------------------------------

next([expr])

取得一個包含匹配的元素集合中每一個元素緊鄰的后面同輩元素的元素集合。
這個函數(shù)只返回后面那個緊鄰的同輩元素,而不是后面所有的同輩元素(可以使用nextAll)??梢杂靡粋€可選的表達式進行篩選。

返回值

jQuery

參數(shù)

expr (String) : (可選) 用于篩選的表達式

示例

找到每個段落的后面緊鄰的同輩元素。

HTML 代碼:

<p>Hello</p><p>Hello Again</p><div><span>And Again</span></div>

jQuery 代碼:

$("p").next()

結果:

[ <p>Hello Again</p>, <div><span>And Again</span></div> ]

找到每個段落的后面緊鄰的同輩元素中類名為selected的元素。

HTML 代碼:

<p>Hello</p><p class="selected">Hello Again</p><div><span>And Again</span></div>

jQuery 代碼:

$("p").next(".selected")

結果:

[ <p class="selected">Hello Again</p> ]

----------------------------------------------------------------------------------------------------------------

nextAll([expr])

查找當前元素之后的所有元素。
可以用表達式過濾

返回值

jQuery

參數(shù)

expr (String) : (可選)用來過濾的表達式

示例

給第一個div之后的所有元素加個類

HTML 代碼:

<div></div><div></div><div></div><div></div>

jQuery 代碼:

$("div:first").nextAll().addClass("after");

結果:

[ <div class="after"></div>, <div class="after"></div>, <div class="after"></div> ]

----------------------------------------------------------------------------------------------------------------

parent([expr])

取得一個包含著所有匹配元素的唯一父元素的元素集合。
你可以使用可選的表達式來篩選。

返回值

jQuery

參數(shù)

expr (String) : (可選)用來篩選的表達式

示例

查找每個段落的父元素

HTML 代碼:

<div><p>Hello</p><p>Hello</p></div>

jQuery 代碼:

$("p").parent()

結果:

[ <div><p>Hello</p><p>Hello</p></div> </body> ]

查找段落的父元素中每個類名為selected的父元素。

HTML 代碼:

<div><p>Hello</p></div><div class="selected"><p>Hello Again</p></div>

jQuery 代碼:

$("p").parent(".selected")

結果:

[ <div class="selected"><p>Hello Again</p></div> ]

----------------------------------------------------------------------------------------------------------------

parents([expr])

取得一個包含著所有匹配元素的祖先元素的元素集合(不包含根元素)。可以通過一個可選的表達式進行篩選。

返回值

jQuery

參數(shù)

expr (String) : (可選) 用于篩選祖先元素的表達式

示例

找到每個span元素的所有祖先元素。

HTML 代碼:

<html><body><div><p><span>Hello</span></p><span>Hello Again</span></div></body></html>

jQuery 代碼:

$("span").parents()

找到每個span的所有是p元素的祖先元素。

jQuery 代碼:

$("span").parents("p")

----------------------------------------------------------------------------------------------------------------

prev([expr])

取得一個包含匹配的元素集合中每一個元素緊鄰的前一個同輩元素的元素集合。
可以用一個可選的表達式進行篩選。只有緊鄰的同輩元素會被匹配到,而不是前面所有的同輩元素。

返回值

jQuery

參數(shù)

expr (String) : (可選) 用于篩選前一個同輩元素的表達式

示例

找到每個段落緊鄰的前一個同輩元素。

HTML 代碼:

<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>

jQuery 代碼:

$("p").prev()

結果:

[ <div><span>Hello Again</span></div> ]

找到每個段落緊鄰的前一個同輩元素中類名為selected的元素。

HTML 代碼:

<div><span>Hello</span></div><p class="selected">Hello Again</p><p>And Again</p>

jQuery 代碼:

$("p").prev(".selected")

結果:

[ <p class="selected">Hello Again</p> ]

----------------------------------------------------------------------------------------------------------------

prevAll([expr])

查找當前元素之前所有的同輩元素
可以用表達式過濾。

返回值

jQuery

參數(shù)

expr (String) : (可選) 用于過濾的表達式

示例

給最后一個之前的所有div加上一個類

HTML 代碼:

<div></div><div></div><div></div><div></div>

jQuery 代碼:

$("div:last").prevAll().addClass("before");

結果:

[ <div class="before"></div>, <div class="before"></div>, <div class="before"></div> ]

----------------------------------------------------------------------------------------------------------------

siblings([expr])

取得一個包含匹配的元素集合中每一個元素的所有唯一同輩元素的元素集合??梢杂每蛇x的表達式進行篩選。

返回值

jQuery

參數(shù)

expr (String) : (可選) 用于篩選同輩元素的表達式

示例

找到每個div的所有同輩元素。

HTML 代碼:

<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>

jQuery 代碼:

$("div").siblings()

結果:

[ <p>Hello</p>, <p>And Again</p> ]

找到每個div的所有同輩元素中帶有類名為selected的元素。

HTML 代碼:

<div><span>Hello</span></div><p class="selected">Hello Again</p><p>And Again</p>

jQuery 代碼:

$("p").siblings(".selected")

結果:

[ <p class="selected">Hello Again</p> ]
------------------------------------------------------------------------------------------------------------------------

andSelf()

加入先前所選的加入當前元素中
對于篩選或查找后的元素,要加入先前所選元素時將會很有用。

返回值

jQuery

示例

選取所有div以及內部的p,并加上border類

HTML 代碼:

<div><p>First Paragraph</p><p>Second Paragraph</p></div>

jQuery 代碼:

$("div").find("p").andSelf().addClass("border");

結果:

<div class="border"><p class="border">First Paragraph</p><p class="border">Second Paragraph</p></div>

------------------------------------------------------------------------------------------------------------------------

end()

回到最近的一個"破壞性"操作之前。即,將匹配的元素列表變?yōu)榍耙淮蔚臓顟B(tài)。
如果之前沒有破壞性操作,則返回一個空集。所謂的"破壞性"就是指任何改變所匹配的jQuery元素的操作。這包括在 Traversing 中任何返回一個jQuery對象的函數(shù)--'add', 'andSelf', 'children', 'filter', 'find', 'map', 'next', 'nextAll', 'not', 'parent', 'parents', 'prev', 'prevAll', 'siblings' and 'slice'--再加上 Manipulation 中的 'clone'。

返回值

jQuery

示例

選取所有的p元素,查找并選取span子元素,然后再回過來選取p元素

HTML 代碼:

<p><span>Hello</span>,how are you?</p>

jQuery 代碼:

$("p").find("span").end()

結果:

[ <p><span>Hello</span> how are you?</p> ]

相關文章

最新評論