跟我一起學JQuery插件開發

　　在逛codeproject網站的時候突然看到一篇文章How to write plugin in Jquery 
如果對E文好的同學 可以看上面的連接
現在我把上面網站的及結合自己的想法寫這篇文章希望能得到大牛們的支持和諒解大鳥飛過歡迎拍裝
來源

　　【】How to write plugin in Jquery

　　【】鋒利的JQuery 書

　　【】RascallySnake的JQueryextend()詳解
一介紹 
插件編寫的目的是給已經有的一系列方法或函數做一個封裝以便在其他地方重復使用方便後期維護 
JQuery除了提供一個簡單有效的方式進行管理元素以及腳本它還還提供了例外一種機制即給核心模塊增加自己的方法和額外的功能通過這種機制Jquery允許我們自己創建屬於我們自己的插件提高我們在開發過程中的效率 

JQuery的插件分為中類型 
（）封裝對象方法的插件（也就是對象級別的開發） 
這種類型的插件是我們今天需要講的插件 
（）封裝全局函數的插件（類級別開發） 
指可以把獨立的函數添加到JQuery命名空間之下 
添加一個全局函數我們只需如下定義 
jQueryfoo = function() { 
alert(This is a test This is only a test); 
}; 
當然 你也可以添加多個全局函數 

復制代碼代碼如下:
jQueryfoo = function() { 
alert(This is a test This is only a test); 
}; 
jQuerybar = function(param) { 
alert(This function takes a parameter which is " + param + "); 
}; 
調用時和一個函數的一樣的:jQueryfoo();jQuerybar();或者$foo();$bar(bar); 
（）選擇器插件 
編寫JQuery插件需要注意的地方 
（）插件的推薦命名方法為jquery[插件名]js 
（）所有的對象方法都應當附加到JQueryfn對象上面而所有的全局函數都應當附加到JQuery對象本身上 
（）在插件內部this指向的是當前通過選擇器獲取的JQuery對象而不像一般方法那樣內部的this指向的是DOM元素 
（）可以通過thiseach 來遍歷所有的元素 
（）所有方法或函數插件都應當以分號結尾否則壓縮的時候可能會出現問題為了更加保險寫可以在插件頭部添加一個分號（）以免他們的不規范代碼給插件帶來 影響 
（）插件應該返回一個JQuery對象以便保證插件的可鏈式操作 
（）避免在插件內部使用$作為JQuery對象的別名而應當使用完整的JQuery來表示這樣可以避免沖突 
JQuery插件的機制 
JQuery提供了個用於擴展JQuery功能的方法即 
①jQueryfnextend() 
②jQueryextend() 
第一個就是我們前面說插件類型的第一個中情況第二個就是指後面的種情況 
jQueryextend()在插件中友一個很重要的功能是擴展已經有的object的對象 
比如 
var newSrc=$extend(destsrcsrcsrc) 
它的含義是將srcsrcsrc合並到dest中返回值為合並後的dest由此可以看出該方法合並 
示例 
var result=$extend({}{name:"Tom"age:}{name:"Jerry"sex:"Boy"}) 
得到的結果是 
result={name:"Jerry"age:sex:"Boy"} 
詳細的 可以查看jQueryextend 函數詳解 裡面對這個方法有很好的講解

官網JQueryextend()與JQueryfnextend()
使用命名空間 
雖然在jQuery命名空間中我們禁止使用了大量的javaScript函數名和變量名但是仍然不可避免某些函數或變量名將於其他jQuery插件沖突因此我們習慣將一些方法封裝到另一個自定義的命名空間 
復制代碼代碼如下:
jQuerymyPlugin = { 
foo:function() { 
alert(This is a test This is only a test); 
} 
bar:function(param) { 
alert(This function takes a parameter which is " + param + "); 
} 
}; 
采用命名空間的函數仍然是全局函數調用時采用的方法 
復制代碼代碼如下:
$myPluginfoo(); 
$myPluginbar(baz); 

二第一個Jquery插件 
如果需要寫一個JQuery插件你需要在$fn對象後面增加一個屬性名這個屬性名 其實 就是你的插件名它的一般框架如下 
復制代碼代碼如下:
(function( $ ) { 
$fnmyPlugin = function() { 
// 這裡開始寫功能需求 
}; 
})( jQuery ); 
現在我們需要寫的插件的功能很簡單就是把一個對象給慢慢的隱藏起來就是使用fadeOut()這個方法 
OK我們打開 VS 新建一個jscript文件並且命名為MyPluginjs並在裡面添加如下代碼 
復制代碼代碼如下:
(function ($) { 
$fnmyPlugin = function () { 
thisfadeOut(normal); 
}; 
})(jQuery); 
怎麼用呢？很簡單 
新建一個html頁面把jquery文件以及剛剛我們MyPluginjs文件導入到本次頁面中如下 
復制代碼代碼如下:
<script src="Scripts/jqueryjs" type="text/javascript"></script> 
<script src="MyPluginjs" type="text/javascript"></script> 
js代碼 
<script type="text/javascript"> 
$(document)ready(function () { 
$("#btn")click(function () { 
$("#div")myPlugin(); 
}); 
}); 
</script> 
HTML代碼 
復制代碼代碼如下:
<div id="div" style="width: px; height: px; backgroundcolor: Gray;"> 
My God</div> 
<input id="btn" type="button" value="button" onclick="MyClick()" /> 
好的你現在點擊網頁上面的按鈕的時候div就會緩緩的隱藏因為我們設定的是normal嘛裡面也可以設定一些值之類的 
很興奮的是既然這個有智能提示如下圖 

　　

