创建jQuery插件

插件的类型

①全局（类）方法 【开发频率低】    ②对象（实例）方法【开发频率高】     选择器

开发插件的格式

 

$.插件=fun      $.名字空间={插件:fun,插件:fun}     $.extend({})

$.fn.插件=fun   $.fn.名字空间={插件:fun,插件:fun}  $.fn.extend({})

 

{

方法名:function(){},

方法名:function(){},

……

}

$.extend()的另一个作用

var newObject=$.extend({},{},{}…)       合并多个对象
<script>
    function fn(arg){
        var newObject=$.extend({
            name1:"value1",
            name2:"value2",
            name3:"value3"
        },arg);
        return newObject;
    }
    console.log(fn({name4:"value4",name5:"value5"}));//添加
    console.log(fn({name1:"value4",name2:"value5"}));//覆盖
    console.log(fn());//默认
</script>

$.插件()—全局(类)方法   插件开发  

//1.直接给jquery添加全局函数
jQuery.myAlert1=function (str) {
    alert(str);
};
//2.使用命名空间(如果不使用命名空间容易和其他引入的JS库里面的同名方法冲突)
jQuery.webdev={
    myAlert2:function (str) {
        alert(str);
    },
    centerWindow:function (obj) {
        obj.css({
            'top':($(window).height()-obj.height())/2,
            'left':($(window).width()-obj.width())/2
        });
        //必须进行返回对象的操作，否则就不能继续往下进行链式操作了。。
        return obj;
    }
};
//3.用extend()方法。
jQuery.extend({
    myAlert3:function (str1) {
        alert(str1);
    },
    myAlert4:function () {
        alert(11111);
    }
});

$().插件()—对象(实例)方法  插件开发

 

原理：jQuery插件的实质，其实就是给jQuery原型对象增加一个新的方法，让jQuery对象拥有某一个功能。

通常通过给$.fn添加方法就能够扩展jQuery对象。

$是jQuery的简写，fn是prototype的简写。

$.fn就相当于jQuery.prototype

语法：$.fn.方法名  = function(){};

$().插件()—对象(实例)方法  插件开发 模板
;(function ($) {
    $.fn.plugin=function (options) {
        var defaults={
            //各种参数、各种属性
        };
        //options合并到defaults上,defaults继承了options上的各种属性和方法,将所有的赋值给endOptions
        var endOptions=$.extend(defaults,options);
        
        this.each(function () {
            //实现功能的代码
        });
    };
})(jQuery);