Question

在jQuery中，假设我们有两种方法可以浏览DOM元素;

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

现在我的问题是：

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

Answer 1

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

我想相当于你正在寻找的是兄弟选择器：+：

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

所以，一般来说，如果你在jQuery查询中使用标准的CSS选择器来回答你的问题，那么jQuery可以在支持的情况下将搜索切换到浏览器。如果使用jQuery函数，那么这些快捷方式就无法完成。我的一般经验法则是尽可能使用CSS选择器，除非它伤害易读性。

无论用于查找元素的方法如何，返回结果都完全相同。

Answer 2

我不确定“：after”是否存在但不是：

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

2）差异相当小，主要是关于你喜欢做什么，在某些情况下，“：first”可能不是你想要的，例如循环。关于哪些问题有最好的开销，但我不知道如何发表评论。

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

E.G： $（ “＃测试”）父（）。将返回完全相同的 $（ “＃测试：父”）;

实施例： 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>

jQuery和CSS冒号选择器

2 个答案: