編寫jquery自訂插件的方法

寫jquery外掛程式是將現有的一些函數進行封裝，達到重複利用的目的

JQuery的外掛主要有三種:

1.  封裝物件方法的外掛程式
寫此類外掛程式需要用JQuery提供的jQuery.fn.extend()方法。實作查詢color的自訂函數步驟如下
1.1  將所寫的插件檔案命名為  jquery.color.js
1.2  編寫外掛程式的內容

;(function($){
    jQuery.fn.extend({//这里也可以写成$.fn.extend
        "color":function(value){//value是颜色值
            return this.css("color",value);
        },        "border":function(value){
            //插入代码
        }
    });
})(jQuery);

2.  封裝全域函數的外掛程式
這類外掛程式是在jQuery命名空間內部新增函數。編寫此類插件需要用JQuery提供的jQuery.extend()方法。寫一個實現去掉字串左邊空格的函數

;(function($){
    $.extend({
        ltrim:function(text){//需要去除空格的字符串
            return (text || "").replace(/^\s+/g, "");
        },
        rtrim:function(text){
            return (text || "").replace(/\s+$/g, "");
        }
    });
})(jQuery);

於是就可以透過$.rtrim(”  test  “) 或jQuery.ltrim(”  test  “);  來傳回去除空格的字串。函數類似jQuery的trim()函數。

3.  選擇器外掛程式
以撰寫between選擇器外掛說明，例如使用

(“p:gt(1)”)為範例講解
:gt()選擇器在jQuery中原始碼為

gt:function(a,i,m){
    return i > m[3]-0;
}

其中
a 指向目前遍歷到的DOM元素。
i 表示目前遍歷到的DOM元素的索引值
m 是一個特殊陣列。
m[0] = :gt(1)   要解析的表達式
m[1] = :
m[2] = gt
m[3] = 1

#由此參考編寫此選擇器程式碼為

;(function($){
    $.extend(jQuery.expr[":"], {
        between : function(a, i, m){
            var tmp = m[3].split(",");//m[3]值为[2,5];
            return tmp[0]-0 < i && i < tmp[1]-0;
        }
    });
})(jQuery);

編寫jquery外掛程式是對已有的一些函數進行封裝，達到重複利用的目的

以上是編寫jquery自訂插件的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！