jquery插件开发基础入门
入门
编写一个jquery插件开始于给jquery.fn加入新的功能属性，此处添加的对象属性的名称就是你的插件名称
jQuery.fn,myPlugin = function(){
//你自己的插件代码
};
为了避免冲突我们应该将jQuery传递给一个自我执行的封闭程序
(function($){
$.fn.myPlugin = function(){
//你自己的插件代码
}
})(jQuery)
环境
现在我们可以编写实际的插件代码，但是在这之前我们必须得对插件所处的环境有个概念，在插件的范围里，this关键字代表了这个插件要执行的jQuery对象，这里容易产生一个普遍的误区，因为在其他包含callback的jQuery函数中，this关键字代表了原生的DOM元素，这常常会导致开发者误将this关键字无谓的包在jQuery中，如下所示
(function($){
$.fn.myPlugin = function(){
//此处没有必要将this包在$号中如$(this),因为this已经是一个jQuery对象。
//$(this)等同于$($("#element"));
this.fadeIn("normal",function(){
//此处callback函数中this关键字代表一个DOM元素
})
}
})(jQuery)
//调用
$("#element").myPlugin();
基础知识
现在我们理解了jQuery插件的基础知识，让我们写一个插件
(function($){
$.fn.maxHeight = function(){
var max = 0;
this.each(function(){
max = Math.max(max,$(this).height());
});
return max;
};
})(jQuery);
var tallest = $("div").maxHeight(); //返回高度最大的div元素的高度
维护Chainability(维护链接性)
很多时候一个查件的恶意图仅仅是以某种方式修改收集的元素，并把它们传递给链中的下一个方法。要保持一个插件的chainability必须确保你的插件返回this关键字
(function($){
$.fn.lockDimensions = function(type){
return this.each(function(){
var $this = $(this);
if(!type || type =="width"){
$this.width($this.width());
}
if(!type || type =="height"){
$this.height($this.height());
}
})
}
})(jQuery)
$("div").lockDimensions("width").css("color","red");
//由于插件返回this关键字，它保持了chainability，这样jQuery收集的元素可以继续被jQuery方法如.css控制。 因此，如果你的插件不返回固有的价值，你应该总是在其作用范围内返回this关键字。 此外，你可能会推断出，传递给插件的参数将会在插件的作用范围内被传递。 因此，在前面的例子，字符串’width’变成了插件的类型参数。
默认值和选项
对于比较复杂的和提供了许多选项可制订的插件，最好有个当插件被调用的时候可以被拓展的默认设置（通过使用$.extend）.
(function($){
$.fn.tooltip = function(options){
//创建一些默认值，拓展任何被提供的选项
var settings = $.extend({
"location" : "top",
"background-color" : "blue"
},options);
return this.each(function(){
//Tooltip插件代码
});
};
})(jQuery)
$("div").tooltip({
"location":"left"
})