A DOM树遍历

  1. 父元素遍历
    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. 子元素遍历
    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>
  1. 同胞元素(兄弟元素)遍历
    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>
  1. 过滤
    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>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值