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和IE系列的相关区别整理 以备后用
Dec 28 Javascript
jQuery+HTML5实现手机摇一摇换衣特效
Jun 05 Javascript
javascript实现的简单的表单验证
Jul 10 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(三)
Sep 14 Javascript
基于Vue 2.0的模块化前端 UI 组件库小结
Dec 21 Javascript
iconfont的三种使用方式详解
Aug 05 Javascript
ExtJs使用自定义插件动态保存表头配置(隐藏或显示)
Sep 25 Javascript
ES6 Generator函数的应用实例分析
Jun 26 Javascript
JS/jQuery实现超简单的Table表格添加,删除行功能示例
Jul 31 jQuery
生成无限制的微信小程序码的示例代码
Sep 20 Javascript
js实现数字从零慢慢增加到指定数字示例
Nov 07 Javascript
js实现简单的打印表格
Jan 15 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/09/25 PHP
PHP中file_exists()判断中文文件名无效的解决方法
2014/11/12 PHP
PHP实现自动对图片进行滚动显示的方法
2015/03/12 PHP
phplist及phpmailer(组合使用)通过gmail发送邮件的配置方法
2016/03/30 PHP
php使用正则表达式获取字符串中的URL
2016/12/29 PHP
laravel框架中间件 except 和 only 的用法示例
2019/07/12 PHP
阻止事件(取消浏览器对事件的默认行为并阻止其传播)
2013/11/03 Javascript
给html超链接设置事件不使用href来完成跳
2014/04/20 Javascript
jQuery中animate用法实例分析
2015/03/09 Javascript
jQuery检查事件是否触发的方法
2015/06/26 Javascript
浅谈Javascript中substr和substring的区别
2015/09/30 Javascript
详解javascript传统方法实现异步校验
2016/01/22 Javascript
js 截取或者替换字符串中的数字实现方法
2016/06/13 Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
2016/11/22 Javascript
Javascript计算二维数组重复值示例代码
2016/12/18 Javascript
关于不同页面之间实现参数传递的几种方式讨论
2017/02/13 Javascript
python模拟表单提交登录图书馆
2018/04/27 Python
Python使用ConfigParser模块操作配置文件的方法
2018/06/29 Python
Numpy中的mask的使用
2018/07/21 Python
使用Python制作一个打字训练小工具
2019/10/01 Python
flask框架自定义过滤器示例【markdown文件读取和展示功能】
2019/11/08 Python
基于TensorFlow常量、序列以及随机值生成实例
2020/01/04 Python
Python实现链表反转的方法分析【迭代法与递归法】
2020/02/22 Python
浅谈sklearn中predict与predict_proba区别
2020/06/28 Python
Python利用socket模块开发简单的端口扫描工具的实现
2021/01/27 Python
python基于pexpect库自动获取日志信息
2021/02/01 Python
python利用后缀表达式实现计算器功能
2021/02/22 Python
如何用canvas实现在线签名的示例代码
2018/07/10 HTML / CSS
小学生家长评语集锦
2014/01/30 职场文书
岗位廉洁从业承诺书
2014/03/28 职场文书
劳动竞赛口号
2014/06/16 职场文书
岗位说明书怎么写
2014/07/30 职场文书
质量月活动总结
2014/08/26 职场文书
卡特教练观后感
2015/06/08 职场文书
趣味运动会通讯稿
2015/07/18 职场文书
数据结构课程设计心得体会
2016/01/15 职场文书