DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jQuery插件原來如此簡單 jQuery插件的機制及實戰
jQuery插件原來如此簡單 jQuery插件的機制及實戰
編輯:JQuery特效代碼     
jQuery插件的種類
1、封裝對象方法

  這種插件是將對象方法封裝起來,用於對通過選擇器獲取的jQuery對象進行操作,是最常見的一種插件。此類插件可以發揮出jQuery選擇器的強大優勢,有相當一部分的jQuery的方法,都是在jQuery腳本庫內部通過這種形式“插”在內核上的,例如parent()方法,appendTo()方法等。

2、封裝全局函數

  可以將獨立的函數加到jQuery命名空間下。如常用的jQuery.ajax()方法、去首尾空格的jQuery.trim()方法,都是jQuery內部作為全局函數的插件附加到內核上去的。

3、選擇器插件

  雖然jQuery的選擇器十分強大,但在少數情況下,還是會需要用到選擇器插件來擴充一些自己喜歡的選擇器。

jQuery插件的機制
  jQuery插件的機制很簡單,就是利用jQuery提供的jQuery.fn.extend()和jQuery.extend()方法,擴展jQuery的功能。

  jQuery.fn.extend()多用於擴展上面提到的3種類型中的第一種,jQuery.extend()用於擴展後兩種插件。這兩個方法都接受一個參數,類型為Object。Object對象的“名/值對”分別代表“函數或方法名/函數主體”。

編寫jQuery插件的一些Tips
  1、jQuery插件的文件名推薦命名為jquery.[插件名].js,以免和其他JS庫插件混淆。

  2、所有的對象方法都應當附加到jQuery.fn對象上,而所有的全局函數都應當附加到jQuery對象本身。

  3、在插件頭部加上一個分號,以免他人的不規范代碼給插件帶來影響。

  4、所有的方法或函數插件,都應當以分號結尾,以免壓縮時出現問題

  5、除非插件需要返回的是一些需要獲取的變量,插件應該返回一個jQuery對象,以保證插件的可鏈式操作。

  6、利於jQuery.extend()方法設置插件方法的默認參數,增加插件的可用性。

jQuery插件結構
  jQuery插件結構如下:
. 代碼如下:
;(function($){
/*這裡放插件代碼,可以將$作為jQuery的別名*/
})(jQuery);

封裝jQuery對象方法插件實戰
  功能:設置選擇的元素的顏色,獲取選擇的首個元素的顏色

  命名:jquery.color.js

  結構:
. 代碼如下:
;(function($){
$.fn.extend({
//這裡寫插件代碼
});
})(jQuery);

  思路:設置一個參數value,如果調用時傳遞了value這個參數,就是設置顏色,否則為獲取顏色。獲取和設置顏色可以用jQuery提供的css方法即可

  完整代碼:
. 代碼如下:
;(function($){
$.fn.extend({
"color":function(value){
if(value==undefined){
return this.css("color");
}
else{
return this.css("color",value);
}
}
});
})(jQuery);

  由於css()方法在獲取顏色時已有取第一個元素的判斷,所以這裡直接用this.css("color")即可。

  如果是一組插件,可以用如下寫法:
. 代碼如下:
;(function($){
$.fn.extend({
"color":function(value){
//插件代碼
},
"border":function(value){
//插件代碼
},
"background":function(value){
//插件代碼
}
});
})(jQuery);

  插件測試: http://demo.jb51.net/js/2012/jquery_demo/封裝jQuery對象方法插件Demo.html
封裝全局函數插件實戰
  功能:單獨去除左側或單獨去除右側的空格

  命名:jquery.lrtrim.js

  結構:
. 代碼如下:
;(function($){
$.extend({
ltrim:function(text){
//插件代碼
},
rtrim:function(text){
//插件代碼
}
});
})(jQuery);

  思路:這類插件是在jQuery命名空間內部添加一個函數,直接用正則表達式即可。

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

  插件測試: http://demo.jb51.net/js/2012/jquery_demo/封裝全局函數jQuery插件Demo.html
自定義選擇器插件實戰
  jQuery以其強大的選擇器著稱,那麼jQuery的選擇器的工作原理是什麼呢?

  jQuery的選擇解析器首先會使用一組正則表達式來解析選擇器,然後針對解析出的每一個選擇符執行一個函數,稱為選擇函數。最後根據這個選擇函數的返回值為true還是false來決定是否保留這個元素,這樣就可以找到匹配的元素節點。

  如$("div:gl(1)"),該選擇器首先會獲取所有的<div>元素,然後隱式地遍歷這些<div>元素,並逐個將這些<div>元素作為參數,連同括號裡的“1”等一些參數一起傳遞給gt對應的選擇器函數進行判斷。如果返回true則保留,否則不保留,這樣得到的結果就是一個符合要求的<div>元素的集合。

  選擇器的函數一共接受3個參數,形式如下:
. 代碼如下:
function (a,i,m){
//...
}

  第一個參數為a,指的是當前遍歷到的DOM元素。

  第二個參數為i,指的是當前遍歷到的DOM元素的索引值,從0開始。

  第三個參數是m,它是由jQuery正則解析引擎進一步解析後的產物,是一個數組:其中最重要的一個是m[3],在$("div:gl(1)")中即為括號裡的數字“1”。

  在jQuery中已經有lt,gt和eq選擇器,因此這裡寫一個介於兩者之間(between)的選擇器。

  功能:選擇索引值為a到b之間(a<b,a、b為正整數)的元素

  命名:jquery.between.js

  結構:
. 代碼如下:
;(function($){
$.extend($.expr[":"],{
between:function(a,i,m){
//插件代碼
}
});
})(jQuery);

  思路:在上面的三個參數中,m[3]為"a,b"的形式,因此把m[3]用","分隔,然後跟索引值i進行對比,如果i在m[3]表示的范圍之間就返回true,否則為false

  完整代碼:
. 代碼如下:
;(function($){
$.extend($.expr[":"],{
between:function(a,i,m){
var temp=m[3].split(",");
return +temp[0]<i&&i<+temp[1];
}
});
})(jQuery);

  注:這裡用+temp[0]、+temp[1]把字符串形式的數字轉換成了數字

  插件測試: http://demo.jb51.net/js/2012/jquery_demo/jQuery自定義選擇器插件DEMO.html
小結
  本文主要介紹了jQuery插件的種類,機制,並針對每種類型進行了實戰,希望能對大家有所幫助。本人也是jQuery的初學者,歡迎大家拍磚。

  參考書籍:《鋒利的jQuery》(人民郵電出版社)
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved