jQuery 筛选
筛选
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中的文字加上红色