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 相关文章推荐
javascript 正则替换 replace(regExp, function)用法
May 22 Javascript
JavaScript游戏之是男人就下100层代码打包
Nov 08 Javascript
给Flash加一个超链接(推荐使用透明层)兼容主流浏览器
Jun 09 Javascript
javascript 按键事件(兼容各浏览器)
Dec 20 Javascript
JavaScript实现的简单幂函数实例
Apr 17 Javascript
jQuery固定元素插件scrolltofixed使用指南
Apr 21 Javascript
Angularjs 手写日历的实现代码(不用插件)
Oct 18 Javascript
phantomjs导出html到pdf的方法总结
Oct 19 Javascript
vue 项目接口管理的实现
Jan 17 Javascript
微信小程序 拍照或从相册选取图片上传代码实例
Aug 28 Javascript
微信小程序全局变量的设置、使用、修改过程解析
Sep 24 Javascript
node.js中npm包管理工具用法分析
Feb 14 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
微信公众号点击菜单即可打开并登录微站的实现方法
2014/11/14 PHP
php实现将任意进制数转换成10进制的方法
2015/04/17 PHP
基于PHP给大家讲解防刷票的一些技巧
2015/11/18 PHP
JQuery 构建客户/服务分离的链接模型中Table中的排序分析
2010/01/22 Javascript
juqery 学习之三 选择器 可见性 元素属性
2010/11/25 Javascript
JavaScript学习笔记之内置对象
2015/01/22 Javascript
jQuery短信验证倒计时功能实现方法详解
2016/05/25 Javascript
浅谈js继承的实现及公有、私有、静态方法的书写
2016/10/28 Javascript
js时间戳和c#时间戳互转方法(推荐)
2017/02/15 Javascript
微信小程序 中wx.chooseAddress(OBJECT)实例详解
2017/03/31 Javascript
完美解决浏览器跨域的几种方法(汇总)
2017/05/08 Javascript
一个可复用的vue分页组件
2017/05/15 Javascript
详解react-webpack2-热模块替换[HMR]
2017/08/03 Javascript
AngularJS 仿微信图片手势缩放的实例
2017/09/28 Javascript
vue 父组件调用子组件方法及事件
2018/03/29 Javascript
jQuery AJAX 方法success()后台传来的4种数据详解
2018/08/08 jQuery
Vue中插入HTML代码的方法
2018/09/21 Javascript
微信小程序自定义导航栏
2018/12/31 Javascript
vue2.0 实现富文本编辑器功能
2019/05/26 Javascript
VUE路由动态加载实例代码讲解
2019/08/26 Javascript
layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法
2019/09/25 Javascript
JS中比较两个Object数组是否相等方法实例
2019/11/11 Javascript
Python中的自省(反射)详解
2015/06/02 Python
解读Django框架中的低层次缓存API
2015/07/24 Python
使用python serial 获取所有的串口名称的实例
2019/07/02 Python
Pytorch 实现focal_loss 多类别和二分类示例
2020/01/14 Python
python 牛顿法实现逻辑回归(Logistic Regression)
2020/10/15 Python
python复合条件下的字典排序
2020/12/18 Python
HTML5之SVG 2D入门12—SVG DOM及DOM操作介绍
2013/01/30 HTML / CSS
HTML5中的强制下载属性download使用实例解析
2016/05/12 HTML / CSS
俄罗斯Sportmarket体育在线商店:用于旅游和户外活动
2019/11/12 全球购物
在阿联酋购买翻新手机和平板电脑:Teckzu
2021/02/12 全球购物
上班上网检讨书
2014/01/29 职场文书
进步之星获奖感言
2014/02/22 职场文书
《将心比心》教学反思
2014/04/08 职场文书
毕业生简历自我评价范文
2014/04/09 职场文书