一、遍历筛选元素的方法
find()
find(selector)方法实现的是找出正在处理的元素的后代元素的功能,如:
<script type="text/javascript">
$("#btn2").click(function (){
$(".demo").find("span").css({
"border":"2px solid red"});
});
</script>
找出class为demo的元素底下的span标签,并设置相应的css样式:
children()
children(selector)方法实现的功能与find()类似,但是不同的是,children()方法取得的是子元素的合集,并且只能找到DOM树的下一级子元素,例如这里像上述代码设置demo底下的span标签:
<script type="text/javascript">
$("#btn2").click(function (){
$(".demo").children("span").css({
"border":"2px solid red"});
});
</script>
这里就没有办法变色,因为span不是demo的下一级子元素,不加参数默认所有子元素都获取到:
<script type="text/javascript">
$("#btn2").click(function (){
$(".demo").children().css({
"border":"2px solid red"});
});
</script>
siblings()
siblings(selector)方法实现的是筛选同辈元素的功能,例子如下:
<script type="text/javascript">
$("#btn2").click(function (){
$(".demo1").siblings().css({
"border":"2px solid red"});
});
</script>
同样的,siblings()方法也可以添加参数,用于匹配指定的元素。
first()
first()方法实现的是获取匹配的第一个元素,相当于:first选择器,如:
<script type="text/javascript">
$("#btn2").click(function (){
$("span").first().css({
"border":"2px solid red"});
$("li").last().css({
"border":"2px solid red"});
});
</script>
匹配到的就是第一个span元素,last()实现的就是匹配最后一个元素,结果如下:
eq()
eq(index)方法实现的是获取第N个元素,与选择器:eq(index)类似,如:
<script type="text/javascript">
$("#btn2").click(function (){
$("li").eq(0).css({
"border":"2px solid red"});
//注意这里的索引是和数组一样,从0开始
});
</script>
parent()
parent(selector)方法实现的是获取父元素的功能,但是只能沿DOM树向上遍历一级,若要再往上遍历,则需要使用parents()方法,如: