我想知道使用 jQuery 进行选择时使用上下文参数与使用普通 CSS 范围选择器相比是否有任何优势。
假设我有这个 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 中获取所有新联系人(由“新”类标记),哪种方法更快、扩展性更好等等?
$('.contacts .new');
Or
$('.new', '.contacts');
jsFiddle http://jsfiddle.net/craigm/cvWA7/
Update
答案和评论中散布着很多重要的信息。总结要点,在大多数浏览器中,当存在多个 .contacts div 时,单个选择器可以更好地缩放。在大多数浏览器中,两个选择器上下文方法速度更快,只存在一个 .contacts div。
值得一提的是,我们可以在选择带有 id 的元素内部时使用一种方法。
$('p:first', '#chapter2'); // get the first paragraph from chapter 2
对于我们从可能很大的一组元素中进行选择的情况,请使用单一选择器方法。
$('.chapter p:first-child'); // get the first paragraph from all chapters
与(我的)所有的可能性相比,2 号似乎是最快的。
Check it here http://jsperf.com/jquery-selection-method
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)