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 相关文章推荐
用JavaScript脚本实现Web页面信息交互
Dec 21 Javascript
JavaScript 语言的递归编程
May 18 Javascript
理解Javascript_10_对象模型
Oct 16 Javascript
使用canvas实现仿新浪微博头像截取上传功能
Sep 02 Javascript
原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法
Aug 05 Javascript
Vue.Draggable实现拖拽效果
Jul 29 Javascript
Koa2 之文件上传下载的示例代码
Mar 29 Javascript
json对象及数组键值的深度大小写转换问题详解
Mar 30 Javascript
Node.js中的不安全跳转如何防御详解
Oct 21 Javascript
小程序红包雨的实现示例
Feb 19 Javascript
用node.js写一个jenkins发版脚本
May 21 Javascript
vue 获取元素额外生成的data-v-xxx操作
Sep 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
一个不易被发现的PHP后门代码解析
2014/07/05 PHP
php中动态变量用法实例
2015/06/10 PHP
php多线程实现方法及用法实例详解
2015/10/26 PHP
php安装ssh2扩展的方法【Linux平台】
2016/07/20 PHP
PHP实现防盗链的方法分析
2017/07/25 PHP
实例说明js脚本语言和php脚本语言的区别
2019/04/04 PHP
解决Laravel 使用insert插入数据,字段created_at为0000的问题
2019/10/11 PHP
PHP+Redis链表解决高并发下商品超卖问题(实现原理及步骤)
2020/08/03 PHP
js宝典学习笔记(上)
2007/01/10 Javascript
Jquery跨域获得Json时invalid label错误的解决办法
2011/01/11 Javascript
JS代码放在head和body中的区别分析
2011/12/01 Javascript
JS打开新窗口的2种方式
2013/04/18 Javascript
javascript密码强度校验代码(两种方法)
2015/08/10 Javascript
Vue.js实现表格动态增加删除的方法(附源码下载)
2017/01/20 Javascript
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
2017/05/15 jQuery
详解Vue使用命令行搭建单页面应用
2017/05/24 Javascript
微信小程序实现红包雨功能
2018/07/11 Javascript
jQuery分组选择器简单用法示例
2019/04/04 jQuery
为什么推荐使用JSX开发Vue3
2020/12/28 Vue.js
[01:39]2014DOTA2国际邀请赛 Newbee经理CU专访队伍火力全开
2014/07/15 DOTA
python中如何使用正则表达式的非贪婪模式示例
2017/10/09 Python
Python一句代码实现找出所有水仙花数的方法
2018/11/13 Python
Python使用reportlab模块生成PDF格式的文档
2019/03/11 Python
pycharm创建一个python包方法图解
2019/04/10 Python
Django框架静态文件使用/中间件/禁用ip功能实例详解
2019/07/22 Python
pip 安装库比较慢的解决方法(国内镜像)
2019/10/06 Python
Jupyter Notebook 远程访问配置详解
2021/01/11 Python
中国领先的专业演出票务网:永乐票务
2016/08/29 全球购物
REN Clean Skincare官网:英国本土有机护肤品牌
2019/02/23 全球购物
锐步香港官方网上商店:Reebok香港
2020/11/05 全球购物
校园奶茶店创业计划书
2014/01/23 职场文书
协会周年庆活动方案
2014/08/26 职场文书
关于JavaScript轮播图的实现
2021/11/20 Javascript
Python的代理类实现,控制访问和修改属性的权限你都了解吗
2022/03/21 Python
Pyhton爬虫知识之正则表达式详解
2022/04/01 Python
MySQL的表级锁,行级锁,排它锁和共享锁
2022/07/15 MySQL