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控制表格隔行变色
Jun 26 Javascript
javascript一点特殊用法
May 28 Javascript
jquery DOM操作 基于命令改变页面
May 06 Javascript
JavaScript继承方式实例
Oct 29 Javascript
js简单实现让文本框内容逐个字的显示出来
Oct 22 Javascript
jQuery EasyUI datagrid实现本地分页的方法
Feb 13 Javascript
在AngularJS中使用AJAX的方法
Jun 17 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(二)
Dec 10 Javascript
JavaScript为事件句柄绑定监听函数实例详解
Dec 15 Javascript
AngularJS中指令的四种基本形式实例分析
Nov 22 Javascript
p5.js绘制旋转的正方形
Oct 23 Javascript
JavaScript undefined及null区别实例解析
Jul 21 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
SSI指令
2006/11/25 PHP
php中cookie的作用域
2008/03/27 PHP
PHP.ini安全配置检测工具pcc简单介绍
2015/07/02 PHP
十个PHP高级应用技巧果断收藏
2015/09/25 PHP
Laravel框架中队列和工作(Queues、Jobs)操作实例详解
2020/04/06 PHP
JavaScript写的一个自定义弹出式对话框代码
2010/01/17 Javascript
在一个浏览器里呈现所有浏览器测试结果的前端测试工具的思路
2010/03/02 Javascript
artDialog双击会关闭对话框的修改过程分享
2013/08/05 Javascript
使用jQuery jqPlot插件绘制柱状图
2014/12/18 Javascript
js创建对象的方式总结
2015/01/10 Javascript
谈谈JavaScript中function多重理解
2015/08/28 Javascript
JS+CSS实现仿支付宝菜单选中效果代码
2015/09/25 Javascript
jQuery+PHP星级评分实现方法
2015/10/02 Javascript
javascript日期格式化方法汇总
2015/10/04 Javascript
Bootstrap实现水平排列的表单
2016/07/04 Javascript
JavaScript遍历Json串浏览器输出的结果不统一问题
2016/11/03 Javascript
js窗口震动小程序分享
2016/11/28 Javascript
Angular4实现图片上传预览路径不安全的问题解决
2017/12/25 Javascript
angular2实现统一的http请求头方法
2018/08/13 Javascript
vue-cli项目配置多环境的详细操作过程
2018/10/30 Javascript
JavaScript函数式编程(Functional Programming)声明式与命令式实例分析
2019/05/21 Javascript
vue props default Array或是Object的正确写法说明
2020/07/30 Javascript
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
2021/02/23 Vue.js
python中文乱码的解决方法
2013/11/04 Python
python构建自定义回调函数详解
2017/06/20 Python
将tensorflow.Variable中的某些元素取出组成一个新的矩阵示例
2020/01/04 Python
pytorch查看模型weight与grad方式
2020/06/24 Python
Too Faced官网:美国知名彩妆品牌
2017/03/07 全球购物
新西兰航空中国官网:Air New Zealand China
2018/07/24 全球购物
班级道德讲堂实施方案
2014/02/24 职场文书
社会学专业求职信
2014/07/17 职场文书
学校领导班子成员查摆问题及整改措施
2014/10/28 职场文书
2015年高中生国庆节演讲稿
2015/07/30 职场文书
2016入党积极分子考察评语
2015/12/01 职场文书
推广普通话宣传标语口号
2015/12/26 职场文书
MySQL解决Navicat设置默认字符串时的报错问题
2022/06/16 MySQL