在實際開發工作中，總會碰到像滾動，分頁，日曆等展示效果的業務需求，對於接觸過jquery以及熟悉jquery使用的人來說，首先想到的肯定是尋找現有的jquery外掛程式來滿足相應的展示需求。目前頁面中常用的一些元件，都有多種jquery外掛程式可供選擇，網路上也有很多專門收集jquery外掛程式的**。利用jquery外掛程式確實可以給我們的開發工作帶來便捷，但是如果只是會簡單使用，而對其中的原理不甚了解，那麼在使用過程中碰到問題或者對外掛程式進行定製開發時就會有諸多疑惑。本文的目的就是可以快速了解jquery外掛程式的開發原理以及掌握jquery開發的基本技能。
進行jquery外掛程式開發前，首先要知道兩個問題：什麼是jquery外掛程式？jquery外掛程式如何使用？
第乙個問題，jquery外掛程式就是用來擴充套件jquery原型物件的乙個方法，簡單來說就是jquery外掛程式是jquery物件的乙個方法。其實回答了第乙個問題，也就知道第二個問題的答案了，jquery外掛程式的使用方式就是jquery物件方法的呼叫。
我們先看個例子：$("a").css("color","red")。我們知道每個jquery物件都會包含jquery中定義的dom操作方法,這裡使用$方法來選擇a元素，返回乙個a元素的jquery物件，這個物件就可以使用jquery中定義的dom操作方法。那麼jquery物件是如何獲取這些方法的呢？其實jquery內部定義了乙個jquery.fn物件，檢視jquery原始碼可以發現jquery.fn=jquery.prototype，也就是說jquery.fn物件是jquery的原型物件,jquery的dom操作方法都在jquery.fn物件上定義的，然後jquery物件就可以通過原型繼承這些方法。
基礎版jquery外掛程式
知道了上面這些知識，我們就可以來寫乙個簡單的jquery外掛程式。假如我現在需要乙個jquery外掛程式用來改變標籤內容顏色，就可以按下面的方式來實現這個外掛程式：
$.fn.changestyle = function
(colorstr)
$(
"p").changestyle("red");
滿足鏈式呼叫的jquery外掛程式
鏈式呼叫時jquery的一大特色，乙個通用的外掛程式應該遵循jquery風格，滿足鏈式呼叫要求。實現鏈式呼叫的方式也很簡單：
$.fn.changestyle = function
(colorstr)
$("p").changestyle("red").addclass("red-color");防止$符號汙染的jquery外掛程式
有很多js庫都會使用$符號，雖然jquery可以使用jquery.noconflict()方法交出符號
的使用權
，但是如
果定義插
件的時候
，使用『
.fn`物件來定義的，那麼這些外掛程式使用的時候就會受到其它使用$變數的js庫的影響。對於這種情況，我們可以使用立即執行函式通過傳參的方式封裝外掛程式。形式如下：
(function
($)}(jquery))
;
於這個立
即執行函
數的函式
作用域，
這樣就可
以避免 符號的汙染。
可以接受引數的jquery外掛程式
繼續上面的例子，假如我還想為這個外掛程式新增乙個設定標籤元素內容文字大小的功能，那麼我可以這麼來實現：
(function
($)}(jquery))
;
(function
($)}(jquery))
;
把引數放到乙個物件中傳給外掛程式還有乙個好處就是我們可以在外掛程式內部為一些引數定義一些預設值，例如：
(function
($);
var setting = $.extend(defaultsetting,option)
; this.css("color",setting.colorstr).css("fontsize",setting.fontsize+"px")
;
return this;
}}(jquery))
;
xten
d方法，
這個方法
在這裡的
用法就是
合併兩個
物件，即
把後面一
個物件的
存在的屬
性值賦值
給第乙個
物件，具
體用法可
以參考這
裡。.extend方法還有一種作用是用來擴充套件jquery物件本身。
這樣定義的外掛程式，我們在使用時如果不傳fontsize，那麼使用這個外掛程式的jquery物件標籤的內容會被設定成預設的12px。
使用方式：$(「p」).changestyle();
注意：在為外掛程式定義預設引數時，一定要把預設引數寫在外掛程式方法內部，這樣預設引數的作用域就在外掛程式內部。
總結 定義外掛程式的方式除了上面說的用$.fn來定義，還有另外一種方式來定義外掛程式，那就是使用$.fn.extend方法。類似下面的寫法：
(function
($);
var setting = $.extend(defaultsetting,option)
; this.css("color",setting.colorstr).css("fontsize",setting.fontsize+"px")
;
return this; }})
;}(jquery))
;
$.extend方法和$.fn.extend方法都可以用來擴充套件jquery功能，通過閱讀jquery原始碼我們可以發現這兩個方法的本質區別，那就是$.extend方法是在jquery全域性物件上擴充套件方法，$.fn.extend方法是在$選擇符選擇的jquery物件上擴充套件方法。所以擴充套件jquery的公共方法一般用$.extend方法，定義外掛程式一般用$.fn.extend方法。
根據廖雪峰的官方**
編寫jquery外掛程式的原則：
1、給$.fn繫結函式，實現外掛程式的**邏輯;
2、外掛程式函式最後要return this;以支援鏈式呼叫;
3、外掛程式函式要有預設值，繫結在$.fn..defaults上;
4、使用者在呼叫時可傳入設定值以便覆蓋預設值。
例子：寫乙個字型高亮的外掛程式,詳細見廖雪峰的官方**
html**
id="test-highlight">
如何編寫jqueryspan>
pluginspan>
p>
編寫jqueryspan>
pluginspan>，要設定預設值span>並允許使用者修改預設值span>，或者執行時傳入其他值span>
p>
div>
$.fn.highlight = function
(options),$.fn.highlight.defaults,options);
this.css('backgroundcolor',opts.backgroundcolor).css('color',opts.color);
return
this;
}
$.fn.highlight.defaults =$.fn.highlight.defaults.color = '#659f13';
$.fn.highlight.defaults.backgroundcolor='#f2fae3';
$('#test-highlight p:first-child span').highlight();//用預設值
$('#test-highlight p:last-child span').highlight();
src="">
script>
jquery外掛程式編寫
最近大家都玩什麼react node angular這些玩意去了 隨著瀏覽器的相容性 以及前端開發思想的進化 jquery逐漸被拋棄 現在自己也很少用了 純粹為了懷戀曾經的jquery.現在寫寫jquery外掛程式的寫法。沒事的時候避免老年痴呆，可以用來玩玩。寫法一 function window ...
jQuery 編寫外掛程式
jquery為開發外掛程式提供了兩個方法，分別是 1 類級別的外掛程式開發，即給jquery新增新的全域性函式，相當於給jquery類本身新增方法。2 物件級別的外掛程式開發，即給jquery物件新增方法。1 類級別的外掛程式開發 用的比較少 a.新增全域性函式 jquery.foo functio...
jQuery 編寫外掛程式
編寫乙個jquery外掛程式的原則 給 fn繫結函式，實現外掛程式的 邏輯 外掛程式函式最後要return this 以支援鏈式呼叫 外掛程式函式要有預設值，繫結在 fn.defaults上 使用者在呼叫時可傳入設定值以便覆蓋預設值。一 fn 給jquery物件繫結乙個新方法是通過擴充套件 fn物件...