juqery 學(xué)習(xí)之四 篩選過濾函數(shù)說明,學(xué)習(xí)jquery的朋友可以參考下。
eq(index)獲取第N個(gè)元素
這個(gè)元素的位置是從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
參數(shù)
index (Integer) :元素在jQuery對(duì)象中的索引
示例
獲取匹配的第二個(gè)元素
HTML 代碼:
<p> This is just a test.</p> <p> So is this</p>
jQuery 代碼:
$("p").eq(1)
結(jié)果:
[ <p> So is this</p> ]
--------------------------------------------------------------------------------------------------------------
hasClass(class)檢查當(dāng)前的元素是否含有某個(gè)特定的類,如果有,則返回true。
這其實(shí)就是 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
參數(shù)
class (String) : 用于匹配的類名
示例
給包含有某個(gè)類的元素進(jìn)行一個(gè)動(dòng)畫。
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)篩選出與指定表達(dá)式匹配的元素集合。
這個(gè)方法用于縮小匹配的范圍。用逗號(hào)分隔多個(gè)表達(dá)式
--------------------------------------------------------------------------------
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
參數(shù)
expr (Expression) : 表達(dá)式
示例
保留帶有select類的元素
HTML 代碼:
<p>Hello</p><p>Hello Again</p><p class="selected">And Again</p>
jQuery 代碼:
$("p").filter(".selected")
結(jié)果:
[ <p class="selected">And Again</p> ]
--------------------------------------------------------------------------------
保留第一個(gè)以及帶有select類的元素
HTML 代碼:
<p>Hello</p><p>Hello Again</p><p class="selected">And Again</p>
jQuery 代碼:
$("p").filter(".selected, :first")
結(jié)果:
[ <p>Hello</p>, <p class="selected">And Again</p> ]
--------------------------------------------------------------------------------------------------------------
filter(fn)篩選出與指定函數(shù)返回值匹配的元素集合
這個(gè)函數(shù)內(nèi)部將對(duì)每個(gè)對(duì)象計(jì)算一次 (正如 '$.each'). 如果調(diào)用的函數(shù)返回false則這個(gè)元素被刪除,否則就會(huì)保留。
--------------------------------------------------------------------------------
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
參數(shù)
fn (Function) : 傳遞進(jìn)filter的函數(shù)
示例
保留子元素中不含有ol的元素。
HTML 代碼:
<p><ol><li>Hello</li></ol></p><p>How are you?</p>
jQuery 代碼:
$("p").filter(function(index) {
return $("ol", this).length == 0;
});
結(jié)果:
[ <p>How are you?</p> ]
--------------------------------------------------------------------------------------------------------------
is(expr)用一個(gè)表達(dá)式來檢查當(dāng)前選擇的元素集合,如果其中至少有一個(gè)元素符合這個(gè)給定的表達(dá)式就返回true。
如果沒有元素符合,或者表達(dá)式無效,都返回'false'. 'filter' 內(nèi)部實(shí)際也是在調(diào)用這個(gè)函數(shù),所以,filter()函數(shù)原有的規(guī)則在這里也適用。
--------------------------------------------------------------------------------
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
參數(shù)
expr (String) :用于篩選的表達(dá)式
示例
由于input元素的父元素是一個(gè)表單元素,所以返回true。
HTML 代碼:
<form><input type="checkbox" /></form>
jQuery 代碼:
$("input[type='checkbox']").parent().is("form")
結(jié)果:
true
--------------------------------------------------------------------------------------------------------------
map(callback)將一組元素轉(zhuǎn)換成其他數(shù)組(不論是否是元素?cái)?shù)組)
你可以用這個(gè)函數(shù)來建立一個(gè)列表,不論是值、屬性還是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
參數(shù)
callback (Function) : 給每個(gè)元素執(zhí)行的函數(shù)
示例
把form中的每個(gè)input元素的值建立一個(gè)列表。
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(", ") );
結(jié)果:
[ <p>John, password, http://ejohn.org/</p> ]
--------------------------------------------------------------------------------------------------------------
not(expr)刪除與指定表達(dá)式匹配的元素
--------------------------------------------------------------------------------
Removes elements matching the specified expression from the set of matched elements.
返回值
jQuery
參數(shù)
expr (String, DOMElement, Array<DOMElement>) : 一個(gè)表達(dá)式、一個(gè)元素或者一組元素
示例
從p元素中刪除帶有 select 的ID的元素
HTML 代碼:
<p>Hello</p><p id="selected">Hello Again</p>
jQuery 代碼:
$("p").not( $("#selected")[0] )
結(jié)果:
[ <p>Hello</p> ]
-------------------------------------------------------------------------------------------------------------------------
slice(start,[end])選取一個(gè)匹配的子集
與原來的slice方法類似
--------------------------------------------------------------------------------
Selects a subset of the matched elements.
Behaves exactly like the built-in Array slice method.
返回值
jQuery
參數(shù)
start (Integer) :開始選取子集的位置。第一個(gè)元素是0.如果是負(fù)數(shù),則可以從集合的尾部開始選起。
end (Integer) : (可選) 結(jié)束選取自己的位置,如果不指定,則就是本身的結(jié)尾。
示例
選擇第一個(gè)p元素
HTML 代碼:
<p>Hello</p><p>cruel</p><p>World</p>
jQuery 代碼:
$("p").slice(0, 1).wrapInner("<b></b>");
結(jié)果:
[ <p><b>Hello</b></p> ]
--------------------------------------------------------------------------------
選擇前兩個(gè)p元素
HTML 代碼:
<p>Hello</p><p>cruel</p><p>World</p>
jQuery 代碼:
$("p").slice(0, 2).wrapInner("<b></b>");
結(jié)果:
[ <p><b>Hello</b></p>,<p><b>cruel</b></p> ]
--------------------------------------------------------------------------------
只選取第二個(gè)p元素
HTML 代碼:
<p>Hello</p><p>cruel</p><p>World</p>
jQuery 代碼:
$("p").slice(1, 2).wrapInner("<b></b>");
結(jié)果:
[ <p><b>cruel</b></p> ]
--------------------------------------------------------------------------------
只選取第二第三個(gè)p元素
HTML 代碼:
<p>Hello</p><p>cruel</p><p>World</p>
jQuery 代碼:
$("p").slice(1).wrapInner("<b></b>");
結(jié)果:
[ <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>");
結(jié)果:
[ <p><b>World</b></p> ]
新聞熱點(diǎn)
疑難解答
圖片精選