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 confirm()方法的使用方法实例
Jul 13 Javascript
js实现日期级联效果
Jan 23 Javascript
JavaScript设计模式之单例模式实例
Sep 24 Javascript
jQuery源码分析之Callbacks详解
Mar 13 Javascript
javascript实现设置、获取和删除Cookie的方法
Jun 01 Javascript
js代码验证手机号码和电话号码是否合法
Jul 30 Javascript
JS+CSS实现另类带提示效果的竖向导航菜单
Oct 15 Javascript
Jquery左右滑动插件之实现超级炫酷动画效果附源码下载
Dec 02 Javascript
原生JS实现圣旨卷轴展开效果
Mar 06 Javascript
详解基于webpack和vue.js搭建开发环境
Apr 05 Javascript
Vue实现active点击切换方法
Mar 16 Javascript
JS数组及对象遍历方法代码汇总
Jun 16 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微信公众号开发之图片回复
2018/10/20 PHP
一步一步制作jquery插件Tabs实现过程
2010/07/06 Javascript
jQuery动态显示和隐藏datagrid中的某一列的方法
2013/12/11 Javascript
IE6中链接A的href为javascript协议时不在当前页面跳转
2014/06/05 Javascript
JavaScript中遍历对象的property的3种方法介绍
2014/12/30 Javascript
jQuery trigger()方法用法介绍
2015/01/13 Javascript
jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
2015/08/26 Javascript
JS 终止执行的实现方法
2016/11/24 Javascript
多种方式实现js图片预览
2016/12/12 Javascript
EasyUI学习之Combobox下拉列表(1)
2016/12/29 Javascript
JS实现页面打印功能
2017/03/16 Javascript
JS实现css hover操作的方法示例
2017/04/07 Javascript
JQuery EasyUI 结合ztrIee的后台页面开发实例
2017/09/01 jQuery
小程序自定义组件实现城市选择功能
2018/07/18 Javascript
vue+高德地图写地图选址组件的方法
2019/05/18 Javascript
node.js使用http模块创建服务器和客户端完整示例
2020/02/10 Javascript
ES6函数实现排它两种写法解析
2020/05/13 Javascript
python实现监控linux性能及进程消耗性能的方法
2014/07/25 Python
Python获取CPU、内存使用率以及网络使用状态代码
2018/02/08 Python
使用Django和Python创建Json response的方法
2018/03/26 Python
python的pandas工具包,保存.csv文件时不要表头的实例
2018/06/14 Python
对Python2与Python3中__bool__方法的差异详解
2018/11/01 Python
Python 运行.py文件和交互式运行代码的区别详解
2019/07/02 Python
Python字符串处理的8招秘籍(小结)
2019/08/13 Python
kafka-python 获取topic lag值方式
2019/12/23 Python
基于python 取余问题(%)详解
2020/06/03 Python
CSS3等相关属性制作分页导航实现代码
2012/12/24 HTML / CSS
用css3制作纸张效果(外翻卷角)
2013/02/01 HTML / CSS
int和Integer有什么区别
2013/05/25 面试题
学校募捐倡议书
2014/05/14 职场文书
文明班级申报材料
2014/12/24 职场文书
涪陵白鹤梁导游词
2015/02/09 职场文书
家长高考寄语
2015/02/27 职场文书
使用php的mail()函数实现发送邮件功能
2021/06/03 PHP
简单且有用的Python数据分析和机器学习代码
2021/07/02 Python
Python 使用 Frame tkraise() 方法在 Tkinter 应用程序中的Frame之间切换
2022/04/24 Python