　　吧！ 
三插件運用在多個元素控件中 
運用在多個元素控件中 
在上面編寫JQuery插件需要注意的地方的第四點寫道 如果要遍歷 則可以用thiseach方法$("ID")each 可以遍歷jquery對象數組以及集合 
OK知道了這樣子那麼我們的新的代碼如下 

復制代碼代碼如下:
(function ($) { 
$fnhoverElement = function () { 
thiseach(function () { 
$(this)hover( 
function () { 
$(this)addClass("Add"); 
} 
function () { 
$(this)removeClass("Remove"); 
} 
); 
}) 
} 
})(jQuery); 
上面主要用到each()方法進行遍歷代碼很簡單就是把當前的對象的背景色css樣式在“Add”和“Remove”直接切換 

HTML的代碼是 
復制代碼代碼如下:
<div class="hoverText"> 
First Button 
</div> 
<div class="hoverText"> 
Second Button 
</div> 
<div class="hoverText"> 
Third Button 
</div> 
JS 代碼 
復制代碼代碼如下:
<script type="text/javascript"> 
$(document)ready(function () { 
$("hoverText")hoverElement(); 
}); 
</script> 
很簡單不解釋 
鏈式操作 
鏈式操作？都聽過吧比如下面這一句話 
$("#div")css("color" "red")addClass("Add")animate({"width":"px"}); 
就是能在當前的元素後面通過“” 來實施更多的操作這個動作特別的潇灑 
那我們要怎麼才能實現這種效果呢？很簡單我能只需要把對象回去就可以了請注意上面的第六點插件應該返回一個JQuery對象以便保證插件的可鏈式操作 
我們依舊看剛剛的例子 
復制代碼代碼如下:
(function ($) { 
$fnhoverElement = function () { 
return thiseach(function () { 
$(this)hover( 
function () { 
$(this)addClass("Add"); 
} 
function () { 
$(this)removeClass("Remove"); 
} 
); 
}) 
} 
})(jQuery); 
代碼都一樣唯一區別的是thiseach(function () { 這個前面加了一個 return這樣就實現了我們的鏈式操作 
然後 你這樣 
復制代碼代碼如下:
$(document)ready(function () { 
$("hoverText")hoverElement()css("color""yellow"); 
}); 
能看到 文字已經變成了yellow色的了 

四 自定義自己的插件 
對於一個商業插件來說自定義插件的樣式是必不可少的我們可以通過我們自己輸入不同的樣式來改變開發者的默認樣式比如說最常見的 widthheighturlcolor等等要是沒有這些自定義的東西那開發者開發的插件的利用價值就大大的減小了 
OK下面的這個實例的意思是 當我們hover一個對象的時候它能改變它的textbackgroundforeground三個屬性也就是文本背景色前景色用戶可以設定他自己想設定的值而不是固定死的當然如果用戶沒有設置我們會給他一個默認值 
定義這類插件的開發框架是 
$fnYouPlugin = function (options) {} 
為了防止一些偷懶的人我們需要設置一些默認值當它沒有設置的時候我們就用這些默認值 
var defaultVal = { 
Text: Your mouse is over 
ForeColor: red 
BackColor: gray 
}; 
那默認值和用戶傳進來的值是怎麼聯合在一起的呢？這個就需要我們在開篇的時候講到的$extend()知識了 
var obj = $extend(defaultVal options); 
這樣子的話就把用戶自定義的值覆蓋了默認用戶的值如果用戶沒定義值就用系統自定義的 
代碼如下 
復制代碼代碼如下:
(function ($) { 
$fntextHover = function (options) {//options 經常用這個表示有許多個參數 
var defaultVal = { 
Text: Your mouse is over 
ForeColor: red 
BackColor: gray 
}; 
//默認值 
var obj = $extend(defaultVal options); 
return thiseach(function () { 
var selObject = $(this);//獲取當前對象 
var oldText = selObjecttext();//獲取當前對象的text值 
var oldBgColor = selObjectcss("backgroundcolor");//獲取當前對象的背景色 
var oldColor = selObjectcss("color");//獲取當前對象的字體的顏色 
selObjecthover(function () {//定義一個hover方法 
selObjecttext(objText);//進行賦值 
selObjectcss("backgroundcolor" objBackColor);//進行賦值 
selObjectcss("color" objForeColor);//進行賦值 
} 
function () { 
selObjecttext(oldText); 
selObjectcss("backgroundcolor" oldBgColor); 
selObjectcss("color" oldColor); 
} 
); 
}); 
} 
})(jQuery); 
代碼也很簡單上面都有些了解釋此刻不在羅嗦 
怎麼用呢？很簡單 
HTML code 
復制代碼代碼如下:
<div id="div" class="textBar"> 
Mouse over here 
</div> 
<div id="div" class="textBar"> 
Mouse over here 
</div> 
JS Code 
復制代碼代碼如下:
$(document)ready(function () { 
$(#div)textHover({ 
Text: I am going to over 
ForeColor: yellow 
BackColor: Red 
}); 
$(#div)textHover({ Text: I am second div }); 
}); 
就能看到效果了 
希望對你們有幫助 
OK到現在為止應該一個插件開發的基本要素就這些了本來後面還有一個比較復雜的代碼一起發的等下一節吧！ 
源碼下載

From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20585.html