jQuery结构选择器

最新推荐文章于 2022-11-01 13:35:45 发布

恋恋玫瑰花

最新推荐文章于 2022-11-01 13:35:45 发布

阅读量156

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/weixin_42923643/article/details/81590857

版权

jQuery 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jQuery结构选择器</title>
	<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
	<script type="text/javascript">
		$(function(){
			// div下的所有子img元素
			// $('div img').css('border','5px solid red');

			//div下的直接子img元素
			// $('div>img').css('border','5px solid red');
			
			//div下的相邻唯一同级img元素
			// $('div+img').css('border','5px solid red');

			//div往后同级的所有兄弟img元素
			// $('div~img').css('border','5px solid red');

			$('div').css('border','2px solid red');
			$('div>div').css('margin','2em');
			$('div div').css('background','#0ff');
			$('div div div').css('background','#f0f');
			$('div + p').css('margin','2em');
			$('div:eq(1) ~p').css('background','#ff0');
		});

		
	</script>
</head>
<body>
	<!-- <img src="images/200_300/2.jpg" alt="2.jpg" title="11">
	<div>
		<span><img src="images/200_300/1.jpg" alt="1.jpg"></span>
		<div>
			<img src="images/200_300/2.jpg" alt="2.jpg">
		</div>
		<img src="images/200_300/2.jpg" alt="2.jpg" title="22">
	</div>
	<img src="images/200_300/3.jpg" alt="3.jpg">
	<img src="images/200_300/4.jpg" alt="4.jpg"> -->

	<div>
		一级div
		<div>
			二级div
			<div>
				三级div
			</div>
			<p>段落文本11</p>
			<p>段落文本12</p>
		</div>
		<p>段落文本21</p>
		<p>段落文本22</p>
	</div>
</body>
</html>

恋恋玫瑰花

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery结构选择器

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;jQuery结构选择器&lt;/title&gt; &lt;script type="text/javascript" src="
复制链接

扫一扫