資訊專欄INFORMATION COLUMN
摘要：前一篇介紹可以通過添加全局函數(shù)來開發(fā)插件，實(shí)際上全局函數(shù)就是對(duì)對(duì)象進(jìn)行擴(kuò)展，而添加實(shí)例方法就是對(duì)對(duì)象進(jìn)行擴(kuò)展，我們可以使用別名。添加實(shí)例方法此時(shí)頁面內(nèi)只有一個(gè)元素，添加新增的實(shí)例方法進(jìn)入頁面后實(shí)例方法添加成功。
前一篇介紹可以通過添加全局函數(shù)來開發(fā) jQuery 插件，實(shí)際上全局函數(shù)就是對(duì) jQuery 對(duì)象進(jìn)行擴(kuò)展，而添加實(shí)例方法就是對(duì) jQuery.prototype 對(duì)象進(jìn)行擴(kuò)展，我們可以使用別名 - jQuery.fn。
添加實(shí)例方法(function($) {
$.fn.myMethod = function() {
alert("it works");
}
}(jQuery));
此時(shí)頁面內(nèi)只有一個(gè) div 元素，添加新增的實(shí)例方法：
$("div").myMethod();
進(jìn)入頁面后：
實(shí)例方法添加成功。
切換類插件我們來寫一個(gè)用于切換元素類的小插件。頁面有個(gè)小按鈕，當(dāng)點(diǎn)擊按鈕后我們希望能切換顏色：
添加一個(gè)實(shí)例方法 switchClass 來實(shí)現(xiàn)該效果：
(function($) {
$.fn.switchClass = function(class1, class2) {
if (this.hasClass(class1)) {
this.removeClass(class1).addClass(class2);
}
else if (this.hasClass(class2)) {
this.removeClass(class2).addClass(class1);
}
};
})(jQuery);
使用該插件方法：
$("button").click(function() {
$("button").switchClass("blue", "green");
});
此時(shí)，點(diǎn)擊按鈕后：
再點(diǎn)擊顏色會(huì)切換回藍(lán)色。
參考http://book.douban.com/subject/24669823/
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/78170.html
摘要：添加全局函數(shù)所謂全局函數(shù)就是對(duì)象的方法，例如在一篇中介紹的等方法。 當(dāng)我們希望將一些功能性代碼重復(fù)使用，可以將其打包成一個(gè) jQuery 插件來使用。 使用 $ 別名 首先我們?cè)诰帉懖寮r(shí)必須保證 jQuery 庫已經(jīng)載入，但是我們不能保證 $ 一定可用，為了使用 $ 別名，我們可以利用 IIFE （Immediately Invoked Function Expression），...
摘要：創(chuàng)建一個(gè)有背景色的添加方法如下當(dāng)頁面載入后，會(huì)逐漸消失，動(dòng)畫效果如同直接使用方法。動(dòng)畫并發(fā)效果當(dāng)對(duì)多個(gè)元素應(yīng)用動(dòng)畫效果時(shí)，這些效果是同時(shí)發(fā)生的，即并發(fā)的。 除了使用 jQuery 內(nèi)置的 hide,show,toggle 等方法來展現(xiàn)效果，還可以使用更為強(qiáng)大的 animate 方法來展現(xiàn)動(dòng)畫效果。 創(chuàng)建一個(gè)有背景色的 div： div { width: 100px; hei...
摘要：我們可以利用可以對(duì)用戶發(fā)起的事件進(jìn)行處理，這里以樣式轉(zhuǎn)換為例來說明。其他類似的操作事件都可以通過這個(gè)方法，將處理事件的程序綁定到同名事件上面。 我們可以利用 jQuery 可以對(duì)用戶發(fā)起的事件進(jìn)行處理，這里以樣式轉(zhuǎn)換為例來說明。 增添樣式 基于用戶的事件，對(duì)特定的 DOM 元素樣式進(jìn)行轉(zhuǎn)換是 jQuery 處理事件中比較常見的情形，舉例說明，當(dāng)用戶點(diǎn)擊輸入框后，會(huì)增添 highli...
摘要：系列種優(yōu)化頁面加載速度的方法隨筆分類中個(gè)最重要的技術(shù)點(diǎn)常用整理網(wǎng)頁性能管理詳解離線緩存簡介系列編寫高性能有趣的原生數(shù)組函數(shù)數(shù)據(jù)訪問性能優(yōu)化方案實(shí)現(xiàn)的大排序算法一怪對(duì)象常用方法函數(shù)收集數(shù)組的操作面向?qū)ο蠛驮屠^承中關(guān)鍵詞的優(yōu)雅解釋淺談系列 H5系列 10種優(yōu)化頁面加載速度的方法 隨筆分類 - HTML5 HTML5中40個(gè)最重要的技術(shù)點(diǎn) 常用meta整理 網(wǎng)頁性能管理詳解 HTML5 ...
閱讀 1743·2021-09-22 15:25
閱讀 1307·2019-08-29 12:34
閱讀 1908·2019-08-26 13:57
閱讀 3188·2019-08-26 10:48
閱讀 1443·2019-08-26 10:45
閱讀 793·2019-08-23 18:23
閱讀 733·2019-08-23 18:01
閱讀 1945·2019-08-23 16:07
