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 相关文章推荐
尝试在让script的type属性等于text/html
Jan 15 Javascript
jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码
Jun 04 Javascript
js弹窗返回值详解(window.open方式)
Jan 11 Javascript
javascript异步处理工作机制详解
Apr 13 Javascript
javascript实现3D切换焦点图
Oct 16 Javascript
bootstrap datetimepicker 日期插件在火狐下出现一条报错信息的原因分析及解决办法
Mar 08 Javascript
Angular 通过注入 $location 获取与修改当前页面URL的实例
May 31 Javascript
underscore之function_动力节点Java学院整理
Jul 11 Javascript
three.js实现3D模型展示的示例代码
Dec 31 Javascript
bootstrap自定义样式之bootstrap实现侧边导航栏功能
Sep 10 Javascript
详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)
Apr 30 Javascript
Vue 权限控制的两种方法(路由验证)
Aug 16 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
避免Smarty与CSS语法冲突的方法
2015/03/02 PHP
php中有关合并某一字段键值相同的数组合并的改进
2015/03/10 PHP
php+ajax实现的点击浏览量加1
2015/04/16 PHP
php如何实现不借助IDE快速定位行数或者方法定义的文件和位置
2017/01/17 PHP
PHP实现mysqli批量执行多条语句的方法示例
2017/07/22 PHP
php中html_entity_decode实现HTML实体转义
2018/06/13 PHP
CI(CodeIgniter)框架中URL特殊字符处理与SQL注入隐患分析
2019/02/28 PHP
Prototype1.6 JS 官方下载地址
2007/11/30 Javascript
window.event快达到全浏览器支持了,以后使用就方便了
2011/11/30 Javascript
用示例说明filter()与find()的用法以及children()与find()的区别分析
2013/04/26 Javascript
让input框实现类似百度的搜索提示(基于jquery事件监听)
2014/01/31 Javascript
javascript手工制作悬浮菜单
2015/02/12 Javascript
javascript显示倒计时控制按钮的简单实现
2016/06/07 Javascript
JS实现动画兼容性的transition和transform实例分析
2016/12/13 Javascript
详解Vue快速零配置的打包工具——parcel
2018/01/16 Javascript
分享5个好用的javascript文件上传插件
2018/09/16 Javascript
新手入门带你学习JavaScript引擎运行原理
2019/06/24 Javascript
ES6 Object属性新的写法实例小结
2019/06/25 Javascript
javascript实现贪吃蛇经典游戏
2020/04/10 Javascript
[06:50]DSPL次级职业联赛十强晋级之路
2014/11/18 DOTA
python中cPickle用法例子分享
2014/01/03 Python
Python多进程并发(multiprocessing)用法实例详解
2015/06/02 Python
详解python之多进程和进程池(Processing库)
2017/06/09 Python
Python读取数据集并消除数据中的空行方法
2018/07/12 Python
Python 中导入csv数据的三种方法
2018/11/01 Python
Python线程指南分享
2019/11/19 Python
TensorFlow命名空间和TensorBoard图节点实例
2020/01/23 Python
非常漂亮的CSS3百叶窗焦点图动画
2016/02/24 HTML / CSS
AmazeUI的JS表单验证框架实战示例分享
2020/08/21 HTML / CSS
房地产项目建议书
2014/03/12 职场文书
小学教师培训方案
2014/06/09 职场文书
离婚协议书范文2014(夫妻感情破裂)
2014/12/14 职场文书
仙境之桥观后感
2015/06/16 职场文书
golang switch语句的灵活写法介绍
2021/05/06 Golang
postgres之jsonb属性的使用操作
2021/06/23 PostgreSQL
JavaScript获取URL参数的方法分享
2022/04/07 Javascript