我希望$(‘#childDiv2 .txtClass’)或$(‘#childDiv2 input.txtClass’)在选择< input type =“text”id =“txtID”class =“txtClass”/>元件。但是根据这个
performance analysis $(‘。txtClass’);是其中最好的选择者。我使用的是JQuery 1.7.2
有人有解释吗?
有人有解释吗?
HTML
<div class="childDiv2"> <input type="text" id="txtID" class="txtClass"/> <p class="child">Blah Blah Blah</p> </div>
JS
$('.txtClass'); $('#childDiv2 .txtClass') $('#childDiv2 > .txtClass') $('input.txtClass') $('#childDiv2 input.txtClass')
解决方法
现代浏览器暴露了一种非常有效的
getElementsByClassName()方法,它返回具有给定类的元素。这就是为什么一个类选择器在你的情况下更快。
详细说明你的例子:
$(".txtClass") => getElementsByClassName() $("#childDiv2 .txtClass") => getElementById(),then getElementsByClassName() $("#childDiv2 > .txtClass") => getElementById(),then iterate over children and check class $("input.txtClass") => getElementsByTagName(),then iterate over results and check class $("#childDiv2 input.txtClass") => getElementById(),then getElementsByTagName(),then iterate over results and check class
正如你所看到的,第一种形式是现代浏览器中最快的形式是合乎逻辑的。