jquery中自訂外掛程式開發教程

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();