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实现数组去重、判断数组以及对象中的内容是否相同
Nov 29 Javascript
JavaScript实现图片DIV竖向滑动的方法
Apr 25 Javascript
浅析jquery与checkbox的checked属性的问题
Apr 27 Javascript
jQuery Validate设置onkeyup验证的实例代码
Dec 09 Javascript
JS实现双击内容变为可编辑状态
Mar 03 Javascript
JQuery实现图片轮播效果
May 08 jQuery
js获取css的各种样式并且设置他们的方法
Aug 22 Javascript
jQuery选择器之属性筛选选择器用法详解
Sep 19 jQuery
SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法
Jan 09 Javascript
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
Jan 16 Javascript
通过JavaScript下载文件到本地的方法(单文件)
Mar 17 Javascript
解决VantUI popup 弹窗不弹出或无蒙层的问题
Nov 03 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
CI框架中libraries,helpers,hooks文件夹详细说明
2014/06/10 PHP
Yii框架调试心得--在页面输出执行sql语句
2014/12/25 PHP
javascript或asp实现的判断身份证号码是否正确两种验证方法
2009/11/26 Javascript
jQuery表单验证插件formValidator(改进版)
2012/02/03 Javascript
jQuery列表拖动排列具体实现
2013/11/04 Javascript
JavaScript设计模式之观察者模式(发布者-订阅者模式)
2014/09/24 Javascript
JQuery中DOM实现事件移除的方法
2015/06/13 Javascript
jquery实现图片放大镜功能
2015/11/23 Javascript
Bootstrap carousel轮转图的使用实例详解
2016/05/17 Javascript
AngularJS中的表单简单入门
2016/07/28 Javascript
JavaScript蒙板(model)功能的简单实现代码
2016/08/04 Javascript
微信小程序 chooseImage选择图片或者拍照
2017/04/07 Javascript
js图片放大镜实例讲解(必看篇)
2017/07/17 Javascript
微信小程序url与token设置详解
2017/09/26 Javascript
Node.JS循环删除非空文件夹及子目录下的所有文件
2018/03/12 Javascript
vue axios登录请求拦截器
2018/04/02 Javascript
node.js读取Excel数据(下载图片)的方法示例
2018/08/02 Javascript
node.js爬取中关村的在线电瓶车信息
2018/11/13 Javascript
Vue+Element-UI实现上传图片并压缩
2019/11/26 Javascript
基于vue和websocket的多人在线聊天室
2020/02/01 Javascript
[01:14:35]DOTA2上海特级锦标赛B组资格赛#1 Alliance VS Fnatic第一局
2016/02/26 DOTA
[32:36]完美世界DOTA2联赛PWL S3 LBZS vs CPG 第二场 12.12
2020/12/16 DOTA
Python的“二维”字典 (two-dimension dictionary)定义与实现方法
2016/04/27 Python
python 数据清洗之数据合并、转换、过滤、排序
2017/02/12 Python
Python解惑之整数比较详解
2017/04/24 Python
Python求一批字符串的最长公共前缀算法示例
2019/03/02 Python
pytorch实现focal loss的两种方式小结
2020/01/02 Python
使用Python来做一个屏幕录制工具的操作代码
2020/01/18 Python
小学教师自我鉴定
2013/11/07 职场文书
《月光启蒙》教学反思
2014/03/01 职场文书
《忆江南》教学反思
2014/04/07 职场文书
初中班主任教育随笔
2015/08/15 职场文书
2015年大学组织委员个人工作总结
2015/10/23 职场文书
详解在SQLPlus中实现上下键翻查历史命令的功能
2022/03/18 SQL Server
Python读写yaml文件
2022/03/20 Python
让JavaScript代码更加精简的方法技巧
2022/06/01 Javascript