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...