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

  

上一篇:jQuery 插件基础


下一篇:jQuery官方基础教程笔记(转载)