在jquery中,find()和children()函式之間的不同之處
find()和children()方法被用來過濾匹配元素的子元素,前者可以在所有的後代中進行過濾,而後者僅在子級層進行過濾。
簡單的說:
1 find()—搜尋匹配元素的孩子,孫子等所有的後代層。
2 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 find() vs children() example</h1>
<script type="text/javascript">
$(document).ready(function(){
$("#testChildren").click(function(){
$("div").css("background","white");
$('.B1').children('.child').css('background','red');
});
$("#testFind").click(function(){
$('div').css('background',"white");
$(".B1").find('.child').css("background","red");
});
});
</script>
<div class="B1">
<div class="child">B1-1</div>
<div class="child">B1-2</div>
<div class="orphan">B1-3</div>
<div class="child">B1-4</div>
<div class="B2">
<div class="child">B2-1</div>
<div class="child">B2-2</div>
<div class="orphan">B2-2 - Orphan</div>
<div class="B3">
<div class="child">B3-1</div>
<div class="orphan">B3-2 - Orphan</div>
<div class="child">B3-3</div>
</div>
</div>
</div>
<br/>
<br/>
<br/>
<input type='button' value='.B1 children(child)' id='testChildren'>
<input type='button' value='.B1 find(child)' id='testFind'>
</body>
</html>
效果: