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 相关文章推荐
js函数定时器实现定时读取系统实时连接数
Apr 30 Javascript
jQuery实现复选框全选/取消全选/反选及获得选择的值
Jun 12 Javascript
图解JavaScript中的this关键字
May 28 Javascript
javascript实现tab切换的四种方法
Nov 05 Javascript
javascript使用Promise对象实现异步编程
Mar 01 Javascript
jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)
Sep 08 Javascript
微信小程序 保留小数(toFixed)详细介绍
Nov 16 Javascript
js canvas实现放大镜查看图片功能
Jun 08 Javascript
jquery 输入框查找关键字并提亮颜色的实例代码
Jan 23 jQuery
vue--点击当前增加class,其他删除class的方法
Sep 15 Javascript
JS/HTML5游戏常用算法之追踪算法实例详解
Dec 12 Javascript
JS绘图Flot如何实现动态可刷新曲线图
Oct 16 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上的memcache和memcached两个pecl库
2010/03/29 PHP
PHP将两个关联数组合并函数提高函数效率
2014/03/18 PHP
php实现发送微信模板消息的方法
2015/03/07 PHP
PHP接收App端发送文件流的方法
2016/09/23 PHP
javascript间隔刷新的简单实例
2013/11/14 Javascript
javascript中全局对象的parseInt()方法使用介绍
2013/12/19 Javascript
javascript中clone对象详解
2014/12/03 Javascript
jQuery处理json数据返回数组和输出的方法
2015/03/11 Javascript
JavaScript 对象字面量讲解
2016/06/06 Javascript
简单理解Vue条件渲染
2016/12/03 Javascript
JS常用倒计时代码实例总结
2017/02/07 Javascript
JS组件系列之MVVM组件 vue 30分钟搞定前端增删改查
2017/04/28 Javascript
Bootstrap Table使用整理(五)之分页组合查询
2017/06/09 Javascript
node.js+captchapng+jsonwebtoken实现登录验证示例
2017/08/17 Javascript
JavaScript模块详解
2017/12/18 Javascript
vue2.0 axios跨域并渲染的问题解决方法
2018/03/08 Javascript
vue项目中全局引入1个.scss文件的问题解决
2019/08/01 Javascript
vue element-ui读取pdf文件的方法
2019/11/26 Javascript
vue addRoutes路由动态加载操作
2020/08/04 Javascript
Python使用Flask框架获取当前查询参数的方法
2015/03/21 Python
python 自动化将markdown文件转成html文件的方法
2016/09/23 Python
Python多重继承的方法解析执行顺序实例分析
2018/05/26 Python
selenium3+python3环境搭建教程图解
2018/12/07 Python
Django 表单模型选择框如何使用分组
2019/05/16 Python
Python搭建Spark分布式集群环境
2019/07/05 Python
解决Python spyder显示不全df列和行的问题
2020/04/20 Python
Python如何给函数库增加日志功能
2020/08/04 Python
python pillow库的基础使用教程
2021/01/13 Python
canvas画图被放大且模糊的解决方法
2020/08/11 HTML / CSS
李宁官方网店:中国运动品牌
2017/11/02 全球购物
道德演讲稿
2014/05/21 职场文书
销售团队激励口号
2014/06/06 职场文书
公司董事长岗位职责
2014/06/08 职场文书
教师节主题班会教案
2015/08/17 职场文书
2019奶茶店创业计划书范本!
2019/07/15 职场文书
科学家研发出新型速效酶,可在 24 小时内降解塑料制品
2022/04/29 数码科技