1.介紹
2.程序
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 <style type="text/css"> 7 div, span, p { 8 width: 140px; 9 height: 140px; 10 margin: 5px; 11 background: #aaa; 12 border: #000 1px solid; 13 float: left; 14 font-size: 17px; 15 font-family: Verdana; 16 } 17 18 div.mini { 19 width: 55px; 20 height: 55px; 21 background-color: #aaa; 22 font-size: 12px; 23 } 24 25 div.hide { 26 display: none; 27 } 28 </style> 29 <script type="text/javascript" src="jquery-3.2.1.min.js"></script> 30 <script type="text/javascript"> 31 $(function(){ 32 //选取每个class为one的div父元素下的第2个子元素 33 $("#btn1").click(function(){ 34 //在：前带一个空格 35 $("div.one :nth-child(2)").css("background","#fab"); 36 }); 37 //选取每个class为one的div父元素下的第一个子元素. 38 $("#btn2").click(function(){ 39 $("div.one :first-child").css("background","#fab"); 40 }); 41 //选取每个class为one的div父元素下的最后一个子元素 42 $("#btn3").click(function(){ 43 $("div.one :last-child").css("background","#fab"); 44 }); 45 //如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素 46 $("#btn4").click(function(){ 47 $("div.one :only-child").css("background","#fab"); 48 }); 49 }) 50 </script> 51 </head> 52 <body> 53 <input type="button" value="选取每个class为one的div父元素下的第2个子元素." id="btn1"/> 54 <input type="button" value="选取每个class为one的div父元素下的第一个子元素." id="btn2" /> 55 <input type="button" value="选取每个class为one的div父元素下的最后一个子元素." id="btn3" /> 56 <input type="button" value="如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素." id="btn4" /> 57 58 <br> 59 <br> 60 <div class="one" id="one"> 61 id 为 one,class 为 one 的div 62 <div class="mini">class为mini</div> 63 </div> 64 <div class="one" id="two" title="test"> 65 id为two,class为one,title为test的div 66 <div class="mini" title="other">class为mini,title为other</div> 67 <div class="mini" title="test">class为mini,title为test</div> 68 </div> 69 <div class="one"> 70 <div class="mini">class为mini</div> 71 <div class="mini">class为mini</div> 72 <div class="mini">class为mini</div> 73 <div class="mini"></div> 74 </div> 75 <div class="one"> 76 <div class="mini">class为mini</div> 77 <div class="mini">class为mini</div> 78 <div class="mini">class为mini</div> 79 <div class="mini" title="tesst">class为mini,title为tesst</div> 80 </div> 81 <div style="display: none;" class="none">style的display为"none"的div</div> 82 <div class="hide">class为"hide"的div</div> 83 <div> 84 包含input的type为"hidden"的div<input type="hidden" value="123456789" 85 size="8"> 86 </div> 87 <div id="mover">正在执行动画的div元素.</div> 88 </body> 89 </html>