[翻译]25招改善你的jQuery - [2]
目录
2.使用备忘单
3.整合所有的脚本并缩减它们
4.使用Firebug出色的控制台日志工具
5.通过缓存最小化选择操作
6.最小化DOM操作
7.处理DOM插入操作时，将需要的内容包装在一个元素中
8.尽可能使用IDs而不是classes
9.给选择器提供上下文
10.正确使用方法链
11.学会正确使用效果
12.了解事件代理
13.利用classes存储状态
14.更好的方法是利用jQuery内置的data()方法存储状态
15.写你自己的选择器
16.精简你的HTML并在页面加载后修改它
17.为了速度和SEO方面的考虑，延迟加载内容
18.使用jQuery提供的工具函数
19.使用noConflict重命名jQuery对象
20.如何得知图片已加载完毕
21.总是使用最新版本
22.如何检查元素是否存在
23.给你的HTML属性增加JS类
24.返回'false'以防止默认行为
25. ready事件的简写16. 精简你的HTML并在页面加载后修改它
这个标题可能没有多大意思，但是这个技巧可能理顺你的代码、减小代码体积和页面的下载时间、有助优化你的搜索引擎。请看下面的例子：
<div class="fieldOuter">
<div class="inner">
<div class="field">
This is field number 1</div>
</div>
<div class="errorBar">
<div class="icon">
<img src="icon.png" alt="icon" /></div>
<div class="message">
<span>This is an error message</span></div>
</div>
</div>
<div class="fieldOuter">
<div class="inner">
<div class="field">
This is field number 2</div>
</div>
<div class="errorBar">
<div class="icon">
<img src="icon.png" alt="icon" /></div>
<div class="message">
<span>This is an error message</span></div>
</div>
</div>上面是一个HTML的具体例子，为了解释目的做了少量修改。我相信你也会认为这段代码相当的丑陋。如果类似代码很长的话，你最终会形成一个相当长且丑陋的页面。因此你可以像下面这样处理它：
<div class="field">This is field 1</div> <div class="field">This is field 2</div> <div class="field">This is field 3</div> <div class="field">This is field 4</div> <div class="field">This is field 5</div>
所有你要做的就是在页面加载完成之后通过jQuery的操作将丑陋的HTML添加回去：
$(document).ready(function() {
$('.field').before('<div class="fieldOuter"><div class="inner">');
$('.field').after('</div><div class="errorBar"><div class="icon">
<img src="icon.png" alt="icon" /></div><div class="message">
<span>This is an error message</span></div></div></div>');
});这样做并不总是可取的，在页面加载后的一瞬间你将会看到页面的闪动，但是在特定情况下你有很多重复的HTML内容，这时通过这个方法你可以显著的减小页面代码体积，减少无关且重复的标记能使你的SEO从中受益。
17. 为了速度和SEO方面的考虑，延迟加载内容
另外还有一个方法可以提升页面加载速度，理顺Spiders搜索的HTML内容，通过在页面加载之后使用AJAX请求晚加载其他内容，这样用户就可以马上开始浏览，让Spider看到你想要它们进行索引的内容。
我们已经在自己的网站上使用了这个技术。本页面上部的紫色按钮会弹出三个表格，方位与Google地图，这会使我们页面大小增加两倍。因此我们仅需要把这些HTML内容放入一个静态页面中，在页面加载完成之后通过load()函数加载它：
$('#forms').load('content/headerForms.html', function() {
// Code here runs once the content has loaded
// Put all your event handlers etc. here.
});我不会在页面上随处使用这个技巧。对此，你必须权衡考虑。你需要有额外的页面请求，而且页面上的部分内容不能立即呈现给用户，但是正确的使用这个技巧对优化会很有帮助。
18. 使用jQuery提供的工具函数
jQuery不仅仅有闪光的效果。jQuery作者也提供了一些相当实用的方法，这填补了JacaScript的一些缺陷。http://docs.jquery.com/Utilities
尤其，提供一些常见的数组函数的浏览器支持是一个补丁。jQuery提供了迭代、过滤、克隆、合并和从数组中去除重复项的方法。
其他常用的函数包括得到下拉框中的选择项。用传统的JavaScript方法，你就必须使用getElementById得到select元素，然后通过遍历它的子元素找出被选中的元素。而jQuery提供了相当容易使用的方法：
$('#selectList').val();花时间浏览官方网站上的jQuery文档与一些不常用的方法上是很值得的。
19. 使用noConflict重命名jQuery对象
大多数JavaScript框架都使用$符号作为缩写，当在同一个页面使用多个JS框架时，页面很容易发生冲突。幸运的是有一个简单的方法。noConflict()函数交回$的控制权并允许你设置成自己的变量名：
var $j = jQuery.noConflict();
$j('#myDiv').hide();20. 如何得知图片已加载完毕
这也一个没有很好文档说明的问题（至少在我查找时没看到），但是在创建照片库、旋转灯笼效果等方面，它是相当常见的需求。而这在jQuery中很容易实现。
所有你要做的就是在IMG上使用.load()方法，在其中添加一个回调函数。下面的例子改变了一个图片src的属性同事附加上一个简单的load函数：
$('#myImage').attr('src', 'image.jpg').load(function() {
alert('Image Loaded');
});你应该可以发现一旦图片加载完毕就会弹出一个alert。
21. 总是使用最新版本
jQuery仍在不断的更新，它的作者John Resig一直在寻找提高jQuery性能的方法。
jQuery当前的版本是1.2.6，John已经宣称他正在写一个新的选择器引擎Sizzle，这可能会显著的提高选择器性能（在Firefox中提升了4倍），因此我们应当保持最新版本。
【译注】这是去年年底写的文章，而目前最新版本是v.1.3.2。
22. 如何检查元素是否存在
你不必检查元素是否在页面上存在就可以使用它，因为如果没有在DOM中找到合适的元素，jQuery什么也不会做。可是当我们需要检查元素是否被选择了，或是有多少项被选择了，你可以使用length属性：
if ($('#myDiv).length) {
// your code
}简单之极。
23. 给你的HTML属性增加JS类
我是从Karl Swedberg那学到这个技巧，过去学习jQuery时一直在看他的书。
他最近在我以前的文章留下了对该用法的评论，基本原则如下示之。
首先，在jQuery加载之后你可以使用方法将"JS"类添加到HTML标签中：
$('HTML').addClass('JS');因为这仅仅发生在javascript有效的时候，如果用户打开JavaScript开关，那么你可以使用它给元素添加上CSS风格：
.JS #myDiv{display:none;}因此，这意味着在JavaScript打开时我们可以隐藏内容，然后在需要时使用jQuery显示这些内容（比如在用户点击时收缩或展开内容），同时在关闭JavaScript（以及搜索Spiders）时会看到所有内容。我将在晚些时候使用这个技巧。
可以在这里看到他的所有文章。
24. 返回'false'以防止默认行为
这是很明显的，也可能不是。如果你有这样的习惯：
<a href="#" class="popup">Click me!</a>
然后添加上如下的事件处理：
$('popup').click(function(){
// Launch popup code
});你在长页面使用上述方法时，它可能可以正常工作。有些时候你会注意到在点击链接后锚点会跳转到页面上部。
所有你要做的就是阻止它的默认行为，或者实际上你可以把"return false;"添加到任何事件的默认行为上。像这样：
$('popup').click(function(){
// Launch popup code
return false;
});25. ready事件的简写
一个小技巧但是通过使用$(document).ready()的简写，你可以少输入几个字符。取代：
$(document).ready(function (){
// your code
});你可以简写成：
$(function (){
// your code
});如果你喜欢这篇文章，请digg一下。
【译注】
翻译完毕！