jQuery插件开发

jQuery插件开发分为2种：

一种是类级别的插件开发,换句话说就是给jQuery添加全局函数

另一种是对象级别的插件开发,也就是给jQuery添加方法

下面将分别举出一些例子以及对应到解释:

 

1.类级别的插件开发

方法一: 添加一个或多个全局函数　　

jQuery.fruit = function() {   
　　alert('The function name is fruit');
};  
jQuery.food = function(param) {   
　　alert('The function name is food');
};

调用方法:

jQuery.fruit();

jQuery.food();

或者

$.fruit();

$.food();

 

方法二: 使用jQuery.extend(object)

jQuery.extend({      
　　fruit: function() {      
　　　　alert('The function name is fruit');
　　},      
　　food: function() {      
　　　　alert('The function name is food');
　　}     
});

调用方法:

jQuery.fruit();

jQuery.food();

或者

$.fruit();

$.food();

 

 方法三:  使用命名空间(避免与其他jQuery插件产生命名冲突)

jQuery.myPlugin = {          
　　fruit:function() {          
　　　　alert('The function name is fruit');
　　},          
　　food:function() {          
　　　　alert('The function name is food');
　　}         
};

采用命名空间的函数仍然是全局函数，只是我们把要调用到函数,包含在了新的明明空间中
调用方法：

$.myPlugin.fruit();

$.myPlugin.food();

 

 

2.对象级别的插件

一、定义形式如下:

形式一:

(function($){     
　　$.fn.extend({     
　　　　myPlugin:function(){     
　　　　　　// code  
　　　　}     
　　})     
})(jQuery);

形式二:

(function($){     
　　$.fn.myPlugin = function(){     
　　　　// code  
　　}        
})(jQuery);

 JavsScript到另外一个主流扩展就是prototype,他们同样也是用 $ 符号

用上面2种定义方式,还算可以继续使用 $ 符号,并且不与prototype产生冲突

 

二、在jQuery添加新的属性

$.fn.newPrototype = function() {    
　　// code
};

 我们的插件通过这样被调用：

$('#id').newPrototype();