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语言本身谈项目实战
Dec 27 Javascript
csdn 博客的css样式 v3
Feb 24 Javascript
JavaScript中继承的一些示例方法与属性参考
Aug 07 Javascript
原生JS可拖动弹窗效果实例代码
Nov 09 Javascript
javascript弹出页面回传值的方法
Jan 28 Javascript
JavaScript中的跨浏览器事件操作的基本方法整理
May 20 Javascript
js基于cookie方式记住返回页面用法示例
May 27 Javascript
使用JavaScriptCore实现OC和JS交互详解
Mar 28 Javascript
JavaScript原型对象、构造函数和实例对象功能与用法详解
Aug 04 Javascript
Vue使用JSEncrypt实现rsa加密及挂载方法
Feb 07 Javascript
解决vue-cli输入命令vue ui没效果的问题
Nov 17 Javascript
JavaScript中10个Reduce常用场景技巧
Jun 21 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最热门的24个php类库汇总
2014/12/18 PHP
PHP使用Redis长连接的方法详解
2018/02/12 PHP
jQuery ajax在GBK编码下表单提交终极解决方案(非二次编码方法)
2010/10/20 Javascript
window.location.href IE下跳转失效的解决方法
2014/03/27 Javascript
js文件包含的几种方式介绍
2014/09/28 Javascript
浅谈Javascript 数组与字典
2015/01/29 Javascript
JavaScript中实现Map的示例代码
2015/09/09 Javascript
Angularjs实现mvvm式的选项卡示例代码
2016/09/08 Javascript
nodejs根据ip数组在百度地图中进行定位
2017/03/06 NodeJs
微信小程序异步API为Promise简化异步编程的操作方法
2018/08/14 Javascript
Electron-vue开发的客户端支付收款工具的实现
2019/05/24 Javascript
纯JS开发baguetteBox.js响应式画廊插件
2020/06/28 Javascript
解决pycharm双击但是无法打开的情况
2020/10/31 Javascript
跟老齐学Python之有容乃大的list(1)
2014/09/14 Python
Python基于twisted实现简单的web服务器
2014/09/29 Python
pandas筛选某列出现编码错误的解决方法
2018/11/07 Python
Django异步任务线程池实现原理
2019/12/17 Python
Pytorch保存模型用于测试和用于继续训练的区别详解
2020/01/10 Python
python读取xml文件方法解析
2020/08/04 Python
纯HTML5+CSS3制作图片旋转
2016/01/12 HTML / CSS
HTML5地理定位_动力节点Java学院整理
2017/07/12 HTML / CSS
阿迪达斯印度官方商城:adidas India
2017/03/26 全球购物
毕业生个人求职的自我评价
2013/10/28 职场文书
出生医学证明样本
2014/01/17 职场文书
十八届三中全会学习方案
2014/02/16 职场文书
《欢乐的泼水节》教学反思
2014/04/22 职场文书
初中学习计划书范文
2014/09/15 职场文书
招标授权委托书样本
2014/09/23 职场文书
慈善募捐倡议书
2015/04/27 职场文书
2019最新校园运动会广播稿!
2019/06/28 职场文书
解决Jupyter-notebook不弹出默认浏览器的问题
2021/03/30 Python
Vue实现下拉加载更多
2021/05/09 Vue.js
忆童年!用Python实现愤怒的小鸟游戏
2021/06/07 Python
缓存替换策略及应用(以Redis、InnoDB为例)
2021/07/25 Redis
win10清理dns缓存
2022/04/19 数码科技
Nginx代理Redis哨兵主从配置的实现
2022/07/15 Servers