<div>This is field 1</div>
<div>This is field 2</div>
<div>This is field 3</div>
<div>This is field 4</div>
<div>This is field 5</div>
所有你要做的就是在页面加载完成之后通过jQuery的操作将丑陋的HTML添加回去：
复制代码 代码如下:
$(document).ready(function() {
$('.field').before('<div><div>');
$('.field').after('</div><div><div>
<img src="https://www.jb51.net/icon.png" alt="icon" /></div><div>
<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的一些缺陷。
尤其，提供一些常见的数组函数的浏览器支持是一个补丁。jQuery提供了迭代、过滤、克隆、合并和从数组中去除重复项的方法。
其他常用的函数包括得到下拉框中的选择项。用传统的JavaScript方法，你就必须使用getElementById得到<select>元素，然后通过遍历它的子元素找出被选中的元素。而jQuery提供了相当容易使用的方法：
复制代码 代码如下:
$('#selectList').val();
花时间浏览官方网站上的jQuery文档与一些不常用的方法上是很值得的。
19. 使用noConflict重命名jQuery对象
大多数JavaScript框架都使用$符号作为缩写，当在同一个页面使用多个JS框架时，页面很容易发生冲突。幸运的是有一个简单的方法。noConflict()函数交回$的控制权并允许你设置成自己的变量名：
复制代码 代码如下:
$('#selectList').val();
20. 如何得知图片已加载完毕
这也一个没有很好文档说明的问题（至少在我查找时没看到），但是在创建照片库、旋转灯笼效果等方面，它是相当常见的需求。而这在jQuery中很容易实现。
所有你要做的就是在IMG上使用.load()方法，在其中添加一个回调函数。下面的例子改变了一个图片src的属性同事附加上一个简单的load函数：
复制代码 代码如下:
$('#myImage').attr('src', 'image.jpg').load(function() {
alert('Image Loaded');
});
你应该可以发现一旦图片加载完毕就会弹出一个alert。
21. 总是使用最新版本
jQuery仍在不断的更新，它的作者John Resig一直在寻找提高jQuery性能的方法。jQuery当前的版本是1.3.2，John已经宣称他正在写一个新的选择器引擎Sizzle，这可能会显著的提高选择器性能（在Firefox中提升了4倍），因此我们应当保持最新版本。
22. 如何检查元素是否存在
你不必检查元素是否在页面上存在就可以使用它，因为如果没有在DOM中找到合适的元素，jQuery什么也不会做。可是当我们需要检查元素是否被选择了，或是有多少项被选择了，你可以使用length属性：
复制代码 代码如下:
if ($('#myDiv).length) {
// your code
}
简单之极。
23. 给你的HTML属性增加JS类
我是从Karl Swedberg那学到这个技巧，过去学习jQuery时一直在看他的书。
他最近在我以前的文章留下了对该用法的评论，基本原则如下示之。
首先，在jQuery加载之后你可以使用方法将”JS”类添加到HTML标签中：
复制代码 代码如下:
$('HTML').addClass('JS');
因为这仅仅发生在javascript有效的时候，如果用户打开JavaScript开关，那么你可以使用它给元素添加上CSS风格：
复制代码 代码如下: