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源码解读之removeClass()方法分析
Feb 20 Javascript
javascript实现table选中的行以指定颜色高亮显示的方法
May 13 Javascript
JavaScript中使用自然对数ln的方法
Jun 14 Javascript
AngularJS基础 ng-paste 指令简单示例
Aug 02 Javascript
JavaScript实现页面定时刷新(定时器,meta)
Oct 12 Javascript
javascript replace()第二个参数为函数时的参数用法
Dec 26 Javascript
bootstrap的常用组件和栅格式布局详解
May 02 Javascript
vue移动端监听滚动条高度的实现方法
Sep 03 Javascript
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
Apr 12 Javascript
javascript实现的时间格式加8小时功能示例
Jun 13 Javascript
基于vue实现微博三方登录流程解析
Nov 04 Javascript
Nest.js参数校验和自定义返回数据格式详解
Mar 29 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
火车头discuz6.1 完美采集的php接口文件
2009/09/13 PHP
wordpress安装过程中遇到中文乱码的处理方法
2015/04/21 PHP
php7 参数、整形及字符串处理机制修改实例分析
2020/05/25 PHP
解决FLASH需要点击激活的代码
2006/12/20 Javascript
javascript 添加和移除函数的通用方法
2009/10/20 Javascript
图标线性回归斜着移动到指定的位置
2013/08/16 Javascript
JS关闭窗口与JS关闭页面的几种方法小结
2013/12/17 Javascript
深入分析js的冒泡事件
2014/12/05 Javascript
jQuery使用before()和after()在元素前后添加内容的方法
2015/03/26 Javascript
Ajax中解析Json的两种方法对比分析
2015/06/25 Javascript
浅谈javascript中return语句
2015/07/15 Javascript
Angular 4 指令快速入门教程
2017/06/07 Javascript
详解react native页面间传递数据的几种方式
2018/11/07 Javascript
小程序实现订单倒计时功能
2019/04/23 Javascript
jQuery 选择器用法基础入门示例
2020/01/04 jQuery
JS实现表单中点击小眼睛显示隐藏密码框中的密码
2020/04/13 Javascript
vue addRoutes路由动态加载操作
2020/08/04 Javascript
如何使用 vue-cli 创建模板项目
2020/11/19 Vue.js
JavaScript实现鼠标经过表格某行时此行变色
2020/11/20 Javascript
[00:59]DOTA2英雄背景故事——上古巨神
2020/06/28 DOTA
Python程序设计入门(3)数组的使用
2014/06/16 Python
编写Python脚本把sqlAlchemy对象转换成dict的教程
2015/05/29 Python
Python之ReportLab绘制条形码和二维码的实例
2018/01/15 Python
python实现图片文件批量重命名
2020/03/23 Python
Python常见MongoDB数据库操作实例总结
2018/07/24 Python
Python JSON格式数据的提取和保存的实现
2019/03/22 Python
python分布式编程实现过程解析
2019/11/08 Python
python 字典套字典或列表的示例
2019/12/16 Python
django执行数据库查询之后实现返回的结果集转json
2020/03/31 Python
python中把元组转换为namedtuple方法
2020/12/09 Python
编写html5时调试发现脚本php等网页js、css等失效
2013/12/31 HTML / CSS
密封类可以有虚函数吗
2014/08/11 面试题
销售人员个人求职信
2013/09/26 职场文书
物业门卫岗位职责
2013/12/28 职场文书
员工工作及收入证明
2014/10/28 职场文书
怎样写工作总结啊!
2019/06/18 职场文书