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活用事件触发对象动作
Aug 10 Javascript
非常棒的10款jQuery 幻灯片插件
Jun 14 Javascript
jQuery 借助插件Lavalamp实现导航条动态美化效果
Sep 27 Javascript
node.js中express-session配置项详解
May 31 Javascript
vue2.0 axios前后端数据处理实例代码
Jun 30 Javascript
JavaScript使用递归和循环实现阶乘的实例代码
Aug 28 Javascript
浅谈发布订阅模式与观察者模式
Apr 09 Javascript
package.json中homepage属性的作用详解
Mar 11 Javascript
django简单的前后端分离的数据传输实例 axios
May 18 Javascript
Vue自定义全局弹窗组件操作
Aug 11 Javascript
VUE和Antv G6实现在线拓扑图编辑操作
Oct 28 Javascript
详解vue实现坐标拾取器功能示例
Nov 18 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
Apache+php+mysql在windows下的安装与配置图解(最新版)
2008/11/30 PHP
PHP获取客户端及服务器端IP的封装类
2016/07/21 PHP
微信自定义菜单的创建/查询/取消php示例代码
2016/08/05 PHP
AJAX PHP无刷新form表单提交的简单实现(推荐)
2016/09/09 PHP
Zend Framework过滤器Zend_Filter用法详解
2016/12/09 PHP
THINKPHP-Apache服务器中使用Alias虚拟目录URL重写 隐藏index.php
2021/03/09 PHP
javascript 强制刷新页面的实现代码
2009/12/13 Javascript
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
2010/03/12 Javascript
浅析ajax请求json数据并用js解析(示例分析)
2013/07/13 Javascript
node.js+Ajax实现获取HTTP服务器返回数据
2014/11/26 Javascript
jQuery实现的动态伸缩导航菜单实例
2015/05/07 Javascript
Bootstrap table右键功能实现方法
2017/02/20 Javascript
vue-cli 自定义指令directive 添加验证滑块示例
2017/10/19 Javascript
JavaScript类的继承方法小结【组合继承分析】
2018/07/11 Javascript
angularJs select绑定的model取不到值的解决方法
2018/10/08 Javascript
微信小程序自定义波浪组件使用方法详解
2019/09/21 Javascript
javscript 数组扁平化的实现
2020/02/03 Javascript
在vue中封装的弹窗组件使用队列模式实现方法
2020/07/23 Javascript
[47:45]Liquid vs OG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
浅谈python中scipy.misc.logsumexp函数的运用场景
2016/06/23 Python
利用python、tensorflow、opencv、pyqt5实现人脸实时签到系统
2019/09/25 Python
详解python中eval函数的作用
2019/10/22 Python
Numpy(Pandas)删除全为零的列的方法
2020/09/11 Python
python3爬虫中多线程进行解锁操作实例
2020/11/25 Python
html5实现多图片预览上传及点击可拖拽控件
2018/03/15 HTML / CSS
英国健身超市:Fitness Superstore
2019/06/17 全球购物
大学同学聚会邀请函
2014/01/19 职场文书
护理学应聘自荐书范文
2014/02/05 职场文书
十八届三中全会个人学习材料
2014/02/13 职场文书
教师演讲稿开场白
2014/08/25 职场文书
乡镇领导干部个人对照检查材料思想汇报
2014/09/23 职场文书
学校计划生育责任书
2015/05/09 职场文书
2015年税务稽查工作总结
2015/05/26 职场文书
家装电话营销开场白
2015/05/29 职场文书
css 中多种边框的实现小窍门
2021/04/07 HTML / CSS
MySQL8.0 Undo Tablespace管理详解
2022/06/16 MySQL