jquery children()函式例項
阿新 • • 發佈：2019-01-02
在jquery中，children()函式被用來發現匹配元素的子元素，它此選擇子元素，不會下到第二代中去。
例如 div 元素有三層子元素：
<divclass="A1">
<divclass="child">A1-1</div>
<divclass="child">A1-2</div>
<divclass="orphan">A1-3</div>
<divclass="child">A1-4</div>
<divclass="A2">
<divclass="child">A2-1</div>
<divclass="child">A2-2</div>
<divclass="A3">
<divclass="child">A3-1</div>
<divclass="child">A3-2</div>
</div>
</div>
</div>
1 $(‘.A1’).children()
$('.A1').children().css('background','red');
僅選擇匹配的類名為A1元素的第一層子元素。即A2 A3的子元素被忽略。
2 $(‘.A1’).children(‘.child’)
$('.A1').children('.child').css('background','red');
選擇類名為A1的元素的子元素中有類名為child的元素。
具體的例項：
<html> <head> <script type="text/javascript" src="../jquery-1.11.1.min.js"></script> <style type="text/css"> div{ padding:8px; border:1px solid; } </style> </head> <body> <h1>jquery children() example</h1> <script type="text/javascript"> $(document).ready(function(){ $("#buttonChildren1").click(function(){ $('div').css("background","white"); $('.A1').children().css("background",'red'); }); $('#buttonChildren2').click(function(){ $('div').css("background","white"); $('.A1').children(".child").css("background","red"); }); }); </script> <div class="A1"> <div class="child">A1-1</div> <div class="child">A1-2</div> <div class="orphan">A1-3</div> <div class="child">A1-4</div> <div class="A2"> <div class="child">A2-1</div> <div class="child">A2-2</div> <div class="A3"> <div class="child">A3-1</div> <div class="child">A3-2</div> </div> </div> </div> <br/><br/><br/> <input type="button" value=".A1 child()" id="buttonChildren1"> <input type="button" value=".A1 children(child)" id="buttonChildren2"> </body> </html>
效果圖：
點選按鈕1：
點選按鈕2：
