Question

我对在jQuery中使用:first-child选择器或first()方法应该怎样感到困惑？

我想知道不同之处。（ 我没有问:first和:first-child 之间的差异）

Answer 1

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

他们做了很多不同的事情。如果元素也是其父元素的第一个子元素，:first-child pseudo-class会使任何选择器成为唯一匹配的一部分。例如，如果div:first-child也是其父级中的第一个子级，则div仅匹配div。

相比之下，{/ 3>在选择了一组元素后应用，并将该集合简化为匹配的第一个元素 - 可能是也可能不是第一个孩子在其父母。

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

请注意，jQuery还有first()（而不是:first-child），这是一个jQuery扩展，实际上与在事后应用.first()有效。它只是在选择器引擎中完成。作为一个jQuery扩展，它意味着jQuery必须处理选择器而不是传递给（可能更快）内置浏览器选择器引擎。

让我们看看所有三个实际行动：

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>

此外，使用的最佳做法是什么？

适合您需要做的事情，因为他们做不同的事情。

Answer 2

:first-child和first()之间的主要区别在于:first-child可以返回带有上下文的多个元素到其父级。

检查以下示例

＆＃13;

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

＆＃13;

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

＆＃13;

 <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>

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

 <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>

＆＃13;

在摘要中，first-child和nth-child(1)可以返回多个带有上下文的元素，而eq(0)，:first和first()会返回单个元素。

希望这有帮助！

Answer 3

经过一番研究，我自己尝试了easy example并得到了。{ 差。

$(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>

何时使用：jQuery中的first-child选择器vs first（）方法？

3 个答案: