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的高性能TreeView(asp.net)
Feb 23 Javascript
JavaScript自执行闭包的小例子
Jun 29 Javascript
JS实现简单的二维矩阵乘积运算
Jan 26 Javascript
AngularJS 中的事件详解
Jul 28 Javascript
javascript函数的四种调用模式
Jan 08 Javascript
vue2.0+koa2+mongodb实现注册登录
Apr 10 Javascript
mac上配置Android环境变量的方法
Jul 08 Javascript
详释JavaScript执行环境与执行栈
Apr 02 Javascript
jquery实现下载图片功能
Jul 18 jQuery
JS计算斐波拉切代码实例
Sep 12 Javascript
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
May 19 jQuery
Python机器学习之决策树和随机森林
Jul 15 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
深入PHP内存相关的功能特性详解
2013/06/08 PHP
PHP生成静态HTML页面最简单方法示例
2015/04/09 PHP
php将图片文件转换成二进制输出的方法
2015/06/10 PHP
php读取der格式证书乱码解决方法
2015/06/22 PHP
PHP strripos函数用法总结
2019/02/11 PHP
javascript时间自动刷新实现原理与步骤
2013/01/06 Javascript
js css后面所带参数含义介绍
2013/08/18 Javascript
js调用css属性写法
2013/09/21 Javascript
jQuery实现带幻灯的tab滑动切换风格菜单代码
2015/08/27 Javascript
JavaScript实现给定时间相加天数的方法
2016/01/25 Javascript
JavaScript观察者模式(publish/subscribe)原理与实现方法
2017/03/30 Javascript
JavaScrpt的面向对象全面解析
2017/05/09 Javascript
React.Js添加与删除onScroll事件的方法详解
2017/11/03 Javascript
浅谈如何使用webpack构建多页面应用
2018/05/30 Javascript
详解三种方式解决vue中v-html元素中标签样式
2018/11/22 Javascript
实例讲解JS中pop使用方法
2019/01/27 Javascript
微信小程序和H5页面间相互跳转代码实例
2019/09/19 Javascript
python创建和使用字典实例详解
2013/11/01 Python
python解析文件示例
2014/01/23 Python
教你如何在Django 1.6中正确使用 Signal
2014/06/22 Python
使用python检测主机存活端口及检查存活主机
2015/10/12 Python
python记录程序运行时间的三种方法
2017/07/14 Python
Flask框架路由和视图用法实例分析
2019/11/07 Python
python计算Content-MD5并获取文件的Content-MD5值方式
2020/04/03 Python
Python爬虫入门教程01之爬取豆瓣Top电影
2021/01/24 Python
HTML5中5个简单实用的API
2014/04/28 HTML / CSS
宏碁西班牙官网:Acer西班牙
2021/01/08 全球购物
西班牙在线光学:Visual-Click
2020/06/22 全球购物
工业学校毕业生自荐信范文
2014/01/03 职场文书
2014年导购员工作总结
2014/11/18 职场文书
大学社团活动总结怎么写
2019/06/21 职场文书
科普 | 业余无线电知识-波段篇
2022/02/18 无线电
SQL试题 使用窗口函数选出连续3天登录的用户
2022/04/24 Oracle
使用 Docker Compose 构建复杂的多容器App
2022/04/30 Servers
Pygame游戏开发之太空射击实战敌人精灵篇
2022/08/05 Python
Spring boot实现上传文件到本地服务器
2022/08/14 Java/Android