通过全面了解jquery插件来学习如何自己动手编写jquery插件推荐 原创 收藏

文章标签:
  • :
  • 12-01 22:01
  • :
  • 23次
  • :
  • 0条
  • 2赞

简介本文通过了解jquery插件的结构及类型来学习如何自己动手编写jquery插件,实现jquery插件开发。l

本文站长带大家了解一下jquery插件的类型和结构,从而来学习如何自己动手进行编写jquery插件,或进行jquery插件的开发。

jquery插件分两类:

1:类级别插件,比较少;

2:对象级别插件,比较多,常见的插件都是对象级别的插件。

一,类级别插件:

类级别插件就是给jquery添加静态方法,有三种方式:

1.直接给jquery添加全局函数:

$.doAdd=function(a,b){
    return a+b;
};
$.doJian=function(a,b){
    return a-b;
}

//页面中调用:
var he=$.doAdd(3,2);

2.用extend()方法:

$.extend({
    doAdd:function(a,b){return a+b;},
    doJian:function(a,b){return a-b;}
});

//页面中调用:
var he=$.doAdd(3,2);

3.使用命名空间,可以避免同名方法的冲突:

$.aijquery={
    doAdd:function(a,b){return a+b;},
    doJian:function(a,b){return a-b;}
};

//页面中调用:
var he=$.aijquery.doAdd(3,2);

二,对象级别的插件开发:

对象级别可以理解为对jquery对象添加新的方法,基本结构如下:

(function($){
    $.fn.名称=function(参数对象){
        //具体代码
    }
})(jquery);

而我们在使用的时候,结构如下:

$("div").名称();

下面来看一个简单的具体实例:

(function($){
    $.fn.changeColor=function(d){
        this.css('background-color',d);
    }
})(jQuery);

另外,官方还给我们提供了开发对象级别插件的基础结构:

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

好了,关于jquery对象的类型结构就介绍到这里了,本文是站长自己原创,转载请备注说明本方来自爱jQuery(aijquery.cn),希望本文能帮助所有看到这篇文章的朋友们,让你可以快速的掌握自己动手写jquery插件,实现jquery插件开发的能力。



您正在找的文章可能是:
热点文章
热点图文
最近更新