- 父元素遍历
1)parent() 返回被选元素的直接父元素
2)parents() 返回被选元素的所有父元素(祖先元素)
3)parentsUntil() 返回被选元素到某个标签之间(不包括该标签)的所有父元素
var ele = $(".kid").parent();//son1
var eles = [];
eles = $(".kid").parents();//div、div、body、html
$.each(eles,function(index,item){//tagName是标签名,item可以直接用item.id
console.info(item.tagNmae+":"+item.id);
})
eles = $("#s1").parentsUntil("body");//3个,id为k3、son1、p1 ,注意,没有包括body
<div class="son" id="son1">
<div class="kid" id="k1"></div>
<div class="kid" id="k2"></div>
<div class="kid" id="k3">
<span id="s1"></span>
</div>
</div>
- 子元素遍历
1)children() 返回被选元素的所有直接子元素,DOM树只会向下一层
只会返回儿子元素,不会返回孙子元素。
2)find() 返回被选元素的指定的后代元素,如果不指定,返回为空
var eles = [];
eles = $("#son1").children();
$.each(eles,function(index,item){
console.info(item.id);//k1 k2 k3
})
eles = $("#son1").find("span");//id为s1
eles = $("#son1").find("div[class = kid]");//3个 k1 k2 k3
<div class="son" id="son1">
<div class="kid" id="k1"></div>
<div class="kid" id="k2"></div>
<div class="kid" id="k3">
<span id="s1"></span>
</div>
</div>
- 同胞元素(兄弟元素)遍历
3-1 向后遍历兄弟元素
1)next()返回被选元素的下一个兄弟元素,只返回一个元素
2)nextAll()返回被选元素下面的的所有兄弟元素
3)nextUntil()返回被选元素到指定标签元素之间的兄弟元素(不包括指定标签;如果指定标签在被选元素上面,不会输出)
3-2 向前遍历兄弟元素
1)prev() 返回被选元素的上一个兄弟元素,只返回一个
2)prevAll() 返回被选元素上面的的所有兄弟元素
3)prevUntil() 返回被选元素到指定标签元素之间的兄弟元素(不包括指定标签;如果指定标签在被选元素下面,不会被输出)
3-3 siblings() 遍历所有同胞元素(包括上和下)
//向下
var ele = $("div[id = k1]").next();// k2
var eles = [];
eles = $("#k2").nextAll();//k3
eles = $("#k1").nextUntil("#k3");//k2
//向上
ele = $("#k3").prev();//k2
eles = $("#k3").prevAll();//k1 k2
eles = $("#k3").prevUntil("#son1");//k1 k2
eles = $("#k2").siblings();//k1 k3
<div class="son" id="son1">
<div class="kid" id="k1"></div>
<div class="kid" id="k2"></div>
<div class="kid" id="k3">
<span id="s1"></span>
</div>
</div>
- 过滤
4-1 缩小 搜索元素范围
1)first() 返回被选元素的首个元素
2)last() 返回被选元素的最后一个元素
3)eq() 返回被选元素指定下标的元素(元素下标从0开始)
var ele = $(".kid").first();//k1
ele = $(".kid").last();//k3
ele = $(".kid").eq(1);//k2
<div class="son" id="son1">
<div class="kid" id="k1"></div>
<div class="kid" id="k2"></div>
<div class="kid" id="k3">
<span id="s1"></span>
</div>
</div>
4-2 过滤器
1)filter() ,规定一个标准,不符合标准的元素会被过滤掉
2)not() 返回不匹配标准的所有元素
3)is()判断所选元素中,是否有满足条件的元素,返回值为true、false
var eles = [];
eles = $("div").filter("div[class = kid]");//选择所有div标签中,满足class等于kid的标签
$.each(eles,function(index,item){
console.info(item.tagName+":"+item.id);// k1 k2 k3
})
eles = $("div").not("div[class = kid]");//son1
var tar = $("div").is(":hidden");//true
<div class="son" id="son1">
<div class="kid" id="k1"></div>
<div class="kid" id="k2"></div>
<div class="kid" id="k3" style="display:none;">
<span id="s1"></span>
</div>
</div>