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 相关文章推荐
jquery选择器(常用选择器说明)
Sep 28 Javascript
初识JQuery 实例一(first)
Mar 16 Javascript
浅析JQuery获取和设置Select选项的常用方法总结
Jul 04 Javascript
jquery鼠标滑过提示title具体实现代码
Aug 06 Javascript
jQuery实现类似滑动门切换效果的层切换
Sep 23 Javascript
AngularJS实现动态编译添加到dom中的方法
Nov 04 Javascript
vue将对象新增的属性添加到检测序列的方法
Feb 24 Javascript
优雅的将ElementUI表格变身成树形表格的方法步骤
Apr 11 Javascript
JavaScript多种滤镜算法实现代码实例
Dec 10 Javascript
vuex(vue状态管理)的特殊应用案例分享
Mar 03 Javascript
vue实现动态表格提交参数动态生成控件的操作
Nov 09 Javascript
vue中如何添加百度统计代码
Dec 19 Vue.js
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
「OVERLORD」动画重要删减!雅儿贝德的背叛?至尊猎杀队结成
2020/04/09 日漫
PHP中return 和 exit 、break和contiue 区别与用法
2012/04/09 PHP
php解析字符串里所有URL地址的方法
2015/04/03 PHP
记录几个javascript有关的小细节
2007/04/02 Javascript
javascript判断数组内是否重复的方法
2015/04/21 Javascript
js表格排序实例分析(支持int,float,date,string四种数据类型)
2015/05/06 Javascript
JS实现三级折叠菜单特效,其它级可自动收缩
2015/08/06 Javascript
javascript每日必学之运算符
2016/02/16 Javascript
JS正则表达式之非捕获分组用法实例分析
2016/12/28 Javascript
分分钟玩转Vue.js组件(二)
2017/03/01 Javascript
VueJS如何引入css或者less文件的一些坑
2017/04/25 Javascript
AngularJS实现的简单拖拽功能示例
2018/01/02 Javascript
从Vuex中取出数组赋值给新的数组,新数组push时报错的解决方法
2018/09/18 Javascript
nodejs 使用 js 模块的方法实例详解
2018/12/04 NodeJs
jquery传参及获取方式(两种方式)
2020/02/13 jQuery
vue实现导航菜单和编辑文本的示例代码
2020/07/04 Javascript
[05:59]2018DOTA2国际邀请赛寻真——只为胜利的Secret
2018/08/13 DOTA
详解Python中的各种函数的使用
2015/05/24 Python
python写一个md5解密器示例
2018/02/23 Python
Python基础之循环语句用法示例【for、while循环】
2019/03/23 Python
详解Django配置优化方法
2019/11/18 Python
django 实现celery动态设置周期任务执行时间
2019/11/19 Python
python使用正则表达式去除中文文本多余空格,保留英文之间空格方法详解
2020/02/11 Python
HTML5新控件之日期和时间选择输入的实现代码
2018/09/13 HTML / CSS
Html5实现如何在两个div元素之间拖放图像
2013/03/29 HTML / CSS
世界汽车零件:World Car Parts
2019/09/04 全球购物
最新茶叶店创业计划书
2014/01/14 职场文书
便利店的创业计划书
2014/01/15 职场文书
教师个人自我鉴定
2014/02/08 职场文书
教师新年寄语
2014/04/03 职场文书
2014年行政人事工作总结
2014/12/09 职场文书
公司门卫岗位职责
2015/04/13 职场文书
小学生暑假生活总结
2015/07/13 职场文书
Redis 常见使用场景
2021/08/30 Redis
MySQL修炼之联结与集合浅析
2021/10/05 MySQL
mysql自增长id用完了该怎么办
2022/02/12 MySQL