jQuery插件的開發包括兩種：一種是類級別的插件開發，即給jQuery添加新的全局函數，相當於給jQuery類本身添加方法。jQuery的全局函數就是屬於jQuery命名空間的函數。
另一種是對象級別的插件開發，即給jQuery對象添加方法。
一. 基本概念
用JQuery寫插件時，最核心的方法有如下兩個：
$.extend(object) 可以理解爲JQuery 添加一個靜態方法。
$.fn.extend(object) 可以理解爲JQuery實例添加一個方法
基本的定義與調用：
/* $.extend 定義與調用
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
$.extend({ fun1: function () { alert("執行方法一"); } });
$.fun1();
/* $.fn.extend 定義與調用
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
$.fn.extend({ fun2: function () { alert("執行方法2"); } });
$(this).fun2();
//等同於
$.fn.fun3 = function () { alert("執行方法三"); }
$(this).fun3();jQuery(function () { }); 與 (function ($) { })(jQuery);的區別：
jQuery(function () { });
//相當於
$(document).ready(function () { });
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
(function ($) { })(jQuery);
//相當於
var fn = function ($) { };
fn(jQuery);jQuery(function () { });是某個DOM元素加載完畢後執行方法裏的代碼。
(function ($) { })(jQuery); 定義了一個匿名函數，其中jQuery代表這個匿名函數的實參。通常用在JQuery插件開發中，起到了定義插件的私有域的作用。
代碼：
<html>
<head><h>widget</h>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script>
<script>
(function ($) {
$.fn.sharePop = function () {
$(this).click(function(e){
e.preventDefault();
alert("1");
})
};
})(jQuery);
$(document).ready(function () {
$('a').sharePop();
$.fn.hilight.defaults.color = "red";
$(".div1").hilight();
});
(function ($) {
// plugin definition
$.fn.hilight = function (options) {
// Extend our default options with those provided.
var opts = $.extend({}, $.fn.hilight.defaults, options);
return this.each(function () {
//step06-b 在插件裏定義方法
$(this).css(opts);
});
};
$.fn.hilight.defaults = { color: 'blue', background: 'yellow' };
})(jQuery);
//step01 定義JQuery的作用域
(function ($) {
//step03-a 插件的默認值屬性
//var defaults = {
// "color": "red",
// "background-color":"blue"
//};
//step02 插件的擴展方法名稱
$.fn.easySlider = function (options){
//step03-b 合併用戶自定義屬性，默認屬性
var options = $.extend({}, $.fn.easySlider.defaults, options);
//step4 支持JQuery選擇器
//step5 支持鏈式調用
return this.each(function () {
//step06-b 在插件裏定義方法
$(this).css(options);
//showLink(this);
});
}
$.fn.easySlider.defaults = {
color: "white",
background: "blue"
}
})(jQuery);
</script>
</head>
<body>
<a class="div1" href="http://www.baidu.com">text</a>
<a href="http://www.baidu.com">click</a>
</body>
</html>