欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jQuery元素过滤选择器:nth-child()、first-child、last-child、only-child实例解析

程序员文章站 2022-05-17 23:54:25
jquery元素过滤选择器:nth-child()、first-child、last-child、only-child实例解析

jquery元素过滤选择器:nth-child()、first-child、last-child、only-child实例解析

<!doctype html public "-//w3c//dtd html 4.01 transitional//en">
<html>
  <head>
    <title>子(后代)元素过滤选择器</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="js/jquery-1.11.3.js"></script>
    <style type="text/css">
    	body{
    		font-family: "microsoft yahei"
    	}
    	.cgreen{color: #4ca902}
    	.cpink{color: #ed4a9f}
    	.cblue{color: #0092e7}
    	.ccyan{color: #01a6a2}
    	.cyellow{color: #dca112}
    	.cred{color: #b7103b}
    	.cpurple{color: #792f7c}
    	.cblack{color: #110f10}
    	.corange{color: #ff4500}
    	.cgray{color: #a9a9a9}
    	.hide{display: none;}
    	span {
    		float:left;
    	}
    	ul{
    	}
    	ul li {
    		width:120px;
    		float: left;
    	}
    </style>
    <script type="text/javascript">
    	/* 
    	说是子元素过滤选择器,我觉得是后代元素过滤选择器
    	更准确。
    	子元素过滤选择器,对层级中的后代选择器做了加强。
    	
    	为什么加强的是后代不是子元素选择器呢?
    	因为我们在使用层次选择器的时候,可以看出来,
    	层次选择器中,子元素选择器只能涉及一层,比后代选择器
    	范围小多了,后代选择器范围可以到全部。
    	
    	所以虽然名字是子元素过滤选择器,其实是对后代选择器的加强。
    	
    	可以对选择出来的后代元素再通过冒号的形式进行选择。
    	选择形式:
    	(1).精确到递几个孩子:nth-child()
    			1.其中的参数可以是数字(从1开始)
    			2.可以是奇数add、偶数even的表示
    			3.可以n的倍数。(注意必须是n,不能是其他的x、y之类的是约束好了的)
    			  也可以倍数+1 ... m 3n+1、3n+2 ...
    	(2).第一个孩子:first-child
    	(3).最后一个孩子:last-child
    	(4).唯一一个孩子:only-child
    	*/
    	$(document).ready(function(){
    		// <input type="button" id="btn1" value=":nth-child()选取ul的第二个(从1开始)li元素">
    		$("#btn1").click(function(){
    			$("ul li:nth-child(2)").addclass("cgreen");
    		});
    		
    		// <input type="button" id="btn2" value=":nth-child()选取ul的第奇数个li元素">
    		$("#btn2").click(function(){
    			$("ul li:nth-child(odd)").addclass("cpink");
    		});
    		
    	    // <input type="button" id="btn3" value=":nth-child()选取ul的第3n(n从1开始)个li元素">
    		$("#btn3").click(function(){
    			$("ul li:nth-child(3n)").addclass("cblue"); // 也可以倍数+1 ... m 3n+1、3n+2 ...
    		});
    		
    		// <input type="button" id="btn4" value=":first-child选取ul第一个li元素">
    		$("#btn4").click(function(){
    			$("ul li:first-child").addclass("ccyan");
    		});
    		
    		// <input type="button" id="btn5" value=":last-child选取ul最后一个li元素">
    		$("#btn5").click(function(){
    			$("ul li:last-child").addclass("cyellow");
    		});
    		
    		// <input type="button" id="btn6" value=":only-child选取ul中只有唯一li元素">
    		$("#btn6").click(function(){
    			$("ul li:only-child").addclass("cred");
    		});
    	});
    </script>
    
  </head>
  
  <body>
  	<span>中国城市:</span><br>
    <ul id="chn">
    	<li id="bj">北京</li>
    	<li id="sh">上海</li>
    	<li id="gz">广州</li>
    	<li id="sz">深圳</li>
    	<li id="hk">香港</li>
    </ul>
    <br><br>
    <span>美国城市:</span><br>
    <ul id="usa">
    	<li id="wst">华盛顿特区</li>
    	<li id="ny">纽约</li>
    	<li id="la">洛杉矶</li>
    	<li id="scg">芝加哥</li>
    </ul>
    <br><br>
    <span>德国城市:</span><br>
    <ul id="ger">
    	<li id="mnh">慕尼黑</li>
    </ul>
    <p style="clear:both;"></p>
    <br><br>
    <hr>
    <input type="button" id="btn1" value=":nth-child()选取ul的第二个(从1开始)li元素">
    <input type="button" id="btn2" value=":nth-child()选取ul的第奇数个li元素">
    <input type="button" id="btn3" value=":nth-child()选取ul的第3n(n从1开始)个li元素">
    <input type="button" id="btn4" value=":first-child选取ul第一个li元素">
    <input type="button" id="btn5" value=":last-child选取ul最后一个li元素">
    <input type="button" id="btn6" value=":only-child选取ul中只有唯一li元素">
  </body>
</html>