$('#myTable')
.find('.firstColumn')
.css('background','red')
.end()
.find('.lastColumn')
.css('background','blue');
写一个能够进行方法链式调用的自定义jQuery函数也很容易。你所做的就是要写个能修改元素并返回元素的函数。
复制代码 代码如下:
$.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);
},
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() {
$(this).animate({ "width": 200, "height": 200 }, "slow");
});
你能够给值是数字的属性添加动画效果。你也可以下载插件帮助你给非数字值的属性添加动画效果，像colors and background colors
12. 了解事件代理
与之前相比，jQuery能够更容易得向DOM元素无缝添加事件。这是很棒的特性，然而向元素添加太多的事件是效率很差的。在很多情况下事件代理允许你用少量的事件实现同样的目的。最好的解释方法就是使用实例：
复制代码 代码如下:
$('#myTable TD').click(function(){
$(this).css('background', 'red');
});
当我们点击表格中的单元格时，上面的代码将使所有单元格背景变为红色。比方说，你有一个10列、50行的网格，那么就会绑定上500个事件。嗯，这时就是事件代理出场的时候了：
复制代码 代码如下:
$('#myTable').click(function(e) {
var clicked = $(e.target);
clicked.css('background', 'red');
});
e'包含了事件的信息，包括了实际接收到click事件的目标元素。我们所要做的就是检查是哪个单元格被点击了。相当的巧妙！
事件代理带来了另外一个好处。正常情况下，在你往一个元素集合绑定一个事件，该事件仅仅只是绑定到这些集合元素上。如果你向DOM中添加了新的元素，尽管这些新元素被选择器所匹配，但是这些新元素并不会绑定上事件处理（你同意我的观点吗？），因此不会有事件发生。
当使用事件代理时，你能够在事件被DOM绑定后仍然可以添加多个被匹配的元素到其中，而它们同样能够正常工作。
13. 利用classes存储状态
这是在html中存储信息最基本的方法。jQuery擅长基于classes进行元素的操作，因此如果你需要存储元素的状态信息，为什么不试试使用额外的class来存储它呢？
这里有一个例子。我们想创建一个展开的菜单。当你点击按钮时，我们希望通过slideDown()和slideUp()进行菜单的展开与收缩。请看下面的HTML：
复制代码 代码如下: