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 相关文章推荐
jquery下操作HTML控件的实现代码
Jan 12 Javascript
JS、CSS加载中的小问题探讨
Nov 26 Javascript
一张Web前端的思维导图分享
Jul 03 Javascript
jQuery实现简单的点赞效果
May 29 Javascript
AngularJS ng-template寄宿方式用法分析
Nov 07 Javascript
JS实现拖拽的方法分析
Dec 20 Javascript
jQuery命名空间与闭包用法示例
Jan 12 Javascript
JavaScript中利用Array filter() 方法压缩稀疏数组
Feb 24 Javascript
关于HTML5的data-*自定义属性的总结
May 05 Javascript
vue-lazyload使用总结(推荐)
Nov 01 Javascript
vue-cli基础配置及webpack配置修改的完整步骤
Oct 20 Javascript
微信小程序 根据不同用户切换不同TabBar
Apr 21 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微信公众号开发之答题连闯三关
2018/10/20 PHP
js停止输出代码
2008/07/20 Javascript
百度 popup.js 完美修正版非常的不错 脚本之家推荐
2009/04/17 Javascript
Jquery Ajax学习实例4 向WebService发出请求,返回实体对象的异步调用
2010/03/16 Javascript
window.location.hash 使用说明
2010/11/08 Javascript
nodejs批量修改文件编码格式
2015/01/22 NodeJs
jquery Easyui快速开发总结
2015/08/20 Javascript
JavaScript获取当前运行脚本文件所在目录的方法
2016/02/03 Javascript
JavaScript实现点击文本自动定位到下拉框选中操作
2016/06/15 Javascript
简单实现js间歇或无缝滚动效果
2016/06/29 Javascript
表单中单选框添加选项和移除选项
2016/07/04 Javascript
BootStrap注意事项小结(五)表单
2017/03/10 Javascript
JS+html5制作简单音乐播放器
2020/09/13 Javascript
对node.js中render和send的用法详解
2018/05/14 Javascript
layer弹出的iframe层在执行完毕后关闭当前弹出层的方法
2018/08/17 Javascript
js获取本日、本周、本月的时间代码
2020/02/01 Javascript
[01:32]DOTA2上海特锦赛现场采访:最想COS的英雄
2016/03/25 DOTA
[01:00:30]TFT vs VGJ.T Supermajor 败者组 BO3 第一场 6.5
2018/06/06 DOTA
Python 变量类型及命名规则介绍
2013/06/08 Python
Python3实现将文件树中所有文件和子目录归档到tar压缩文件的方法
2015/05/22 Python
django rest framework 实现用户登录认证详解
2019/07/29 Python
将python字符串转化成长表达式的函数eval实例
2020/05/11 Python
PyTorch中torch.tensor与torch.Tensor的区别详解
2020/05/18 Python
keras 读取多标签图像数据方式
2020/06/12 Python
HTML5中图片之间的缝隙完美解决方法
2017/07/07 HTML / CSS
副总经理工作职责
2013/11/28 职场文书
高分子材料与工程专业推荐信
2013/12/01 职场文书
《望庐山瀑布》教学反思
2014/04/22 职场文书
给校长的建议书600字
2014/05/15 职场文书
清明节演讲稿
2014/05/27 职场文书
经典禁毒标语
2014/06/16 职场文书
法语专业求职信
2014/07/20 职场文书
2014年共青团工作总结
2014/12/10 职场文书
物业公司管理制度
2015/08/05 职场文书
2016年中秋节慰问信
2015/12/01 职场文书
go语言中http超时引发的事故解决
2021/06/02 Golang