今天子查询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
这样 就能合理解释 后者子标签失效的原因了.