jQuery中click事件的定义和用法


Posted in Javascript onDecember 20, 2014

本文实例讲述了jQuery中click事件的定义和用法。分享给大家供大家参考。具体分析如下:

当鼠标指针在匹配元素上方,然后按下并松开鼠标左键或者调用click()方法都会触发click事件。

click()方法也可以绑定事件处理方法。

语法结构一:
触发click事件。

$(selector).click()

语法结构二:
为click事件绑定事件处理方法。

$(selector).click(data,function)

参数列表:

参数 描述
data 可选。定义传入供function处理的数据。
function 定义click事件触发时运行的函数。

实例代码:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.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("这是后来添加的内容");

  })

  $("p").dblclick(function(){

    $("button").click();

  })

})

</script>

</head>

<body>

<div></div>

<p>双击我触发click事件</p>

<button>点击触发事件</button>

</body>

</html>

以上代码当双击p元素或者点击按钮的时候都会在div设置新的文本。

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
解决 FireFox 下[使用event很麻烦] 的问题.
Aug 22 Javascript
让ie6也支持websocket采用flash封装实现
Feb 18 Javascript
微信中一些常用的js方法汇总
Mar 12 Javascript
JS实现自动定时切换的简洁网页选项卡效果
Oct 13 Javascript
javascript如何定义对象数组
Jun 07 Javascript
100行代码理解和分析vue2.0响应式架构
Mar 09 Javascript
详解JavaScript调用栈、尾递归和手动优化
Jun 03 Javascript
分享Bootstrap简单表格、表单、登录页面
Aug 04 Javascript
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
微信小程序实现一张或多张图片上传(云开发)
Sep 25 Javascript
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 jQuery
写给新手同学的vuex快速上手指北小结
Apr 14 Javascript
javascript中String对象的slice()方法分析
Dec 20 #Javascript
javascript中Number对象的toString()方法分析
Dec 20 #Javascript
javascript中parseInt()函数的定义和用法分析
Dec 20 #Javascript
JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
Dec 20 #Javascript
node.js解决获取图片真实文件类型的问题
Dec 20 #Javascript
javascript使用for循环批量注册的事件不能正确获取索引值的解决方法
Dec 20 #Javascript
Node.js实现批量去除BOM文件头
Dec 20 #Javascript
You might like
浅谈PHP 闭包特性在实际应用中的问题
2009/10/30 PHP
phpmyadmin配置文件现在需要绝密的短密码(blowfish_secret)的2种解决方法
2014/05/07 PHP
Linux下安装PHP MSSQL扩展教程
2014/10/24 PHP
javascript 兼容FF的onmouseenter和onmouseleave的代码
2008/07/19 Javascript
基于jquery实现后台左侧菜单点击上下滑动显示
2013/04/11 Javascript
使用jQuery.wechat构建微信WEB应用
2014/10/09 Javascript
15个jquery常用方法、小技巧分享
2015/01/13 Javascript
JavaScript中setFullYear()方法的使用详解
2015/06/11 Javascript
JavaScript和JQuery的鼠标mouse事件冒泡处理
2015/06/19 Javascript
jquery插件pagination实现无刷新ajax分页
2015/09/30 Javascript
js获取图片宽高的方法
2015/11/25 Javascript
jQuery页面加载初始化的3种方法(推荐)
2016/06/02 Javascript
Boostrap基础教程之JavaScript插件篇
2016/09/08 Javascript
js设置随机切换背景图片的简单实例
2017/11/12 Javascript
JS使用H5实现图片预览功能
2019/09/30 Javascript
JavaScript监听键盘事件代码实现
2020/06/03 Javascript
[48:00]EG vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.26
2018/08/29 DOTA
[42:24]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第三场 11.27
2020/12/01 DOTA
解析Mac OS下部署Pyhton的Django框架项目的过程
2016/05/03 Python
python和mysql交互操作实例详解【基于pymysql库】
2019/06/04 Python
python wxpython 实现界面跳转功能
2019/12/17 Python
python实现录音功能(可随时停止录音)
2020/10/26 Python
Python 虚拟环境工作原理解析
2020/12/24 Python
怎样实现H5+CSS3手指滑动切换图片的示例代码
2019/05/05 HTML / CSS
澳洲的服装老品牌:SABA
2018/02/06 全球购物
墨西哥皇宫度假村预订:Palace Resorts
2018/06/16 全球购物
用C语言实现文件读写操作
2013/10/27 面试题
酒店司机岗位职责
2013/12/14 职场文书
机电一体化职业规划书
2014/01/07 职场文书
5.12护士节演讲稿
2014/04/30 职场文书
2014最新版群众路线四风整改措施
2014/09/24 职场文书
三八红旗手事迹材料
2014/12/26 职场文书
大学生个人总结范文
2015/02/15 职场文书
小学毕业感言100字
2015/07/30 职场文书
详解分布式系统中如何用python实现Paxos
2021/05/18 Python
Python 阶乘详解
2021/10/05 Python