Nearth===>WEB前端--第13课/JQuery/层次选择器学习

最新推荐文章于 2019-11-16 17:30:09 发布

码字界陈冠希

最新推荐文章于 2019-11-16 17:30:09 发布

阅读量136

点赞数

分类专栏： WEB前端第三季/JQuery

本文链接：https://blog.csdn.net/ly1716/article/details/102729217

版权

WEB前端第三季/JQuery 专栏收录该内容

52 篇文章 0 订阅

订阅专栏

说明：发的代码可以复制到HBuilder X编译软件中直接运行，看其结果。（还需自己动手多次敲击代码）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Nearth</title>
		<script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<style type="text/css">
		div{
			height: 400px;
			width:100%;
			background-color: aquamarine;
		}
	</style>
	<script>
		$(function(){
			//获取div中相关元素
			$("#btn").click(function(){
				//获取的是div 中的所有p 标签元素
				/* $("#dv p").css("backgroundColor","pink"); */
				//获取的是div 中的直接子元素
		         /* $("#dv>p").css("backgroundColor","pink"); */
				//获取的是div后面的第一个p标签元素
				/* $("#dv+p").css("backgroundColor","pink"); */
				//获取的是div后面所有直接的兄弟元素p标签元素
				$("#dv~p").css("backgroundColor","pink");
			})
		})
	</script>
	<body>
		<h1>层次选择器学习</h1>
		<hr >
		<input type="button" name="" id="btn" value="点击我,显示效果" /> <br>
		<div id="dv">
			<p>这是div中的第一个p标签</p>
			<ul>
				<li>这是div中的第一个li标签</li>
				<li><p>这是第二个li中的第二个p标签</p></li>
				<li>这是div中的第3个li标签</li>
			</ul>
			<p>这是div 中的第三个p标签</p>
		</div>
		<p>这是div后的第一个p标签</p>
		<p>这是div后的第二个p标签</p>
		<p>这是div后的第三个p标签</p>
	</body>
</html>

人生没有如果，只有结果·····················可悲鸭，小主人·························

码字界陈冠希

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Nearth===>WEB前端--第13课/JQuery/层次选择器学习

说明：发的代码可以复制到HBuilder X编译软件中直接运行，看其结果。（还需自己动手多次敲击代码）<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Nearth</title> <script src="jquery-3....
复制链接

扫一扫