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 相关文章推荐
prototype class详解
Sep 07 Javascript
javascript实现的网页局布刷新效果
Dec 01 Javascript
jquery插件 cluetip 关键词注释
Jan 12 Javascript
关于div自适应高度/左右高度自适应一致的js代码
Mar 22 Javascript
jquery实现的一个简单进度条效果实例
May 12 Javascript
微信公众平台开发教程(四) 实例入门:机器人回复(附源码)
Dec 02 Javascript
全面解析Node.js 8 重要功能和修复
Jun 02 Javascript
基于Vue生产环境部署详解
Sep 15 Javascript
JavaScript实现百度搜索框效果
Mar 26 Javascript
浅入深出Vue之组件使用
Jul 11 Javascript
Vue vee-validate插件的简单使用
Jun 22 Vue.js
输入框跟随文字内容适配宽实现示例
Aug 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 中的批处理的实现
2007/06/14 PHP
PHP捕获Fatal error错误的方法
2014/06/11 PHP
PHP使用Pear发送邮件(Windows环境)
2016/01/05 PHP
浅谈tudou土豆网首页图片延迟加载的效果
2010/06/23 Javascript
人人网javascript面试题 可以提前实现下
2012/01/05 Javascript
C++中的string类的用法小结
2015/08/07 Javascript
JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)
2016/12/14 Javascript
jQuery实现弹幕效果
2017/02/17 Javascript
全面解析vue router 基本使用(动态路由,嵌套路由)
2018/09/02 Javascript
vue中axios实现数据交互与跨域问题
2019/05/12 Javascript
微信小程序按钮点击动画效果的实现
2019/09/04 Javascript
vue iview的菜单组件Mune 点击不高亮的解决方案
2019/11/01 Javascript
解决vue项目本地启动时无法携带cookie的问题
2021/02/06 Vue.js
[12:51]71泪洒现场!是DOTA2让经典重现
2014/03/24 DOTA
Python base64编码解码实例
2015/06/21 Python
Python程序中的观察者模式结构编写示例
2016/05/27 Python
python 垃圾收集机制的实例详解
2017/08/20 Python
Python散点图与折线图绘制过程解析
2019/11/30 Python
Anaconda配置pytorch-gpu虚拟环境的图文教程
2020/04/16 Python
Python Sqlalchemy如何实现select for update
2020/10/12 Python
Python爬虫定时计划任务的几种常见方法(推荐)
2021/01/15 Python
全网最详细的PyCharm+Anaconda的安装过程图解
2021/01/25 Python
python 对xml解析的示例
2021/02/27 Python
iHerb香港:维生素、补充剂和天然保健品
2017/08/01 全球购物
德国圣伯纳德草药屋:Kräuterhaus Sanct Bernhard(有中文站)
2018/08/05 全球购物
飞利浦美国官网:Philips美国
2020/02/28 全球购物
俄罗斯达美乐比萨外送服务:Domino’s Pizza
2020/12/18 全球购物
毕业生自荐书
2014/02/03 职场文书
物联网工程专业推荐信
2014/09/08 职场文书
2014应届本科生自我评价
2014/09/13 职场文书
民主生活会整改措施(党员)
2014/09/18 职场文书
街道社区活动报告
2015/02/05 职场文书
城南旧事观后感
2015/06/11 职场文书
处罚决定书范文
2015/06/24 职场文书
Windows下redis下载、redis安装及使用教程
2021/06/02 Redis
《我的美好婚事》动画化决定纪念插画与先导PV公开
2022/04/06 日漫