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