偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

分解jQuery對相關(guān)控件的事件操作

開發(fā) 前端
JQuery是非常棒的JS類庫,有豐富的UI庫和插件,不過我鐘愛他的是他的選擇器,感覺其他功能有時跟后臺人員距離很遠(yuǎn),所以一般我也只使用一下他的選擇器。

今天突然對他的事件產(chǎn)生了興趣,先前也碰到過,也沒整理,今天有空就弄一下咯。

對于控件的事件,jQuery已經(jīng)提供了豐富的方法,包括綁定、一次綁定、觸發(fā)等,阿拉今早看看叫一哪能用額伐,大蝦路古就可以了。

jQuery的綁定事件非常方便,有bind、live、one還有它幫你把一些常用的事件給單獨了出來,比如控件的onclick事件,我們綁定onclick事件的時候只需要

  1. $("#testButton").click(function() {  
  2.     alert("I'm Test Button");  
  3. }); 

就這樣我們在testButton這個按鈕上綁定了onclick事件,執(zhí)行alert語句。我們也可以使用$("#testButton").click();來觸發(fā)這個onclick事件,一切都非常ok啦。以上有點sb了,接下來看看取消事件。jQuery有unbind的方法,專門來取消綁定的,也就是取消事件,按照上面的例子的話,應(yīng)該使用:$("#testButton").unbind("click");恩,看上去非常好,如果你的click有2個事件的話,你還可以使用unbind("click", fnName)來刪除特定函數(shù)的綁定。為什么有這個取消特定函數(shù)的方法呢,我們來看下例子,我們會發(fā)現(xiàn),javascript的事件,跟C#的事件如出一轍,事件的綁定是疊加(+=) 而不是覆蓋。   

  1. var Eat = function() {  
  2.         alert("我要吃飯");  
  3.     }  
  4.  
  5.     var PayMoney = function() {  
  6.         alert("先付錢");  
  7.     }  
  8.  
  9.     jQuery(document).ready(function() {  
  10.         $("#testButton").click(Eat);  
  11.         $("#testButton").bind("click", PayMoney);  
  12.     }); 

通過上面的例子,我們發(fā)現(xiàn)會先彈出:“我要吃飯”緊接著會彈出“先付錢”,說明它的綁定是通過onclick+=fn進(jìn)行的。我們修改下ready的方法:       

  1. jQuery(document).ready(function() {  
  2.            $("#testButton").click(Eat);  
  3.            $("#testButton").unbind();  
  4.            $("#testButton").bind("click", PayMoney);  
  5.        }); 

又出錯了,呵呵,這次點擊按鈕的話,只會執(zhí)行PayMoney,不會執(zhí)行Eat,那如果把unbind()放在bind后面的話,這樣這個按鈕就不會起作用了。但如果我要去掉綁定的PayMoney方法呢?這時候我們應(yīng)該這樣寫:      

  1. jQuery(document).ready(function() {  
  2.           $("#testButton").click(Eat);  
  3.           $("#testButton").bind("click", PayMoney);  
  4.           $("#testButton").unbind("click", PayMoney);  
  5.       }); 

嘿嘿,跟bind其實一個樣,不過接下來你將看到一個bug(我不知道算不算),讓我們近距離體驗一下

  1. <input id="testButton" type="button" value="Test Button" onclick="Eat();" /> 
  2. <script type="text/javascript"> 
  3.         jQuery(document).ready(function() {  
  4.             $("#testButton").unbind("click", Eat);  
  5.             $("#testButton").unbind();  
  6.             $("#testButton").bind("click", PayMoney);  
  7.         });  
  8. </script> 

