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添加控件自定义属性解析
Nov 25 Javascript
js加入收藏夹代码(兼容ie/ff/op)
May 16 Javascript
jquery实现漂亮的二级下拉菜单代码
Aug 26 Javascript
基于jQuery实现简单的折叠菜单效果
Nov 23 Javascript
js拖拽功能实现代码解析
Nov 28 Javascript
Bootstrap 模态框(Modal)插件代码解析
Dec 21 Javascript
bootstrap 表单验证使用方法
Jan 11 Javascript
jquery实现自适应banner焦点图
Feb 16 Javascript
纯js实现图片匀速淡入淡出效果
Aug 22 Javascript
详解如何使用webpack打包JS
Jun 21 Javascript
vue使用prop可以渲染但是打印台报错的解决方式
Nov 13 Javascript
Vue实现动态查询规则生成组件
May 27 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
高分R级DC动画剧《哈莉·奎茵》第二季正式预告首发
2020/04/09 欧美动漫
用Zend Encode编写开发PHP程序
2006/10/09 PHP
用PHP控制用户的浏览器--ob*函数的使用说明
2007/03/16 PHP
在MongoDB中模拟Auto Increment的php代码
2011/03/06 PHP
php表单提交实例讲解
2015/11/12 PHP
深入浅析PHP无限极分类的案例教程
2016/05/09 PHP
基于JQuery的asp.net树实现代码
2010/11/30 Javascript
解析使用JS 清空File控件的路径值
2013/07/08 Javascript
Jquery Easyui分割按钮组件SplitButton使用详解(17)
2016/12/18 Javascript
jQuery Validate格式验证功能实例代码(包括重名验证)
2017/07/18 jQuery
JavaScript累加、迭代、穷举、递归等常用算法实例小结
2018/05/08 Javascript
浅谈super-vuex使用体验
2018/06/25 Javascript
微信小程序之裁剪图片成圆形的实现代码
2018/10/11 Javascript
微信小程序使用template标签实现五星评分功能
2018/11/03 Javascript
jQuery实现适用于移动端的跑马灯抽奖特效示例
2019/01/18 jQuery
微信小程序登录session的使用
2019/03/17 Javascript
vue router 通过路由来实现切换头部标题功能
2019/04/24 Javascript
微信小程序开发之点击按钮退出小程序的实现方法
2019/04/26 Javascript
vue router 跳转时打开新页面的示例方法
2019/07/28 Javascript
vue递归获取父元素的元素实例
2020/08/07 Javascript
javascript解析json格式的数据方法详解
2020/08/07 Javascript
超详细小程序定位地图模块全系列开发教学
2020/11/24 Javascript
Python学习笔记_数据排序方法
2014/05/22 Python
Python基于动态规划算法计算单词距离
2015/07/25 Python
python解析基于xml格式的日志文件
2017/02/25 Python
Python基于回溯法子集树模板解决选排问题示例
2017/09/07 Python
Python中的Django基本命令实例详解
2018/07/15 Python
Pytorch中accuracy和loss的计算知识点总结
2019/09/10 Python
Python计算信息熵实例
2020/06/18 Python
ziaja齐叶雅官方海外旗舰店:来自波兰的天然护肤品牌
2017/01/02 全球购物
美国基督教约会网站:ChristianCafe.com
2020/02/04 全球购物
哈萨克斯坦移动和数字技术在线商店:SatelOnline.kz
2020/09/04 全球购物
教师职业道德事迹材料
2014/08/18 职场文书
承诺书样本
2014/08/30 职场文书
2015年学校工作总结范文
2015/04/20 职场文书
2019毕业典礼主持词!
2019/07/05 职场文书