jquery中自定義插件開發教程

 　　一、全局函數的擴展

　　全局函數是將獨立的函數添加到JQuery的命名空間中區。在使用的時候，可以通過$.fucnName(param)或者jQuery.funcName(param)方式進行調用。

　　1、直接在JQuery上添加：在jQuery上添加一個全局函數sayHello

 代碼如下   jQuery.sayHello=function(name)
{
alert(name+"您好");
};

　　調用方式:

 代碼如下   jQuery.sayHello("張子涵");   
//或者用$.sayHello("張子涵");   

　　2、jQuery.extend():其作用是用一個或者多個對象來擴展一個對象，返回被擴展的對象。

　　2.1 jQuery.extend(dsc,src1,src2…):將src1,src2擴展到dsc對象，並返回擴展後的dsc對象(合並對象)

　　2.2 jQuery.extend(object)：對jQuery命名空間本身進行擴展，結果就是在jQuery命名空間上增加函數。

 代碼如下  

//在jQuery命名空間上增加兩個函數。
jQuery.extend({
  min: function(a, b) { return a < b ? a : b; },
  max: function(a, b) { return a > b ? a : b; }
});

　　調用方式

 代碼如下   jQuery.min(2,3); // => 2
jQuery.max(4,5); // => 5

　　二、對象方法的擴展

　　對象方法的擴展可以讓所有jQuery對象調用的方法。

　　1、jQuery.fn

 代碼如下  

//在jQuery對象上添加sayHello方法
jQuery.fn.sayHello=function(name)
{
alert(name+"您好");
}
 

調用

$("div").sayHello("dwqs");

　　2、jQuery.fn.extend

　　擴展 jQuery 元素集來提供新的方法(通常用來制作插件)。

 代碼如下  

//增加兩個插件方法。

jQuery.fn.extend({
  check: function() {
    return this.each(function() { this.checked = true; });
  },
  uncheck: function() {
    return this.each(function() { this.checked = false; });
  }
});
 

調用：

$("input[type=checkbox]").check();
$("input[type=radio]").uncheck();