假设我有以下HTML代码:
<div class="contacts">
<h1>All contacts</h1>
<div class="contact new">
<p class="name">Jim Jones</p>
<p class="phone">(555) 555-1212</p>
</div>
<div class="contact new">
<p class="name">Bob Smith</p>
<p class="phone">(555) 555-1213</p>
</div>
<div class="contact new">
<p class="name">Dave Baker</p>
<p class="phone">(555) 555-1214</p>
</div>
<div class="contact">
<p class="name">Pete Harrison</p>
<p class="phone">(555) 555-1215</p>
</div>
<div class="contact">
<p class="name">George Donald</p>
<p class="phone">(555) 555-1216</p>
</div>
<div class="contact">
<p class="name">Chris Root</p>
<p class="phone">(555) 555-1217</p>
</div>
</div>
如果我想从联系人 div 中获取所有新的联系人(标记为 'new' 类),哪种方法更快、更可扩展等等?
$('.contacts .new');
或者
$('.new', '.contacts');
更新
答案和评论中有很多很棒的信息。总结一下主要观点,在大多数浏览器中,当有多个 .contacts divs 时,单个选择器能够更好地扩展。在只有一个 .contacts div 存在时,两个选择器的上下文方法更快。
从中可以得到一些有用的启示,我们可以在选择带有 id 的元素内进行选择时使用一种方法。
$('p:first', '#chapter2'); // get the first paragraph from chapter 2
当我们需要从可能包含大量元素的组中进行选择时,请使用单个选择器方法。
$('.chapter p:first-child'); // get the first paragraph from all chapters