jQuery封裝集

來源:互聯網
上載者:User

標籤:style   http   io   ar   os   使用   sp   for   strong   

1.過濾 Filtering

名稱

說明

舉例

eq( index )

擷取第N個元素

擷取匹配的第二個元素: 
$("p").eq(1)

filter( expr )

篩選出與指定運算式匹配的元素集合。

保留帶有select類的元素: 
$("p").filter(".selected")

filter( fn )

篩選出與指定函數傳回值匹配的元素集合

這個函數內部將對每個對象計算一次 (正如 ‘$.each‘). 如果調用的函數返回false則這個元素被刪除,否則就會保留。

保留子項目中不含有ol的元素: 

$("div").filter(function(index) { 
  return $("ol", this).size() == 0; 
});

is( expr ) 

注意: 這個函數返回的不是jQuery封裝集而是Boolean值

用一個運算式來檢查當前選擇的元素集合,如果其中至少有一個元素符合這個給定的運算式就返回true。

如果沒有元素符合,或者運算式無效,都返回‘false‘. ‘filter‘ 內部實際也是在調用這個函數,所以,filter()函數原有的規則在這裡也適用。

由於input元素的父元素是一個表單元素,所以返回true: 
$("input[type=‘checkbox‘]").parent().is("form")

map( callback )

將一組元素轉換成其他數組(不論是否是元素數組)

你可以用這個函數來建立一個列表,不論是值、屬性還是CSS樣式,或者其他特別形式。這都可以用‘$.map()‘來方便的建立

把form中的每個input元素的值建立一個列表: 

$("p").append( $("input").map(function(){ 
  return $(this).val(); 
}).get().join(", ") );

not( expr )

刪除與指定運算式匹配的元素

從p元素中刪除帶有 select 的ID的元素: 
$("p").not( $("#selected")[0] )

slice( start, end )

選取一個匹配的子集

選擇第一個p元素: 
$("p").slice(0, 1);

2.尋找 Finding

名稱

說明

舉例

add( expr )

把與運算式匹配的元素添加到jQuery對象中。這個函數可以用於串連分別與兩個運算式匹配的元素結果集。

動態產生一個元素並添加至匹配的元素中: 
$("p").add("Again") 

children( [expr] )

取得一個包含匹配的元素集合中每一個元素的所有子項目的元素集合。

可以通過可選的運算式來過濾所匹配的子項目。注意:parents()將尋找所有祖輩元素,而children()只考慮子項目而不考慮所有後代元素。

尋找DIV中的每個子項目: 
$("div").children()

closest( [expr] )

取得與運算式匹配的最新的父元素

為事件來源最近的父類li對象更換樣式:

$(document).bind("click", function (e) { 
  $(e.target).closest("li").toggleClass("hilight");
});

contents( )

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

尋找所有文本節點並加粗: 
$("p").contents().not("[nodeType=1]").wrap("");

find( expr )

搜尋所有與指定運算式匹配的元素。這個函數是找出正在處理的元素的後代元素的好方法。

所有搜尋都依靠jQuery運算式來完成。這個運算式可以使用CSS1-3的選取器文法來寫。

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

next( [expr] )

取得一個包含匹配的元素集合中每一個元素緊鄰的後面同輩元素的元素集合。

這個函數只返回後面那個緊鄰的同輩元素,而不是後面所有的同輩元素(可以使用nextAll)。可以用一個可選的運算式進行篩選。

找到每個段落的後面緊鄰的同輩元素: 
$("p").next()

nextAll( [expr] )

尋找當前元素之後所有的同輩元素。

可以用運算式過濾

給第一個div之後的所有元素加個類: 
$("div:first").nextAll().addClass("after");

offsetParent( )

返回第一個有定位的父類(比如(relative或absolute)). 

 

parent( [expr] )

取得一個包含著所有匹配元素的唯一父元素的元素集合。

你可以使用可選的運算式來篩選。

尋找每個段落的父元素: 
$("p").parent()

parents( [expr] )

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

找到每個span元素的所有祖先元素: 
$("span").parents()

prev( [expr] )

取得一個包含匹配的元素集合中每一個元素緊鄰的前一個同輩元素的元素集合。

可以用一個可選的運算式進行篩選。只有緊鄰的同輩元素會被匹配到,而不是前面所有的同輩元素。

找到每個段落緊鄰的前一個同輩元素: 
$("p").prev()

prevAll( [expr] )

尋找當前元素之前所有的同輩元素

可以用運算式過濾。

給最後一個之前的所有div加上一個類: 
$("div:last").prevAll().addClass("before");

siblings( [expr] )

取得一個包含匹配的元素集合中每一個元素的所有唯一同輩元素的元素集合。可以用可選的運算式進行篩選。

找到每個div的所有同輩元素: 
$("div").siblings()

3.串聯 Chaining

名稱

說明

舉例

andSelf( )

加入先前所選的加入當前元素中

對於篩選或尋找後的元素,要加入先前所選元素時將會很有用。

選取所有div以及內部的p,並加上border類: 
$("div").find("p").andSelf().addClass("border");

end( )

回到最近的一個"破壞性"操作之前。即,將匹配的元素列表變為前一次的狀態。 

如果之前沒有破壞性操作,則返回一個空集。所謂的"破壞性"就是指任何改變所匹配的jQuery元素的操作。這包括在 Traversing 中任何返回一個jQuery對象的函數--‘add‘, ‘andSelf‘, ‘children‘, ‘filter‘, ‘find‘, ‘map‘, ‘next‘, ‘nextAll‘, ‘not‘, ‘parent‘, ‘parents‘, ‘prev‘, ‘prevAll‘, ‘siblings‘ and ‘slice‘--再加上 Manipulation 中的 ‘clone‘。

選取所有的p元素,尋找並選取span子項目,然後再回過來選取p元素: 

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

 

 

jQuery封裝集

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.