作为 Nettuts+ 的编辑，我可以审查提交的教程中的大量代码。尽管 jQuery 已经推出多年，但我仍然最常看到一个常见的错误。
考虑以下代码：
$('.nav a').click(function() {
$(this).hide();
$(this).css('color', 'red');
$(this).show();
alert('something else');
$(this).hide();
return false;
});
由于多种原因，上面的代码过于复杂。不要担心代码实际上做了什么（它是胡言乱语）。相反，我希望您查看所有对 $(this) 的引用。
将 DOM 视为一个池。
将 DOM 视为一个池。还记得小时候，你会跳进水池里寻找硬币，而你的父母却表现得好像在旁边看着吗？这将是我们在现实世界中的比较。
每次使用 $('.someClass') 时，jQuery 都会跳转到池 (DOM) 中，并搜索该硬币（或节点）。因此，当您在一个函数中多次引用它时，就会需要大量的潜水。或者，从现实世界的比较来看，这是浪费且不必要的。如果不需要，为什么要调用 jQuery？您应该执行我们所说的“缓存”。
$('.nav a').click(function(e) {
var anchor = $(this);
anchor
.hide()
.css('color', 'red')
.show();
alert('something else');
anchor.hide();
e.preventDefault();
});
这样就干净多了。虽然现在现代浏览器引擎的速度快得令人难以置信，并且会尽可能地弥补你糟糕的编码，但你仍然应该努力编写高效的代码，并避免浪费所有精力在池中跳跃。现在，从技术上讲，如果您向 jQuery 传递一个 DOM 节点，例如 this，它不会重新查询 DOM。它只是返回一个 jQuery 对象。
老实说，因为两者之间的性能差异可以忽略不计，所以我们为自己编写了干净的代码。
让我们考虑一个稍微复杂一点的例子：选项卡。
$('.tabs li').css('position', 'relative');
$('.tabs li').click(function() {
$('.tabs li').removeClass('active');
$(this).addClass('active');
$(this).load('someHref', function() {} ); // example
$(this).css('top', '1px');
});
这个代码到处都是。它很丑陋，而且效率低下。第一个解决办法是摆脱所有 CSS。如果值是动态创建的，则只能在 JavaScript 中放置样式。例如，如果您需要计算元素在屏幕上的精确位置，您可以使用 .css('left',calculatedValue)。在这种情况下，可以将其全部导出到外部样式表。这给我们留下了：
$('.tabs li').click(function() {
$('.tabs li').removeClass('active');
$(this).load('someHref', function() {} ); // example
$(this).addClass('active');
});
接下来，我们为什么要继续在 DOM 中查询 .tabs li 和 .tabs li 和 $(this)？别再在泳池里跳了。让我们“缓存” .tabs li？别再在泳池里跳了。让我们“缓存” .tabs li 的位置。
var tabs = $('.tabs li');
tabs.click(function() {
tabs.removeClass('active');
$(this).load('someHref', function() {} ); // example
$(this).addClass('active');
});
更好了，但我们仍然调用 $(this) 两次，这没什么大不了的。但是，根据我的经验，如果不尽早将其消灭在萌芽状态，这个数字很快就会增加。
var tabs = $('.tabs li');
tabs.click(function() {
var tab = $(this);
tabs.removeClass('active');
tab.addClass('active')
.load('someHref', function() {} ); // example
});
另一个（优化程度稍差）选项是使用过滤。
var tabs = $('.tabs li');
tabs.click(function() {
tabs.removeClass('active')
.filter(this)
.addClass('active')
.load('someHref', function() {} ); // example
});
本例的不同之处在于，我们不是引用 $(this)，而是使用 filter()，而是使用 filter() 方法将列表项的集合减少到仅单击的项.
是的，如果您在函数中多次引用 $('.tabs) ，世界不会终结。如今 JavaScript 引擎速度非常快。如果您要测试数千次这样做的性能，执行的差异可能是几百毫秒。但问题仍然存在：你为什么要这么做？
$('.tabs') 是一个运行大量代码的实际函数。还应该注意的是，这些概念通常适用于 JavaScript，而不仅仅是 jQuery。
使用上述 caching 技术为自己编写更清晰的代码。
以上是新标题：jQuery新手小贴士：停止在泳池中跳跃的详细内容。更多信息请关注PHP中文网其他相关文章！
