何时使用 :first-child 选择器与 jQuery 中的 first() 方法？

Question

我很困惑我应该在 jQuery 中使用 :first-child 选择器或 first() 方法？

我想知道区别。（我不是问:first和:first-child的区别）

Answer 1

I'm confused about what should I be using :first-child selector or first() method in jQuery?

他们做的事情截然不同。 :first-child pseudo-class 使它所属的任何选择器仅在元素也是其 parent 的第一个 child 时才匹配。例如，如果 div 也是其 parent 中的第一个 child，则 div:first-child 将仅匹配 div。

相比之下，first()在选择了一组元素之后应用，并将该集合减少到仅匹配的第一个元素——这可能会也可能会不是 parent 中的第一个 child。

他们的名字相似，但完全没有关系。

请注意 jQuery 也有 :first（而不是 :first-child），这是一个 jQuery 扩展，实际上与应用 [=22= 相同】事后。它只是在选择器引擎中完成。作为 jQuery 扩展，这意味着 jQuery 必须处理选择器而不是交给（可能会快得多）built-in 浏览器选择器引擎。

让我们看看这三者的实际应用：

test('$("div.foo").first()', $("div.foo").first());
test('$("div.foo:first")', $("div.foo:first"));
test('$("div.foo:first-child")', $("div.foo:first-child"));

function test(label, set) {
  console.log(label + ":");
  console.log("  length = " + set.length);
  set.each(function(i) {
    console.log("  " + i + ": '" + $(this).text() + "'");
  });
}

.as-console-wrapper {
  max-height: 100% !important;£
}

<p></p>
<div class="foo">I'm the first <code>div.foo</code> on the page; I am not the first child of my parent</div>
<div>
  <div class="foo">I'm the first child of my parent</div>
</div>
<div>
  <div class="foo">I'm also the first child of my parent</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Also, what is the best practice to use?

哪个适合你需要做什么，因为他们做的事情不同。

Answer 2

:first-child 和 first() 之间的主要区别在于 :first-child 可以 return 多个元素及其父元素的上下文。

检查下面的例子

$( "div span:first-child")
  .css( "text-decoration", "underline" )
  .hover(function() {
    $( this ).addClass( "sogreen" );
  }, function() {
    $( this ).removeClass( "sogreen" );
  });

  span {
    color: #008;
  }
  span.sogreen {
    color: green;
    font-weight: bolder;
  }

 <script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
<div>
  <span>John,</span>
  <span>Karl,</span>
  <span>Brandon</span>
</div>
<div>
  <span>Glen,</span>
  <span>Tane,</span>
  <span>Ralph</span>
</div>

此处 div span 的两个第一个子元素都被选中，但现在如果您使用 first()，它将只是 return 所有匹配元素中的第一个元素。

$( "div span").first()
  .css( "text-decoration", "underline" )
  .hover(function() {
    $( this ).addClass( "sogreen" );
  }, function() {
    $( this ).removeClass( "sogreen" );
  });

  span {
    color: #008;
  }
  span.sogreen {
    color: green;
    font-weight: bolder;
  }

 <script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
<div>
  <span>John,</span>
  <span>Karl,</span>
  <span>Brandon</span>
</div>
<div>
  <span>Glen,</span>
  <span>Tane,</span>
  <span>Ralph</span>
</div>

总而言之，first-child 和 nth-child(1) 可以 return 多个具有父级上下文的元素，而 eq(0)、:first 和 first() returns单个元素。

希望对您有所帮助！

Answer 3

After a bit of research, I tried easy example myself and got the difference.

$(document).ready(function(){
    $(".first-child p:first-child").css("background-color", "yellow");
    $(".first p").first().css("background-color", "yellow");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>:first-child selector</h1>

<div class="first-child" style="border:1px solid black">
  <p>This is a paragraph in a div.</p>
  <p>This is a paragraph in a div.</p>
</div><br>
<div class="first-child" style="border:1px solid black">
  <p>This is another paragraph in a div.</p>
  <p>This is another paragraph in a div.</p>
</div>
<p>This is also a paragraph.</p><br>

<h1>first() method</h1>

<div class="first" style="border:1px solid black">
  <p>This is a paragraph in a div.</p>
  <p>This is a paragraph in a div.</p>
</div><br>
<div class="first" style="border:1px solid black">
  <p>This is another paragraph in a div.</p>
  <p>This is another paragraph in a div.</p>
</div>

<p>This is also a paragraph.</p><br>

何时使用 :first-child 选择器与 jQuery 中的 first() 方法？

When to use :first-child selector vs first() method in jQuery?

jquery

jquery-selectors