区别：父与普通选择器

Question

假设以下html ...

<div>
<p>esrer</p>
<p><span>test</span><span>ste</span>asdlfk</p>
</div>

现在与以下两种方法进行比较：

使用：parent demo

$("span:parent").fadeTo(1500, 0.3);

不使用：parent demo

$("span").fadeTo(1500, 0.3);

结果相同。

我很好奇jquery扩展中添加的:parent伪类，这是如何工作的？

Answer 1

使用.fadeTo()之外的其他内容时，可以更好地解释此选择器的工作原理。例如：

HTML：

<span>I am a parent</span><span></span>

JavaScript的：

$('span').not(':parent').text('I am not a parent');

只有第二个范围会更新文字＆＃34;我不是父母＆＃34 ;;这是因为只有非空元素才被认为是父元素，第二个跨度是空的。

Demo

Answer 2

：parent选择具有至少一个子节点（元素或文本）的所有元素。 这是反过来的：空

：parent = not：empty

Answer 3

来自 docs ：

  

：父选择器选择至少有一个子节点的所有元素（一个   元素或文字）。

因此，在您的情况下，选择器$("span:parent")将匹配其中包含<span>test</span>和<span>ste</span>

的文本的任何范围