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 相关文章推荐
javascript下string.format函数补充
Aug 24 Javascript
jQuery实现checkbox全选的方法
Jun 10 Javascript
JS组件Bootstrap实现图片轮播效果
May 16 Javascript
BootStrapTable 单选及取值的实现方法
Jan 10 Javascript
解析Vue 2.5的Diff算法
Nov 28 Javascript
解决webpack无法通过IP地址访问localhost的问题
Feb 22 Javascript
vue.js中npm安装教程图解
Apr 10 Javascript
js中对象与对象创建方法的各种方法
Feb 27 Javascript
jQuery实现动态添加和删除input框实例代码
Mar 26 jQuery
跟混乱的页面弹窗说再见
Apr 11 Javascript
vue项目强制清除页面缓存的例子
Nov 06 Javascript
基于vue-cli3+typescript的tsx开发模板搭建过程分享
Feb 28 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导入模块文件分享
2015/03/17 PHP
PHP实现带重试功能的curl连接示例
2016/07/28 PHP
PHP CURL实现模拟登陆并上传文件操作示例
2020/01/02 PHP
Jquery实现图片放大镜效果的思路及代码(自写)
2013/10/18 Javascript
jQuery(js)获取文字宽度(显示长度)示例代码
2013/12/31 Javascript
JavaScript数组方法总结分析
2016/05/06 Javascript
第四篇Bootstrap网格系统偏移列和嵌套列
2016/06/21 Javascript
原生js实现电商侧边导航效果
2017/01/19 Javascript
js实现鼠标左右移动,图片也跟着移动效果
2017/01/25 Javascript
JS实现键值对遍历json数组功能示例
2018/05/30 Javascript
jQuery实现为动态添加的元素绑定事件实例分析
2018/09/07 jQuery
微信小程序云开发 搭建一个管理小程序
2019/05/17 Javascript
js仿京东放大镜效果
2020/08/09 Javascript
基于Python实现的扫雷游戏实例代码
2014/08/01 Python
Python内置数据类型详解
2014/08/18 Python
Python xlrd读取excel日期类型的2种方法
2015/04/28 Python
Python的socket模块源码中的一些实现要点分析
2016/06/06 Python
Python网络爬虫出现乱码问题的解决方法
2017/01/05 Python
Python搭建HTTP服务器和FTP服务器
2017/03/09 Python
matplotlib绘制符合论文要求的图片实例(必看篇)
2017/06/02 Python
详解Python3 中hasattr()、getattr()、setattr()、delattr()函数及示例代码数
2018/04/18 Python
python实现名片管理系统
2018/11/29 Python
Python实现投影法分割图像示例(一)
2020/01/17 Python
Python3中的f-Strings增强版字符串格式化方法
2020/03/04 Python
python 动态渲染 mysql 配置文件的示例
2020/11/20 Python
荷兰皇家航空公司中国官网:KLM中国
2017/12/13 全球购物
金融专业个人的自我评价
2013/10/18 职场文书
食品厂厂长岗位职责
2014/01/30 职场文书
英语故事演讲稿
2014/04/29 职场文书
实习推荐信
2014/05/10 职场文书
我们的节日中秋节活动总结
2015/03/23 职场文书
六一亲子活动感想
2015/08/07 职场文书
公务员学习中国梦心得体会
2016/01/05 职场文书
mysql脏页是什么
2021/07/26 MySQL
win11无法添加打印机怎么办? 提示windows无法打开添加打印机的解决办法
2022/04/05 数码科技
如何使用SQL Server语句创建表
2022/04/12 SQL Server