如何创建一个jQuery插件
为什么要创建jQuery插件 ？ 因为这样代码可以复用。
我们有这样一个页面，页面上面有如下的文字(看源码)，我们想要的效果是，当鼠标移到链接的时候，用一个浮动的div来显示a标签的title内容.
这是通过js来完成的。假设有一个方法tooltip(), 你只需要调用这个方法就能达成你的愿望，就像这样：
$('a.tooltip').tooltip({
rounded: true
});
假设我们把插件命名为tooltip，则需要定义一个jQuery.tooltip.js文件。这样命名只是为了说明这是jQuery的插件，实际上你可以随便命名这个文件名。下面来开始写我们的插件：
(function($){
# ...code
})(jQuery);
插件的代码必须包含在这个格式里。这里要注意，要确保你没有使用别的js库，否则这个美元符$，会发生冲突，如果要避免产生这种冲突，你最好在插件里都使用jQuery字符来代替美元符。
我们首先来定义插件函数：
$.fn.tooltip = function(options) {
...
}
然后设置默认的参数：
var
defaults = {
background : '#e3e3e3',
color : 'black',
rounded: false
},
然后再用setting变量来接收用户自定义的参数，使用extend方法来merge这些参数。
settings = $.extend({}, defaults, options);
现在要开始写方法了，用户如果使用这个插件的时候，传入的jquery dom对象可能不只是一个元素，我们需要给每个class为tooltip的a标签都绑定好这个事件，那么就需要迭代了，这里jquery提供了each方法：
this.each(function() {
var $this = $(this);
var title = this.title;
... ...
}
这里为什么要用$this呢？ 这是为了提醒自己，正在和jQuery对象打交道。
然后写鼠标事件等等，来看最后的代码：
(function($){
$.fn.tooltip = function(options) {
var
defaults = {
background: '#e3e3e3',
color: 'black',
rounded: false
},
settings = $.extend({}, defaults, options);
this.each(function() {
var $this = $(this);
var title = this.title;
if($this.is('a') && $this.attr('title') != '') {
this.title = '';
$this.hover(function(e) {
// mouse over
$('
')
.appendTo('body')
.text(title)
.hide()
.css({
backgroundColor: settings.background,
color: settings.color,
top: e.pageY + 10,
left: e.pageX + 20
})
.fadeIn(350);
if(settings.rounded) {
$('#tooltip').addClass('rounded');
}
}, function() {
// mouse out
$('#tooltip').remove();
});
}
$this.mousemove(function(e) {
$('#tooltip').css({
top: e.pageY + 10,
left: e.pageX + 20
});
});
});
// returns the jQuery object to allow for chainability.
return this;
}
})(jQuery);
总结：
1. 这里有个小技巧，假如要定义多个变量：
var a = {};
var b = {};
var c = {};
可以这么写：
var
a = {},
b = {},
c = {};
2.插件代码里，循环内的this, 循环外的this，循环内的$(this)的关系， 实际上是jQuery对象和dom对象的关系。
页面上调用插件方法，插件方法内部的each外的this，则是jQuery对象，这个对象是个集合对象，也就是$('a.tooltip')这个对象，页面上共有2个class为tooltip的a标签。
jquery对象的$方法，返回的是jquery集合对象，里面的元素，如果你用get方法去调用得到的是dom，你用eq方法调用得到的是jquery对象，比如：
$('a').eq(0)得到的是jquery对象
$('a').get(0)得到的是dom对象，
直接$('a')[0]得到的是dom对象，
而jquery的each方法，我认为是迭代的是dom对象，而不是jquery对象，所以在each里面this是dom对象，而需要$(this)来得到jquery对象来进行操作 。把这个关系搞清楚就行了。