大家猜猜,會顯示什么?吃飯?付錢?答案是Eat -> PayMoney,?。。?!我這里取消了綁定,又刪除了特定的綁定,為什么還會執(zhí)行Eat呢?其中的原由要看jQuery的類庫了,我估計它只刪除了通過JQuery綁定的那些事件了,呵呵。那這時候我們該如何呢?好在jQuery有很多方法,其中一個就是attr,他是對Dom元素的屬性進(jìn)行操作,我們利用attr來消除input上的click事件。    $("#testButton").attr("onclick", "");這樣就可以把onclick事件清除了,記住,attr上因為是元素的屬性,所以這里要寫 “onclick” 而不是click,因為click是jQuery封裝好的簡寫方式。好了,綁定就到這里了,弄個場景,大家也好記得住點:一日,老應(yīng)、老趙、老陳出去吃飯,吃飽了,喝足了,準(zhǔn)備付錢了,這時候

  1. <head> 
  2.  
  3.     <script type="text/javascript" src="jquery-1.2.6.min.js"></script> 
  4.  
  5.     <script type="text/javascript"> 
  6.  
  7.         var PayMoney = function(name) {  
  8.             alert(name + ":今天我請客,我來付錢");  
  9.         }  
  10.  
  11.         jQuery(document).ready(function() {  
  12.             $("#JeffreyPay").attr("onclick", "");  
  13.             $("#JamesPay").attr("onclick", "");  
  14.  
  15.             $("#JeffreyPay").click(function() {  
  16.                 alert("。。。。這里不能刷卡");  
  17.             });  
  18.  
  19.             $("#JeffreyPay").click(function() {  
  20.                 PayMoney("陳大");  
  21.             });  
  22.             $("#JamesPay").bind("click", function() {  
  23.                 alert("。。。。忘記帶錢包了");  
  24.             });  
  25.             $("#JamesPay").bind("click", $("#DlyingPay").attr("onclick"));  
  26.         });  
  27.     </script> 
  28.  
  29. </head> 
  30. <body> 
  31.     <input id="JeffreyPay" onclick="PayMoney('趙帥');" type="button" value="老趙付錢" /> 
  32.     <input id="JamesPay" type="button" onclick="PayMoney('老應(yīng)');" value="老應(yīng)付錢" /> 
  33.     <input id="DlyingPay" type="button" onclick="PayMoney('陳大');" value="老陳付錢" /> 
  34. </body> 

以上內(nèi)容均為原創(chuàng),不要用在邪惡的地方哦。其實在綁定事件上還存在很多bug,大家可以稍微修改下上面的效果就會知道了,比如自動執(zhí)行,綁定失敗等,呵呵。

【編輯推薦】

  1. jQuery調(diào)用WCF服務(wù)傳遞JSON對象
  2. 學(xué)習(xí)jQuery必須知道的幾種常用方法
  3. 用XML+XSLT+CSS+JQuery組建ASP.NET網(wǎng)站
  4. 使用jQuery和PHP構(gòu)建一個受Ajax驅(qū)動的Web頁面
  5. jQuery調(diào)用WCF需要注意的一些問題
責(zé)任編輯:彭凡 來源: cnblogs
相關(guān)推薦

2010-01-04 14:49:30

Silverlight

2010-07-23 09:03:53

.NET跨線程

2009-12-30 10:44:38

Silverlight

2009-12-31 16:38:19

Silverlight

2009-12-30 17:29:53

Silverlight

2009-12-30 10:32:31

Silverlight

2013-04-19 10:01:19

jQueryJS

2010-03-24 16:25:18

Python源代碼

2011-07-19 17:09:44

jQuery Mobi事件

2012-05-14 10:14:42

WinForm

2021-09-27 06:50:04

非線性數(shù)據(jù)

2009-07-10 16:29:32

Swing組件

2010-06-22 10:05:36

Linux監(jiān)控

2009-08-27 13:38:36

C#線程相關(guān)問題

2009-07-24 10:36:08

ASP.NET控件

2009-08-18 13:41:40

WebBrowser控

2009-12-08 16:42:48

WCF Service

2009-12-28 15:18:29

WPF控件模型

2009-12-23 18:16:35

WPF布局控件

2013-12-02 15:21:30

jQuery插件
點贊
收藏

51CTO技術(shù)棧公眾號