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 div.mini { 18 width: 55px; 19 height: 55px; 20 background-color: #aaa; 21 font-size: 12px; 22 } 23 div.hide { 24 display: none; 25 } 26 </style> 27 <script type="text/javascript" src="jquery-3.2.1.min.js"></script> 28 <script type="text/javascript"> 29 $(function(){ 30 //选择 body 内的所有 div 元素 31 $("#btn1").click(function(){ 32 $("body div").css("background", "#ffbbaa"); 33 }); 34 //在 body 内, 选择子元素是 div 的. 35 $("#btn2").click(function(){ 36 $("body > div").css("background", "#ffbbaa"); 37 }); 38 //选择 id 为 one 的下一个 div 元素 39 $("#btn3").click(function(){ 40 $("#one + div").css("background", "#ffbbaa"); 41 }); 42 //选择 id 为 two 的元素后面的所有 div 兄弟元素 43 $("#btn4").click(function(){ 44 $("#two ~ div").css("background", "#ffbbaa"); 45 }); 46 //选择 id 为 two 的元素所有 div 兄弟元素 47 $("#btn5").click(function(){ 48 $("#two").siblings("div").css("background", "#ffbbaa"); 49 }); 50 //选择 id 为 one 的下一个 span 元素 51 $("#btn6").click(function(){ 52 //以下选择器选择的是近邻 #one 的 span 元素, 若该span 53 //和 #one 不相邻, 选择器无效. 54 //$("#one + span").css("background", "#ffbbaa"); 55 $("#one").nextAll("span:first").css("background", "#ffbbaa"); 56 }); 57 //选择 id 为 two 的元素前边的所有的 div 兄弟元素 58 $("#btn7").click(function(){ 59 $("#two").prevAll("div").css("background", "#ffbbaa"); 60 }); 61 }) 62 </script> 63 </head> 64 <body> 65 <input type="button" value="选择 body 内的所有 div 元素" id="btn1" /> 66 <input type="button" value="在 body 内, 选择子元素是 div 的." id="btn2" /> 67 <input type="button" value="选择 id 为 one 的下一个 div 元素" id="btn3" /> 68 <input type="button" value="选择 id 为 two 的元素后面的所有 div 兄弟元素" id="btn4" /> 69 <input type="button" value="选择 id 为 two 的元素所有 div 兄弟元素" id="btn5" /> 70 <input type="button" value="选择 id 为 one 的下一个 span 元素" id="btn6" /> 71 <input type="button" value="选择 id 为 two 的元素前边的所有的 div 兄弟元素" id="btn7" /><br><br> 72 73 <div class="one" id="one"> 74 id 为 one,class 为 one 的div 75 <div class="mini">class为mini</div> 76 </div> 77 <div class="one" id="two" title="test"> 78 id为two,class为one,title为test的div 79 <div class="mini" title="other">class为mini,title为other</div> 80 <div class="mini" title="test">class为mini,title为test</div> 81 </div> 82 <div class="one"> 83 <div class="mini">class为mini</div> 84 <div class="mini">class为mini</div> 85 <div class="mini">class为mini</div> 86 <div class="mini"></div> 87 </div> 88 <div class="one"> 89 <div class="mini">class为mini</div> 90 <div class="mini">class为mini</div> 91 <div class="mini">class为mini</div> 92 <div class="mini" title="tesst">class为mini,title为tesst</div> 93 </div> 94 <div style="display: none;" class="none">style的display为"none"的div</div> 95 <div class="hide">class为"hide"的div</div> 96 <div> 97 包含input的type为"hidden"的div<input type="hidden" size="8"> 98 </div> 99 <span id="span">^^span元素^^</span> 100 <span id="span">--span元素--</span> 101 </body> 102 </html>