jquery外掛程式開發基礎入門

2022-02-09 13:52:03 字數 1437 閱讀 4789

jquery外掛程式開發基礎入門

入門

編寫乙個jquery外掛程式開始於給jquery.fn加入新的功能屬性,此處新增的物件屬性的名稱就是你的外掛程式名稱

jquery.fn,myplugin = function();

為了避免衝突我們應該將jquery傳遞給乙個自我執行的封閉程式

(function($)

})(jquery)

環境

現在我們可以編寫實際的外掛程式**,但是在這之前我們必須得對外掛程式所處的環境有個概念,在外掛程式的範圍裡,this關鍵字代表了這個外掛程式要執行的jquery物件,這裡容易產生乙個普遍的誤區,因為在其他包含callback的jquery函式中,this關鍵字代表了原生的dom元素,這常常會導致開發者誤將this關鍵字無謂的包在jquery中,如下所示

(function($))

}})(jquery)

//呼叫

$("#element").myplugin();

基礎知識

現在我們理解了jquery外掛程式的基礎知識,讓我們寫乙個外掛程式

(function($));

return max;

};})(jquery);

var tallest = $("div").maxheight(); //返回高度最大的div元素的高度

維護chainability(維護鏈結性)

很多時候乙個查件的惡意圖僅僅是以某種方式修改收集的元素,並把它們傳遞給鏈中的下乙個方法。要保持乙個外掛程式的chainability必須確保你的外掛程式返回this關鍵字

(function($)

if(!type || type =="height")

})}

})(jquery)

$("div").lockdimensions("width").css("color","red");

//由於外掛程式返回this關鍵字,它保持了chainability,這樣jquery收集的元素可以繼續被jquery方法如.css控制。 因此,如果你的外掛程式不返回固有的價值,你應該總是在其作用範圍內返回this關鍵字。 此外,你可能會推斷出,傳遞給外掛程式的引數將會在外掛程式的作用範圍內被傳遞。 因此,在前面的例子,字串』width』變成了外掛程式的型別引數。

對於比較複雜的和提供了許多選項可制訂的外掛程式,最好有個當外掛程式被呼叫的時候可以被拓展的預設設定(通過使用$.extend).

(function($),options);

return this.each(function());

};})(jquery)

$("div").tooltip()

JQuery外掛程式開發入門

個人比較喜歡封裝,現在學習jquery,總想封裝出自己喜歡的外掛程式,所以將jquery外掛程式的開發稍加總結。本文並不全面,主要針對自定義外掛程式的分類和語法進行總結,希望以後可以作為工具檢視。注 jquery外掛程式的完整開發文件可參考 類級別的外掛程式 1 新增乙個函式 1 jquery.fo...

jQuery外掛程式開發入門與最佳實踐

開發jquery外掛程式的方法有兩種,類級別的拓展和物件基本的擴充套件。一種是給jquery類新增方法,類似靜態方法,如 ajax 另一種是給jquery的原型鏈 jquery.prototype jquery.fn 新增方法,簡單的說就是擴充套件jquery.fn 這些基本知識作為前端都容易明白,...

jQuery 外掛程式開發

一 類級別的外掛程式開發 即給jquery新增新的全域性函式,相當於給jquery類本身新增方法,jquery的全域性函式就是屬於jquery命名空間的函式。1 新增全域性函式 方法一 jquery.onetest function jquery.twotest function 方法二 jquer...