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