系统学习jQuery.核心知识.局部.jQuery选择器.层次选择器

最新推荐文章于 2024-05-01 00:02:34 发布

iteye_11495

最新推荐文章于 2024-05-01 00:02:34 发布

阅读量70

点赞数

文章标签： javascript ViewUI

1.层次选择器介绍

前面基本选择器是直接通过DOM节点本身来进行选择的，这里的层次选择器则是基于DOM元素的层次关系获取特定的元素，例如相邻元素、同辈元素、子元素与后代元素，也就是迂回的方式来选择相应的元素。

2.详解每个层次选择器

3.应用实例

<html>
	<head>
		<title>基本选择器</title>
		<style type="text/css">
			div,span,p{
				width:240px;
				height:240px;
				border:#000 1px solid;

				background:#aaa;
				
				font-family:Verdana;
				font-size:17px;

				float:left;
				margin:5px;
			}
			div.mini{
				width:80px;
				height:80px;
				background-color:#aaa;
				font-size:12px;
			}
			div.hide{
				display:none;
			}
		</style>
		<script type="text/javascript" src="jquery.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				//$(".one .mini").css("background-color","#0F0");//①祖先后代选择器
				//$(".one > .mini").css("background-color","#0F0");//②注意与前面的差别
				//$("#two+div").css("background-color","#0F0");//③#two的下一个同辈元素
				//$("#two~div").css("background-color","#0F0");//④#two所有的同辈元素，注意与前一个差别
				
				//上述第3个方法，可用下列方法来代替
				//$("#two").next("div").css("background-color","#0F0");
				
				//上述第4个方法，可用下列方法来代替
				//$("#two").nextAll("div").css("background-color","#0F0");
				//nextAll方法相类似但有明显差别的是.siblings()，可以选择其所有的同辈元素
				$("#two").siblings("div").css("background-color","#0F0");
			});
		</script>
	</head>
	
	<body>
		<!--第1个div-->
		<div class="one" id="one">
			id为one,class为one的div
			<div class="mini">
				class为mini的div
			</div>
		</div>
		<!--第2个div-->
		<div class="one" id="two" title="Jason">
			id为two，class为one，title为jason的div.
			<div class="mini" id="spanish" title="Spanish">
				class为mini，title为Spanish的div
			</div>
			<div class="mini" title="Jason">
				class为mini，title为Jason为div
				<div class="mini">Hello</div>
			</div>
		</div>
			
		<!--第3个div-->
		<div class="one">
			<div class="mini">class为mini的div</div>
			<div class="mini">class为mini的div</div>
			<div class="mini">class为mini的div</div>
			<div class="mini"></div>
		</div>
		
		<!--第4个div-->
		<div style="display:none" class="none">
			style的display为"none"的div.
		</div>
		
		<!--第5个div-->
		<div class="hide">
			class为hide的div
		</div>
		
		<!--第6个div-->
		<div>
			包含input的type为"hidden"的div<br/>
			<input type="hidden" size="8"/>
		</div>

		<span id="mover">正在执行动画的span元素</span>
	</body>
</html>

iteye_11495

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
系统学习jQuery.核心知识.局部.jQuery选择器.层次选择器

1.层次选择器介绍前面基本选择器是直接通过DOM节点本身来进行选择的，这里的层次选择器则是基于DOM元素的层次关系获取特定的元素，例如相邻元素、同辈元素、子元素与后代元素，也就是迂回的方式来选择相应的元素。2.详解每个层次选择器3.应用实例&lt;html&gt; &lt;head&gt; &lt;title&gt;基本选择器&lt;/title&gt; &lt...
复制链接

扫一扫