篩選
1.過濾
?? ?1.1 eq(index|-index) 獲取第N個元素
?? ??? ?index 從0開始算
??????? -index 從最后一個元素算，從1開始
??????? $("li").eq(2);
??????? $("li").eq(-2);
??? 1.2 first() 獲取第一個元素
?? ??? ?$("li").first();
??? 1.3 last() 獲取最后一個元素
?? ??? ?$("li").last();
??? 1.4 hasClass(class) 檢查當前的元素是否含有某個特定的類。等同于 is("." + class)。
?? ??? ?$("li").haClass("active");
??? 1.5 filter(expr|obj|ele|fn) 篩選出與指定表達式匹配的元素集合，用于縮小匹配的范圍
?? ??? ?$("p").filter(".selected");
??????? $("p").filter("selected,:first");
??????? $("p").filter(function(index){?? ?//保留子元素中不含有ol的元素
?????? ??? ?return $("ol",this).length==0; ?
??????? });
??? 1.6?? ?is(expr|obj|ele|fn) 根據選擇器、DOM元素或 jQuery 對象來檢測匹配元素集合，如果其中至少有一個元素符合這個給定的表達式就返回true。
?? ??? ?$("p").parent().is("div");
??????? $("p").is(function(index){
?????? ??? ?return $("span",this).length==0;
??????? });
??? 1.7 map(callback) 將一組元素轉換成其他數組（不論是否是元素數組），用這個函數來建立一個列表，不論是值、屬性還是CSS樣式，或者其他特別形式。
?? ??? ?$("p").append($("input").map(function(){
?????? ??? ?return $(this).val();
??????? }).get().join(", "));? //數組按照join的參數連接起來
??? 1.8 has(expr|ele) 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
?? ??? ?$("li").has("ul").css("color","red")
??? 1.9 not(expr|ele|fn) 刪除與指定表達式匹配的元素
?? ??? ?$("p").not(".active");
??????? $("p").not(function(index,element){
?????? ??? ?return this.id==this.className;
??????? });
??? 1.10 slice(start,[end]) 選取一個匹配的子集
?? ??? ? $("p").slice(0,2);
???????? $("p").slice(1);
???????? $("p").slice(-1);
2.查找
?? ?2.1 children([expr]) 取得一個包含匹配的元素集合中每一個元素的所有子元素的元素集合
?? ??? ?$("p").children();
??????? $("p").children(".active")
??? 2.2 find() 搜索所有與指定表達式匹配的元素。這個函數是找出正在處理的元素的后代元素的好方法
?? ??? ?$("p").find("a");
??? 2.3 next([expr]) 取得一個包含匹配的元素集合中每一個元素緊鄰的后面同輩元素的元素集合
?? ??? ?$("p").next();
??????? $("p").next(".selected");
??? 2.4 nextAll([expr]) 查找當前元素之后所有的同輩元素
?? ??? ?$("p").nextAll();
??? 2.5?? ?nextUntil([exp|ele][,filter]) 查找當前元素之后所有的同輩元素，直到遇到匹配的那個元素為止
?? ??? ?$("p").nextUntil("div");
??????? $("p").nextUntil("div",".active"); //只有class為active的元素并且在div元素之前才能被選中
??? 2.6?? ?parent([expr]) 取得一個包含著所有匹配元素的唯一父元素的元素集合
?? ??? ?$("p").parent();
??????? $("p").parent(".active");
??? 2.7 parents([expr]) 取得一個包含著所有匹配元素的祖先元素的元素集合（不包含根元素)
?? ??? ?$("p").parents();
??????? $("p").parents("div");
??????? $("p").parents().map(function(){return this.tagName;}).get().join(", "); //this.tagName==$(obj).attr("tagName");
??? 2.8 parentsUntil([expr|element][,filter]) 查找當前元素的所有的父輩元素，直到遇到匹配的那個元素為止。
?? ??? ?$("p").parentsUntil("div");
??? 2.9 prev([expr]) 取得一個包含匹配的元素集合中每一個元素緊鄰的前一個同輩元素的元素集合
?? ??? ?$("p").prev();
??????? $("p").prev(".selected");
??? 2.10 prevAll([expr]) 查找當前元素之前所有的同輩元素
?? ??? ?$("p").prevAll();
??? 2.11 prevUntil([expr|ele][,filter]) 查找當前元素之前所有的同輩元素，直到遇到匹配的那個元素為止
?? ??? ?$("p").prevUntil("div");
??? 2.12 siblings([expr]) 取得一個包含匹配的元素集合中每一個元素的所有唯一同輩元素的元素集合
?? ??? ?$("p").siblings();
??????? $("p").siblings(".active");
??? 2.13 offsetParent() 返回第一個匹配元素用于定位的父節點,這返回父元素中第一個其position設為relative或者absolute的元素。此方法僅對可見元素有效
?? ??? ?$("p").offsetParent();
3.串聯
?? ?3.1 add(expr|ele|html|obj[,con]) 把與表達式匹配的元素添加到jQuery對象中。這個函數可以用于連接分別與兩個表達式匹配的元素結果集。
?? ??? ?$("p").add("span").css("color","red");p與span元素中的文字顏色變為紅色
??? 3.2 andSelf() 加入先前所選的 加入當前元素中
?? ??? ?$("p").find("span").css("color","red");span和p中的文字都將變為紅色
??? 3.3 contents() 查找匹配元素內部所有的子節點（包括文本節點）。
?? ??? ?$("p").contents().not("[nodeType=1]").wrap("<b />")
??????? nodeType=1? 代表元素
??????? nodeType=2? 代表屬性
??????? nodeType=3? 代表文本內容
??????? nodeType=8? 代表注釋
??? 3.4 end() 回到最近的一個"破壞性"操作之前。即，將匹配的元素列表變為前一次的狀態
?? ??? ?$("p").find("span").end().css("color","red");//給p中的文字加上紅色

轉載于:https://www.cnblogs.com/ricesm/p/5025995.html

總結

以上是生活随笔為你收集整理的jQuery 筛选的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。