跟我一起學JQuery插件開發教程

摘自: http://www.poluoluo.com/jzxy/201204/163035.html

在逛codeproject網站的時候，突然看到一篇文章： 

如果對E文好的同學

，可以看上面的連接配接。

現在我把上面網站的及結合自己的想法寫這篇文章。希望能得到大牛們的支援和諒解。。。大鳥飛過。。。歡迎拍裝。

來源：

【2】鋒利的JQuery 書

【3】的

一.介紹 

插件編寫的目的是給已經有的一系列方法或函數做一個封裝，以便在其他地方重複使用，友善後期維護。 

JQuery除了提供一個簡單、有效的方式進行管理元素以及腳本，它還還提供了例外一種機制：即給核心子產品增加自己的方法和額外的功能。通過這種機制，Jquery允許我們自己建立屬于我們自己的插件，提高我們在開發過程中的效率。 

1.1JQuery的插件分為3中類型： 

（1）封裝對象方法的插件（也就是對象級别的開發） 

這種類型的插件是我們今天需要講的插件。 

（2）封裝全局函數的插件（類級别開發） 

指可以把獨立的函數添加到JQuery命名空間之下。 

添加一個全局函數，我們隻需如下定義： 

jQuery.foo

= function() { 

alert(‘This is a test. This is only a

test.‘); 

}; 

當然 你也可以添加多個全局函數： 

.代碼如下:

jQuery.foo = function()

