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> <div style="clear:both;"></div> <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>