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 相关文章推荐
JS 参数传递的实际应用代码分析
Sep 13 Javascript
指定位置如果有图片显示图片,无图片显示广告的JS
Jun 05 Javascript
JSON.parse 解析字符串出错的解决方法
Jul 08 Javascript
jQuery Ajax使用 全解析
Dec 15 Javascript
将HTMLCollection/NodeList/伪数组转换成数组的实现方法
Jun 20 Javascript
javascript生成随机大小写字母的方法
Feb 20 Javascript
Javascript基础教程之数据类型转换
Jan 18 Javascript
详解React-Native解决键盘遮挡问题(Keyboard遮挡问题)
Jul 13 Javascript
老生常谈javascript的面向对象思想
Aug 22 Javascript
vue项目中使用axios上传图片等文件操作
Nov 02 Javascript
在vue项目中引入vue-beauty操作方法
Feb 11 Javascript
jQuery HTML设置内容和属性操作实例分析
May 20 jQuery
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
异世界新番又来了,同样是从零开始,男主的年龄降到5岁
2020/04/09 日漫
smarty巧妙处理iframe中内容页的代码
2012/03/07 PHP
Yii2.0表关联查询实例分析
2016/07/18 PHP
ThinkPHP框架中使用Memcached缓存数据的方法
2018/03/31 PHP
如何让您的中波更粗更长 - 中波框形天线制作
2021/03/10 无线电
JavaScript 新手24条实用建议[TUTS+]
2009/06/21 Javascript
基于jquery的滚动新闻列表
2010/06/19 Javascript
js调用AJAX时Get和post的乱码解决方法
2013/06/04 Javascript
JavaScript实现网页上的浮动广告的简单方法
2013/06/14 Javascript
jquery ajax post提交数据乱码
2013/11/05 Javascript
js获取IFRAME当前的URL的方法
2013/11/13 Javascript
js实现多选项切换导航菜单的方法
2015/02/06 Javascript
js代码验证手机号码和电话号码是否合法
2015/07/30 Javascript
JS实现无限级网页折叠菜单(类似树形菜单)效果代码
2015/09/17 Javascript
JS实现太极旋转思路分析
2016/12/09 Javascript
详解JavaScript调用栈、尾递归和手动优化
2017/06/03 Javascript
vue组件jsx语法的具体使用
2018/05/21 Javascript
小程序跳转H5页面的方法步骤
2020/03/06 Javascript
JS co 函数库的含义和用法实例总结
2020/04/08 Javascript
JavaScript用document.write()输出换行的示例代码
2020/11/26 Javascript
原生JavaScript实现幻灯片效果
2021/02/19 Javascript
Python安装第三方库及常见问题处理方法汇总
2016/09/13 Python
深入理解python中的select模块
2017/04/23 Python
python使用正则表达式替换匹配成功的组并输出替换的次数
2017/11/22 Python
python中@property和property函数常见使用方法示例
2019/10/21 Python
Python尾递归优化实现代码及原理详解
2020/10/09 Python
利用纯html5绘制出来的一款非常漂亮的时钟
2015/01/04 HTML / CSS
一个精品风格的世界:Atterley
2019/05/01 全球购物
初中生学习的自我评价
2013/11/14 职场文书
冰淇淋店的创业计划书
2014/02/07 职场文书
高中毕业自我评价
2014/02/08 职场文书
省级优秀毕业生主要事迹
2014/05/29 职场文书
解除聘用合同证明书范本
2014/09/11 职场文书
入党宣誓大会后的感想
2015/08/10 职场文书
2016春节放假通知范文
2015/08/18 职场文书
CSS巧用渐变实现高级感背景光动画
2021/12/06 HTML / CSS