jquery外掛程式開發

一.外掛程式的種類：

[list]

[*]封裝物件方法的外掛程式

[*]封裝全域性函式的方法

[*]選擇器外掛程式

[/list]

二.jquery外掛程式的機制

jquery提供了兩個用於擴充套件jquery功能方法，即jquery.fn.extend()方法和jquery.extend()方法。前者用於擴充套件前面提到的3種型別外掛程式中的第一種，後者用於擴充套件後兩種外掛程式。這兩個方法都接受乙個引數，型別為object。object物件的「名/值對」分別代表「函式或方法名/函式主題」。

其中jquery.extend()方法除了可以用於擴充套件jquery物件之外，還有乙個強大的功能，就是擴充套件已有的object物件.


jquery.extend(target,obj1,...[objn])

用乙個或多個物件來擴充套件乙個物件，然後返回被擴充套件的物件。

例如：


var settings=;
var options=;
var newoptions=$.extend(settings,options);

結果為[quote]

newoptions =

[/quote]

jquery.extend()方法經常被用來設定外掛程式方法的一系列預設引數，例如下面的**


function foo(options),otpions);
}foo();

三.編寫jquery外掛程式

1.封裝jquery物件方法的外掛程式

編寫設定和獲取顏色的外掛程式。功能和要求：

（1）設定匹配元素的顏色

（2）獲取匹配元素（元素集合中的第乙個）的顏色


;(function($)
});})(jquery)

使用：


$(function());

其實就這麼簡單。

下面來乙個完整一點的例子：

**隔行變色的外掛程式


;(function($),options);
$("tbody>tr:odd",this).addclass(options.odd);
$("tbody>tr:even",this).addclass(options.even);
$('tbody>tr',this).click(function());
$('tbody>tr:has(:checked)',this).addclass(options.selected);
return this;
},color:function(value)
});})(jquery)

完整**：

姓名性別暫住地張山男浙江寧波李四女浙江杭州王五男湖南長沙找六男浙江溫州 rain 男浙江杭州 maxman 女浙江杭州姓名性別暫住地張山男浙江寧波李四女浙江杭州王五男湖南長沙找六男浙江溫州 rain 男浙江杭州 maxman 女浙江杭州

2.封裝全域性函式的外掛程式

這類外掛程式是在jquery命名空間內部新增乙個函式，例如編寫乙個除去左側和右側空格的外掛程式


;(function($),
rtrim:function(text)
})})(jquery);

注意：（text||""）部分是用於防止傳遞進來的text這個字串變數處於未定義之類的特殊狀態，如果text是undefined,則返回字串"",否則返回字串text。這個處理是為了保證接下來的字串替換方法replace()方法不會出錯。

使用：


$.ltrim(" test ");
$.rtrim(" test ");

3.自定義選擇器

jquery提供了一套方法讓使用者可以通過製作選擇器外掛程式來使用自定義選擇器，從而使jquery選擇器功能更加完善。

jquery的選擇符直譯器首先會使用一組正規表示式來解析選擇器，然後針對解析出的每個選擇符執行乙個函式，成為選擇器函式，最後根據這個選擇器函式的返回值為true還是false來決定是否保留這個元素。

例如：


$("div:gt(1)")

該選擇器首先會獲取所有的div元素，然後隱式遍歷這些div元素，並逐個將這些div元素作為引數，連同括號裡「1」等一些引數一起傳遞給gt對應的選擇器函式進行判斷

：gt()選擇器在jquery原始檔中的**如下：


gt:function(a,i,m)

其中，選擇器函式一共接受3個引數：

[quote]

function(a,i,m)

[/quote]

第乙個引數a:指向的是當前遍歷到的dom元素

第二個引數i:指的是當前遍歷到的dom元素的索引值，從0開始

第三個闡述m最為特別，它是由jquery正則解析引擎解析後的產物，是乙個陣列。

[list]

[*]m[0],以上面的$("div:gt(1)")這個例子來講，是:gt(1)這部分。它是jquery選擇器進一步將要匹配的內容。

[*]m[1],這裡是選擇器的引導符，匹配例子中":",即冒號。並非只能使用「：」後面跟上選擇器，使用者還可以自定義其他的選擇引導符。

[*]m[2],即例子中gt,確定究竟是呼叫哪個選擇器函式。

[*]m[3],即例子中的「1」，它非常有用，是編寫選擇器函式最重要的乙個引數。

[*]m[4],上面的例子沒有體現出來。例如"div:l(ss(dd))"這樣的乙個選擇器中，m[4]就指向了(dd）這部分，注意是帶括號的(dd)，而不只是dd。同事要注意，m[3]的值是ss(dd)而非ss。

[/list]

下面是乙個自定義選擇器的乙個簡單的例子


;(function($)
});})(jquery);

注意：這裡再次利用jquery.extend()方法來對jquery物件的一部分進行擴充套件。咱們自定義的選擇器僅僅是jquery.expr[":"]物件的一部分，同時也是乙個object物件。

外掛程式使用：


$(function());

最後說一下編寫外掛程式的基本要點：

[list]

[*]jquery外掛程式的檔名推薦命名為jquery.[外掛程式名].js，以免和其他js庫外掛程式混淆。例如命名為jquery.color.js。

[*]所有的物件方法都應當附加到jquery.fn物件上，而所有的全域性函式都應當附加到jquery物件本身上。

[*]在外掛程式內部，this指向的是當前通過選擇器獲取的jquery物件，而不像一般的方法那樣，例如click()方法，內部的this指向的是dom元素。

[*]可以通過this.each來遍歷所有的元素

[*]所有的方法或函式外掛程式，都應當以分號結尾，否則壓縮的時候可能出現問題。為了更穩妥些，甚至可以在外掛程式頭部先加上乙個分號，以免他人不規範**給外掛程式帶來影響。

[*]外掛程式應當返回乙個jquery物件，以保證外掛程式的可鏈式操作。除非外掛程式返回的是一些需要獲取的值，例如字串或者陣列等。

[*]避免在外掛程式內部使用$作為jquery物件的別名，而應使用完整的jquery來表示。這樣可以避免衝突。當然，也可以利用閉包這種技巧來迴避這個問題，使外掛程式內部繼續使用$作為jquery的別名。

[/list]

jquery外掛程式開發

jQuery 外掛程式開發

jquery 外掛程式開發

jquery 外掛程式開發

jquery外掛程式開發

jQuery 外掛程式開發

jquery 外掛程式開發

jquery 外掛程式開發

相關推薦