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 add event remove event
Apr 07 Javascript
js控制frameSet示例
Sep 10 Javascript
在javascript中执行任意html代码的方法示例解读
Dec 25 Javascript
基于js与flash实现的网站flv视频播放插件代码
Oct 14 Javascript
微信小程序 wx.request(object) API详解及实例代码
Sep 30 Javascript
jQuery 移动端拖拽(模块化开发,触摸事件,webpack)
Oct 28 Javascript
vue自定义指令实现v-tap插件
Nov 03 Javascript
vue2.x 父组件监听子组件事件并传回信息的方法
Jul 17 Javascript
使用Taro实现小程序商城的购物车功能模块的实例代码
Jun 05 Javascript
javascript使用canvas实现饼状图效果
Sep 08 Javascript
jQuery实现可以计算进制转换的计算器
Oct 19 jQuery
详解vite+ts快速搭建vue3项目以及介绍相关特性
Feb 25 Vue.js
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 的加密函数 md5,crypt,base64_encode 等使用介绍
2012/04/09 PHP
解析zend Framework如何自动加载类
2013/06/28 PHP
php获取远程图片体积大小的实例
2013/11/12 PHP
Codeigniter实现多文件上传并创建多个缩略图
2014/06/12 PHP
PHP5全版本绕过open_basedir读文件脚本漏洞详细介绍
2015/01/20 PHP
PHP实现的统计数据功能详解
2016/12/06 PHP
如何运行/调试你的PHP代码
2020/10/23 PHP
非常不错的一个javascript 类
2006/11/07 Javascript
js 覆盖和重载 函数
2009/09/25 Javascript
读jQuery之八 包装事件对象
2011/06/21 Javascript
浅谈checkbox的一些操作(实战经验)
2013/11/20 Javascript
jqGrid随窗口大小变化自适应大小的示例代码
2013/12/28 Javascript
jsp网页搜索结果中实现选中一行使其高亮
2014/02/17 Javascript
JavaScript中exec函数用法实例分析
2015/06/08 Javascript
JavaScript类型系统之Object详解
2016/01/07 Javascript
Node.js重新刷新session过期时间的方法
2016/02/04 Javascript
Vue.js组件tree实现无限级树形菜单
2016/12/02 Javascript
Angular 封装并发布组件的方法示例
2018/04/19 Javascript
CKeditor4 字体颜色功能配置方法教程
2019/06/26 Javascript
node中使用log4js4.x版本记录日志的方法
2019/08/20 Javascript
解决在layer.open中使用时间控件laydate失败的问题
2019/09/11 Javascript
Javascript 关于基本类型和引用类型的个人理解
2019/11/01 Javascript
微信小程序顶部导航栏可滑动并选中放大
2019/12/05 Javascript
Vue 实现监听窗口关闭事件,并在窗口关闭前发送请求
2020/09/01 Javascript
[05:14]辉夜杯主赛事第二日 RECAP精彩回顾
2015/12/27 DOTA
Python实现将数据库一键导出为Excel表格的实例
2016/12/30 Python
Flask框架模板渲染操作简单示例
2019/07/31 Python
更新pip3与pyttsx3文字语音转换的实现方法
2019/08/08 Python
Python爬虫使用浏览器cookies:browsercookie过程解析
2019/10/22 Python
Python通过类的组合模拟街道红绿灯
2020/09/16 Python
HTML5 新旧语法标记对我们有什么好处
2012/12/13 HTML / CSS
boostrap modal 闪现问题的解决方法
2020/09/01 HTML / CSS
汽车技术服务与营销专业在籍生自荐信
2013/09/28 职场文书
员工自我鉴定
2013/10/09 职场文书
学习雷锋精神演讲稿
2014/05/10 职场文书
先进人物事迹材料
2014/12/29 职场文书