javascript - jquery String选择器和domElement选择器的区别

Question

最近我在项目中发现了一些奇怪的代码。它运行良好，但我不明白他们为什么使用这种方式。

$($('#' +targetDiv)[0])

使用这种方式而不是使用 $('#' +targetDiv) 是错误还是任何其他原因？

似乎两个选择器都指示相同的 dom 元素。

谢谢。

Answer 1

区别在于 $($(selector)[0]) 是一个仅包含第一个匹配项的 jQuery 对象，而 $(selector) 是一个 jQuery 对象可能不仅仅包含第一个匹配项。

换句话说，$(selector)[0] 将检索 jQuery 对象中的第一个 DOM 元素。用 $() 包装 DOM 元素将返回一个 jQuery 对象。另一方面，$(selector) 将检索所有匹配项(可能不仅仅是第一个匹配项)。

重写 $($(selector)[0]) 的更好方法是 $(selector).eq(0)。

例如:

$($('.example1')[0]).css('background-color', '#f00');

$('.example2').css('background-color', '#0f0');

$('.example3').eq(0).css('background-color', '#00f');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p class="example1">$($('.example1')[0])</p>
<p class="example1">$($('.example1')[0])</p>
<p class="example1">$($('.example1')[0])</p>
<hr />
<p class="example2">$('.example2')</p>
<p class="example2">$('.example2')</p>
<p class="example2">$('.example2')</p>
<hr />
<p class="example3">$('.example3').eq(0)</p>
<p class="example3">$('.example3').eq(0)</p>
<p class="example3">$('.example3').eq(0)</p>