jQuery 遍历

通过 jQuery 遍历从被选(当前的)元素开始,在树中向上移动(祖先),向下移动(子孙),水平移动(同胞)。这种移动被称为对 DOM 进行遍历。

 

 一、向上遍历 DOM 树

 未使用jQuery之前样式,后续css与html一致

(1)元素的直接父元素:parent(),设置span父元素的背景色为黄色

<style>
	body{
		margin: 100px;
	}
	div{
		width: 200px;
		height: 200px;
		border: 1px solid #ccc;
	}
	ul{
		width: 100px;
		height: 100px;
		padding: 0;
		margin: 50px auto;
		border: 1px solid #ccc;
	}
	li{
		list-style: none;
		width: 60px;
		height: 20px;
		margin: 20px auto;
		background-color: red;
		border: 1px solid #ccc;
	}
</style>
<body>
<div>
	这是div
	<ul>
		<li>
			<span>span</span>
		</li>
		<li>
			<a>这是a</a>
		</li>
	</ul>
</div>
</body>
<script>
$(document).ready(function(){
  $("span").parent().css("background-color","yellow");
});
</script>

(2)元素的所有祖先元素:parents()

<script>
$(document).ready(function(){
  $("span").parents().css("background-color","yellow");
});
</script>

(3)介于两个给定元素之间的所有祖先元素:parentsUntil(),介于div与span之间的祖先元素

二、向下遍历 DOM 树

(1)元素的所有直接子元素:children(),ul的子元素

<script>
$(document).ready(function(){
  $("ul").children().css("background-color","yellow");
});
</script>

<body>
<div>
	这是div
	<ul>
		<li class="first">
			<span>span</span>
		</li>
		<li>
			<a>这是a</a>
		</li>
	</ul>
</div>
</body>

<script>
$(document).ready(function(){
  $("ul").children(".first").css("background-color","yellow");
});
</script>

(2)元素的后代元素,一路向下直到最后一个后代:find()

<script>
$(document).ready(function(){
  $("div").find("a").css("background-color","yellow");
});
</script>

<script>
$(document).ready(function(){
  //返回 <div> 的所有后代
  $("div").find("*").css("background-color","yellow");
});
</script>

三、DOM 树进行水平遍历

(1)元素的所有同胞元素:siblings()

<style>
	body{
		margin: 100px;
	}
	div{
		width: 200px;
		height: 350px;
		border: 1px solid #ccc;
	}
	ul{
		width: 100px;
		height: 250px;
		padding: 0;
		margin: 50px auto;
		border: 1px solid #ccc;
	}
	li{
		list-style: none;
		width: 60px;
		height: 20px;
		margin: 20px auto;
		background-color: red;
		border: 1px solid #ccc;
	}
</style>
<body>
<div>
	这是div
	<ul>
		<li class="first">
			<span>span</span>
		</li>
		<li>
			<a>这是a</a>
		</li>
		<li>
			<a>1</a>
		</li>
		<li>
			<a>2</a>
		</li>
		<li>
			<a>3</a>
		</li>
	</ul>
</div>
</body>
<script>
$(document).ready(function(){
	$("li").siblings().css("background-color","yellow");
});
</script>

 

(2)元素的下一个同胞元素:next()

$(document).ready(function(){
	$(".first").next().css("background-color","yellow");
});
</script>

(3)元素的所有跟随的同胞元素:nextAll()

<script>
$(document).ready(function(){
	$(".first").nextAll().css("background-color","yellow");
});
</script>

(4)介于两个给定参数之间的所有跟随的同胞元素:nextUntil()

<body>
<div>
	这是div
	<ul>
		<li class="first">
			<span>span</span>
		</li>
		<li>
			<a>这是a</a>
		</li>
		<li>
			<a>1</a>
		</li>
		<li class="second">
			<a>2</a>
		</li>
		<li>
			<a>3</a>
		</li>
	</ul>
</div>
</body>
<script>
$(document).ready(function(){
	$(".first").nextUntil(".second").css("background-color","yellow");
});
</script>

四、过滤:缩小搜索元素的范围

(1)元素的首个元素:first()

<script>
$(document).ready(function(){
	$("li").first().css("background-color","yellow");
});
</script>

(2)元素的最后一个元素:last()

<script>
$(document).ready(function(){
	$("li").last().css("background-color","yellow");
});
</script>

(3)元素中带有指定索引号的元素:eq(),索引从0开始

<script>
$(document).ready(function(){
	$("li").eq(2).css("background-color","yellow");
});
</script>

(4)规定一个标准,不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回:filter

<body>
<div>
	这是div
	<ul>
		<li class="first">
			<span>span</span>
		</li>
		<li>
			<a>这是a</a>
		</li>
		<li>
			<a>1</a>
		</li>
		<li class="first">
			<a>2</a>
		</li>
		<li>
			<a>3</a>
		</li>
	</ul>
</div>
</body>
<script>
$(document).ready(function(){
	$("li").filter(".first").css("background-color","yellow");
});
</script>

(5)返回不匹配标准的所有元素:not(),not() 方法与 filter() 相反。

<script>
$(document).ready(function(){
	$("li").not(".first").css("background-color","yellow");
});
</script>

 

五、其他方法

(1)元素添加到已存在的元素组合中:add()

 

<script>
$(document).ready(function(){
	$("ul").add("li").add("span").css("background-color","yellow");
});
</script>

<script>
$(document).ready(function(){
	$("ul").add("span").css("background-color","yellow");
});
</script>

 (2)元素的第一个祖先元素:closest()

<script>
$(document).ready(function(){
	$("span").closest("ul").css("background-color","yellow");
});
</script>

 (3)选取基于索引的元素的子集:slice() 

<script>
$(document).ready(function(){
	$("li").slice(3).css("background-color","yellow");
});
</script>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值