自定義Jquery函式和函式回撥
阿新 • • 發佈：2018-11-13
一：使用Jquery自定義函式
1、引入Jquery外掛
<script type="text/javascript" src="jquery-2.1.0.min.js"></script>
2、定義格式
開頭：(function($) {
結尾：})(jQuery);
中間體：$.自定義函式名
例如：
//自定義Jquery函式 //開頭：格式固定 (function($) { /** 自定義函式名稱 格式：$.自定義函式名稱 = function(入參1，入參2 ...) */ $.test = function(type,options) { console.log(type); console.log(options); } //結尾：格式固定 })(jQuery);
3、自定義函式使用
使用格式： $.自定義函式名稱（入參1，入參2 ... ）
如：
$.test("測試自定義的Jquery函式",{"此引數尚未使用":"此引數尚未使用"});
4、該函式呼叫後控制檯輸出結果如下圖所示
總結
說白了自定義Jquery函式和普通的函式是以 “ $ “開頭，其它的功能與普通的函式區別不是很大。
二：函式回撥
此次函式回撥以上面的函式上進行封裝和測試。
1、自定義一個回撥函式
如：
//封裝測試引數
var param ={ callFun:function(param1,param2,param3){ console.log(param1); console.log(param2); console.log(param3); } };
2、回撥函式呼叫
//呼叫回撥函式，實際呼叫上面的param.callFun 函式
//相當於執行 callFun(param1,param2,param3);
options.callFun.call(this,param1,param2,param3);
3、該函式呼叫後控制檯輸出結果如下圖所示
三、完整程式碼
<!DOCTYPE HTML > <html> <head> <title>自定義Jquery函式和函式回撥</title> <script type="text/javascript" src="jquery-2.1.0.min.js"></script> <script> //封裝測試引數 var param ={ callFun:function(param1,param2,param3){ console.log(param1); console.log(param2); console.log(param3); } }; //自定義Jquery函式 //開頭：格式固定 (function($) { /** 自定義函式名稱 格式：$.自定義函式名稱 = function(入參1，入參2 ...) */ $.test = function(title,options) { console.log(title); console.log(options); //回撥函式測試 if(title == "函式回撥測試"){ callFunTest(options); } } //函式回撥測試 function callFunTest(options){ //模擬返回測試資料 var param1 ="param1"; var param2 = 123; var param3 = {"測試JSON格式資料":"測試JSON格式資料"} //呼叫回撥函式，實際呼叫上面的param.callFun 函式 //相當於執行 callFun(param1,param2,param3); options.callFun.call(this,param1,param2,param3); } //結尾：格式固定 })(jQuery); //自定義Jquery函式測試 function testFunction(){ $.test("測試自定義的Jquery函式",{"此引數尚未使用":"此引數尚未使用"}); } //函式回撥測試 function callBackFunction(){ $.test("函式回撥測試",param); } </script> </head> <body> <!-- 點選DIV 觸發測試事件 --> <div style ="background:#CCC;width:200px;height:200px;line-height:200px;text-align:center" id ="div" onclick ="testFunction()">自定義Jquery函式測試</div> <div style ="background:#666;width:200px;height:200px;line-height:200px;text-align:center" onclick ="callBackFunction()">函式回撥測試</div> </body> </html>