站長(zhǎng)資訊網(wǎng)在上一篇《使用JavaScript從數(shù)組中刪除最后一項(xiàng)（3種方法）》中給大家介紹了怎么使用JavaScript從數(shù)組中刪除最后一項(xiàng)，感興趣的朋友可以去學(xué)習(xí)了解一下~
本文講解的重要內(nèi)容是通過(guò)jQuery將單擊和雙擊事件添加到元素中的方法。
在本文中我們將通過(guò)bind() 方法添加單擊和雙擊事件。bind() 方法向被選元素添加一個(gè)或多個(gè)事件處理程序，以及當(dāng)事件發(fā)生時(shí)運(yùn)行的函數(shù)。此外，我們還會(huì)使用appendTo() 方法將結(jié)果添加到元素，appendTo() 方法在被選元素的結(jié)尾（仍然在內(nèi)部）插入指定內(nèi)容。
下面我們直接上代碼：
<!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>調(diào)用單擊事件</h4>") .appendTo(".res"); }); $(".clickable_ele").bind("dblclick", function () { $("<h4>調(diào)用雙擊事件</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中文網(wǎng)</h1> <h3> 如何給一個(gè)元素添加單擊和雙擊事件? </h3> <div class="clickable_ele"> 可點(diǎn)擊的元素 </div> <div class="res"></div> </body> </html>
效果如下：
-
bind()語(yǔ)法是
$(selector).bind(event,data,function,map)
參數(shù)分別表示： event必需。規(guī)定添加到元素的一個(gè)或多個(gè)事件。 由空格分隔多個(gè)事件值。必須是有效的事件。 data可選。規(guī)定傳遞到函數(shù)的額外數(shù)據(jù)。 function必需。規(guī)定當(dāng)事件發(fā)生時(shí)運(yùn)行的函數(shù)。 map規(guī)定事件映射 ({event:function, event:function, ...})，包含要添加到元素的一個(gè)或多個(gè)事件，以及當(dāng)事件發(fā)生時(shí)運(yùn)行的函數(shù)。
-
appendTo()語(yǔ)法是
$(content).appendTo(selector)
參數(shù)分別表示： content必需。規(guī)定要插入的內(nèi)容（可包含 HTML 標(biāo)簽）。 selector必需。規(guī)定把內(nèi)容追加到哪個(gè)元素上。
注：
自 jQuery 版本 1.7 起，on() 方法是向被選元素添加事件處理程序的首選方法。
append() 和 appendTo() 方法執(zhí)行的任務(wù)相同；不同之處在于：內(nèi)容和選擇器的位置，以及 append() 能夠使用函數(shù)來(lái)附加內(nèi)容。
最后給大家推薦《JavaScript基礎(chǔ)教程》~歡迎大家學(xué)習(xí)~
