jquery开发插件,编写jquery插件

如何自己开发一个简单的jquery 插件

现在网上关于js和jquery封装的插件很多，我刚刚接触前端的时候，就很敬佩那些自己写插件的大牛们！因为是他们给网站开发更多的便利，很多网页效果，网上很多现成的插件！那么这些插件是如何写的呢看首先是有扎实的js和jquery技术基础，其次还有一些写插件的方法和技巧。关于js和jquery的技术基础，那是一个慢慢积累的过程。但是关于写插件的一些注意和技巧，本文可以略微介绍一下，方便以后写插件的时候用得到。

jquery插件开发模式

jquery插件一般有三种开发方式：

通过$.extend()来扩展jQuery

通过$.fn 向jQuery添加新的方法

通过$.widget()应用jQuery UI的部件工厂方式创建

第一种$.extend()相对简单，一般很少能够独立开发复杂插件，第三种是一种高级的开发模式，本文也不做介绍。第二种则是一般插件开发用到的方式，本文着重讲讲第二种。

jquery插件开发有几种

//类级别插件开发，主要是在jQuery中定义全局方法：

//第一种写法

jQuery.myFunc = function(str){

alert("直接在jquery中定义方法",str)

}

//调用方式 $.myFunc("hello!");

//第二种写法

jQuery.extend({

myFunc:function(str){

alert("extend扩展$的方法",str)

}

})

//调用方式 $.myFunc("hello!");

//第三种写法： 为了不污染全局，挂载一个对象作为命名空间，自定义的所有方法放在这里，保证jQuery全局安全。

jQuery.define={

myFunc:function(str){

alert("命名空间的写法",str)

}

}

//调用方式：$.define.myFunc("hello");

//以上三种是级别插件开发方式，不常用，从调用方式看出，他们是全局执行的，不需要绑定节点对象。

//对象级别插件开发：有规范模板

;(function($){

$.fn.plugin = function(options){

var defaults = {

//各种默认参数

}

var options = $.extend(defaults,options); //传入的参数覆盖默认参数

this.each(function(){

var _this = $(this); //缓存一下插件传进来的节点对象。

//执行内容

})

return $(this); //把节点对象返回去，为了支持链式调用。

}

})(jQuery);

//调用方式

$("selector").plugin({

//自定义参数，json格式

})

如何编写JQuery 插件详解

jQuery 如何写插件 -

jQuery插件的开发包括两种：

一种是类级别的插件开发，即给jQuery添加新的全局函数，相当于给jQuery类本身添加方法。jQuery的全局函数就是属于jQuery命名空间的函数，另一种是对象级别的插件开发，即给jQuery对象添加方法。下面就两种函数的开发做详细的说明。

1、类级别的插件开发

类级别的插件开发最直接的理解就是给jQuery类添加类方法，可以理解为添加静态方法。典型的例子就是$.AJAX()这个函数，将函数定义于jQuery的命名空间中。关于类级别的插件开发可以采用如下几种形式进行扩展：

1.1 

添加一个新的全局函数

添加一个全局函数，我们只需如下定义：

jQuery.foo = 

function() { 

alert('This is a test. This is only a 

test.'); 

}; 

1.2 

增加多个全局函数

添加多个全局函数，可采用如下定义：

Java代码 收藏代码

jQuery.foo = function() { 

alert('This is a test. This is 

only a test.'); 

}; 

jQuery.bar = 

function(param) { 

alert('This function takes a 

parameter, which is "' + param + '".'); 

}; 

调用时和一个函数的一样的:jQuery.foo();jQuery.bar();或者$.foo();$.bar('bar');

1.3 

使用jQuery.extend(object);　

jQuery.extend({ 

foo: 

function() { 

alert('This is a test. This is 

only a test.'); 

}, 

bar: function(param) 

{ 

alert('This function takes a 

parameter, which is "' + param +'".'); 

} 

});