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()函数，这将匹配的元素列表变为前一次状态以便于你可以执行方法链表：

$('#myTable')
.find('.firstColumn')
.css('background','red')
.end()
.find('.lastColumn')
.css('background','blue');

写一个能够进行方法链式调用的自定义jQuery函数也很容易。你所做的就是要写个能修改元素并返回元素的函数。

view plaincopy to clipboardprint?
$.fn.makeRed = function() {
return $(this).css('background', 'red');
}

$('#myTable').find('.firstColumn').makeRed().append('hello');

它很简单吧！

11. 学会正确使用效果
在我刚开始使用jQuery的时候，就很喜欢这一点：它可以很容易使用预定义好的各种动画效果，像slideDown()和fadeIn()之类的。由于jQuery提供的animate()方法十分易用和强大，我们很容易深入使用它。事实上，在jQuery源代码中不少方法就是通过animate()函数来实现效果的。

slideDown: function(speed,callback){
return this.animate({height: "show"}, speed, callback);
}, //liehuo.net

fadeIn: function(speed, callback){
return this.animate({opacity: "show"}, speed, callback);
}

animate()方法仅仅作用在CSS上，根据数值平滑的进行转换。因此你能够改变宽度、高度、透明度、背景色、top、left、margin、颜色、字体大小以及任何你想要的。
给菜单项添加高度变化的效果是很容易做到的：

$('#myList li').mouseover(function() {
$(this).animate({"height": 100}, "slow");
});

不像其他的jQuery函数，动画效果自动的排进队列，因此如果在第一个特效完成之后你想运行第二个特效，需要两次调用animate方法：

$('#myBox').mouseover(function() {
$(this).animate({ "width": 200 }, "slow");
$(this).animate({"height": 200}, "slow");
});

如果你想动画效果同时发生，那么需要将所有的styles作为一个参数对象传入方法中：

$('#myBox').mouseover(function() { //liehuo.net
$(this).animate({ "width": 200, "height": 200 }, "slow");
});

你能够给值是数字的属性添加动画效果。你也可以下载插件帮助你给非数字值的属性添加动画效果，像colors and background colors