首页 > 代码库 > 演示-JQuery关系选择器

演示-JQuery关系选择器

 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>index</title> 6 <script type="text/javascript" src="jquery-3.1.1.min.js"> 7      8 </script> 9 <script type="text/javascript">10     $(function(){11             console.log("选择div后代元素中的a元素,其长度为:"+$("div a").length);12             console.log("选择div子代元素中的a元素,其长度为:"+$("div>a").length);13             console.log("选择紧接div的子元素中的a元素,其长度为:"+$("div+a").length);14             console.log("选择div同代元素中的a元素,其长度为:"+$("div~a").length);15         }16     );17 </script>18 </head>19 <body>20 <div>21     <p>hello world!</p>22 </div>23 <div class="test" id="test" align="" style="background-color:#CCCCCC">24     <div>25         <a href="http://www.cnblogs.com/yw0219/p/5928955.html">JQuery选择器</a>26         <p><a href="http://www.cnblogs.com/yw0219/p/5928955.html">JQuery选择器</a></p>27     </div>28     <a href="http://www.cnblogs.com/yw0219/p/5928955.html">JQuery选择器</a>29 </div> 30 </body>31 </html>

 

结果:

技术分享

 

演示-JQuery关系选择器