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脚本性能的优化方法
Feb 02 Javascript
关于JS管理作用域的问题
Apr 10 Javascript
深入document.write()与HTML4.01的非成对标签的详解
May 08 Javascript
node.js下LDAP查询实例分享
Sep 30 Javascript
AngularJS教程之环境设置
Aug 16 Javascript
js实现本地图片文件拖拽效果
Jul 18 Javascript
Vue ElementUI之Form表单验证遇到的问题
Aug 21 Javascript
谈谈JS中的!!
Dec 07 Javascript
基于node打包可执行文件工具_Pkg使用心得分享
Jan 24 Javascript
ES6常用小技巧总结【去重、交换、合并、反转、迭代、计算等】
Dec 21 Javascript
解决vue一个页面中复用同一个echarts组件的问题
Jul 19 Javascript
用JS写一个发布订阅模式
Nov 07 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默认安装产生系统漏洞
2006/10/09 PHP
PHP 实现页面静态化的几种方法
2017/07/23 PHP
PHP常量define和const的区别详解
2019/05/18 PHP
Javascript学习笔记6 prototype的提出
2010/01/11 Javascript
Extjs中使用extend(js继承) 的代码
2012/03/15 Javascript
node.js中的fs.fchmod方法使用说明
2014/12/16 Javascript
jQuery在header中设置请求信息的方法
2017/03/06 Javascript
Nodejs回调加超时限制两种实现方法
2017/06/09 NodeJs
jQuery选择器特殊字符与属性空格问题
2017/08/14 jQuery
jquery实现侧边栏左右伸缩效果的示例
2017/12/19 jQuery
详解vue-cli 本地开发mock数据使用方法
2018/05/29 Javascript
通过封装scroll.js 获取滚动条的值
2018/07/13 Javascript
vue实现可视化可拖放的自定义表单的示例代码
2019/03/20 Javascript
vue中axios请求的封装实例代码
2019/03/23 Javascript
koa2 从入门到精通(小结)
2019/07/23 Javascript
JavaScript装箱及拆箱boxing及unBoxing用法解析
2020/06/15 Javascript
vue使用screenfull插件实现全屏功能
2020/09/17 Javascript
Python DataFrame 设置输出不显示index(索引)值的方法
2018/06/07 Python
python numpy 一维数组转变为多维数组的实例
2018/07/02 Python
python pandas获取csv指定行 列的操作方法
2019/07/12 Python
Python如何读取文件中图片格式
2020/01/13 Python
Python使用plt.boxplot() 参数绘制箱线图
2020/06/04 Python
python 多线程死锁问题的解决方案
2020/08/25 Python
Python Unittest原理及基本使用方法
2020/11/06 Python
用CSS3的box-reflect来制作倒影效果
2016/11/15 HTML / CSS
css3翻牌翻数字的示例代码
2020/02/07 HTML / CSS
HTML5中判断横屏竖屏的方法(移动端)
2016/08/04 HTML / CSS
草莓网英国官网:Strawberrynet UK
2017/02/12 全球购物
酒店服务实习自我鉴定
2013/09/22 职场文书
红领巾广播站广播稿(3篇)
2014/09/20 职场文书
2016新年问候语大全
2015/11/11 职场文书
《神奇的鸟岛》教学反思
2016/02/22 职场文书
创业计划书之物流运送
2019/09/17 职场文书
导游词之介休绵山
2019/12/31 职场文书
Canvas三种动态画圆实现方法说明(小结)
2021/04/16 Javascript
设置IIS Express并发数
2022/07/07 Servers