1.子元素过滤器介绍
- :nth-child 获得指定索引的孩子，从1开始
- :first-child 获得第一个孩子
- :last-child 获得最后一个孩子
- :only-child 获得独生子
2.代码实例
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 ?<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 ?<title>07-子元素过滤选择器.html</title> 6 ?<!-- ??引入jQuery --> 7 ?<script src="../js/jquery-1.8.3.js" type="text/javascript"></script> 8 ?<script src="./script/assist.js" type="text/javascript"></script> 9 ?<link rel="stylesheet" type="text/css" href="./css/style.css" /> ?10 ?<script type="text/javascript">11 ?????$(function(){12 // ????????<input type="button" value="选取每个class为one的div父元素下的第2个子元素." id="btn1"/>13 ?????????$("#btn1").click(function(){14 ?????????????//子元素使用前提，表达式前面必须是元素15 ?????????????//如果元素上添加了条件，就必须使用空格16 // ????????????$("div[class=‘one‘] :nth-child(2)").css("background-color","red");17 ?????????????$("div.one :nth-child(2)").css("background-color","red");18 ?????????????/*19 ?????????????$("div.one") ??????所有的div自己的样式为one20 ?????????????$("div .one") ?????所有div中后代元素的样式为one（中间多了个空格）21 ??????????????*/22 ?????????});23 // ????????????<input type="button" value="选取每个class为one的div父元素下的第一个子元素." id="btn2"/>24 ?????????$("#btn2").click(function(){25 // ????????????$("div[class=‘one‘]:parent :nth-child(1)").css("background-color","red");26 ?????????????$("div.one :first-child").css("background-color","red")27 ?????????});28 // ????????????<input type="button" value="选取每个class为one的div父元素下的最后一个子元素." id="btn3"/>29 ?????????$("#btn3").click(function(){30 ?????????????$("div.one :last-child").css("background-color","red");31 ?????????});32 // ????????????<input type="button" value="如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素." id="btn4"/>33 ?????????$("#btn4").click(function(){34 ?????????????$("div.one :only-child").css("background-color","red");35 ?????????});36 ?????});37 ??</script>38 </head>39 <body>40 ??<button id="reset">手动重置页面元素</button>41 ??<input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label> ???42 43 ??<h3>子元素过滤选择器.</h3>44 ??<input type="button" value="选取每个class为one的div父元素下的第2个子元素." id="btn1"/>45 ??<input type="button" value="选取每个class为one的div父元素下的第一个子元素." id="btn2"/>46 ??<input type="button" value="选取每个class为one的div父元素下的最后一个子元素." id="btn3"/>47 ??<input type="button" value="如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素." id="btn4"/>48 49 50 51 52 ????<br /><br />53 ???<div class="one" id="one" >54 ?id为one,class为one的div55 ??????<div class="mini">class为mini</div>56 ??</div>57 58 ????<div class="one" ?id="two" title="test" >59 ?????id为two,class为one,title为test的div.60 ??????<div class="mini" ?title="other">class为mini,title为other</div>61 ??????<div class="mini" ?title="test">class为mini,title为test</div>62 ??</div>63 64 ??<div class="one">65 ??????<div class="mini">class为mini</div>66 ??????<div class="mini">class为mini</div>67 ??????<div class="mini">class为mini</div>68 ??????<div class="mini"></div>69 ??</div>70 71 ??72 73 ??<div class="one">74 ??????<div class="mini">class为mini</div>75 ??????<div class="mini">class为mini</div>76 ??????<div class="mini">class为mini</div>77 ??????<div class="mini" ?title="tesst">class为mini,title为tesst</div>78 ??</div>79 80 81 ??<div style="display:none;" ?class="none">style的display为"none"的div</div>82 ??83 ??<div class="hide">class为"hide"的div</div>84 ?85 ??<div>86 ??包含input的type为"hidden"的div<input type="hidden" size="8"/>87 ??</div>88 89 ??90 ??<span id="mover">正在执行动画的span元素.</span>91 </body>92 </html>jQuery--子元素过滤
原文地址：https://www.cnblogs.com/jxxblogs/p/9601867.html