Jquery插件开发的方法总汇

时间: 2017-12-28阅读: 262标签: Jquery

jquery插件是用来扩展jquery对象的一种方法,它的使用方法是通过jquery对象$来调用。其中Jquery插件开发一共有三种方式:

$.extend()来扩展jQuery ,主要用于向jquery对象添加静态方法
$.fn 向jQuery添加新的方法 , 这里的fn等价于prototype,在jquery原型链上添加
$.widget()应用jQuery UI的部件工厂方式创建,改模式可以带很多jquery内建的属性,比如插件的状态信息自动保存等


1.使用$.extend()来扩展jQuery

通过$.extend()向jQuery添加了一个foo函数,然后可以通过$或者jQuery直接调用, 这种方式主要用来定义一些辅助方法是比较方便的。

jQuery.extend({       
  foo: function(name) {       
    console.log(name);       
 },
);

等级于:

jQuery.foo = function(name) {    
  console.log(name);
};


2.使用$.fn开发jquery插件

1、基本格式:

这是我们最常用的方式,它的基本格式如下:

$.fn.pluginName = function() {
    this.css('color', '#fff');
}

在$.fn上面添加一个方法,这个方法名字也就是插件名称 ,这里面的this指的是jQuery选中的元素($('#id‘)。调用如下:

$(function(){
        $('#id').myPlugin();
 })


2、支持链式调用

如何支持jquery的链式调用呢?我们只需要最后返回return this即可:

$.fn.pluginName = function() {
    this.css('color', '#fff');
    return this;
}


3、防止$符号污染的jQuery插件

有很多库可能都使用了$符号,为了防止它$被其它库给覆盖,所以我们可以使用立即执行函数通过传参的方式封装插件。形式如下:

(function($){
     $.fn.pluginName= function(color){
         this.css("color",color);        
         return this;
     }
}(jQuery));

 pluginName支持参数颜色,此时的$只属于这个立即执行函数的函数作用域,这样就可以避免$符号的污染。

 

4、可以接受参数的jQuery插件

我们可以通过定义一个对象,把插件的参数封装到对对象的,已对象的形式传递进去。
(function($){
     $.fn.pluginName= function(option){
         this.css("color",option.color).css("fontSize",option.fontSize+"px");    
         return this;
     }
}(jQuery));

把参数放到一个对象中传给插件还有一个好处就是我们可以在插件内部为一些参数定义一些缺省值 :

(function($){
     $.fn.pluginName= function(option){
         var default = { color:"green",fontSize:12};
         var opt= $.extend(default ,option);
         this.css("color",opt.color).css("fontSize",opt.fontSize+"px");    
         return this;
     }
}(jQuery));

注意:在为插件定义默认参数时,一定要把默认参数写在插件方法内部,这样默认参数的作用域就在插件内部。 

 

jquery动画实现_浅谈jQuery之动画

jQuery提供了JS未能提供的动画效果,利用jQuery的动画效果,可以极大的简化JS动画部分的逻辑,包括:滑入滑出动画、淡入淡出动画、显示隐藏动画、停止动画、自定义动画

jQuery 常用小技巧分享

整理一些简单技巧的集合,帮你提升 jQuery 技能,你可以直接拿来使用,下面内容包括:禁止右键点击、隐藏搜索文本框文字、隐藏搜索文本框文字、在新窗口中打开链接、检测浏览器...

jquery分页插件pagination.js报错pagination is not a function的bug解决方法

在使用jquery.pagination.js插件的时候,会出现pagination is not a function的错误,这是什么原因导致的呢?这里为大家整理一下,请对比自己的代码参考!

jquery的选择器有哪些?如何对元素取值和设置值

jQuery 选择器 jQuery 选择器允许您对 HTML 元素组或单个元素进行操作, Jquery 选择器包括:基本选择器、层叠选择器 、基本过滤选择器 、内容过滤选择器、可视化过滤选择器.....

原生js中DOM对象转成jQuery对象、jQuery 对象转成 DOM 对象的实现

jquery是对js语言的封装、扩展,实现了对浏览器的兼容,使用jquery能让操作更方便简洁,这篇文章主要讲解原生js中Dom对象和jquery对象的相互转换。

高版本jquery中attr和prop的区别

在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。

JQuery 自动触发事件

在JQuery中,可以使用trigger()方法完成模拟操作,trigger()方法不仅能触发浏览器支持的具有相同名称的事件,也可以触发自定义名称的事件。rigger(type[,data])方法有两个参数

前端程序员应该知道的15个jQuery小技巧

15个jQuery小技巧:返回顶部按钮,预加载图像,检查图像是否加载,自动修复破坏的图像,悬停切换类,禁用输入字段,停止加载链接,淡入/滑动切换,简单的手风琴...

是时候和 jQuery 说拜拜了么?

在网络上也时不时会看到,“是时候和jQuery说拜拜了”,最著名的莫过于在2013年的这篇文章You Might Not Need jQuery。