【jQuery基礎學習】08 編寫自定義jQuery插件

本來想寫jQuery UI插件的，但是想了想還是算了。

本書介紹jQuery UI插件的時候太過簡單，所以，準備在寫完了jQuery這個系列之後，單獨把jQueryUI拿出來寫一個系列並順便加入jQuery.grid插件。

儘量把最新的jQuery UI的各個方面都寫一個簡單的小例子和效果圖，以後用來複制粘貼。\(^o^)/

那麼就讓我們來開始學習編寫jQuery的插件吧。

目的：雖然jQuery各種各樣的功能已經很完善了，但是我們還是要學會自己去編寫插件。這樣我們可以去封裝一些項目中經常用到的專屬的代碼，以便後期維護和提高開發效率。

jQuery插件的類型：

• 封裝對象方法的插件
  • 大部分jQuery的插件都屬於這種，對獲取的jQuery對象進行操作
• 封裝全局函數的插件
  • 可以理解為$.ajax這種就是封裝的全局函數
• 選擇器插件
  • 顧名思義，封裝的選擇器

jQuery插件的基本要點：

• jQuery插件的文件名推薦為：jquery.[插件名].js,以免和其它js庫插件混淆。
• 所有對象方法應該附加到jQuery.fn對象上，所有全局方法應該附加到jQuery對象本身上。
• 在插件內部，this指向的是當前獲取的jQuery對象，而不是DOM元素
• 可以通過this.each來遍歷所有元素
• 插件應該返回一個jQuery對象，以保證插件的可鏈式操作。
• 避免在插件內部使用$，而應該使用完整的jQuery。當然也可以用閉包的技巧來迴避這個問題。

  (function($){
      //此處編寫jQuery插件代碼，這種閉包玩法就不在這裡解釋了，我前面的js基礎系列寫過了，不懂的請轉到這個地址看看http://www.cnblogs.com/vvjiang/p/5143852.html。在此篇文章最後的部分就是。
  })(jQuery);

jQuery插件的機制：

jQuery提供了兩個用於擴展jQuery功能的插件，即jQuery.fn.extend()方法和jQuery.extend()方法。

前者實現封裝對象方法的插件，後者實現封住選擇器插件和全局函數插件。

jQuery.extend()除了用於擴展jQuery對象之外，還可以擴展已經存在的object對象，所以經常被用於設置插件方法的一系列預設參數。如：

    function myFunc(options){
        options=jQuery.extend({
            name:"bar",
            length:1
        },options);
    }
    myFunc({name:"asd"});//此時函數調用後options的name為asd，length為1

編寫jQuery插件

• 封裝jQuery對象方法的插件 
  • 那就舉個表格隔行變色的例子

    (function($){
        $.fn.extend({
            "alterBgColor":function(options){
                options=$.extend({//設置預設參數
                    odd:"odd",/*偶數行樣式*/
                    even:"even", /*奇數行樣式*/
                    selected:"selected"/*選中行樣式*/
                },options);
                $("tbody>tr:odd",this).addClass(options.odd);
                $("tbody>tr:even",this).addClass(options.even);
                $("tbody>tr",this).click(function(){
                    var hasSelected=$(this).hasClass(options.selected);
                    $(this)[hasSelected?"removeClass":"addClass"](options.selected)
                        .find(":checkbox").attr('checked',!hasSelected);
                });
                $("tbody>tr:has(:checked)",this).addClass(options.selected);
                return this;//返回this，支撐鏈式操作
            }
        });
    })(jQuery);

    $("tbody>tr:odd",this)這種用法在加上第二個參數this後，第一個參數的選擇器就只會在this這個對象下進行篩選。

• 封裝全局函數的插件
  • 去除左空白字元和去除右空白字元的插件例子：

    (function($){
        $.extend({
            ltrim:function(text){
                return (text||"").replace(/^\s+/g,"");
            },
            rtrim:function(text){
                return (text||"").replace(/\s+$/g,"");
            }
        });
    })(jQuery);

• 自定義選擇器的插件
  • 選擇索引介於兩個數中間的元素的選擇器插件例子：

    (function($){
        $.extend(jQuery.expr[":"],{
            between:function(a,i,m){//選擇器函數
                //a指向的是當前遍歷到的DOM元素
                //i指的是當前遍歷到的DOM元素的索引值
                //m最為特別，它是由jQuery正則解析引擎進一步解析後的產物，是一個數組
                //這裡只講m[3]，比如選擇器:gt(2)那麼m[3]就為2，如果是多個，那麼就是"2,5"這種以逗號分隔的參數字元串
                var tmp=m[3].split(",");//以逗號為分隔符，切成一個數組
                return tmp[0]-0<i&&i<tmp[1]-0;//這裡用-0可以將字元串轉換為數字
            }
        });
    })(jQuery);
    $("div:between(2,5)")