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 相关文章推荐
不错的新闻标题颜色效果
Dec 10 Javascript
在chrome中window.onload事件的一些问题
Mar 01 Javascript
禁止你的左键复制实用技巧
Jan 04 Javascript
jquery实现图片左右间隔滚动特效(可自动播放)
May 08 Javascript
关于jQuery中.attr()和.prop()的问题探讨
Sep 06 Javascript
JS实现带缓冲效果打开、关闭、移动一个层的方法
May 09 Javascript
Javascript通过overflow控制列表闭合与展开的方法
May 15 Javascript
jQuery表单事件实例代码分享
Aug 18 Javascript
微信小程序 如何引入外部字体库iconfont的图标
Jan 31 Javascript
详解create-react-app 自定义 eslint 配置
Jun 07 Javascript
VUE.CLI4.0配置多页面入口的实现
Nov 25 Javascript
vuex中store存储store.commit和store.dispatch的用法
Jul 24 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类Class的概念
2012/06/14 PHP
PHP+javascript制作带提示的验证码源码分享
2014/05/28 PHP
PHP中变量引用与变量销毁机制分析
2014/11/15 PHP
php数据结构之顺序链表与链式线性表示例
2018/01/22 PHP
PHP PDOStatement::bindValue讲解
2019/01/30 PHP
json格式化/压缩工具 Chrome插件扩展版
2010/05/25 Javascript
firefox事件处理之自动查找event的函数(用于onclick=foo())
2010/08/05 Javascript
php+js实现倒计时功能
2014/06/02 Javascript
JavaScript中用sort()方法对数组元素进行排序的操作
2015/06/09 Javascript
详解nodejs微信公众号开发——2.自动回复
2017/04/10 NodeJs
nodejs实现爬取网站图片功能
2017/12/14 NodeJs
JQuery判断radio单选框是否选中并获取值的方法
2019/01/17 jQuery
详解element-ui级联菜单(城市三级联动菜单)和回显问题
2019/10/02 Javascript
微信浏览器下拉黑边解决方案 wScroollFix
2020/01/21 Javascript
Python搭建HTTP服务器和FTP服务器
2017/03/09 Python
Python3中的列表生成式、生成器与迭代器实例详解
2018/06/11 Python
python程序封装为win32服务的方法
2021/03/07 Python
python的concat等多种用法详解
2018/11/28 Python
500行Python代码打造刷脸考勤系统
2019/06/03 Python
python3实现微型的web服务器
2019/09/03 Python
Python 如何创建一个线程池
2020/07/28 Python
用Python制作mini翻译器的实现示例
2020/08/17 Python
如何从csv文件构建Tensorflow的数据集
2020/09/21 Python
python向xls写入数据(包括合并,边框,对齐,列宽)
2021/02/02 Python
CSS3制作精致的照片墙特效
2016/06/07 HTML / CSS
DC Shoes官网:美国滑板鞋和服饰品牌
2017/09/03 全球购物
大唐电信科技股份有限公司java工程师面试经历
2016/12/09 面试题
幼儿园教师教学反思
2014/02/06 职场文书
农民工工资发放承诺书
2014/03/31 职场文书
安全责任书模板
2014/07/22 职场文书
群众路线四风自我剖析材料
2014/10/08 职场文书
大学生简历自我评价2015
2015/03/03 职场文书
2016年毕业实习心得体会范文
2015/10/09 职场文书
干部外出学习心得体会
2016/01/18 职场文书
Java Lambda表达式常用的函数式接口
2022/04/07 Java/Android
MySQL深分页问题解决思路
2022/12/24 MySQL