juqery 學習之四 篩選過濾
更新時間：2010年11月30日 16:21:03 作者：
juqery 學習之四 篩選過濾函數(shù)說明，學習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
參數(shù)
index (Integer) :元素在jQuery對象中的索引
示例
獲取匹配的第二個元素
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)
檢查當前的元素是否含有某個特定的類，如果有，則返回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
參數(shù)
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 });
});
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
參數(shù)
expr (Expression) : 表達式
示例
保留帶有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> ]
保留第一個以及帶有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ù)返回值匹配的元素集合
這個函數(shù)內(nèi)部將對每個對象計算一次 (正如 '$.each'). 如果調(diào)用的函數(shù)返回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
參數(shù)
fn (Function) : 傳遞進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;
});
return $("ol", this).length == 0;
});
結(jié)果:
[ <p>How are you?</p> ]
--------------------------------------------------------------------------------------------------------------
is(expr)
用一個表達式來檢查當前選擇的元素集合，如果其中至少有一個元素符合這個給定的表達式就返回true。
如果沒有元素符合，或者表達式無效，都返回'false'. 'filter' 內(nèi)部實際也是在調(diào)用這個函數(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) :用于篩選的表達式
示例
由于input元素的父元素是一個表單元素，所以返回true。
HTML 代碼:
<form><input type="checkbox" /></form>
jQuery 代碼:
$("input[type='checkbox']").parent().is("form")
結(jié)果:
true
--------------------------------------------------------------------------------------------------------------
map(callback)
將一組元素轉(zhuǎn)換成其他數(shù)組（不論是否是元素數(shù)組）
你可以用這個函數(shù)來建立一個列表，不論是值、屬性還是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) : 給每個元素執(zhí)行的函數(shù)
示例
把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>
<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(", ") );
return $(this).val();
}).get().join(", ") );
結(jié)果:
[ <p>John, password, http://ejohn.org/</p> ]
--------------------------------------------------------------------------------------------------------------
not(expr)
刪除與指定表達式匹配的元素
Removes elements matching the specified expression from the set of matched elements.
返回值
jQuery
參數(shù)
expr (String, DOMElement, Array<DOMElement>) : 一個表達式、一個元素或者一組元素
示例
從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])
選取一個匹配的子集
與原來的slice方法類似
Selects a subset of the matched elements.
Behaves exactly like the built-in Array slice method.
返回值
jQuery
參數(shù)
start (Integer) :開始選取子集的位置。第一個元素是0.如果是負數(shù)，則可以從集合的尾部開始選起。
end (Integer) : (可選) 結(jié)束選取自己的位置，如果不指定，則就是本身的結(jié)尾。
示例
選擇第一個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> ]
選擇前兩個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> ]
只選取第二個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> ]
只選取第二第三個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> ]
相關(guān)文章
客戶端用一個html頁面調(diào)用一個ashx文件（一般http處理程序），返回 json格式的自定義對象2010-04-04
下面簡單介紹一下jQuery的一些特性和用法，對于學習jquery的朋友有不少幫助。2010-01-01
這篇文章主要為大家詳細介紹了jQuery基本篩選選擇器實例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
jQuery中的bind綁定事件與文本框改變事件的臨時解決方法
暫時沒有想到什么好的解決辦法，我現(xiàn)在加了個瀏覽器判斷非ie的話就注冊blur事件，這樣有個問題就是blur實在別的控件活動焦點的時候，txtStation控件注冊的方法是為了填充它緊挨著的一個下拉列表2010-08-08
這篇文章主要介紹了jquery實現(xiàn)表格本地排序的方法,實例分析了jQuery操作數(shù)組實現(xiàn)本地表格排序的技巧,需要的朋友可以參考下2015-03-03
可兼容IE的獲取及設(shè)置cookie的jquery.cookie函數(shù)方法
在使用IE來測試的時候，發(fā)現(xiàn)Discuz中的common.js里面的getcookie和setcookie這兩個方法子啊IE下不起作用，因此有了jquery.cookie.js的由來，感興趣的朋友可以參考下2013-09-09
這篇文章主要是對jquery合并內(nèi)容相同的單元格示例代碼進行了介紹。需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
語法著色大家對它都不陌生吧，下面為大家介紹的是jquery-syntax動態(tài)語法著色的具體實現(xiàn),需要的朋友可以參考下2014-05-05
這篇文章主要介紹了jQuery模擬黑客帝國矩陣效果的方法,實例分析了jQuery操作頁面元素實現(xiàn)動畫效果的技巧,需要的朋友可以參考下2015-06-06
這篇文章主要介紹了使用jquery組件qrcode生成二維碼及應用指南,非常全面實用，需要的朋友可以參考下2015-02-02