當前位置:才華齋>設計>網頁設計>

jQuery外掛製作之全域性函式使用方法

網頁設計 閱讀(2.91W)

1、新增新的全域性函式

jQuery外掛製作之全域性函式使用方法

所謂的全域性函式,實際上就是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) }