jQuery 和 CSS 冒号选择器答案

【问题标题】：jQuery and CSS colon selectorsjQuery 和 CSS 冒号选择器
【发布时间】：2011-10-25 16:55:06
【问题描述】：

在 jQuery 中，假设我们有 2 种方式来浏览 DOM 元素；

通过使用 CSS 冒号选择器（例如 var x = $("#someElement:after")）
通过 jQuery 函数（例如var x = $("#someElement").prev()）

现在我的问题是：

两种情况下的返回类型是否相同？
在 DOM 中导航有什么区别？方法？
我们能否将相同的 jQuery 函数应用于这两个结果陈述？例如。 x.css("someProp","someVal")

【问题讨论】：

我在文档中找不到关于 :after 的任何信息。你确定它存在吗？ Afaik 没有可让您遍历 DOM 的伪选择器。但无论如何，如果你将选择器传递给 jQuery，你总是会得到一个 jQuery 对象。
肯定存在：w3schools.com/cssref/sel_after.asp
@atzu：不在 jQuery 中。我们在谈论 jQuery 选择器，这就是我删除 [css-selectors] 标记的原因。
@atzu：虽然它作为 CSS 选择器存在，但将它用作 jQuery 选择器是没有意义的（不确定它是否有效）。
@Felix Kling：查看我对 nickf 答案的评论。

标签： jquery css dom jquery-selectors

【解决方案1】：

:after 是 jQuery 不支持的 CSS 伪元素。 jQuery 选择器的文档在这里：http://api.jquery.com/category/selectors/

我猜你正在寻找的等价物是兄弟选择器：+:

// select whatever element comes after #someElement
var x = $("#someElement + *");

所以，一般来说，回答您的问题，如果您在 jQuery 查询中使用标准 CSS 选择器，那么 jQuery 可以将搜索交给浏览器（如果支持）。如果您使用 jQuery 函数，那么这些快捷方式将无法完成。我的一般经验法则是尽可能使用 CSS 选择器，除非它影响易读性。

无论使用哪种方法查找元素，返回结果都完全相同。

【讨论】：

虽然 .prev() 没有等效的 CSS :( 加上 jQuery 不支持 :after 的原因是因为它是一个 伪元素，并且是伪的-elements 不是 DOM 的一部分。

【解决方案2】：

我不确定 ":after" 是否存在，但除此之外：

1) 两者的返回类型完全相同（只要它是一个有效的选择器）

2) 差别很小，主要是关于你喜欢如何做事，在某些情况下，":first" 可能不是你想要的，例如在循环中。关于哪个开销最大存在争论，但我不知道如何评论。

3) 当然，由于返回类型完全相同（一个 jQuery 元素），您可以以完全相同的方式使用它们。

例如： $("#Test").parent(); 将返回完全相同 $("#Test:parent");

示例： http://jsfiddle.net/HenryGarle/2qcpK/

<div id="Parent1">
    <div id="Test1">Text</div>
</div>

<div id="Parent2">
    <div id="Test2">Text</div>
</div>


// replaces the content of Test1's parent
$("#Test1").parent().html("New Parent 1 content");

// replaces the content of Test2's parent
$("#Test2:parent").html("New Parent 2 content");

这将导致 DOM 看起来像：

<div id="Parent1">
    New Parent 1 content
</div>

<div id="Parent2">
    New Parent 2 content
</div>

【讨论】：