在上一篇《使用JavaScript從數組中刪除最后一項(3種方法)》中給大家介紹了怎么使用JavaScript從數組中刪除最后一項,感興趣的朋友可以去學習了解一下~
本文講解的重要內容是通過jQuery將單擊和雙擊事件添加到元素中的方法。
在本文中我們將通過bind()
方法添加單擊和雙擊事件。bind() 方法向被選元素添加一個或多個事件處理程序,以及當事件發(fā)生時運行的函數。此外,我們還會使用appendTo() 方法將結果添加到元素,appendTo() 方法在被選元素的結尾(仍然在內部)插入指定內容。
下面我們直接上代碼:
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title></title> <script src="jquery.min.js"></script> <script> $(document).ready(function () { $(".clickable_ele").bind("click", function () { $("<h4>調用單擊事件</h4>") .appendTo(".res"); }); $(".clickable_ele").bind("dblclick", function () { $("<h4>調用雙擊事件</h4>") .appendTo(".res"); }); }); </script> <style> body { text-align: center; } h1 { color: #ff311f; } .clickable_ele { font-size: 20px; font-weight: bold; color: #ff7800; } </style> </head> <body> <h1>PHP中文網</h1> <h3> 如何給一個元素添加單擊和雙擊事件? </h3> <div class="clickable_ele"> 可點擊的元素 </div> <div class="res"></div> </body> </html>
效果如下:
-
bind()語法是
$(selector).bind(event,data,function,map)
參數分別表示: event必需。規(guī)定添加到元素的一個或多個事件。 由空格分隔多個事件值。必須是有效的事件。 data可選。規(guī)定傳遞到函數的額外數據。 function必需。規(guī)定當事件發(fā)生時運行的函數。 map規(guī)定事件映射 ({event:function, event:function, ...}),包含要添加到元素的一個或多個事件,以及當事件發(fā)生時運行的函數。
-
appendTo()語法是
$(content).appendTo(selector)
參數分別表示: content必需。規(guī)定要插入的內容(可包含 HTML 標簽)。 selector必需。規(guī)定把內容追加到哪個元素上。
注:
自 jQuery 版本 1.7 起,on() 方法是向被選元素添加事件處理程序的首選方法。
append() 和 appendTo() 方法執(zhí)行的任務相同;不同之處在于:內容和選擇器的位置,以及 append() 能夠使用函數來附加內容。
最后給大家推薦《JavaScript基礎教程》~歡迎大家學習~