jQuery中筛选这块内容较多,就简单的说明一下说用方法和能有什么样效果,就不弄案例来说明了;
第一类:过滤
1.eq(index|-index)
$("p").eq(1).css("color","red")//选取第几个p改变字体颜色
2.first()
$("p").first().css("color","pink")//选取第一个p改变字体颜色
3.last()
$("p").last().css("color","green")//选取最后一个p改变字体颜色
4.hasClass(class)
$("p").click(function(){
if($(this).hasClass("protected")){
$(this).css("color","blue")
}
})
// 选取所有的p给当前p添加点击事件,给当前点击的p里面包含的protected类元素,添加字体颜色;
5.filter(expr|obj|ele|fn)
$("p").filter(".selected").css("color","blue");//筛选class属性值为selected的p标签改变字体颜色;
6.is(expr|obj|ele|fn)
//$("input[type='checkbox']").parent().is("form");//如果input[type='checkbox']的父元素是form,返回值true,或者添加方法;
7.map(callback)
$("p").append($("input").map(function(){
return $(this).val();
}).get().join(", ") );
//map():让每个input里的val值转换成数组,get():获取这些数组,join(, )并以逗号隔开,append():放置到p里的后方;
8.has(expr|ele)
$('li').has('ul').css('background-color', 'red');//选取所有的li筛选出来里面包含ul元素的li保留下来改变背景色;
9.not(expr|ele|fn)
$("p").not( $("#selected")[0] ).css("color","pink");//去除带有id名为selected的p,把其他的p改变字体颜色;
10.slice(start, [end])
$("p").slice(0, 2).wrapInner("<b></b>");//获取所有的p,从0开始选取2个使其里边的内容被b包裹;
第二类:查找
11.children([expr])
$("div").children().css("color","pink")//查找所有div中包含子元素的,改其字体颜色;
12.closest(expr,[context]|object|element)
$("li:first").closest("html").css("background","pink");//选取第一个li向父元素查找一层一层找直到找到我们想要找的HTML元素;
13.find(expr|obj|ele)
("p").find("span").css("color","red");//选取p元素向后代元素查找。找到我们想要的span元素改其字体颜色;
14.next([expr])
$("p").next().css("color","red");//选取p元素下边紧邻的兄弟元素改变字体颜色;
15.nextAll([expr])
$("div:first").nextAll().addClass("after");//选取第一个div元素下边所有的兄弟元素添加class类名"after";
16.nextUntil([exp|ele][,fil])
$('#term-2').nextUntil('dt').css('background-color', 'red');//选取id为term-2的元素之后dt之前的所有兄弟元素添加背景颜色;
17.offsetParent()
$("button").click(function(){
$("p").offsetParent().css("background-color","red");
});
//选取button添加点击事件,使其p元素找到带有定位的和最近的祖先元素添加背景色;
18.parent([expr])
$("p").parent().css('background-color', 'red');//选取所有的p使其父元素添加背景颜色;
19.parents([expr])
$("span").parents("body").css('background-color', 'red')//找到span元素的body祖先元素改变背景颜色;不包含根元素;
20.parentsUntil([expr|element][,filter])
$('li.item-a').parentsUntil('.level-1').css('background-color', 'red');//选取li.item-a元素找到他的父元素或祖先元素直到找到.level-1的元素为止改变背景颜色;
21.prev([expr])
$("p").prev().css('color', 'red')//选取p元素找到它前边紧邻的兄弟元素改变字体颜色;
22.prevAll([expr])
$("div:last").prevAll().addClass("before");//选取最后一个div找到它所有前边的同辈元素添加类名和值before;
23.prevUntil([exp|ele][,fil])
$('#term-2').prevUntil('dt').css('background-color', 'red');//选取#term-2的元素逐个往前找之前的兄弟元素直到知道到dt的元素他俩之间的兄弟元素给变背景颜色不包括他们两个元素;
24.siblings([expr])
$("div").siblings().css("color","blue")//选取div的元素使它的同辈元素给变字体颜色;
第三类:串联
25.add(expr|ele|html|obj[,con])
$("p").add("span").css("color","blue");//选取p元素add是和的意思就是说p和span;
26.andSelf()
$("div").find("p").andSelf().addClass("border");//选取div下的所有p,andSelf()给之前选取的div和p都加上类名/值
27.contents()
$("p").contents().not($("*")).wrap("<b/>");//查找p下边所有的子文本节点用b标签包裹起来;
28.end()
$("p").find("span").addClass("span").end().addClass("p1");//选取p元素找到下边的span元素,给span加上类名/值,然后在返回p元素添加类名/值;
希望看到这篇博客的同事都能够工作顺利。