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 相关文章推荐
百度UEditor编辑器如何关闭抓取远程图片功能
Mar 03 Javascript
jQuery实现可编辑的表格实例讲解(2)
Sep 17 Javascript
Javascript学习之谈谈JS的全局变量跟局部变量(推荐)
Aug 28 Javascript
HTML中setCapture、releaseCapture 使用方法浅析
Sep 25 Javascript
AngularJS中directive指令使用之事件绑定与指令交互用法示例
Nov 22 Javascript
Three.js的使用及绘制基础3D图形详解
Apr 27 Javascript
使用JavaScript实现链表的数据结构的代码
Aug 02 Javascript
webpack多入口多出口的实现方法
Aug 17 Javascript
Vue Cli 3项目使用融云IM实现聊天功能的方法
Apr 19 Javascript
jQuery实现动态生成年月日级联下拉列表示例
May 11 jQuery
node 标准输入流和输出流代码实例
Sep 19 Javascript
vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果
May 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
4月1日重磅发布!《星际争霸II》6.0.0版本更新
2020/04/09 星际争霸
php+mysqli事务控制实现银行转账实例
2015/01/29 PHP
PHP滚动日志的代码实现
2015/06/10 PHP
JS 巧妙获取剪贴板数据 Excel数据的粘贴
2009/07/09 Javascript
用JavaScript玩转游戏物理(一)运动学模拟与粒子系统
2010/06/19 Javascript
jQuery Jcrop插件实现图片选取功能
2011/11/23 Javascript
基于jQuery的烟花效果(运动相关)点击屏幕出烟花
2012/06/14 Javascript
点弹代码 点击页面任何位置都可以弹出页面效果代码
2012/09/17 Javascript
jquery offset函数应用实例
2012/11/14 Javascript
jQuery :first选择器使用介绍
2013/08/09 Javascript
js实现瀑布流的一种简单方法实例分享
2013/11/04 Javascript
JavaScript简单实现网页回到顶部功能
2013/11/12 Javascript
对new functionName()定义一个函数的理解
2014/05/22 Javascript
JavaScript分析、压缩工具JavaScript Analyser
2014/12/31 Javascript
jQuery插件制作之参数用法实例分析
2015/06/01 Javascript
浅谈javascript 函数表达式和函数声明的区别
2016/01/05 Javascript
JavaScript ES5标准中新增的Array方法
2016/06/28 Javascript
bootstrap table小案例
2016/10/21 Javascript
简单实现jQuery级联菜单
2017/01/09 Javascript
微信小程序 picker 组件详解及简单实例
2017/01/10 Javascript
微信小程序如何获取用户手机号
2018/01/26 Javascript
详解vue 兼容IE报错解决方案
2018/12/29 Javascript
nodejs对mongodb数据库的增加修删该查实例代码
2020/01/05 NodeJs
Python的Tornado框架的异步任务与AsyncHTTPClient
2016/06/27 Python
python处理按钮消息的实例详解
2017/07/11 Python
python调用摄像头显示图像的实例
2018/08/03 Python
python3实现带多张图片、附件的邮件发送
2019/08/10 Python
python列表推导式操作解析
2019/11/26 Python
新年福利来一波之Python轻松集齐五福(demo)
2020/01/20 Python
TensorFlow2.X使用图片制作简单的数据集训练模型
2020/04/08 Python
Python使用tkinter实现摇骰子小游戏功能的代码
2020/07/02 Python
Selenium环境变量配置(火狐浏览器)及验证实现
2020/12/07 Python
沙特阿拉伯网上购物:Sayidaty Mall
2018/05/06 全球购物
美国领先的家庭智能音响系统品牌:Sonos
2018/07/20 全球购物
面试后感谢信
2014/02/01 职场文书
详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
2021/11/27 Vue.js