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 2.0实用简明教程 之Border区域布局
Apr 29 Javascript
基于jquery的blockui插件显示弹出层
Apr 14 Javascript
js setTimeout opener的用法示例详解
Oct 23 Javascript
javascript生成随机大小写字母的方法
Feb 20 Javascript
JS判断移动端访问设备并加载对应CSS样式
Jun 13 Javascript
jQuery实现tab标签自动切换的方法
Feb 28 Javascript
jquery验证邮箱格式是否正确实例讲解
Nov 16 Javascript
JavaScript中的对象继承关系
Aug 01 Javascript
数组Array的排序sort方法
Feb 17 Javascript
vue-cli脚手架引入图片的几种方法总结
Mar 13 Javascript
JavaScript 防抖和节流遇见的奇怪问题及解决
Nov 20 Javascript
教你一步步实现一个简易promise
Nov 02 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
海河写的 Discuz论坛帖子调用js的php代码
2007/08/23 PHP
php简单处理XML数据的方法示例
2017/05/19 PHP
JQuery与Ajax调用新浪API获取短网址的代码
2014/02/07 Javascript
js中常用的Math方法总结
2017/01/12 Javascript
vue2.0结合DataTable插件实现表格动态刷新的方法详解
2017/03/17 Javascript
详解angularjs利用ui-route异步加载组件
2017/05/21 Javascript
如何通过非数字与字符的方式实现PHP WebShell详解
2017/07/02 Javascript
Vue2.0学习之详解Vue 组件及父子组件通信
2017/12/12 Javascript
解决vue-cli + webpack 新建项目出错的问题
2018/03/20 Javascript
vue.js 添加 fastclick的支持方法
2018/08/28 Javascript
javascript+HTML5 canvas绘制时钟功能示例
2019/05/15 Javascript
微信小程序位置授权处理方法
2019/06/13 Javascript
原生js添加一个或多个类名的方法分析
2019/07/30 Javascript
axios封装与传参示例详解
2020/10/18 Javascript
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 KG VS OG
2018/03/30 DOTA
python杀死一个线程的方法
2015/09/06 Python
Python抓取框架Scrapy爬虫入门:页面提取
2017/12/01 Python
Python读取Excel表格,并同时画折线图和柱状图的方法
2018/10/14 Python
Python操作json的方法实例分析
2018/12/06 Python
Python中的异常处理try/except/finally/raise用法分析
2019/02/28 Python
python多进程(加入进程池)操作常见案例
2019/10/21 Python
Python基于pygame实现单机版五子棋对战
2019/12/26 Python
python3.6使用SMTP协议发送邮件
2020/05/20 Python
Html5无刷新修改browser Url的方法
2014/01/15 HTML / CSS
英国自行车商店:AW Cycles
2021/02/24 全球购物
毕业学生推荐信
2013/12/01 职场文书
机械设计职业生涯规划书
2013/12/27 职场文书
海南地接欢迎词
2014/01/14 职场文书
出国留学经济担保书
2014/04/01 职场文书
人事局接收函
2015/01/30 职场文书
部门经理迟到检讨书
2015/02/16 职场文书
社团个人总结范文
2015/03/05 职场文书
杨善洲电影观后感
2015/06/04 职场文书
增值税发票丢失证明
2015/06/19 职场文书
2019年“红色之旅”心得体会1000字(3篇)
2019/09/27 职场文书
python 批量压缩图片的脚本
2021/06/02 Python