var myList = $('.myList');
var myListItems = '<ul>';
for (i = 0; i < 1000; i++) {
myListItems += '<li>This is list item ' + i + '</li>';
}
myListItems += '</ul>';
myList.html(myListItems);
现在所花费的时间仅19毫秒，比我们之前的第一个例子明显提高了50倍。
8. 尽可能使用ID而不是class
jQuery利用classes进行DOM元素选择操作与通过ID进行选择一样容易，因此与之前相比更自由的使用classes进行元素选择操作很有吸引力。不过由于jQuery使用浏览器固有的方法（getElementById ）进行选择操作，因此利用ID进行选择操作更有优势。有多快呢？让我们来看看。
我使用前一个例子，修改它以便于我们创建的每个LI有一个唯一的class。然后我将遍历之，每次选择一个元素：
复制代码 代码如下:
// Create our list
var myList = $('.myList');
var myListItems = '<ul>';
for (i = 0; i < 1000; i++) {
myListItems += '<li>This is a list item</li>';
}
myListItems += '</ul>';
myList.html(myListItems);
// Select each item once
for (i = 0; i < 1000; i++) {
var selectedItem = $('.listItem' + i);
}
正如所想的，我的浏览器花费了5066毫秒的时间（5秒多）。因此我修改上述代码以使用ID而不是class，然后通过ID进行选择。
复制代码 代码如下:
// Create our list
var myList = $('.myList');
var myListItems = '<ul>';
for (i = 0; i < 1000; i++) {
myListItems += '<li>This is a list item</li>';
}
myListItems += '</ul>';
myList.html(myListItems);
// Select each item once
for (i = 0; i < 1000; i++) {
var selectedItem = $('#listItem' + i);
}
仅仅耗时61毫秒，几乎快了100倍
9. 给选择器提供上下文
默认情况下，当你使用类似$('.myDiv')的选择器时将在整个DOM文档查找元素，这有很大的代价。
当执行选择操作时，jQuery函数可以指定第二个参数：jQuery( expression, context )通过给选择器提供一个上下文，那就会在这个context中进行元素查找，而不必在整个DOM文档中查找元素。
为了解释这个，我们采用前面的第一段代码。它创建一个有1000项内容的UL，每项都有一个单独的class。
然后遍历之每次选择一项。你应该记得通过class选择所有的1000项item需要耗时5秒多。
复制代码 代码如下:
var selectedItem = $('#listItem' + i);
然后我给其添加一个上下文，以便于仅在UL中执行选择操作：
复制代码 代码如下:
var selectedItem = $('#listItem' + i, $('.myList'));
由于效率太差，仍耗时3818毫秒的时间，但是通过一个很小的修改仍获得了25%的速度提升。
10. 正确使用方法链
jQuery最炫的一个特性就是jQuery能够连续的进行方法调用。举例来说，你想去切换元素的class：
复制代码 代码如下:
$('myDiv').removeClass('off').addClass('on');
如果你像我这样，你可能在前五分钟的jQuery学习就可以更进一步使用它。首先它仍可以跨行操作(jQuery是JavaScript) ，这意味着你能够写出下面这样工整的代码：
复制代码 代码如下:
$('#mypanel')
.find('TABLE .firstCol')
.removeClass('.firstCol')
.css('background' : 'red')
.append('<span>This cell is now red</span>');
使用链表的习惯将有助于你减少选择器的使用。然而可以更深入使用之，你想在一个元素上执行好几个函数，但是以某种方式改变了操作的元素：
复制代码 代码如下:
$('#myTable').find('.firstColumn').css('background','red');
我们选择了一个表格，在其中找到class为”firstColumn”的单元格，然后使之背景变为红色。
现在我们希望将所有class为”lastColumn”的单元格背景设为蓝色。因为我们已经使用了find()函数过滤出class不为”firstColumn”的所有单元格，因此我们需要再一次对表格使用选择操作，我们难道不能连续进行方法调用吗？幸运的是jQuery提供了end()函数，这将匹配的元素列表变为前一次状态以便于你可以执行方法链表：
复制代码 代码如下: