今天子查詢jquery find和children的區別時,看到一個例子
<script>
$(document).ready(function(){
$("#abc").children(".selected").css("color", "blue");
});
</script>
<div id="abc">
<span>Hello</span>
<p class="selected">Hello Again</p>
<div>
<div class="selected">And Again</div>
<span class="selected">aaAnd Again</span>
</div>
<p>And One Last Time</p>
</div> 這例子的結果爲:
Hello
Hello Again
And Again
aaAnd Again
And One Last Time
而將其中的div改爲’p’時:
<script>
$(document).ready(function(){
$("#abc").children(".selected").css("color", "blue");
});
</script>
<div id="abc">
<span>Hello</span>
<p class="selected">Hello Again</p>
<p> <--原先爲div>
<div class="selected">And Again</div>
<span class="selected">aaAnd Again</span>
</p> <--原先爲/div>
<p>And One Last Time</p>
</div> 這時的結果爲:
Hello
Hello Again
And Again
aaAnd Again
And One Last Time
先來理解jquery find和children的意思:
w3school上對find和children的描述分別爲
| 函數 | 描述 |
|---|---|
| .children() | 獲得匹配元素集合中每個元素的所有子元素。 |
| .find() | 獲得當前匹配元素集合中每個元素的後代，由選擇器進行篩選。 |
我對它們的理解是:
| 函數 | 個人理解 |
|---|---|
| .children() | 只獲取所有的子元素,子元素下的子子元素不獲取 |
| .find() | 只要在該父元素下的所有元素,都能湖區到,包括子元素下的子子元素… |
前者的.selected作爲div下的子標籤 從這個理論上來說 是正確的;但是後者的p標籤下的.selected同樣作爲子元素,理論上結果和前者無差別纔是.
經過查閱資料 ,找到了一個合理的解釋
有些塊元素不可以包含另一些塊元素 ，DTD中規定了塊級元素是不能放在P裏;//後半句不理解
P標籤內包含塊元素時，它會先結束自己，
比如：
<p><div>測試p包含div</div></p>
那麼瀏覽器會解釋成：
<p></p><div>測試p包含div</div><p></p>
會多解釋出一個p這樣 就能合理解釋 後者子標籤失效的原因了.