jQuery插件制作之全局函數使用方法

jQuery插件制作之全局函數使用方法

　　1、添加新的全局函數

　　所謂的全局函數，實際上就是jQuery對象的方法，但從實踐的角度上看，他們是位于jQuery命名空間內部的函數

　　(1)添加一個函數，只需要將新函數指定為jQuery對象的一個屬性。

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

　　調用：復制代碼 代碼如下:$.five();

　　(2)添加多個函數

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

　　調用：復制代碼 代碼如下:$.five();$.six();

　　以上的方法會面臨命名空間沖突的風險，為避免這個問題，最好把屬于這個插件的所有全局函數，都封裝到一個對象中，如下：

　　//命名空間繼承 jQuery.myPlugin ={ one : function(obj){ var object = obj; var id = object.attr("id"); alert(id); }, two : function(){ alert(22); } }

　　這樣其實是為全局函數創建了另一個命名空間:jQuery.myPlugin.

　　2、添加jQuery對象方法

　　jQuery中大多數內置的功能都是通過其對象的方法提供的。

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

　　調用：復制代碼 代碼如下:$.fn.myMethod();

　　注意：jQuery.fn是jQuery.prototype的別名。

　　實例：以下是行為不正確的方法

　　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)隱士迭代

　　要在無論匹配多個元素的情況下都保證行為的正確，最簡單的方法是始終在方法的環境上調用.each()方法，這樣就會

　　執行隱士迭代，而執行隱士迭代對于維護插件和內置方法的一致性是至關重要的，在調用的.each()方法內部，this

　　依次引用的是每個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); } }) }

　　調用：

　　復制代碼 代碼如下:$("li").swapClass("this","that")

　　(2)方法的連綴

　　要使用方法的連綴，必須在所有的插件方法中返回一個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); } }) }

　　調用：

　　復制代碼 代碼如下:$("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) }

【jQuery插件制作之全局函數使用方法】相關文章：

淺析jQuery 遍歷函數javascript08-06

jQuery 源碼分析和Ready函數06-28

excel中if函數的使用方法10-24

excel常用函數使用方法04-26

asp.net+jquery Jsonp使用方法介紹08-23

vlookup函數在Excel中的使用方法09-21

Excel中vlookup函數使用方法02-17

excel中now函數的使用方法05-25

excel四舍五入函數使用方法06-11

jquery之超簡單的div顯示和隱藏特效demo簡介05-15