选择器——层次选择器

最新推荐文章于 2024-07-07 23:10:31 发布

A458545418

最新推荐文章于 2024-07-07 23:10:31 发布

阅读量137

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/1020182600HENG/p/6752955.html

版权

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title></title>
		<script type="text/javascript" src="../js/jquery-1.8.0.js"></script>
	</head>
	<body>
		<script type="text/javascript">
			$(document).ready(function() {
				
				/*
				 * 层次选择器 (后代元素, 子元素, 相邻元素, 兄弟元素)(这是分为一个大类)
				 * 
				 * :  (“prev ~ div”) 选择器只能选择 “# prev ” 元素后面的同辈元素; 
				 * 而 jQuery 中的方法 siblings() 与前后位置无关, 只要是同辈节点就可以选取
				 */
   				
				//1、后代选择器 
				//选中#fd标签中全部p标签，即一个子代p标签和一个孙代p标签,祖先选择器与后代选择器之间用空格分隔开
				$("#myid p").css("color","red"); 
					
				//2、 子代选择器
				//只选中#fd标签中子代p标签，孙代p标签不选中,父选择器与子选择器之间用大于号分隔开
				$("#myid>p").css("color","darkred"); 
				
				//3、next选择器-示例
				//只选中p标签中相邻的div标签,中间不能相隔其它标签，只能选中一个
				$("p + span").css("color","aqua");
				
				//4、sibling选择器
				//只选中p标签中后的兄弟标签,中间可以相隔其它标签,可以选中多个
				$("#span1~span").css("color","blueviolet");

			});		
		</script>	
		<hr style="border:5px solid red"/>
		<div id="myid" title="myid">
			<h2>子h2标签</h2>
			<p>子p标签</p>
			<span id="span1">子span标签</span>
			<span id="span2">子span标签2</span>
			<div>子div标签
				<hr style="border:2px solid pink"/>
			    <p>子子p标签</p> 
			</div>	
			<span>子span标签</span>
			<span>子span标签</span>
			<span>子span标签</span>
			<span>子span标签</span>
		</div>
		<hr style="border:5px solid red"/>
	</body>
</html>

转载于:https://www.cnblogs.com/1020182600HENG/p/6752955.html

A458545418

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
选择器——层次选择器

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta http-...
复制链接

扫一扫