一個樣例看清楚JQuery子元素選擇器children()和find()的差別
近期在我們的hybrid app項目開發中定位出了一個問題。通過這個問題了解下JQuery選擇器find()和children()的差別。問題是這種：我們的混合app是一個單頁面應用(main.html)，邏輯上的頁面是通過項目自己定義的.mspl文件(事實上就是html文件)來呈現的。
比方a.mspl、b.mspl、c.mspl載入的時候，都會插入到main.html中。可是每次僅僅顯示1個mspl文件，當b.mspl顯示的時候，a.mspl和c.mspl就會被隱藏。在a、b、c這3 個頁面上都會顯示當前手機網絡是否可用。
當用戶打開或者關閉手機網絡的時候。會通過android廣播調用webview裏面的方法，刷新a、b、c這3個頁面上顯示的網絡狀態。
main.html結構例如以下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery-1.11.1.min.js"></script>
</head>
<body>
<div page="a.mspl">
<div spl-id="net_status">
<span>a</span>
<span>1</span>
</div>
</div>
<div page="b.mspl">
<div spl-id="net_status">
<span>b</span>
<span>2</span>
</div>
</div>
<div page="c.mspl">
<div spl-id="net_status">
<span>c</span>
<span>3</span>
</div>
</div>
</body>
</html>當網絡狀態發生變化的時候，android會通過webview調用以下的JS方法，刷新頁面顯示的網絡狀態:
//online offline
function refreshNetworkStatus(status)
{
// 選中每個mspl下網絡狀態顯示欄
var selector = $("div[spl-id=‘net_status‘]");
// 網絡狀態顯示欄以下有2個span,第一個是用來顯示網絡狀態的
$(selector).children("span:eq(0)").text(offlineTip);
}問題是：當我們打開或者關閉網絡連接，a.mspl可以正確顯示網絡狀態，可是b.mspl和c.mspl中的網絡狀態顯示欄不能刷新。項目模擬代碼例如以下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery-1.11.1.min.js"></script>
<script>
$(function(){
$("button").click(function(){
var selector = $("div[spl-id=‘net_status‘]");
var text = $(this).text();
//刷新網絡狀態顯示
$(selector).children("span:eq(0)").text(text);
});
});
</script>
</head>
<body>
<div page="a.mspl">
<div spl-id="net_status">
<span>a</span>
<span>1</span>
</div>
<button>online</button>
<button>offline</button>
</div>
<div page="b.mspl">
<div spl-id="net_status">
<span>b</span>
<span>2</span>
</div>
<button>online</button>
<button>offline</button>
</div>
<div page="c.mspl">
<div spl-id="net_status">
<span>c</span>
<span>3</span>
</div>
<button>online</button>
<button>offline</button>
</div>
</body>
</html>
能夠看到我們點擊online或者offline按鈕。僅僅有a.mspl下的網絡狀態顯示欄能正常。假設不使用children()，而是使用find()就能夠滿足要求了。當點擊online或者offline按鈕時候，3個頁面的網絡狀態顯示都是正常的。
$(selector).find("span:eq(0)").text(text);
children()和find()的區別在於：
1.children方法獲得的不過元素一下級的子元素，即：immediate children
2.find方法獲得全部下級元素，即：all descendants
3.children方法的參數selector是可選的。用來過濾子元素；但find方法的參數selector方法是必選的。
$(selector).children("span:eq(0)")的作用相當於$(selector).children().eq(0)
1.獲取selector下的全部直接span，即結果是<span>a</span>。<span>1</span>，<span>b</span>，<span>2</span>，<span>c</span>。<span>3</span>
2.eq(0)選中的是第一個元素。所以改變的是<span>a</span>
$(selector).find("span:eq(0)").text(id);
的作用相當於
$(selector).each(function(){
$(this).children("span:eq(0)").text(id);
});1.對於selector選中的每個元素，都再用"span:eq(0)"篩選一次。即結果是<span>a</span>。<span>b</span>，<span>c</span>更直觀的樣例，能夠參考這篇文章“jQuery筆記-jQuery篩選器children()具體解釋”。
一個樣例看清楚JQuery子元素選擇器children()和find()的差別