DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> juqery 學習之四 篩選過濾
juqery 學習之四 篩選過濾
編輯:JQuery特效代碼     

eq(index)

獲取第N個元素 這個元素的位置是從0算起。
Reduce the set of matched elements to a single element. The position of the element in the set of matched elements starts at 0 and goes to length - 1.

返回值

jQuery

參數

index (Integer) :元素在jQuery對象中的索引

示例

獲取匹配的第二個元素

HTML 代碼:

<p> This is just a test.</p> <p> So is this</p>

jQuery 代碼:

$("p").eq(1)

結果:

[ <p> So is this</p> ]
--------------------------------------------------------------------------------------------------------------

hasClass(class)

檢查當前的元素是否含有某個特定的類,如果有,則返回true。 這其實就是 is("." + class)。
Checks the current selection against a class and returns true, if at least one element of the selection has the given class. This is an alternative to is("." + class).

返回值

Boolean

參數

class (String) : 用於匹配的類名

示例

給包含有某個類的元素進行一個動畫。

HTML 代碼:

<div class="protected"></div><div></div>

jQuery 代碼:

$("div").click(function(){
if ( $(this).hasClass("protected") )
$(this)
.animate({ left: -10 })
.animate({ left: 10 })
.animate({ left: -10 })
.animate({ left: 10 })
.animate({ left: 0 });
});
--------------------------------------------------------------------------------------------------------------

filter(expr)

篩選出與指定表達式匹配的元素集合。 這個方法用於縮小匹配的范圍。用逗號分隔多個表達式
Removes all elements from the set of matched elements that do not match the specified expression(s). This method is used to narrow down the results of a search. Provide a comma-separated list of expressions to apply multiple filters at once.

返回值

jQuery

參數

expr (Expression) : 表達式

示例

保留帶有select類的元素

HTML 代碼:

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

jQuery 代碼:

$("p").filter(".selected")

結果:

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

保留第一個以及帶有select類的元素

HTML 代碼:

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

jQuery 代碼:

$("p").filter(".selected, :first")

結果:

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

filter(fn)

篩選出與指定函數返回值匹配的元素集合 這個函數內部將對每個對象計算一次 (正如 '$.each'). 如果調用的函數返回false則這個元素被刪除,否則就會保留。
Removes all elements from the set of matched elements that does not match the specified function. The function is called with a context equal to the current element (just like '$.each'). If the function returns false, then the element is removed - anything else and the element is kept.

返回值

jQuery

參數

fn (Function) : 傳遞進filter的函數

示例

保留子元素中不含有ol的元素。

HTML 代碼:

<p><ol><li>Hello</li></ol></p><p>How are you?</p>

jQuery 代碼:

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

結果:

[ <p>How are you?</p> ]
--------------------------------------------------------------------------------------------------------------

is(expr)

用一個表達式來檢查當前選擇的元素集合,如果其中至少有一個元素符合這個給定的表達式就返回true。 如果沒有元素符合,或者表達式無效,都返回'false'. 'filter' 內部實際也是在調用這個函數,所以,filter()函數原有的規則在這裡也適用。
Checks the current selection against an expression and returns true, if at least one element of the selection fits the given expression. If no element fits, or the expression is not valid, then the response will be 'false'. 'filter' is used internally, therefore all rules that apply there apply here, as well.

返回值

Boolean

參數

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

示例

由於input元素的父元素是一個表單元素,所以返回true。

HTML 代碼:

<form><input type="checkbox" /></form>

jQuery 代碼:

$("input[type='checkbox']").parent().is("form")

結果:

true
--------------------------------------------------------------------------------------------------------------

map(callback)

將一組元素轉換成其他數組(不論是否是元素數組) 你可以用這個函數來建立一個列表,不論是值、屬性還是CSS樣式,或者其他特別形式。這都可以用'$.map()'來方便的建立。
Translate a set of elements into another set of values (which may, or may not, be elements). You could use this to build lists of values, attributes, css values - or even perform special, custom, selector transformations. This is provided as a convenience method for using '$.map()'.

返回值

jQuery

參數

callback (Function) : 給每個元素執行的函數

示例

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

HTML 代碼:

<p><b>Values: </b></p>
<form>
<input type="text" name="name" value="John"/>
<input type="text" name="password" value="password"/>
<input type="text" name="url" value="http://ejohn.org/"/>
</form>

jQuery 代碼:

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

結果:

[ <p>John, password, http://ejohn.org/</p> ]
--------------------------------------------------------------------------------------------------------------

not(expr)

刪除與指定表達式匹配的元素
Removes elements matching the specified expression from the set of matched elements.

返回值

jQuery

參數

expr (String, DOMElement, Array<DOMElement>) : 一個表達式、一個元素或者一組元素

示例

從p元素中刪除帶有 select 的ID的元素

HTML 代碼:

<p>Hello</p><p id="selected">Hello Again</p>

jQuery 代碼:

$("p").not( $("#selected")[0] )

結果:

[ <p>Hello</p> ] -------------------------------------------------------------------------------------------------------------------------

slice(start,[end])

選取一個匹配的子集 與原來的slice方法類似
Selects a subset of the matched elements. Behaves exactly like the built-in Array slice method.

返回值

jQuery

參數

start (Integer) :開始選取子集的位置。第一個元素是0.如果是負數,則可以從集合的尾部開始選起。

end (Integer) : (可選) 結束選取自己的位置,如果不指定,則就是本身的結尾。

示例

選擇第一個p元素

HTML 代碼:

<p>Hello</p><p>cruel</p><p>World</p>

jQuery 代碼:

$("p").slice(0, 1).wrapInner("<b></b>");

結果:

[ <p><b>Hello</b></p> ]

選擇前兩個p元素

HTML 代碼:

<p>Hello</p><p>cruel</p><p>World</p>

jQuery 代碼:

$("p").slice(0, 2).wrapInner("<b></b>");

結果:

[ <p><b>Hello</b></p>,<p><b>cruel</b></p> ]

只選取第二個p元素

HTML 代碼:

<p>Hello</p><p>cruel</p><p>World</p>

jQuery 代碼:

$("p").slice(1, 2).wrapInner("<b></b>");

結果:

[ <p><b>cruel</b></p> ]

只選取第二第三個p元素

HTML 代碼:

<p>Hello</p><p>cruel</p><p>World</p>

jQuery 代碼:

$("p").slice(1).wrapInner("<b></b>");

結果:

[ <p><b>cruel</b></p>, <p><b>World</b></p> ]

Selects all paragraphs, then slices the selection to include only the third element.

HTML 代碼:

<p>Hello</p><p>cruel</p><p>World</p>

jQuery 代碼:

$("p").slice(-1).wrapInner("<b></b>");

結果:

[ <p><b>World</b></p> ]
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved