中级 jQuery

核心提示： ID 测试耗时 218 毫秒，而 CLASS 测试耗时 19.9 秒！甚至在专门为该测试构建的简单页面上，中级 jQuery(9)，ID 搜索也要比 CLASS 搜索快 100 倍！技巧 #2 - 提供尽可能多的搜索信息 jQuery 提供如此多的页面元素搜索方法，有时您难以指出哪种方法是最好的

ID 测试耗时 218 毫秒，而 CLASS 测试耗时 19.9 秒！甚至在专门为该测试构建的简单页面上，ID 搜索也要比 CLASS 搜索快 100 倍！

技巧 #2 - 提供尽可能多的搜索信息

jQuery 提供如此多的页面元素搜索方法，有时您难以指出哪种方法是最好的。有一条经验是不会错的，即为搜索参数提供尽可能多的信息。因此，假如您正在搜索带有 “clickable” CLASS 的所有页面元素，如果您提前知道仅有 DIV 附带有 CLASS，那么就能提高搜索性能。所以，搜索 “div.clickable” 会更加快。图 6 显示了支持该技巧的结果。

图 6. 尽可能多地提供信息

考虑到底层 JavaScript 代码之后，这就不足为奇了。通过提供元素标记，与 CLASS 参数匹配的搜索元素数量将大大减少，从而将搜索性能提升至与本例中的 ID 搜索相当。

开发人员在编写 jQuery 选择方法时不能偷懒，尽管 jQuery 的简单让人产生偷懒的欲望。简单让您放松了警惕。搜索机制变得如此简单，让我们倾向于仅输入一条信息。然而，您应该总是尽可能多地输入信息，尤其是已知信息。清单 2 显示了一个很好的例子。

清单 2. 提供充足的信息

　　　
//　Assume　there　are　50　of　these　in　some　giant　form,　and　you　need　to　validate　
//　these　fields　before　they　are　submitted,　and　there　are　hundreds　of　other　
//　elements　on　the　page　as　well　
<input　type=text　class="notBlank">　
　
//　the　"bad"　way　to　validate　these　fields　
$(".notBlank").each(function(){　
　　if　($(this).val()=="")　
　　　$(this).addClass("error");　
});　
　
//　the　"good"　way　to　validate　these　fields　
$("input.notBlank").each(function(){　
　　if　($(this).val()=="")　
　　　$(this).addClass("error");　
});　
　
//　the　"best"　way　to　validate　these　fields　
$("input:text.notBlank").each(function(){　
　　if　($(this).val()=="")　
　　　$(this).addClass("error");　
　　　});