細說 jQuery 插件篇（二） - 添加實例方法

chanjarster 發布于2019-08-19 14:55 / 2788人閱讀

摘要：前一篇介紹可以通過添加全局函數來開發插件，實際上全局函數就是對對象進行擴展，而添加實例方法就是對對象進行擴展，我們可以使用別名。添加實例方法此時頁面內只有一個元素，添加新增的實例方法進入頁面后實例方法添加成功。

前一篇介紹可以通過添加全局函數來開發 jQuery 插件，實際上全局函數就是對 jQuery 對象進行擴展，而添加實例方法就是對 jQuery.prototype 對象進行擴展，我們可以使用別名 - jQuery.fn。

添加實例方法

(function($) {
  $.fn.myMethod = function() {
    alert("it works");
  }
}(jQuery));

此時頁面內只有一個 div 元素，添加新增的實例方法：

$("div").myMethod();

進入頁面后：

實例方法添加成功。

切換類插件

我們來寫一個用于切換元素類的小插件。頁面有個小按鈕，當點擊按鈕后我們希望能切換顏色：

添加一個實例方法 switchClass 來實現該效果：

(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");
});

此時，點擊按鈕后：

再點擊顏色會切換回藍色。

參考

http://book.douban.com/subject/24669823/

云服務器 GPU云服務器 jquery插件源碼jquery jquery插件手寫jQuery插件 jquery表單插件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/78170.html

細說 jQuery 插件篇（一） - 添加全局函數

摘要：添加全局函數所謂全局函數就是對象的方法，例如在一篇中介紹的等方法。當我們希望將一些功能性代碼重復使用，可以將其打包成一個 jQuery 插件來使用。使用 $ 別名首先我們在編寫插件時必須保證 jQuery 庫已經載入，但是我們不能保證 $ 一定可用，為了使用 $ 別名，我們可以利用 IIFE （Immediately Invoked Function Expression），...

joyvw 2019-08-19 14:55 評論0 收藏0
細說 jQuery 樣式篇（二） - 動畫效果

摘要：創建一個有背景色的添加方法如下當頁面載入后，會逐漸消失，動畫效果如同直接使用方法。動畫并發效果當對多個元素應用動畫效果時，這些效果是同時發生的，即并發的。除了使用 jQuery 內置的 hide,show,toggle 等方法來展現效果，還可以使用更為強大的 animate 方法來展現動畫效果。創建一個有背景色的 div： div { width: 100px; hei...

PiscesYE 2019-08-19 14:53 評論0 收藏0
細說 jQuery 事件篇（二） - 處理簡單事件

摘要：我們可以利用可以對用戶發起的事件進行處理，這里以樣式轉換為例來說明。其他類似的操作事件都可以通過這個方法，將處理事件的程序綁定到同名事件上面。我們可以利用 jQuery 可以對用戶發起的事件進行處理，這里以樣式轉換為例來說明。增添樣式基于用戶的事件，對特定的 DOM 元素樣式進行轉換是 jQuery 處理事件中比較常見的情形，舉例說明，當用戶點擊輸入框后，會增添 highli...

ckllj 2019-08-19 14:51 評論0 收藏0
前端文檔收集

摘要：系列種優化頁面加載速度的方法隨筆分類中個最重要的技術點常用整理網頁性能管理詳解離線緩存簡介系列編寫高性能有趣的原生數組函數數據訪問性能優化方案實現的大排序算法一怪對象常用方法函數收集數組的操作面向對象和原型繼承中關鍵詞的優雅解釋淺談系列 H5系列 10種優化頁面加載速度的方法隨筆分類 - HTML5 HTML5中40個最重要的技術點常用meta整理網頁性能管理詳解 HTML5 ...

jsbintask 2019-08-21 12:05 評論0 收藏0