jquery.hook 可以在指定的 jQuery 的 method 中加入 Hook,當指定的 method 執行前、正要執行及執行後都能產生相對應的事件,讓開發者可以針對某些功能來進一步的除錯。
假設是掛在 .addClass() 上,當呼叫 .addClass() 時,執行的順序為:
1.onbeforeaddClass
2.onaddClass
3.addClass
4.onafteraddClass
套件名稱:jquery.hook
套件網址:N/A
作者網站:https://github.com/aheckmann/jquery.hook
套件網址:N/A
發佈日期:2010-01-19
檔案大小:2.04 KB
檔案下載:jquery.hook.js
HTML 屬性說明:
檢視原始碼 JavaScript
1 2 3 | fns(必填) 描述: 要掛勾的 jQuery method;若一次要掛勾多個 method 時, 可以輸入字串(用空格隔開)或陣列 預設值: 無 |
方法說明:
檢視原始碼 JavaScript
1 2 3 4 5 | // 掛勾指定的 method $.hook(fns); // 取消掛勾 $.unhook(fns); |
使用範例:
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.hook.js"></script> <style type="text/css"> .newColor { color: red; } </style> <script type="text/javascript"> $(function(){ // 掛勾事件在 addClass() 時 $.hook('addClass'); // 分別一一指定發生 onbeforeaddClass, onaddClass 及 onafteraddClass 的動作 $('button').bind('onbeforeaddClass', function(){ $('div').html( $('div').html() + '<br />onbeforeaddClass'); }).bind('onaddClass', function(){ $('div').html( $('div').html() + '<br />onaddClass'); }).bind('onafteraddClass', function(){ $('div').html( $('div').html() + '<br />onbeforeaddClass'); }); // 當按鈕按下時, 就執行 addClass() $('button').click(function(){ $(this).addClass('newColor'); }); }); </script> <body> <button>Click Me</button> <div></div> </body> |