jQuery选择器不是我所期望的

因为 .children() 执行以下操作:

去拿那个 匹配元素集合中的每个元素的,可选地由选择器过滤。

div p . 唯一的孩子 #parental 是一个 div p 元素。 .children('div p') 第 元素,因为它有 作为祖先( 本身)。但是 部门
你应该想想 children() 使所有子级都按此选择器筛选 这和 获取与此选择器匹配的所有子体 . 为此,你必须使用 find() .

Fred.children('div').children('p') 部门 Fred 然后选择所有 的 第

children()等于在选择器中执行“>”。

jquery网站上说。。。

DOM树

因此使用 children('div p') 不起作用,因为您正试图从DOM树向下查看两个阶段。使用 children('div>p') 确实有效,因为它实际上是一个选择器,尽管我知道为什么这让人困惑。

find() .

儿童 到 找到

var Fred= $('#parental');
$('div').css({
    color: 'blue'
});
Fred.children('div').css({
    color: 'red'
});
Fred.find('div').find('p').css({
    color: 'green',border:'solid red 2px'
});
Fred.find('div p').css({
    color: 'orange'});

Fred.find('div>p').css({
    border:'solid #FFFF00 2px'
});​

http://jsfiddle.net/bxAzN/2/

子节点只查看节点的直接子节点,而find遍历节点下的整个DOM,因此子节点会更快。使用哪一个取决于您是只想考虑DOM中的直接子代还是该子代之下的所有节点。-特凡福森

children和find不一定给出相同的结果:find()将获得任何后代节点,而children()只获得匹配的直接子节点。

因此,find()会比较慢,因为它必须搜索可能匹配的每个子节点,而不仅仅是直接的子节点。