Question

我有一个小脚本。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $( "p" ).first().replaceWith("Hello world!");
  });
});
</script>
</head>
<body>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Replace the first p element with new text</button>

这将第一个

中的内容替换为“Hello world！”。

我用2个jquery脚本得到了相同的结果。

1) ( "p:first" )
2) ("p").first()

这两个脚本之间的确切区别是什么。

Answer 1

根据效果测试found here，第二种方式（$("p").first();）要快得多。

Answer 2

从功能上讲，它们是等价的。但是，就性能而言，p:first会更好。这是因为p:first开始扫描DOM并在找到的第一个p元素处停止。另一方面，$('p').first()必须扫描整个DOM并生成所有p元素的数组，然后从该数组中选择第一个元素。

但是，除非你有一个非常大的DOM，否则这种性能差异可以忽略不计。

修改

有趣的是，:first isn't faster than .first()。嗯，不确定我理解为什么，但它已被基准测试。

Answer 3

:first是一个选择器，当性能不如可读代码重要时应该使用它。它不是CSS标准选择器，因此不会受益于内置浏览器性能增强的速度。但是，当使用大量的OTHER选择器时，它将有助于使您的代码更容易处理，因为您以类似的方式执行类似的代码。

:first的最佳效果是执行初始查询（$("p")），然后执行.filter(":first")。这会否定我可读的代码声明，因为您现在正在做一些语法上与其他选择器不同的事情。

.first（）是.eq（0）的语法糖，它完全相同，但可读性差得多。

Answer 4

应该没有任何真正的区别，但最好的方法是找出它，例如here。基准测试已完成here（.first()获胜）。

Answer 5

第一个需要解析伪选择器然后执行。它将在初始调用时仅返回一个段落。第二个在所有段落上执行选择器，然后在first()的第二个jQuery调用中返回第一个。

我的建议是检查jQuery源代码，以便自己验证实现的差异。

Answer 6

首先在:filter上的速度较慢，因为它包含了sizzler库。这需要做额外的工作。

Here is a test to run and see performance

（“p：first”）vs（“p”）。first（）Jquery

6 个答案: