11-jQuery插件

第十一节：插件

什么是插件

插件(Plugin)也称为jQuery的扩展。以jQuery核心代码为基础编写的符合一定规范的应用程序。通过js文件的方式引用。

插件分为哪几类

UI类、表单及验证类、输入类、特效类、Ajax类、滑动类、图形图像类、导航类、综合工具类、动画类等等

引入插件的步骤

引入jquery.js文件，而且在引用插件之前引入
引入插件
引入插件相关文件，比如皮肤、中文包

如何自定义插件：

插件形式分为3类：
封装对象方法插件
封装全局函数插件
选择器插件(类似于.find())

自定义插件的规范（解决各种插件的冲突和错误，增加成功率）

命名：jquery.插件名.js
1、所有的新方法附加在jquery.fn对象上面，所有新功能附加在jquery上
2、所有的方法或插件必须用分号结尾，避免出问题
3、插件必须返回jQuery对象，便于链式连缀
4、避免插件内部使用，如果要使用，请传递jQuery(并不是总等于jQuery，另外其他js框架也可能使用$)
5、插件中的this应该指向jQuery对象
6、使用this.each()迭代元素

自定义插件案例

为了方便用户创建插件，jQuery提供了jQuery.extend() 和jQuery.fn.extend()
jQuery.extend()：创建工具函数或者是选择器
jQuery.fn.extend()：创建jQuery对象命令 （fn相当于prototype的别名）

jQuery官方提供的插件开发模板

;(function($){    $.fn.plugin=function(options){        var defaults = {            //各种参数 各种属性        }        var options = $.extend(defaults,options);        this.each(function(){            //实现功能的代码        });        return this;    }})(jQuery);

自定义jQuery函数：

(function($){    $.extend({        test: function(){            alert("hello plugin");        }    })    })(jQuery);

自定义jQuery命令：

形式1：

(function($){    $.fn.extend({        say : function(){         alert("hello plugin");    }    })})(jQuery);

形式2：

(function($){    $.fn.say = function(){        alert("hello plugin");    };})(jQuery);