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 相关文章推荐
JavaScript获取GridView中用户点击控件的行号,列号
Apr 14 Javascript
img标签中onerror用法
Aug 13 Javascript
window.showModalDialog()返回值的学习心得总结
Jan 07 Javascript
JavaScript实现从数组中选出和等于固定值的n个数
Sep 03 Javascript
JavaScript操作Cookie方法实例分析
May 27 Javascript
jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证
Jun 25 Javascript
jQuery实现多级联动下拉列表查询框
Jan 18 Javascript
jQuery设置Easyui校验规则(推荐)
Nov 21 Javascript
Angular.js实现动态加载组件详解
May 28 Javascript
初探JavaScript 面向对象(推荐)
Sep 03 Javascript
JS通过位运算实现权限加解密
Aug 14 Javascript
了解前端理论:rscss和rsjs
May 23 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
Linux下进行MYSQL编程时插入中文乱码的解决方案
2007/03/15 PHP
表单复选框向PHP传输数据的代码
2007/11/13 PHP
php中3种方法删除字符串中间的空格
2014/03/10 PHP
Windows下的PHP安装pear教程
2014/10/24 PHP
php解析http获取的json字符串变量总是空白null
2015/03/02 PHP
php workerman定时任务的实现代码
2018/12/23 PHP
如何在PHP中生成随机数
2020/06/04 PHP
JavaScript版代码高亮
2006/06/26 Javascript
setTimeout函数兼容各主流浏览器运行执行效果实例
2013/06/13 Javascript
javascript实现根据身份证号读取相关信息
2014/12/17 Javascript
jQuery中:first-child选择器用法实例
2014/12/31 Javascript
Bootstrap3.0建站教程(一)之bootstrap表单元素排版
2016/06/01 Javascript
JS中使用变量保存arguments对象的方法
2016/06/03 Javascript
AngularJS基础 ng-switch 指令简单示例
2016/08/03 Javascript
详解JavaScript中this的指向问题
2017/01/20 Javascript
微信小程序 引用其他js文件实现代码
2017/02/22 Javascript
javascript+html5+css3自定义提示窗口
2017/06/21 Javascript
使用Fullpage插件快速开发整屏翻页的页面
2017/09/13 Javascript
小程序实现人脸识别功能(百度ai)
2018/12/23 Javascript
通过Nodejs搭建网站简单实现注册登录流程
2019/06/14 NodeJs
原生js实现九宫格拖拽换位
2021/01/26 Javascript
JavaScript实现H5接金币功能(实例代码)
2021/02/22 Javascript
python2.7删除文件夹和删除文件代码实例
2013/12/18 Python
对python 读取线的shp文件实例详解
2018/12/22 Python
乐天旅游台湾网站:Rakuten Travel TW
2017/06/01 全球购物
董事长岗位职责
2013/11/30 职场文书
军训生自我鉴定范文
2013/12/27 职场文书
先进党支部事迹材料
2014/01/13 职场文书
市场营销管理毕业生自荐信
2014/03/03 职场文书
法人授权委托书
2014/04/03 职场文书
募捐倡议书
2014/04/14 职场文书
幼师求职信
2014/06/23 职场文书
欢度春节标语
2014/07/01 职场文书
2015年中个人总结范文
2015/03/10 职场文书
社区党支部承诺书
2015/04/29 职场文书
vue选项卡切换的实现案例
2022/04/11 Vue.js