盒子
盒子

jQuery基础之插件(六)

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

    • UI类、表单及验证类、输入类、特效类、Ajax类、滑动类、图形图像类、导航类、综合工具类、动画类等等
  • 引入插件的步骤

    • a.引入jquery.js文件,而且在所以插件之前引入
    • b.引入插件
    • c.引入插件相关文件,比如皮肤、中文包
  • 使用插件(验证demo

  • 如何自定义插件:

    • 插件形式分为3类:

      • a. 封装对象方法插件
      • b. 封装全局函数插件
      • c. 选择器插件(类似于.find())
    • 自定义插件的规范(解决各种插件的冲突和错误,增加成功率)

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

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

    • 自定义jQuery函数:

1
2
3
4
5
6
7
(function($){
$.extend({
test: function(){
alert("hello plugin");
}
})
})(jQuery);
  • 自定义jQuery命令:

    形式1:

1
2
3
4
5
6
7
(function($){
$.fn.extend({
say : function(){
alert("hello plugin");
}
})
})(jQuery);

形式2:

1
2
3
4
5
6
(function($){
$.fn.say = function(){
alert("hello plugin");
};

})(jQuery);
支持一下
扫一扫,支持poetries