jQuery笔记之层次选择器

最新推荐文章于 2018-09-18 08:42:08 发布

ArryLuo123

最新推荐文章于 2018-09-18 08:42:08 发布

阅读量697

点赞数 1

文章标签： jQuery

本文链接：https://blog.csdn.net/ArryLuo123/article/details/56352734

版权

层次选择器

层次选择器通过DOM元素之间的层次关系来获取元素

//下面通过demo演示上面的理论

<!DOCTYPE html>
<html>
	<!--层次选择器-->

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
		<script>
			$(function() {
				//后代选择器，获取并设置#menu下的<span>元素的背景颜色
				$("#menu span").css("background-color", "red");
				/*子选择器，语法构成(parent>child)描述(选取parent元素下的child（子） 元素)
			$(" #menu>span" )选取#menu的子元素<span>
				* */
				$("#menu>span").css("background-color", "yellow");
				//相邻选择器，获取并设置紧接在<h2>元素后的<dl>元素的背景颜色,语法(prev+next),
				$("h2+dl").css("background-color","blue");
				//同辈选择器，获取并设置<h2>元素之后的所有同辈元素<dl>的背景颜色
				$("h2~dl").css("background-color","gold");
			});
		</script>
	</head>

	<body>
		<div id="menu">
			<h2>全部旅游产品分类</h2>
			<dl>
				<dt>北京周边旅游<span>特价</span></dt>
				<dd>
					<a href="#">按天数</a>
					<a href="#">海边旅游</a>
					<a href="#">草原</a>
				</dd>
			</dl>
			<dl>
				<dt>景点门票</dt>
				<dd>
					<a href="#">名胜</a>
					<a href="#">暑期</a>
					<a href="#">乐园</a>
				</dd>
				<dd>
					<a href="#">山水</a>
					<a href="#">双休</a>
				</dd>
			</dl>
			<span>更多分类</span>
		</div>
	</body>

</html>

ArryLuo123

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery笔记之层次选择器

层次选择器层次选择器通过DOM元素之间的层次关系来获取元素//下面通过demo演示上面的理论 $(function() { //后代选择器，获取并设置#menu下的元素的背景颜色 $("#menu span").css("background-color", "red"); /
复制链接

扫一扫