jQuery插件制作之全局函数

1、添加新的全局函数

 所谓的全局函数,实际上就是jQuery对象的方法,但从实践的角度上看,他们是位于jQuery命名空间内部的函数

 (1)添加一个函数,只需要将新函数指定为jQuery对象的一个属性。

 

[javascript] view plaincopyprint?
  1. jQuery.five =function(){  
  2.     alert("直接继承方式不一样");  
  3. }  

jQuery.five =function(){ alert("直接继承方式不一样");}

 

调用:$.five();

 

(2)添加多个函数

 

[javascript] view plaincopyprint?
  1. jQuery.five =function(){  
  2.     alert("直接继承方式不一样");  
  3. }  
  4. jQuery.six =function(){  
  5.     alert("直接继承方式不一样2");  
  6. }  

jQuery.five =function(){ alert("直接继承方式不一样");}jQuery.six =function(){ alert("直接继承方式不一样2");}

 

调用:$.five();$.six();

 以上的方法会面临命名空间冲突的风险,为避免这个问题,最好把属于这个插件的所有全局函数,都封装到一个对象中,如下:

//命名空间继承

 

[javascript] view plaincopyprint?
  1. jQuery.myPlugin ={  
  2.     one : function(obj){  
  3.         var object = obj;  
  4.         var id = object.attr("id");  
  5.         alert(id);  
  6.     },  
  7.     two : function(){  
  8.         alert(22);  
  9.     }  
  10. }  

jQuery.myPlugin ={ one : function(obj){ var object = obj; var id = object.attr("id"); alert(id); }, two : function(){ alert(22); }}

 

这样其实是为全局函数创建了另一个命名空间:jQuery.myPlugin.

 

2、添加jQuery对象方法

jQuery中大多数内置的功能都是通过其对象的方法提供的。

 

[javascript] view plaincopyprint?
  1. jQuery.fn.myMethod= function(){  
  2.     alert(11);  
  3. }  

jQuery.fn.myMethod= function(){ alert(11);}

 

调用:$.fn.myMethod();

 注意:jQuery.fn是jQuery.prototype的别名。

 实例:以下是行为不正确的方法

 

[javascript] view plaincopyprint?
  1. <ul>  
  2.        <li>11111111111111111111111111</li>  
  3.        <liclass="this">22222222222222222222</li>  
  4.        <li>333333333333333</li>  
  5.        <liclass="that">44444444444444444</li>  
  6.        <liclass="this">55555555555555</li>  
  7.        <li>6666666666666666</li>  
  8.        <li>777777777777777777</li>  
  9.        <liclass="that">777777777777777777</li>  
  10. </ul>  
  11.         
  12. <inputtype="button" value="swap" id="swap" />  
  13.    
  14. jQuery.fn.swapClass= function(class1,class2){  
  15.     if(this.hasClass(class1)){  
  16.        this.removeClass(class1).addClass(class2);  
  17.     }  
  18.     if(this.hasClass(class2)){  
  19.        this.removeClass(class2).addClass(class1);  
  20.     }  
  21. }  
  22.    
  23.  $("#swap").click(function(){  
  24.        $("li").swapClass("this","that");  
  25.        return false;  
  26. })  

<ul> <li>11111111111111111111111111</li> <liclass="this">22222222222222222222</li> <li>333333333333333</li> <liclass="that">44444444444444444</li> <liclass="this">55555555555555</li> <li>6666666666666666</li> <li>777777777777777777</li> <liclass="that">777777777777777777</li></ul> <inputtype="button" value="swap" id="swap" /> jQuery.fn.swapClass= function(class1,class2){ if(this.hasClass(class1)){ this.removeClass(class1).addClass(class2); } if(this.hasClass(class2)){ this.removeClass(class2).addClass(class1); }} $("#swap").click(function(){ $("li").swapClass("this","that"); return false;})

 

全部li都是用了that样式。

(1)隐士迭代

要在无论匹配多个元素的情况下都保证行为的正确,最简单的方法是始终在方法的环境上调用.each()方法,这样就会

执行隐士迭代,而执行隐士迭代对于维护插件和内置方法的一致性是至关重要的,在调用的.each()方法内部,this

依次引用的是每个DOM元素.以上代码修改为:

 

[javascript] view plaincopyprint?
  1. jQuery.fn.swapClass= function(class1,class2){  
  2.     this.each(function(){  
  3.         var $element = jQuery(this);  
  4.         if($element.hasClass(class1)){  
  5.             $element.removeClass(class1).addClass(class2);  
  6.         }else if($element.hasClass(class2)){  
  7.            $element.removeClass(class2).addClass(class1);  
  8.         }  
  9.     })  
  10. }  

jQuery.fn.swapClass= function(class1,class2){ this.each(function(){ var $element = jQuery(this); if($element.hasClass(class1)){ $element.removeClass(class1).addClass(class2); }else if($element.hasClass(class2)){ $element.removeClass(class2).addClass(class1); } })}

 

调用:$("li").swapClass("this","that")

 

(2)方法的连缀

要使用方法的连缀,必须在所有的插件方法中返回一个jQuery对象。返回的jQuery对象通常就是this所引用的对象。

 

[javascript] view plaincopyprint?
  1. jQuery.fn.swapClass= function(class1,class2){  
  2.     return this.each(function(){  
  3.         var $element = jQuery(this);  
  4.         if($element.hasClass(class1)){  
  5.            $element.removeClass(class1).addClass(class2);  
  6.         }else if($element.hasClass(class2)){  
  7.            $element.removeClass(class2).addClass(class1);  
  8.         }  
  9.     })  
  10. }  

jQuery.fn.swapClass= function(class1,class2){ return this.each(function(){ var $element = jQuery(this); if($element.hasClass(class1)){ $element.removeClass(class1).addClass(class2); }else if($element.hasClass(class2)){ $element.removeClass(class2).addClass(class1); } })}

 

调用:$("li").swapClass("this","that").css("text-decoration","underline");

 

3、添加新的简写方法

 

[javascript] view plaincopyprint?
  1. //添加新的简写方法   
  2. jQuery.fn.slideFadeOut= function(speed,callback){  
  3.     return this.animate({  
  4.         height : "hide",  
  5.         opacity : "hide"  
  6.     },speed,callback)  
  7. }  
  8. jQuery.fn.slideFadeIn= function(speed,callback){  
  9.     return this.animate({  
  10.         height : "show",  
  11.         opacity : "show"  
  12.     },speed,callback)  
  13. }  
  14. jQuery.fn.slideFadeToggle= function(speed,callback){  
  15.     return this.animate({  
  16.         height : "toggle",  
  17.         opacity : "toggle"  
  18.     },speed,callback)  
  19. }  
posted @ 2014-11-14 15:49  不灭的火  阅读(278)  评论(0编辑  收藏  举报