jQuery层次选择器——jQuery学习(4)

最新推荐文章于 2023-01-20 21:44:25 发布

白菜苗

最新推荐文章于 2023-01-20 21:44:25 发布

阅读量268

点赞数

分类专栏： jQuery 文章标签： jquery javascript

本文链接：https://blog.csdn.net/weixin_43682519/article/details/116945502

版权

jQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

层次选择器：查找子元素，后代元素，兄弟元素的选择器

1、ancestor descendant
在给定的祖先元素下匹配所有的后代元素;
2、parent>child
在给定的父元素下面匹配所有的子元素；
3、pre+next
匹配所有紧接着在pre后的next元素；
4、prev~siblings
匹配prev元素之后的所有siblings元素

实例代码：

<!DOCTYPE html>
<html>
<head>
	<title>层次选择器</title>
</head>
<body>
<!-- 层次选择器：查找子元素，后代元素，兄弟元素的选择器 -->
<!-- 
需求：
1、选中的ul下所有的span;
2、选中的ul下的所有子元素span;
3、选中class为box的下一个li;
4、选中ul下的class为box的元素后面的所有兄弟元素；
 -->

 <ul>
 	<li>AAA</li>
 	<li class="box">ccc</li>
 	<li title="hello"><span>BBB</span></li>
 	<li title="hello"><span>DDD</span></li>
 	<span>EEE</span>
 </ul>


<script type="text/javascript" src="jquery-3.4.1/jquery-3.4.1.js"></script>
<script type="text/javascript">
	//1、选中的ul下所有的span;
	$('ul span').css('background','yellow');
	// 	2、选中的ul下的所有子元素span;
	$('ul>span').css('background','yellow');
	// 3、选中class为box的下一个li;
	$('.box+li').css('background','yellow');
	// 4、选中ul下的class为box的元素后面的所有兄弟元素；
	$('ul .box~*').css('background','yellow');
</script>
</body>
</html>

白菜苗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery层次选择器——jQuery学习(4)

层次选择器：查找子元素，后代元素，兄弟元素的选择器1、ancestor descendant在给定的祖先元素下匹配所有的后代元素;2、parent>child在给定的父元素下面匹配所有的子元素；3、pre+next匹配所有紧接着在pre后的next元素；4、prev~siblings匹配prev元素之后的所有siblings元素实例代码：<!DOCTYPE html><html><head> <title>层次选择器</t
复制链接

扫一扫