jquery插件开发基础入门

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