jQuery中click事件的定義和用法

更新時(shí)間：2014年12月20日 12:47:29 投稿：shichen2014

這篇文章主要介紹了jQuery中click事件的定義和用法,以實(shí)例形式詳細(xì)分析了jQuery中的click事件具體定義方法、參數(shù)及用法實(shí)例,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了jQuery中click事件的定義和用法。分享給大家供大家參考。具體分析如下：

當(dāng)鼠標(biāo)指針在匹配元素上方，然后按下并松開鼠標(biāo)左鍵或者調(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í)運(yùn)行的函數(shù)。

實(shí)例代碼:

復(fù)制代碼代碼如下:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.dhdzp.com/" />

<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>點(diǎn)擊觸發(fā)事件</button>

</body>

</html>

以上代碼當(dāng)雙擊p元素或者點(diǎn)擊按鈕的時(shí)候都會在div設(shè)置新的文本。

希望本文所述對大家的jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

原生js和jQuery寫的網(wǎng)頁選項(xiàng)卡特效對比
本文實(shí)例中主要是通過判斷點(diǎn)擊菜單在菜單列表中的索引位置來顯示或隱藏選項(xiàng)區(qū).原生js還有很多種實(shí)現(xiàn)方法(藍(lán)色理想中搜索),為了與jQ版思路保持一致,本文實(shí)例用的是循環(huán)判斷.有需要的小伙伴可以參考下
2015-04-04
一款Jquery 分頁插件的改造方法（服務(wù)器端分頁）
分頁幾乎是每個(gè)外部程序必不可少的東西，在webform時(shí)代很多人都用過AspNetPager這個(gè)用戶控件吧，用的人之多其實(shí)就在于它的優(yōu)點(diǎn)
2011-07-07
JQuery select控件的相關(guān)操作實(shí)現(xiàn)代碼
JQuery獲取和設(shè)置Select選項(xiàng)方法匯總?cè)缦?，需要的朋友可以參考?/div> 2012-09-09
jQuery獲取當(dāng)前對象標(biāo)簽名稱的方法
獲取當(dāng)前對象標(biāo)簽名稱的方法有很多，本教程為大家介紹下使用jquery獲取的具體實(shí)現(xiàn)
2014-02-02
jquery實(shí)現(xiàn)倒計(jì)時(shí)小應(yīng)用
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)倒計(jì)時(shí)小應(yīng)用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-09-09
jQuery對html元素的取值與賦值實(shí)例詳解
這篇文章主要介紹了jQuery對html元素的取值與賦值,較為詳細(xì)的分析了jQuery針對常見html元素的獲取與賦值技巧,非常簡單實(shí)用,需要的朋友可以參考下
2015-12-12
jquery動態(tài)切換背景圖片的簡單實(shí)現(xiàn)方法
這篇文章主要介紹了jquery動態(tài)切換背景圖片的簡單實(shí)現(xiàn)方法,涉及jQuery自定義函數(shù)結(jié)合時(shí)間函數(shù)動態(tài)變換背景圖片的相關(guān)技巧,需要的朋友可以參考下
2016-05-05
jQuery EasyUI API 中文文檔 - ValidateBox驗(yàn)證框
jQuery EasyUI API 中文文檔 - ValidateBox驗(yàn)證框，使用jQuery EasyUI的朋友可以參考下。
2011-10-10
批量修改標(biāo)簽css樣式以input標(biāo)簽為例
本節(jié)主要介紹了jquery如何批量修改標(biāo)簽css樣式以input標(biāo)簽為例,需要的朋友可以參考下
2014-07-07
jQuery插件FusionWidgets實(shí)現(xiàn)的Bulb圖效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件FusionWidgets實(shí)現(xiàn)的Bulb圖效果,結(jié)合完整實(shí)例形式分析了jQuery使用FusionWidgets插件結(jié)合swf文件載入xml數(shù)據(jù)實(shí)現(xiàn)Bulb圖效果的相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下
2017-03-03