{ 

jQuery.bar = function(param)

alert(‘This function takes a parameter, which is "‘ + param +

‘".‘); 

調用時和一個函數的一樣的:jQuery.foo();jQuery.bar();或者$.foo();$.bar(‘bar‘); 

（3）選擇器插件 

1.2編寫JQuery插件需要注意的地方： 

（1）插件的推薦命名方法為：jquery.[插件名].js 

（2）所有的對象方法都應當附加到JQuery.fn對象上面，而所有的全局函數都應當附加到JQuery對象本身上。 

（3）在插件内部，this指向的是目前通過選擇器擷取的JQuery對象，而不像一般方法那樣，内部的this指向的是DOM元素。 

（4）可以通過this.each

來周遊所有的元素 

（5）所有方法或函數插件，都應當以分号結尾，否則壓縮的時候可能會出現問題。為了更加保險寫，可以在插件頭部添加一個分号（；），以免他們的不規範代碼給插件帶來

影響。 

（6）插件應該傳回一個JQuery對象，以便保證插件的可鍊式操作。 

（7）避免在插件内部使用$作為JQuery對象的别名，而應當使用完整的JQuery來表示。這樣可以避免沖突。 

1.3JQuery插件的機制 

JQuery提供了2個用于擴充JQuery功能的方法。即： 

①jQuery.fn.extend() 

②jQuery.extend() 

第一個就是我們前面說插件類型的第一個中情況，第二個就是指後面的2種情況。 

jQuery.extend()在插件中友一個很重要的功能是擴充已經有的object的對象。 

比如： 

var

newSrc=$.extend(dest,src1,src2,src3...) 

它的含義是将src1,src2,src3...合并到dest中,傳回值為合并後的dest,由此可以看出該方法合并。 

示例： 

result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"}) 

得到的結果是： 

result={name:"Jerry",age:21,sex:"Boy"} 

詳細的

可以檢視： 裡面對這個方法有很好的講解。

官網：

使用命名空間 

雖然在jQuery命名空間中，我們禁止使用了大量的javaScript函數名和變量名。但是仍然不可避免某些函數或變量名将于其他jQuery插件沖突，是以我們習慣将一些方法封裝到另一個自定義的命名空間。 

jQuery.myPlugin =

foo:function() { 

}, 

bar:function(param) { 

alert(‘This

function takes a parameter, which is "‘ + param +

} 

采用命名空間的函數仍然是全局函數，調用時采用的方法： 

$.myPlugin.foo(); 

$.myPlugin.bar(‘baz‘); 

二.第一個Jquery插件 

如果需要寫一個JQuery插件，你需要在$.fn對象後面增加一個屬性名，這個屬性名

其實 就是你的插件名。它的一般架構如下： 

(function( $ ) { 

$.fn.myPlugin

// 這裡開始寫功能需求 

})( jQuery

); 

現在我們需要寫的插件的功能很簡單，就是把一個對象給慢慢的隐藏起來。就是使用fadeOut()這個方法。 

OK，我們打開

VS 2012.建立一個jscript檔案，并且命名為：MyPlugin.js，并在裡面添加如下代碼： 

(function ($) { 

= function ()

this.fadeOut(‘normal‘); 

})(jQuery); 

怎麼用呢？很簡單。 

建立一個html頁面，把jquery檔案以及剛剛我們MyPlugin.js檔案導入到本次頁面中。如下： 

<script

src="Scripts/jquery-1.4.1.js"

type="text/javascript"></script> 

<script src="MyPlugin.js"

js代碼： 

type="text/javascript"> 

$(document).ready(function ()

$("#btn1").click(function ()

$("#div1").myPlugin(); 

}); 

</script> 

HTML代碼： 

<div id="div1" style="width: 400px;

height: 30px; background-color: Gray;"> 

My

God</div> 

<input id="btn1" type="button" value="button"

onclick="MyClick()" /> 

好的，你現在點選網頁上面的按鈕的時候，div就會緩緩的隐藏。。。因為我們設定的是normal嘛，裡面也可以設定一些值之類的。 

很興奮的是，既然這個有智能提示，如下圖： 

吧！ 

三.插件運用在多個元素控件中。 

3.1

運用在多個元素控件中 

在上面編寫JQuery插件需要注意的地方的第四點，寫道 如果要周遊

則可以用this.each方法。$("ID").each

可以周遊jquery對象、數組以及集合。 

OK。知道了這樣子，那麼我們的新的代碼如下： 

(function ($)

$.fn.hoverElement = function () { 

this.each(function ()

$(this).hover( 

function ()

$(this).addClass("Add"); 

$(this).removeClass("Remove"); 

}) 

上面主要用到.each()方法進行周遊。代碼很簡單，就是把目前的對象的背景色css樣式在“Add”和“Remove”直接切換。 

HTML的代碼是： 

<div

class="hoverText"> 

First

Button.. 

</div> 

Second

Third Button.. 

JS 代碼： 

$(".hoverText").hoverElement(); 

很簡單，不解釋。 

3.2

鍊式操作 

鍊式操作？都聽過吧。。。比如下面這一句話： 

$("#div1").css("color",

"red").addClass("Add").animate({"width":"100px"},1000); 

就是能在目前的元素後面通過“.”

來實施更多的操作。這個動作特别的潇灑。 

那我們要怎麼才能實作這種效果呢？很簡單，我能隻需要把對象回去就可以了。請注意上面的第六點：插件應該傳回一個JQuery對象，以便保證插件的可鍊式操作。 

我們依舊看剛剛的例子： 

return this.each(function

() { 

代碼都一樣，唯一差別的是：this.each(function () { 這個前面加了一個

return。這樣就實作了我們的鍊式操作。 

然後 你這樣： 

$(".hoverText").hoverElement().css("color","yellow"); 

能看到 文字已經變成了yellow色的了。 

四

自定義自己的插件 

對于一個商業插件來說，自定義插件的樣式是必不可少的。我們可以通過我們自己輸入不同的樣式，來改變開發者的預設樣式。比如說最常見的

width、height、url、color等等。要是沒有這些自定義的東西，那開發者開發的插件的利用價值就大大的減小了。 

OK，下面的這個執行個體的意思是

當我們hover一個對象的時候，它能改變它的text、background、foreground三個屬性，也就是文本、背景色、前景色。使用者可以設定他自己想設定的值，而不是固定死的。當然，如果使用者沒有設定，我們會給他一個預設值。 

定義這類插件的開發架構是： 

$.fn.YouPlugin

= function (options)

{...} 

為了防止一些偷懶的人，我們需要設定一些預設值，當它沒有設定的時候，我們就用這些預設值。 

defaultVal = { 

Text: ‘Your mouse is

over‘, 

ForeColor: ‘red‘, 

BackColor:

‘gray‘ 

那預設值和使用者傳進來的值是怎麼聯合在一起的呢？這個就需要我們在開篇的時候講到的$.extend()知識了。 

obj = $.extend(defaultVal,

options); 

這樣子的話，就把使用者自定義的值覆寫了預設使用者的值。如果使用者沒定義值，就用系統自定義的。 

代碼如下： 

$.fn.textHover

= function (options) {//options 經常用這個表示有許多個參數。 

var defaultVal =

Text: ‘Your mouse is over‘, 

ForeColor:

‘red‘, 

BackColor: ‘gray‘ 

　　　　　　//預設值 

obj = $.extend(defaultVal, options); 

return this.each(function ()

var selObject = $(this);//擷取目前對象 

var oldText =

selObject.text();//擷取目前對象的text值 

var oldBgColor =

selObject.css("background-color");//擷取目前對象的背景色 

var oldColor =

selObject.css("color");//擷取目前對象的字型的顔色 

selObject.hover(function ()

{//定義一個hover方法。 

selObject.text(obj.Text);//進行指派 

selObject.css("background-color",

obj.BackColor);//進行指派 

selObject.css("color",

obj.ForeColor);//進行指派 

selObject.text(oldText); 

oldBgColor); 

oldColor); 

代碼也很簡單，上面都有些了解釋，此刻不在羅嗦。 

HTML

code： 

<div id="div1"

class="textBar"> 

Mouse over

here..... 

<div id="div2"

JS Code： 

$(‘#div1‘).textHover({ 

Text: ‘I am going to

over..‘, 

ForeColor: ‘yellow‘, 

‘Red‘ 

$(‘#div2‘).textHover({ Text: ‘I am second div...‘

就能看到效果了。 

希望對你們有幫助。 

OK，到現在為止，應該一個插件開發的基本要素就這些了。本來後面還有一個比較複雜的代碼，一起發的，等下一節吧！