jQuery插件开发

jQuery是当今使用最广泛的js插件之一

jQuery之所以是使用率最高的第三方库的原因就在于,jQuery 允许我们对其 扩展额外的功能,也就是说我们可以自定义编写插件

那么什么是jQuery插件

简单的说,就是给jQuery 扩展 新方法

自定义插件的实现

jQuery自定义插件 方要有两种方式:

1.通过 $.extend() 来扩展 jQuery,添加 的都是静态方法

2.通过 $.fn() 来扩展 jQuery ,重点要掌握这个

//$.extenc() 等价于 jQuery.extend()

//利用$.extend() 扩展的方法,都用$ 或者 jQuery直接调用

//扩展一个打印方法

$.extend({

    staticPrint : function( message ){

             console.log(message);

    }

});

//使用 已经扩展好的方法

$.staticPrint(" 今晚 打考虑!");

//$.fn  等价于 jQeury.fn

/*

      重点

         $.fn 等价于 jQuery.prototype

        $.fn 相当于 jQuery的构造函数的  prototype 属性 添加 了一个方法,也就是 ,所有jQuery对象 都可以通过 $.fn扩展方法

*/

//基本语法

$.fn.myPlugin = function(){

          console.log("我的插件!");

}

//只能用jQuery 调用 

$("body").myPlugin();

/*

注意:以上那种写法不好,以后写插件,要采用以下方法

$          window        document  是分别传进来的jQuery对象  window对象  document对象

这样写的好处:可以加快 代码的执行速度

分号;  是防止 将来代码压缩 或者  和防止 插件没有正确 结尾导致的一些问题

*/

;( function( $ , window , document ){

//开始写插件

$.fn.print = function( message ){

//this就是当前对象,也就是所选元素,因为我们会通过  选择器获取 相应的元素后 (jQuery对象),再调用 扩展的print方法,原理来构造函数 添加 原型方法 一模一样

             console.log($(this).html()  "---" + message);

            console.log("开始,写插件!");

          //如果想要支持 链式语法的话,那么 得返回 当前对象 , 也就是 当前所选的元素

          return this;

}

}( jQuery , window, document);

//使用

$("p").print("参数");

$("p").print("参数").html("更改内容");