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> ]
相關文章
jQuery創(chuàng)建插件的代碼分析，需要的朋友可以參考下。2011-04-04
這篇文章介紹了jquery事件綁定的方法，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-03-03
這篇文章主要為大家詳細介紹了jQuery插件ajaxFileUpload使用教程，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
本篇文章主要是對Jquery獲取元素的父容器對象的示例代碼進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
老生常談jquery中detach()和remove()的區(qū)別
下面小編就為大家?guī)硪黄仙Ｕ刯query中detach()和remove()的區(qū)別。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
這篇文章主要介紹了jQuery簡單設置文本框回車事件的方法,涉及jQuery簡單事件綁定與響應操作相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2016-08-08
jQuery EasyUI datagrid在翻頁以后仍能記錄被選中行的實現(xiàn)代碼
這篇文章主要介紹了jQuery EasyUI datagrid在翻頁以后仍能記錄被選中行的實現(xiàn)代碼的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-08-08
jQuery源碼分析-03構(gòu)造jQuery對象-源碼結(jié)構(gòu)和核心函數(shù)
jQuery源碼分析-03構(gòu)造jQuery對象-源碼結(jié)構(gòu)和核心函數(shù)，需要的朋友可以參考下。2011-11-11
在Jquery中，$是JQuery的別名，所有使用$的地方也都可以使用JQuery來替換,下面為大家介紹下如何解決jquery中美元符號命名沖突問題2014-01-01
這篇文章主要介紹了jQuery基于Ajax方式提交表單功能,結(jié)合實例形式分析了jQuery使用ajax方式提交表單的具體步驟與常見操作技巧,需要的朋友可以參考下2017-02-02