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 浏览器判断实现函数
Aug 20 Javascript
IE6下JS动态设置图片src地址问题
Jan 08 Javascript
5秒后跳转到另一个页面的js代码
Oct 12 Javascript
使用JavaScript脚本无法直接改变Asp.net中Checkbox控件的Enable属性的解决方法
Sep 16 Javascript
js小数运算出现多位小数如何解决
Oct 08 Javascript
angular-cli修改端口号【angular2】
Apr 19 Javascript
AngularJS实现的select二级联动下拉菜单功能示例
Oct 25 Javascript
理解Koa2中的async&amp;await的用法
Feb 05 Javascript
详解解决使用axios发送json后台接收不到的问题
Jun 27 Javascript
vue-cli项目无法用本机IP访问的解决方法
Sep 20 Javascript
mocha的时序规则讲解
Feb 16 Javascript
详解vue-cli项目开发/生产环境代理实现跨域请求
Jul 23 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查询搜索引擎排名位置的代码
2010/01/05 PHP
在MongoDB中模拟Auto Increment的php代码
2011/03/06 PHP
Linux下CoreSeek及PHP扩展模块的安装
2012/09/23 PHP
基于Zend的Captcha机制的应用
2013/05/02 PHP
php fsockopen伪造post与get方法的详解
2013/06/14 PHP
THINKPHP内容分页代码分享
2015/01/14 PHP
php实现兼容2038年后Unix时间戳转换函数
2015/03/18 PHP
php、java、android、ios通用的3des方法(推荐)
2016/09/09 PHP
jQuery 1.3 和 Validation 验证插件1.5.1
2009/07/09 Javascript
跨浏览器通用、可重用的选项卡tab切换js代码
2011/09/20 Javascript
javascript重复绑定事件造成的后果说明
2013/03/02 Javascript
jquery中.add()的使用分析
2013/04/26 Javascript
使用js实现的简单拖拽效果
2015/03/18 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之主动触发事件和模拟冒泡处理
2015/11/24 Javascript
jQuery插件imgPreviewQs实现上传图片预览
2016/01/15 Javascript
微信小程序 闭包写法详细介绍
2016/12/14 Javascript
socket.io与pm2(cluster)集群搭配的解决方案
2017/06/02 Javascript
webpack学习教程之publicPath路径问题详解
2017/06/17 Javascript
关于使用js算总价的问题
2017/06/23 Javascript
bootstrap table服务端实现分页效果
2017/08/10 Javascript
微信小程序实践之动态控制组件的显示/隐藏功能
2018/07/18 Javascript
js实现列表按字母排序
2020/08/11 Javascript
使用scrapy实现爬网站例子和实现网络爬虫(蜘蛛)的步骤
2014/01/23 Python
小议Python中自定义函数的可变参数的使用及注意点
2016/06/21 Python
Python正则表达式常用函数总结
2017/06/24 Python
Python实现替换文件中指定内容的方法
2018/03/19 Python
python实现C4.5决策树算法
2018/08/29 Python
python 类之间的参数传递方式
2019/12/20 Python
Python3运算符常见用法分析
2020/02/14 Python
彪马日本官网:PUMA日本
2019/01/31 全球购物
什么是.net
2015/08/03 面试题
校领导推荐信
2013/11/01 职场文书
工会主席岗位责任制
2014/02/11 职场文书
纠纷协议书
2014/04/16 职场文书
红色故事演讲稿
2014/05/22 职场文书
MyBatis配置文件解析与MyBatis实例演示
2022/04/07 Java/Android