jQuery插件制作之全局函數(shù)使用方法
1、添加新的全局函數(shù)
所謂的全局函數(shù)，實(shí)際上就是jQuery對象的方法，但從實(shí)踐的角度上看，他們是位于jQuery命名空間內(nèi)部的函數(shù)
(1)添加一個(gè)函數(shù)，只需要將新函數(shù)指定為jQuery對象的一個(gè)屬性。
jQuery.five =function(){ alert("直接繼承方式不一樣"); }
調(diào)用：復(fù)制代碼 代碼如下:$.five();
(2)添加多個(gè)函數(shù)
jQuery.five =function(){ alert("直接繼承方式不一樣"); } jQuery.six =function(){ alert("直接繼承方式不一樣2"); }
調(diào)用：復(fù)制代碼 代碼如下:$.five();$.six();
以上的.方法會面臨命名空間沖突的風(fēng)險(xiǎn)，為避免這個(gè)問題，最好把屬于這個(gè)插件的所有全局函數(shù)，都封裝到一個(gè)對象中，如下：
//命名空間繼承 jQuery.myPlugin ={ one : function(obj){ var object = obj; var id = object.attr("id"); alert(id); }, two : function(){ alert(22); } }
這樣其實(shí)是為全局函數(shù)創(chuàng)建了另一個(gè)命名空間:jQuery.myPlugin.
2、添加jQuery對象方法
jQuery中大多數(shù)內(nèi)置的功能都是通過其對象的方法提供的。
jQuery.fn.myMethod= function(){ alert(11); }
調(diào)用：復(fù)制代碼 代碼如下:$.fn.myMethod();
注意：jQuery.fn是jQuery.prototype的別名。
實(shí)例：以下是行為不正確的方法
11111111111111111111111111
22222222222222222222
333333333333333
4444444444444444455555555555555
6666666666666666
777777777777777777
777777777777777777
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)隱士迭代
要在無論匹配多個(gè)元素的情況下都保證行為的正確，最簡單的方法是始終在方法的環(huán)境上調(diào)用.each()方法，這樣就會
執(zhí)行隱士迭代，而執(zhí)行隱士迭代對于維護(hù)插件和內(nèi)置方法的一致性是至關(guān)重要的，在調(diào)用的.each()方法內(nèi)部，this
依次引用的是每個(gè)DOM元素.以上代碼修改為：
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); } }) }
調(diào)用：
復(fù)制代碼 代碼如下:$("li").swapClass("this","that")
(2)方法的連綴
要使用方法的連綴，必須在所有的插件方法中返回一個(gè)jQuery對象。返回的jQuery對象通常就是this所引用的對象。
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); } }) }
調(diào)用：
復(fù)制代碼 代碼如下:$("li").swapClass("this","that").css("text-decoration","underline");
3、添加新的簡寫方法
//添加新的簡寫方法 jQuery.fn.slideFadeOut= function(speed,callback){ return this.animate({ height : "hide", opacity : "hide" },speed,callback) } jQuery.fn.slideFadeIn= function(speed,callback){ return this.animate({ height : "show", opacity : "show" },speed,callback) } jQuery.fn.slideFadeToggle= function(speed,callback){ return this.animate({ height : "toggle", opacity : "toggle" },speed,callback) }