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"
})