jQuery选择器之过滤选择器之子元素过滤选择器

最新推荐文章于 2022-01-08 09:51:56 发布

我叫阿狸猫

最新推荐文章于 2022-01-08 09:51:56 发布

阅读量953

点赞数

分类专栏： Jquery

本文链接：https://blog.csdn.net/world_java/article/details/9624631

版权

Jquery 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

过滤选择器之子元素过滤选择器

1、:nth-child(index/even/odd/equation)

用法: $(”ul li:nth-child(2)”) 返回值集合元素
说明: 匹配其父元素下的第N个子或奇偶元素.这个选择器和之前说的基础过滤(Basic Filters)中的 eq() 有些类似 ,不同的地方就是前者(:nth-child)是从1开始,后者(:eq)是从0开始.

2、:first-child

用法: $(”ul li:first-child”) 返回值集合元素
说明: 匹配第一个子元素’:first’ 只匹配一个元素,而此选择符将为每个父元素匹配一个子元素

3、:last-child

用法: $(”ul li:last-child”) 返回值集合元素
说明: 匹配最后一个子元素.’:last’只匹配一个元素,而此选择符将为每个父元素匹配一个子元素.

4、: only-child

用法: $(”ul li:only-child”) 返回值集合元素
说明: 如果某个元素是父元素中唯一的子元素,那将会被匹配.如果父元素中含有其他元素,那将不会被匹配.意思就是:只有一个子元素的才会被匹配!

nth-child() 选择器详解如下：
(1) :nth-child(even/odd): 能选取每个父元素下的索引值为偶(奇)数的元素
(2):nth-child(2): 能选取每个父元素下的索引值为 2 的元素
(3):nth-child(3n): 能选取每个父元素下的索引值是 3 的倍数的元素
(3):nth-child(3n + 1): 能选取每个父元素下的索引值是 3n + 1的元素

练习：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ddd</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
	<style type="text/css">
		 	div,span{
			    width: 140px;
			    height: 140px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
			
			div.mini{
			    width: 30px;
			    height: 30px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
			
			div.visible{
				display:none;
			}
	 </style>
	 <!--引入jquery的js库-->
    
	</head>
	 
	<body>
		 <input type="button" value=" 每个class为one的div父元素下的第2个子元素"  id="b1"/>
		 <input type="button" value=" 每个class为one的div父元素下的第一个子元素"  id="b2"/>
		 <input type="button" value=" 每个class为one的div父元素下的最后一个子元素"  id="b3"/>
		 <input type="button" value=" 如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素"  id="b4"/>
		 

		 <!--文本隐藏域-->
         <input type="hidden" value="hidden_1">
		 <input type="hidden" value="hidden_2">
		 <input type="hidden" value="hidden_3">
		 <input type="hidden" value="hidden_4">
		 
		 <h1>天气冷了</h1>
		 <h2>天气又冷了</h2>
		 
	     <div id="one">
	    	 id为one   div
		     
		 </div>
		
		 <div id="one" class="mini"  title="test">
	    	   id为two   class是 mini  div  title="test"
		       <div  class="mini" >class是 mini</div>
		</div>
		 <div class="one"  title="test">
		       <div  class="mini" >class是 mini******</div>
		</div>
		
		 <div class="visible" >
		 	    class是 one 
		       <div  class="mini" >class是 mini</div>
			   <div  class="mini" >class是 mini</div>
		 </div>
		 <div class="one" title="test02">
		 	  class是 one    title="test02"   (**************
		       <div  class="mini01" >class是 mini01</div>
			   <div  class="mini" >cdddddddlass是 mini</div>
		</div>
		
		
		<div class="visible" >
		 	  这是隐藏的
		</div>
		
		<div class="one">
			
			
		</div>
		<br>
		<div id="mover" >
		 	  动画
		</div>
		<br>
		
		
	</body>
<script language="JavaScript">
//<input type="button" value=" 每个class为one的div父元素下的第2个子元素"  id="b1"/>
	
//<input type="button" value=" 每个class为one的div父元素下的第一个子元素"  id="b2"/>
   
//<input type="button" value=" 每个class为one的div父元素下的最后一个子元素"  id="b3"/>
   

//<input type="button" value=" 如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素"  id="b4"/>
   

</script>
   
</html>

答案：

<script language="JavaScript">
//<input type="button" value=" 每个class为one的div父元素下的第2个子元素"  id="b1"/>
	$("#b1").click(function(){
		$("div[class=one] :nth-child(2)").css("background","red");
	});
//<input type="button" value=" 每个class为one的div父元素下的第一个子元素"  id="b2"/>
   	$("#b2").click(function(){
		$("div[class=one] :first-child").css("background","red");
	});
//<input type="button" value=" 每个class为one的div父元素下的最后一个子元素"  id="b3"/>
   $("#b3").click(function(){
		$("div[class=one] :last-child").css("background","red");
	});
//<input type="button" value=" 如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素"  id="b4"/>
   $("#b4").click(function(){
		$("div[class=one] :only-child").css("background","red");
	});
</script>