jQuery中click事件用法实例


Posted in Javascript onDecember 26, 2014

本文实例讲述了jQuery中click事件用法。分享给大家供大家参考。具体分析如下:

当鼠标指针在匹配元素上方,然后按下并松开鼠标左键或者调用click()方法都会触发click事件。

一个完整的事件过程,不但要有能够触发事件的条件,而且还要有事件处理程序。

可以通过click()方法为click事件绑定事件处理程序。例如:

$("button").click(function(){$("div").css("color","green")})

以上代码就是将function函数作为事件处理程序通过click()方法绑定到click事件。当触发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:100px;

  height:100px;

  border:1px solid blue;

}

</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").css("color","green")})

})

</script>

</head>

<body>

<div>测试脚本</div>

<button>点击查看效果</button>

</body>

</html>

以上代码中,点击按钮可以将div中的字体颜色设置为绿色。

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
为Extjs加加速(javascript加速)
Aug 19 Javascript
JavaScript高级程序设计 阅读笔记(十四) js继承机制的实现
Aug 14 Javascript
基于iframe实现类似于ajax的页面无刷新
May 31 Javascript
JS模拟实现Select效果代码
Sep 24 Javascript
javascript针对cookie的基本操作实例详解
Nov 30 Javascript
深入理解node exports和module.exports区别
Jun 01 Javascript
详解数组Array.sort()排序的方法
May 09 Javascript
JavaScript字符串_动力节点Java学院整理
Jun 27 Javascript
node.js 用socket实现聊天的示例代码
Oct 17 Javascript
Vue 让元素抖动/摆动起来的实现代码
May 31 Javascript
js序列化和反序列化的使用讲解
Jan 19 Javascript
JS+html5实现异步上传图片显示上传文件进度条功能示例
Nov 09 Javascript
javascript实现类似超链接的效果
Dec 26 #Javascript
浅析javascript操作 cookie对象
Dec 26 #Javascript
浅谈javascript对象模型和function对象
Dec 26 #Javascript
angularjs基础教程
Dec 25 #Javascript
jQuery中detach()方法用法实例
Dec 25 #Javascript
jQuery中remove()方法用法实例
Dec 25 #Javascript
jQuery中replaceWith()方法用法实例
Dec 25 #Javascript
You might like
德生S2000电路分析
2021/03/02 无线电
一贴学会PHP 新手入门教程
2009/08/03 PHP
PHP面向对象——访问修饰符介绍
2012/11/08 PHP
php集成套件服务器xampp安装使用教程(适合第一次玩PHP的新手)
2015/06/03 PHP
[原创]php简单隔行变色功能实现代码
2016/07/09 PHP
gearman中worker常驻后台,导致MySQL server has gone away的解决方法
2020/02/27 PHP
php设计模式之职责链模式实例分析【星际争霸游戏案例】
2020/03/27 PHP
JS 对输入框进行限制(常用的都有)
2013/07/30 Javascript
javascript数组操作方法小结和3个属性详细介绍
2014/07/05 Javascript
javascript根据时间生成m位随机数最大13位
2014/10/30 Javascript
简要了解jQuery移动web开发的响应式布局设计
2015/12/04 Javascript
JavaScript常用基础知识强化学习
2015/12/09 Javascript
JS动态给对象添加事件的简单方法
2016/07/19 Javascript
localStorage实现便签小程序
2016/11/28 Javascript
vue 实现 ios 原生picker 效果及实现思路解析
2017/12/06 Javascript
Vue Socket.io源码解读
2018/02/07 Javascript
JS实现前端页面的搜索功能
2018/06/12 Javascript
iview Upload组件多个文件上传的示例代码
2018/09/30 Javascript
JavaScript箭头函数中的this详解
2019/06/19 Javascript
[02:08]2018年度CS GO枪械皮肤设计大赛优秀作者-完美盛典
2018/12/16 DOTA
python自动翻译实现方法
2016/05/28 Python
Python中字典的浅拷贝与深拷贝用法实例分析
2018/01/02 Python
python中的decimal类型转换实例详解
2019/06/26 Python
Pytorch Tensor基本数学运算详解
2019/12/30 Python
将python文件打包exe独立运行程序方法详解
2020/02/12 Python
Python模拟登录和登录跳转的参考示例
2020/10/30 Python
CSS3基础(RGBa、text-shadow、box-shadow、border-radius)
2012/11/13 HTML / CSS
Brasty波兰:香水、化妆品、手表网上商店
2019/04/15 全球购物
文史专业毕业生自荐信
2013/11/17 职场文书
奥巴马就职演讲稿
2014/05/15 职场文书
五五普法心得体会
2014/09/04 职场文书
公司新人试用期自我评价
2014/09/17 职场文书
2014年路政工作总结
2014/12/10 职场文书
2015年师德师风自我评价范文
2015/03/05 职场文书
2016年大学生党员承诺书
2016/03/24 职场文书
导游词之太原天龙山
2020/01/02 职场文书