Jquery注册事件实现方法


Posted in Javascript onMay 18, 2015

本文实例讲述了Jquery注册事件实现方法。分享给大家供大家参考。具体如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>事件绑定</title>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
var oldColor;
$(function () {
  //注册ID为btnTest的按钮的click事件
  $("#btnTest").click(function () {
    var $divs = $("div");
    $divs.html("我是修改后的Div文本");
  });
  //注册ID为btnTest的按钮的mouseover事件,鼠标经过时添加背景色
  $("#btnTest").mouseover(function () {
    oldColor = $("#btnTest").css("background-color");
    $("#btnTest").css("background-color", "green");
  });
  //注册ID为btnTest的按钮的mouseout事件,鼠标离开时还原背景色
  $("#btnTest").mouseout(function () {
    $("#btnTest").css("background-color", oldColor);
  });
});
</script>
</head>
<body>
<div id="main">
 <div id="div1" class="myDiv">我是div1
  <div id="divSun">我是孙子div
    <div id="divSunSun">我是孙子的孙子div</div>
  </div>
  <div id="divSun1">我是孙子div</div>
 </div>
<div id="div2" class="myDiv">我是div2</div>
</div>
<div id="main1"></div>
<div id="main2"></div>
<input id="btnTest" type="button" value="测试按钮" />
<div id="main3"></div>  
</body>
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
js获取html参数及向swf传递参数应用介绍
Feb 18 Javascript
javascript 三种方法实现获得和设置以及移除元素属性
Mar 20 Javascript
谷歌浏览器调试JavaScript小技巧
Dec 29 Javascript
原生JS实现LOADING效果
Mar 16 Javascript
JS 循环li添加点击事件 (闭包的应用)
Dec 10 Javascript
JS与jQuery实现子窗口获取父窗口元素值的方法
Apr 17 jQuery
Vue中之nextTick函数源码分析详解
Oct 17 Javascript
vue中手机号,邮箱正则验证以及60s发送验证码的实例
Mar 16 Javascript
layer弹出层 iframe层去掉滚动条的实例代码
Aug 17 Javascript
Vue-cli@3.0 插件系统简析
Sep 05 Javascript
详解SPA中前端路由基本原理与实现方式
Sep 12 Javascript
ES5 模拟 ES6 的 Symbol 实现私有成员功能示例
May 06 Javascript
jquery中map函数遍历数组用法实例
May 18 #Javascript
jquery使用each方法遍历json格式数据实例
May 18 #Javascript
Jquery使用css方法改变样式实例
May 18 #Javascript
Jquery使用val方法读写value值
May 18 #Javascript
JQuery中Text方法用法实例分析
May 18 #Javascript
JQuery中attr方法和removeAttr方法用法实例
May 18 #Javascript
JQuery中节点遍历方法实例
May 18 #Javascript
You might like
PHP array操作10个小技巧分享
2011/06/23 PHP
基于PHP的简单采集数据入库程序
2014/07/30 PHP
Win7 64位系统下PHP连接Oracle数据库
2014/08/20 PHP
PHP中实现获取IP和地理位置类分享
2015/02/10 PHP
PHP Ajax实现无刷新附件上传
2016/08/17 PHP
php实现通过stomp协议连接ActiveMQ操作示例
2020/02/23 PHP
PHP7 参数处理机制修改
2021/03/09 PHP
Javascript实现滑块滑动改变值的实现代码
2013/04/12 Javascript
jquery库或JS文件在eclipse下报错问题解决方法
2014/04/17 Javascript
js文字横向滚动特效
2015/11/11 Javascript
微信小程序 icon组件详细及实例代码
2016/10/25 Javascript
JS实现颜色梯度与渐变效果完整实例
2016/12/30 Javascript
angularjs实现下拉列表的选中事件示例
2017/03/03 Javascript
DataTables添加额外的查询参数和删除columns等无用参数实例
2017/07/04 Javascript
js实现简单模态框实例
2018/11/16 Javascript
[28:57]EG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/16 DOTA
[39:53]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第一场 11.19
2020/11/19 DOTA
在Python中操作字符串之startswith()方法的使用
2015/05/20 Python
在Django框架中伪造捕捉到的URLconf值的方法
2015/07/18 Python
python遍历 truple list dictionary的几种方法总结
2016/09/11 Python
python对html过滤处理的方法
2018/10/21 Python
使用Python-OpenCV向图片添加噪声的实现(高斯噪声、椒盐噪声)
2019/05/28 Python
什么是python的函数体
2020/06/19 Python
Html5 Geolocation获取地理位置信息实例
2016/12/09 HTML / CSS
New Era英国官网:美国棒球帽品牌
2018/03/21 全球购物
泰国Robinson百货官网:购买知名品牌的商品
2020/02/08 全球购物
应届生求职信写作技巧
2013/10/24 职场文书
护理专业毕业生推荐信
2013/10/31 职场文书
简短的公司员工自我评价分享
2013/11/13 职场文书
预备党员思想汇报范文
2014/01/11 职场文书
优秀部门获奖感言
2014/02/14 职场文书
产品包装策划方案
2014/05/18 职场文书
经营管理策划方案
2014/05/22 职场文书
2014年助理工程师工作总结
2014/11/14 职场文书
工作建议书范文
2019/07/08 职场文书
关于食品安全的演讲稿范文(三篇)
2019/10/21 职场文书