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 相关文章推荐
Js 代码中,ajax请求地址后加随机数防止浏览器缓存的原因
May 07 Javascript
jquery解析JSON数据示例代码
Mar 17 Javascript
JavaScript截取字符串的Slice、Substring、Substr函数详解和比较
Mar 20 Javascript
浅谈jQuery中height与width
Jul 06 Javascript
深入理解JavaScript中的块级作用域、私有变量与模块模式
Oct 31 Javascript
JS实现简易换图时钟功能分析
Jan 04 Javascript
学习Vue组件实例
Apr 28 Javascript
React手稿之 React-Saga的详解
Nov 12 Javascript
JavaScript中判断为整数的多种方式及保留两位小数的方法
Sep 09 Javascript
javascript设计模式 ? 备忘录模式原理与用法实例分析
Apr 21 Javascript
Electron 打包问题:electron-builder 下载各种依赖出错(推荐)
Jul 09 Javascript
vue实现移动端div拖动效果
Mar 03 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
生成sessionid和随机密码的例子
2006/10/09 PHP
php文件操作实例代码
2012/05/10 PHP
PHP基于imagick扩展实现合成图片的两种方法【附imagick扩展下载】
2017/11/14 PHP
jquery dialog键盘事件代码
2010/08/01 Javascript
详解强大的jQuery选择器之基本选择器、层次选择器
2012/02/07 Javascript
jquery操作checkbox实现全选和取消全选
2014/05/02 Javascript
纯js代码实现简单计算器
2015/12/02 Javascript
Bootstrap select下拉联动(jQuery cxselect)
2017/01/04 Javascript
关于meta viewport中target-densitydpi属性详解(推荐)
2017/08/18 Javascript
Bootstrap treeview实现动态加载数据并添加快捷搜索功能
2018/01/07 Javascript
js中el表达式的使用和非空判断方法
2018/03/28 Javascript
Vue基本使用之对象提供的属性功能
2019/04/30 Javascript
js实现上传按钮并显示缩略图小轮子
2020/05/04 Javascript
vue实现日历表格(element-ui)
2020/09/24 Javascript
python实现系统状态监测和故障转移实例方法
2013/11/18 Python
处理Python中的URLError异常的方法
2015/04/30 Python
Tensorflow环境搭建的方法步骤
2018/02/07 Python
浅谈pycharm出现卡顿的解决方法
2018/12/03 Python
python导入pandas具体步骤方法
2019/06/23 Python
基于Django框架的权限组件rbac实例讲解
2019/08/31 Python
python异常处理和日志处理方式
2019/12/24 Python
Python unittest单元测试框架及断言方法
2020/04/15 Python
详解Pymongo常用查询方法总结
2021/01/29 Python
CSS3教程:边框属性border的极致应用
2009/04/02 HTML / CSS
html5写一个BUI折叠菜单插件的实现方法
2019/09/11 HTML / CSS
Alba Moda瑞士网上商店:独家意大利时尚女装销售
2016/11/28 全球购物
HOTEL INFO英国:搜索全球酒店
2019/08/08 全球购物
荷兰网上药店:Drogisterij.net
2019/09/03 全球购物
为您搜罗全球潮流時尚品牌:HBX
2019/12/04 全球购物
Simons官方网站:加拿大时尚零售商
2020/02/20 全球购物
物业经理求职自我评价
2013/09/22 职场文书
2014年圣诞节促销方案
2014/03/14 职场文书
学校安全生产承诺书
2014/05/23 职场文书
医院节能减排方案
2014/06/13 职场文书
应届生求职信范文
2014/06/30 职场文书
win10清理dns缓存
2022/04/19 数码科技