jQuery中click事件的定義和用法
本文實(shí)例講述了jQuery中click事件的定義和用法。分享給大家供大家參考。具體分析如下:
當(dāng)鼠標(biāo)指針在匹配元素上方,然后按下并松開(kāi)鼠標(biāo)左鍵或者調(diào)用click()方法都會(huì)觸發(fā)click事件。
click()方法也可以綁定事件處理方法。
語(yǔ)法結(jié)構(gòu)一:
觸發(fā)click事件。
語(yǔ)法結(jié)構(gòu)二:
為click事件綁定事件處理方法。
參數(shù)列表:
參數(shù) | 描述 |
data | 可選。定義傳入供function處理的數(shù)據(jù)。 |
function | 定義click事件觸發(fā)時(shí)運(yùn)行的函數(shù)。 |
實(shí)例代碼:
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://chabaoo.cn/" />
<title>click事件-腳本之家</title>
<style type="text/css">
div{
width:200px;
height:200px;
border:5px solid green;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("div").text("這是后來(lái)添加的內(nèi)容");
})
$("p").dblclick(function(){
$("button").click();
})
})
</script>
</head>
<body>
<div></div>
<p>雙擊我觸發(fā)click事件</p>
<button>點(diǎn)擊觸發(fā)事件</button>
</body>
</html>
以上代碼當(dāng)雙擊p元素或者點(diǎn)擊按鈕的時(shí)候都會(huì)在div設(shè)置新的文本。
希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。
- jQuery實(shí)現(xiàn)獲取及設(shè)置CSS樣式操作詳解
- jQuery常用樣式操作實(shí)例分析(獲取、設(shè)置、追加、刪除、判斷等)
- JQueryDOM之樣式操作
- JQuery調(diào)用綁定click事件的3種寫法
- JQuery給元素綁定click事件多次執(zhí)行的解決方法
- Jquery為DIV添加click事件的簡(jiǎn)單實(shí)例
- jQuery之選項(xiàng)卡的簡(jiǎn)單實(shí)現(xiàn)
- jQuery實(shí)現(xiàn)選項(xiàng)卡切換效果簡(jiǎn)單演示
- JQuery Tab選項(xiàng)卡效果代碼改進(jìn)版
- jQuery實(shí)現(xiàn)的Tab滑動(dòng)選項(xiàng)卡及圖片切換(多種效果)小結(jié)
- JQuery樣式操作、click事件以及索引值-選項(xiàng)卡應(yīng)用示例
相關(guān)文章
基于jQuery對(duì)象和DOM對(duì)象和字符串之間的轉(zhuǎn)化實(shí)例
下面小編就為大家?guī)?lái)一篇基于jQuery對(duì)象和DOM對(duì)象和字符串之間的轉(zhuǎn)化實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08jQuery AnythingSlider滑動(dòng)效果插件
2009年最受歡迎jQuery插件—AnythingSlider【滑動(dòng)】2010-02-02使用jquery prev()方法找到同級(jí)的前一個(gè)元素
.prev()方法允許我們?cè)?DOM 樹(shù)中搜索這些元素的前一個(gè)同胞元素,并用匹配元素構(gòu)造一個(gè)新的jQuery對(duì)象2014-07-07jQuery div層的放大與縮小簡(jiǎn)單實(shí)現(xiàn)代碼
div層的放大與縮小想必大家已不是那么陌生了吧,接下來(lái)為大家詳細(xì)介紹下使用jQuery實(shí)現(xiàn),感興趣的各位可以參考下哈,希望可以幫助到你2013-03-03解析頁(yè)面加載與js函數(shù)的執(zhí)行 onload or ready
這篇文章主要介紹了頁(yè)面加載與js函數(shù)的執(zhí)行 onload or ready 需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-12-12jQuery中hover方法搭配css的hover選擇器,實(shí)現(xiàn)選中元素突出顯示方法
下面小編就為大家?guī)?lái)一篇jQuery中hover方法搭配css的hover選擇器,實(shí)現(xiàn)選中元素突出顯示方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-05-05jQuery+AJAX實(shí)現(xiàn)網(wǎng)頁(yè)無(wú)刷新上傳
這篇文章主要介紹了jQuery+AJAX實(shí)現(xiàn)網(wǎng)頁(yè)無(wú)刷新上傳的相關(guān)資料,十分詳細(xì),需要的朋友可以參考下2015-02-02jquery實(shí)現(xiàn)頁(yè)面圖片等比例放大縮小功能
本文將利用jquery實(shí)現(xiàn)頁(yè)面圖片等比例放大和縮小。說(shuō)明: 頁(yè)面中經(jīng)常需要將未知大小的圖片展示在有限的空間里, 如果直接指定圖片的width和height值, 就有可能造成圖片走樣, 這段代碼就是為解決這個(gè)問(wèn)題設(shè)計(jì)2014-02-02