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 相关文章推荐
基于jquery的一个OutlookBar类,动态创建导航条
Nov 19 Javascript
js 文本滚动效果的实例代码
Aug 17 Javascript
使用mini-define实现前端代码的模块化管理
Dec 25 Javascript
jQuery实现菜单感应鼠标滑动动画效果的方法
Feb 28 Javascript
JS简单实现浮动窗口效果示例
Sep 07 Javascript
原生Aajax 和jQuery Ajax 写法个人总结
Mar 24 jQuery
JavaScript实现图片拖曳效果
Sep 08 Javascript
微信小程序使用蓝牙小插件
Sep 23 Javascript
在vue中使用vuex,修改state的值示例
Nov 08 Javascript
webpack打包html里面img后src为“[object Module]”问题
Dec 22 Javascript
小程序中设置缓存过期的实现方法
Jan 14 Javascript
微信小程序APP的事件绑定以及传递参数时的冒泡和捕获
Apr 19 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的$_FILES的临时储存文件与回收机制实测过程
2013/07/12 PHP
PHPUnit测试私有属性和方法功能示例
2018/06/12 PHP
js下用eval生成JSON对象
2010/09/17 Javascript
js给selected添加options的方法
2015/05/06 Javascript
基于jQuery仿淘宝产品图片放大镜特效
2020/10/19 Javascript
JavaScript获取当前url根目录(路径)
2016/06/17 Javascript
js显示动态时间的方法详解
2016/08/20 Javascript
JS正则获取HTML元素的方法
2017/03/31 Javascript
vue封装第三方插件并发布到npm的方法
2017/09/25 Javascript
Three.js利用顶点绘制立方体的方法详解
2017/09/27 Javascript
浅谈vue项目优化之页面的按需加载(vue+webpack)
2017/12/11 Javascript
js解决软键盘遮挡输入框的问题分享
2017/12/19 Javascript
解决Vue 通过下表修改数组,页面不渲染的问题
2018/03/08 Javascript
详解Require.js与Sea.js的区别
2018/08/05 Javascript
深入理解基于vue-cli的webpack打包优化实践及探索
2019/10/14 Javascript
微信小程序云函数添加数据到数据库的方法
2020/03/04 Javascript
js 使用ajax设置和获取自定义header信息的方法小结
2020/03/12 Javascript
原生JS实现记忆翻牌游戏
2020/07/31 Javascript
Element InputNumber 计数器的实现示例
2020/08/03 Javascript
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
2020/12/15 Vue.js
Python中用max()方法求最大值的介绍
2015/05/15 Python
解决Python中字符串和数字拼接报错的方法
2016/10/23 Python
Python中函数eval和ast.literal_eval的区别详解
2017/08/10 Python
Python绘制KS曲线的实现方法
2018/08/13 Python
python实现一个简单的ping工具方法
2019/01/31 Python
python实现截取屏幕保存文件,删除N天前截图的例子
2019/08/27 Python
python的flask框架难学吗
2020/07/31 Python
加拿大票务网站:Ticketmaster加拿大
2017/07/17 全球购物
Shopee印度尼西亚:东南亚与台湾市场最大电商平台
2018/06/17 全球购物
微软台湾官方网站:Microsoft台湾
2018/08/15 全球购物
巾帼文明岗申报材料
2014/05/01 职场文书
贸易经济专业自荐书
2014/06/29 职场文书
学历证明范文
2015/06/16 职场文书
OpenCV实现反阈值二值化
2021/11/17 Java/Android
MySQL数据库如何给表设置约束详解
2022/03/13 MySQL
Python OpenCV形态学运算示例详解
2022/04/07 Python