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 相关文章推荐
jQuery学习2 选择器的使用说明
Feb 07 Javascript
利用腾讯的ip地址库做ip物理地址定位
Jul 24 Javascript
javascript 函数声明与函数表达式的区别介绍
Oct 05 Javascript
JS获取select的value和text值的简单实例
Feb 26 Javascript
node.js中的http.response.end方法使用说明
Dec 14 Javascript
在AngularJS中使用AJAX的方法
Jun 17 Javascript
JS实现关键词高亮显示正则匹配
Jun 22 Javascript
快速解决vue动态绑定多个class的官方实例语法无效的问题
Sep 05 Javascript
JavaScript时间与时间戳的转换操作实例分析
Dec 07 Javascript
Vue+Express实现登录注销功能的实例代码
May 05 Javascript
vue-router为激活的路由设置样式操作
Jul 18 Javascript
Vue 样式切换及三元判断样式关联操作
Aug 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
基于asp+ajax和数据库驱动的二级联动菜单
2010/05/06 PHP
php里array_work用法实例分析
2015/07/13 PHP
PHP中使用foreach()遍历二维数组的简单实例
2016/06/13 PHP
Yii2简单实现多语言配置的方法
2016/07/23 PHP
PHP大神的十大优良习惯
2016/09/14 PHP
PHP7 list() 函数修改
2021/03/09 PHP
Js+Dhtml:WEB程序员简易开发工具包(预先体验版)
2006/11/07 Javascript
禁用Tab键JS代码兼容Firefox和IE
2014/04/18 Javascript
JS实现根据当前文字选择返回被选中的文字
2014/05/21 Javascript
JavaScript中number转换成string介绍
2014/12/31 Javascript
基于JavaScript代码实现pc与手机之间的跳转
2015/12/23 Javascript
原生js编写autoComplete插件
2016/04/13 Javascript
基于Turn.js 实现翻书效果实例解析
2016/06/20 Javascript
javascript类型系统——undefined和null全面了解
2016/07/13 Javascript
JavaScript实现复制文章自动添加版权
2016/08/02 Javascript
浅谈Angular路由复用策略
2017/10/04 Javascript
详解webpack + react + react-router 如何实现懒加载
2017/11/20 Javascript
nodejs基于express实现文件上传的方法
2018/03/19 NodeJs
Vue使用zTree插件封装树组件操作示例
2019/04/25 Javascript
[01:23:59]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 VP vs Secret
2018/04/03 DOTA
Python实现计算文件夹下.h和.cpp文件的总行数
2015/04/23 Python
Python数组定义方法
2016/04/13 Python
python2.7安装图文教程
2018/03/13 Python
Python3爬虫使用Fidder实现APP爬取示例
2018/11/27 Python
对python mayavi三维绘图的实现详解
2019/01/08 Python
利用pyshp包给shapefile文件添加字段的实例
2019/12/06 Python
python怎么自定义捕获错误
2020/06/29 Python
Windows下PyCharm配置Anaconda环境(超详细教程)
2020/07/31 Python
python中lower函数实现方法及用法讲解
2020/12/23 Python
HTML5中Canvas与SVG的画图原理比较
2013/01/16 HTML / CSS
财务管理个人自荐书范文
2013/11/24 职场文书
兼职学生的自我评价
2013/11/24 职场文书
会计专业自我鉴定范文
2013/12/29 职场文书
让世界充满爱观后感
2015/06/10 职场文书
在人间读书笔记
2015/06/30 职场文书
python Tkinter模块使用方法详解
2022/04/07 Python