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自訂插件的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!