有些WEB開發者，會引用一個JQuery類庫，然後在網頁上寫一寫$("#")，$(".")，寫了幾年就對別人說非常熟悉JQuery。我曾經也是這樣的人，直到有一次公司裡的技術交流，我才改變了自己對自己的看法。
擴充套件jquery的時候。最核心的方法是以下兩種：
$nd(object) 可以理解為jquery新增一個靜態方法
$nd(object) 可以理解為jquery例項新增一個方法
$nd(object)
例子：
/* $nd 定義與呼叫* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */$nd({ fun: function () { alert("執行方法一"); } });//定義$();//呼叫$ntd(object)/* $nd 定義與呼叫* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */$nd({ fun: function () { alert("執行方法"); } });$(this)();//等同於$ = function () { alert("執行方法三"); }$(this)();
定義jquery外掛的基本結構
1． 定義作用域：
為外掛定義一個私有作用域。外界程式碼不能直接訪問外掛內部。外掛內部程式碼不受外界干擾，也不會汙染到全域性變數。
//step 定義JQuery的作用域(function ($) {})(jQuery);
2. 為外掛新增擴充套件方法：
//step01 定義JQuery的作用域(function ($) { //step02 外掛的擴充套件方法名稱 $Slider = function (options) { }})(jQuery);
3. 設定預設值：
//step 定義JQuery的作用域(function ($) { //step-a 外掛的預設值屬性 var defaults = { prevId: ‘prevBtn‘, prevText: ‘Previous‘, nextId: ‘nextBtn‘, nextText: ‘Next‘ //…… }; //step 外掛的擴充套件方法名稱 $Slider = function (options) { //step-b 合併使用者自定義屬性，預設屬性 var options = $nd(defaults, options); }})(jQuery);
其中：var options = $nd(defaults, options)的含義了。表示 options 去覆蓋了defaults的值，並把值賦給了options。
在外掛環境中，就表示使用者設定的值，覆蓋了外掛的預設值；如果使用者沒有設定預設值的屬性，還是保留外掛的預設值。
4. 支援jquery選擇器：
//step 定義JQuery的作用域(function ($) { //step-a 外掛的預設值屬性 var defaults = { prevId: ‘prevBtn‘, prevText: ‘Previous‘, nextId: ‘nextBtn‘, nextText: ‘Next‘ //…… }; //step 外掛的擴充套件方法名稱 $Slider = function (options) { //step-b 合併使用者自定義屬性，預設屬性 var options = $nd(defaults, options); //step 支援JQuery選擇器 (function () { }); }})(jQuery);
5 ．支援JQuery的連結呼叫：
為了能達到連結呼叫的效果必須要把迴圈的每個元素return
//step 定義JQuery的'作用域(function ($) { //step-a 外掛的預設值屬性 var defaults = { prevId: ‘prevBtn‘, prevText: ‘Previous‘, nextId: ‘nextBtn‘, nextText: ‘Next‘ //…… }; //step 外掛的擴充套件方法名稱 $Slider = function (options) { //step-b 合併使用者自定義屬性，預設屬性 var options = $nd(defaults, options); //step 支援JQuery選擇器 //step 支援鏈式呼叫 return (function () { }); }})(jQuery);
6. 外掛裡的方法：
在外掛裡定義的方法，外界不能直接呼叫，我在外掛裡定義的方法也沒有汙染外界環境。
//step01 定義JQuery的作用域(function ($) { //step03-a 外掛的預設值屬性 var defaults = { prevId: ‘prevBtn‘, prevText: ‘Previous‘, nextId: ‘nextBtn‘, nextText: ‘Next‘ //…… }; //step06-a 在外掛裡定義方法 var showLink = function (obj) { $(obj)nd(function () { return "(" + $(obj)("href") + ")" }); } //step02 外掛的擴充套件方法名稱 $Slider = function (options) { //step03-b 合併使用者自定義屬性，預設屬性 var options = $nd(defaults, options); //step4 支援JQuery選擇器 //step5 支援鏈式呼叫 return (function () { //step06-b 在外掛裡定義方法 showLink(this); }); }})(jQuery);
通過以上內容給大家介紹了jQuery定義外掛的方法，希望大家喜歡。
