//… 许多复杂的操作
// better
var
$container = $(“#container”),
$containerLi = $container.find(“li”),
$element = null;
$element = $containerLi.first().detach();
//… 许多复杂的操作
$container.append($element);
12.熟记技巧
你可能对使用jQuery中的方法缺少经验,一定要查看的文档,可能会有一个更好或更快的方法来使用它。
// 糟糕
$(‘#id’).data(key,value);
// 建议 (高效)
$.data(‘#id’,key,value);
13.使用子查询缓存的父元素
正如前面所提到的,DOM遍历是一项昂贵的操作。典型做法是缓存父元素并在选择子元素时重用这些缓存元素。
// 糟糕
var
$container = $(‘#container’),
$containerLi = $(‘#container li’),
$containerLiSpan = $(‘#container li span’);
// 建议 (高效)
var
$container = $(‘#container ‘),
$containerLi = $container.find(‘li’),
$containerLiSpan= $containerLi.find(‘span’);
14.避免通用选择符
将通用选择符放到后代选择符中,性能非常糟糕。
// 糟糕
$(‘.container > *’);
// 建议
$(‘.container’).children();
避免隐式通用选择符
通用选择符有时是隐式的,不容易发现。
// 糟糕
$(‘.someclass :radio’);
// 建议
$(‘.someclass input:radio’);
优化选择符
例如,Id选择符应该是唯一的,所以没有必要添加额外的选择符。
// 糟糕
$(‘div#myid’);
$(‘div#footer a.myLink’);
// 建议
$(‘#myid’);
$(‘#footer .myLink’);
15.避免多个ID选择符
在此强调,ID 选择符应该是唯一的,不需要添加额外的选择符,更不需要多个后代ID选择符。
// 糟糕
$(‘#outer #inner’);
// 建议
$(‘#inner’);
16.坚持最新版本
新版本通常更好:更轻量级,更高效。显然,你需要考虑你要支持的代码的兼容性。例如,2.0版本不支持ie 6/7/8。
摒弃弃用方法
关注每个新版本的废弃方法是非常重要的并尽量避免使用这些方法。
// 糟糕 – live 已经废弃
$(‘#stuff’).live(‘click’, function() {
console.log(‘hooray’);
});
// 建议
$(‘#stuff’).on(‘click’, function() {
console.log(‘hooray’);










