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中常用的55个经典技巧
Aug 12 Javascript
强大的jquery插件jqeuryUI做网页对话框效果!简单
Apr 14 Javascript
js中同步与异步处理的方法和区别总结
Dec 25 Javascript
红米手机抢购的js代码
Mar 10 Javascript
JavaScript实现简单获取当前网页网址的方法
Nov 09 Javascript
学习使用bootstrap3栅格系统
Apr 12 Javascript
简单理解js的冒泡排序
Dec 19 Javascript
浅析为什么a=&quot;abc&quot; 不等于 a=new String(&quot;abc&quot;)
Oct 25 Javascript
webpack打包node.js后端项目的方法
Mar 10 Javascript
mpvue 单文件页面配置详解
Dec 02 Javascript
Webpack4+Babel7+ES6兼容IE8的实现
Apr 10 Javascript
vue新建项目并配置标准路由过程解析
Dec 09 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
DSP接收机前端设想
2021/03/02 无线电
ThinkPHP中create()方法自动验证表单信息
2017/04/28 PHP
用roll.js实现的图片自动滚动+鼠标触动的特效
2007/03/18 Javascript
让iframe自适应高度(支持XHTML,支持FF)
2007/07/24 Javascript
Javascript 获取LI里的内容
2008/12/17 Javascript
Javascript的构造函数和constructor属性
2010/01/09 Javascript
与jquery serializeArray()一起使用的函数,主要来方便提交表单
2011/01/31 Javascript
javascript中关于break,continue的特殊用法与介绍
2012/05/24 Javascript
jquery选择器-根据多个属性选择示例代码
2013/10/21 Javascript
尝试动手制作javascript放大镜效果
2015/12/25 Javascript
VUEJS实战之利用laypage插件实现分页(3)
2016/06/13 Javascript
flexslider.js实现移动端轮播
2017/02/05 Javascript
使用jQuery和ajax代替iframe的方法(详解)
2017/04/12 jQuery
vue中的event bus非父子组件通信解析
2017/10/27 Javascript
详解使用vuex进行菜单管理
2017/12/21 Javascript
redux.js详解及基本使用
2019/05/24 Javascript
JavaScript随机数的组合问题案例分析
2020/05/16 Javascript
理解Proxy及使用Proxy实现vue数据双向绑定操作
2020/07/18 Javascript
[01:43]倾听DOTA2英雄之声 魅惑魔女国服配音鉴赏
2013/06/06 DOTA
Python的Django框架使用入门指引
2015/04/15 Python
Python实现队列的方法
2015/05/26 Python
Ubuntu下安装PyV8
2016/03/13 Python
Python批量更改文件名的实现方法
2017/10/29 Python
python中将字典形式的数据循环插入Excel
2018/01/16 Python
python版opencv摄像头人脸实时检测方法
2018/08/03 Python
使用50行Python代码从零开始实现一个AI平衡小游戏
2018/11/21 Python
selenium在执行phantomjs的API并获取执行结果的方法
2018/12/17 Python
python中的测试框架
2020/11/13 Python
python3.7中安装paddleocr及paddlepaddle包的多种方法
2020/11/27 Python
金融事务专业毕业生求职信
2014/02/23 职场文书
爱心捐助倡议书
2014/05/19 职场文书
2014年评职称工作总结
2014/11/20 职场文书
怀孕辞职信怎么写
2015/02/28 职场文书
煤矿安全学习心得体会
2016/01/18 职场文书
Golang并发操作中常见的读写锁详析
2021/08/30 Golang
警用民用对讲机找不同
2022/02/18 无线电