JQ层级选择器

最新推荐文章于 2023-03-21 16:58:58 发布

云飞扬°

最新推荐文章于 2023-03-21 16:58:58 发布

阅读量424

点赞数

分类专栏： JQuery 文章标签： JQ层级选择器

本文链接：https://blog.csdn.net/weixin_44706512/article/details/90316503

版权

JQuery 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

JQ层级选择器

子元素选择器:   选择器1 > 选择器2

后代选择器:  选择器1   选择器2（中间是空格）

相邻兄弟选择器 :  选择器1 + 选择器2 : 找出紧挨着的一个弟弟

找出所有弟弟:  选择器1~ 选择器2   : 找出所有的弟弟

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--引入css文件夹下的.css文件-->
		<link rel="stylesheet" href="../../css/style.css" />
		<!--引入JQ文件-->
		<script type="text/javascript" src="../../js/jquery-1.11.0.js" ></script>
		
		<script>
			//文档加载事件，页面初始化的操作
			$(function(){
			//初始化操作：给按钮绑定事件
			
			    //子元素选择器：找出body下面的子div
			    $("#btn1").click(function(){
			   	    $("body > div").css("background-color","yellow");  
			    });
			    
			    //后代选择器: 找到body下面的所有div 
			    $("#btn2").click(function(){
			   	    $("body div").css("background-color","yellow");  
			    });
			    
			    //相邻兄弟选择器 :找到id为one的相邻兄弟div
			    $("#btn3").click(function(){
			   	    $("#one+div").css("background-color","yellow");  
			    });
			    
			    //找出所有弟弟:找到id为one的所有弟弟div
			     $("#btn4").click(function(){
			   	    $("#one~div").css("background-color","yellow");  
			    });
			    
			   
			    
			    
			    
			    
			    
			});
		</script>
	</head>
	<body> 
		<input type="button" value="找到body下面的子div" id="btn1" /> <br />
		<input type="button" value="找到body下面的所有div" id="btn2" /> <br />
		<input type="button" value="找到id为one的相邻兄弟div" id="btn3" /> <br />
		<input type="button" value="找到id为one的所有弟弟div" id="btn4" /> <br />
		
		<div id="one">
			<div class="mini">1-1</div>		
		</div>
		
		<div id="two">
			<div class="mini">2-1</div>
			<div class="mini">2-2</div>
		</div>
		
		<div id="three">
			<div class="mini">3-1</div>
			<div class="mini">3-2</div>
			<div class="mini">3-3</div>
		</div>
		
		<span id="four">span</span>
		
	</body>
</html>

运行截图：

①子元素选择器：找出body下面的子div

②后代选择器: 找到body下面的所有div

③相邻兄弟选择器 :找到id为one的相邻兄弟div

④ 找出所有弟弟:找到id为one的所有弟弟div

附：style.css文件

body { font:12px/19px Arial, Helvetica, sans-serif; color:#666;}
form div { margin:5px 0;}
.int label { float:left; width:100px; text-align:right;}
.int input { padding:1px 1px; border:1px solid #ccc;height:16px;}
.sub { padding-left:100px;}
.sub input { margin-right:10px; }
.formtips{width: 200px;margin:2px;padding:2px;}
.onError{
    background:#FFE0E9 url(../img/reg3.gif) no-repeat 0 center;
	padding-left:25px;
}
.onSuccess{
    background:#E9FBEB url(../img/reg4.gif) no-repeat 0 center;
	padding-left:25px;
}
.high{
    color:red;
}


  div,span,p {
    width:140px;
    height:140px;
    margin:5px;
    background:#aaa;
	border:#000 1px solid;
    float:left;
    font-size:17px;
    font-family:Verdana;
  }
  div.mini { 
    width:55px;
    height:55px;
    background-color: #aaa;
    font-size:12px;
  }
  div.hide { 
    display:none;
  }


table		{ border:0;border-collapse:collapse;}
td	{ font:normal 12px/17px Arial;padding:2px;width:100px;}
th			{ font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;}
.even		{ background:#FFF38F;}  /* 偶数行样式*/
.odd		{ background:#FFFFEE;}  /* 奇数行样式*/
.selected		{ background:#FF6500;color:#fff;}