jQuery插件製作之全局函數使用方法
1、添加新的全局函數
所謂的全局函數,實際上就是jQuery對象的方法,但從實踐的角度上看,他們是位於jQuery命名空間內部的函數
(1)添加一個函數,只需要將新函數指定為jQuery對象的一個屬性。
=function(){ alert("直接繼承方式不一樣"); }
調用:複製代碼 代碼如下:$();
(2)添加多個函數
=function(){ alert("直接繼承方式不一樣"); } =function(){ alert("直接繼承方式不一樣2"); }
調用:複製代碼 代碼如下:$();$();
以上的方法會面臨命名空間衝突的風險,為避免這個問題,最好把屬於這個插件的所有全局函數,都封裝到一個對象中,如下:
//命名空間繼承 ugin ={ one : function(obj){ var object = obj; var id = ("id"); alert(id); }, two : function(){ alert(22); } }
這樣其實是為全局函數創建了另一個命名空間:ugin.
2、添加jQuery對象方法
jQuery中大多數內置的功能都是通過其對象的方法提供的。
thod= function(){ alert(11); }
調用:複製代碼 代碼如下:$thod();
注意:是otype的別名。
實例:以下是行為不正確的方法
11111111111111111111111111
22222222222222222222
333333333333333
4444444444444444455555555555555
6666666666666666
777777777777777777
777777777777777777
Class= function(class1,class2){ if(lass(class1)){ veClass(class1)lass(class2); } if(lass(class2)){ veClass(class2)lass(class1); } } $("#swap")k(function(){ $("li")Class("this","that"); return false; })
全部li都是用了that樣式。
(1)隱士迭代
要在無論匹配多個元素的情況下都保證行為的正確,最簡單的方法是始終在方法的環境上調用()方法,這樣就會
執行隱士迭代,而執行隱士迭代對於維護插件和內置方法的一致性是至關重要的,在調用的()方法內部,this
依次引用的.是每個DOM元素.以上代碼修改為:
Class= function(class1,class2){ (function(){ var $element = jQuery(this); if($lass(class1)){ $veClass(class1)lass(class2); }else if($lass(class2)){ $veClass(class2)lass(class1); } }) }
調用:
複製代碼 代碼如下:$("li")Class("this","that")
(2)方法的連綴
要使用方法的連綴,必須在所有的插件方法中返回一個jQuery對象。返回的jQuery對象通常就是this所引用的對象。
Class= function(class1,class2){ return (function(){ var $element = jQuery(this); if($lass(class1)){ $veClass(class1)lass(class2); }else if($lass(class2)){ $veClass(class2)lass(class1); } }) }
調用:
複製代碼 代碼如下:$("li")Class("this","that")("text-decoration","underline");
3、添加新的簡寫方法
//添加新的簡寫方法 eFadeOut= function(speed,callback){ return ate({ height : "hide", opacity : "hide" },speed,callback) } eFadeIn= function(speed,callback){ return ate({ height : "show", opacity : "show" },speed,callback) } eFadeToggle= function(speed,callback){ return ate({ height : "toggle", opacity : "toggle" },speed,callback) }
-
如何理解Javascript的caller,callee,call,apply區別
在提到上述的概念之前,首先想説説javascript中函數的隱含參數:argumentsarguments該對象代表正在執行的函數和調用它的函數的參數。[function.]arguments[n]參數function:選項。當前正在執行的Function對象的名字。n:選項。要傳遞給Function對象的從0開始的參數值...
-
如何理解Javascript的caller,callee,call,apply區別
在提到上述的概念之前,首先想説説javascript中函數的隱含參數:argumentsarguments該對象代表正在執行的函數和調用它的函數的參數。[function.]arguments[n]參數function:選項。當前正在執行的Function對象的名字。n:選項。要傳遞給Function對象的從0開始的參數值...
-
針對dom元素的分析應用
如果這個DOM元素沒有樣式也就談不上操作了。2.我們也可以直接用JS動態的向html裏寫入DOM元素。今天這章我們就講這兩個應用(一)對html裏現有的DOM元素進行操作。我上面説了,對現有的DOM元素進行操作,無非就是對樣式的操作。所以我們首先就要能獲取這個DOM元素的樣...
-
講解HTML中iframe和frame的區別
不知道你在項目中用過frameset屬性沒有,frameset這個屬性是在去年我在一個在線客服系統製作中用過,因為客服系統要有固定的佈局,上面一塊,下面一塊等等,當時就是用的frameset和frame。在我用完了這些屬性之後,我才明白了iframe和frame的`區別。因為在這之前,我項目中...