版权所有 © 2007-2017 致远建站 冀ICP备14009060号-1

3-1.Jquery中筛选元素方法

致远建站 > 网站前端开发 > 前端开发教程 > jquery教程教程 > 3-1.Jquery中筛选元素方法
2017-05-23 81

html结构

 <div>
	<p class="p1">我是第一个P</p>
	<p class="p2">我是第二个<span>P</span></p>
	<p class="p3">我是第三个P<span>这是个span标签</span></p>
	<p class="p4">我是第四个P<strong>Sth. here</strong></p>
</div>


一、eq()
筛选指定索引号的元素
语法:selector.eq(index)
//索引号从0开始,若为负值,则从最后一个开始倒数,最后一个

 $('div p').css('background','#fc0').eq(1).css('color','#fff');


二、first()
筛选出第一个匹配的元素
语法:selector.first()//等价于eq(0)

 $('div p').css('background','#fc0').first().css('color','#fff');


三、last()
筛选出最后一个匹配的元素
语法:selector.last()

 $('div p').css('background','#fc0').last().css('color','#fff');


四、hasClass()
检查匹配的元素是否含有指定的类,返回布尔值。
语法:selector.hasClass(class)
//class为类别名,返回布尔值。

 if($('div p:eq(2)').hasClass('p2')){
    alert('wo you');
}


五、filter()
筛选出与指定表达式匹配的元素集合
语法:selector.filter(expr|obj|ele|fn)

 $("p").css('background','#fc0').filter(".p2, :first").css('color','#fff');//保留第一个以及带有p2类的元素
$("p").filter(function(index) {return $("span", this).length;}).css('background','#f60');//选中包含span子元素的p标签


六、is()
检查元素是否能与参数里的规则匹配上,返回布尔值。
语法:is(expr|obj|ele|fn)  expr:匹配表达式|obj:jQuery对象,用于匹配现有元素 | DOM:用于匹配的DOM元素 | function返回值作为匹配条件

 if($("p").first().is(".p2")){
    alert("不会弹出,因为第一个P的class不等于p2");
}


七、map()
将一组元素转换成其他数组(不论是否是元素数组)
语法:selector.map(fn);

 $("p").map(function(){
    return $(this).attr("class");
}).get().join(", ");


八、has()
筛选出包含指定子元素的元素
语法:has(expr|ele)  expr:选择表达式 | DOM元素选择

 $('p').css('background','#fc0').has('span').css('color','#fff');


九、not()
排除能够被参数中匹配的元素
语法:not(expr|ele|fn)  expr:选择表达式 | DOM元素选择 | fn的作用还不清楚

 $('p').css('background','#fc0').not('.p2').css('color','#fff');


十、slice()
从指定索引开始截取元素
语法:slice(start, [end])   start位置, end可选,结束位置,不包含结束位置那个。如果不指定,则匹配到最后一个。

 $('p').css('background','#fc0').slice(1,3).css('color','#fff');


十一、children()
取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。
语法:children([expr]);  获取指定元素的资源,expr为子元素筛选条件

 $('p').css('background','#fc0').children().css('color','#fff');//所有子元素
$('p').css('background','#fc0').children('span').css('color','#fff');//子元素span


十二、closest()
从当前元素开始,返回最先匹配到的符合条件的父元素
语法:closest(expr|obj|ele);

 $('span').css('color','#f00').closest('p').css('background','#fc0');


十三、find()
从指定元素中查找子元素
语法:find(expr|obj|ele)  expr:匹配表达式 | obj用于匹配的jQuery对象 | DOM元素

 $('div p:eq(1)').css('color','#f00').find('span').css('background','#fc0');


十四、next()
获取指定元素的下一个兄弟元素
语法:next(expr)  expr:可选,筛选条件,如果下一个兄弟元素不符合改条件,则返回空。

 $('.p1').css('color','#f00').next().css('color','#fc0').next('.p4').css('color','#ff0');


十五、nextAll()
获取其后的所有兄弟元素
语法:nextAll(expr)  expr:可选,筛选条件,获取其后符合expr条件的所有兄弟元素

 $('.p1').css('color','#f00').nextAll().css('color','#fc0');


十六、nextUntil()
获取其后的元素,直到参数能匹配上的为止,不包括结束条件那个
语法:nextUntil([expr|ele][,fil])  expr筛选表达式 | DOM元素筛选,注意不包括参数里的那一个

 $('.p1').css('color','#f00').nextUntil('.p4').css('color','#fc0');


十七、parent()
取得一个包含着所有匹配元素的唯一父元素的元素集合
语法:parent(expr)  expr为筛选条件,如果直接父元素不符合条件,则不返回任何元素(无论它的祖先是否具有能与expr匹配的)

 $('span').css('color','#f00').parent('p').css('background','#fc0');


十九、parents()
获取指定元素的所有祖先元素,一直到<body></body>
语法:parents(expr)  expr为筛选条件,如果某个祖先元素不符合expr则排除

 $('span').css('color','#f00').parents('div').css('background','#fc0');


二十、parentsUntil()
获取指定元素的祖先元素,直到参数里能匹配到的为止
语法:parentsUntil(expr)  expr为停止参数,一直匹配到expr为止,同时参数的条件是不会被匹配中的。

 $('span').css('color','#f00').parentsUntil('div').css('background','#fc0');


二十一、prev()
获取指定元素的前一个兄弟元素
语法:prev(expr)    expr:可选。当上一个兄弟元素不符合参数中的条件时,不返回任何元素。

 $('.p3').css('color','#f00').prev().css('color','#fc0');


二十二、prevAll()
获取指定元素前面的所有兄弟元素
语法:prevAll(expr)  expr:可选,排除所有不能够被expr匹配上的元素
复制代码

 $('.p3').css('color','#f00').prevAll().css('color','#fc0');


二十三、prevUntil()
获取指定元素前面的所有兄弟元素,直到参数里的条件能够匹配到的。 注意参数条件本身不会被匹配
语法:prevUntil([expr|ele][,fil])  expr匹配表达式 | DOM元素匹配

 $('.p3').css('color','#f00').nextUntil('.p1').css('color','#fc0');


二十四、siblings()
获取指定元素的兄弟元素,不分前后
语法:siblings(expr);  expr为筛选条件,不符合条件的不会选中

 $('.p3').css('color','#f00').siblings().css('color','#fc0');//所有兄弟元素
$('.p3').css('color','#f00').siblings('.p2').css('color','#fc0');//类名为p2的兄弟


二十五、add()
将选中的元素添加到jQuery对象集合中
语法:add(expr|elements|html|jQueryObject)  expr:选择器表达式 | DOM表达式 | Html片段 | jQuery对象,将jQuery对象集合一起方便操作;

 $('.p1').add('.a span').css('color','#fc0');


二十六、andSelf()
将自身加到选中的jQuery集合中,以方便一次性操作
语法:andSelf()  此方法无参数

 $(".p2").nextAll().andSelf().css("background-color","red");


二十七、end()
将改变当前选择器选中的操作回退为上一个状态。
语法:end()   此方法没有参数

 $(".p2").next().css().end().css("background-color","red");


二十八、contents
查找匹配元素内部所有的子节点(包括文本节点)。
语法:contents()

 $(".p2").contents().not("[nodeType=1]").wrap("<b>");

本节所讲到的筛选元素的方法很多,大家重点掌握加粗的部分即可,其他的可以仅作了解。

这个还不错哦~赏你点小钱吧!
支付宝打赏
微信打赏