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 仿QQ校友的DIV模拟窗口效果源码
Mar 24 Javascript
js实现的折叠导航示例
Nov 29 Javascript
JavaScript判断textarea值是否为空并给出相应提示
Sep 04 Javascript
iframe里面的元素触发父窗口元素事件的jquery代码
Oct 19 Javascript
jquery控制页面部分刷新的方法
Jun 24 Javascript
简单实现bootstrap导航效果
Feb 07 Javascript
React Native 图片查看组件的方法
Mar 01 Javascript
vue.js中实现登录控制的方法示例
Apr 23 Javascript
vue 中url 链接左边的小图标更改问题
Dec 30 Javascript
解决qrcode.js生成二维码时必须定义一个空div的问题
Jul 09 Javascript
javascript实现时间日期的格式化的方法汇总
Aug 06 Javascript
JavaScript实现拖拽和缩放效果
Aug 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
让你的网站首页自动选择语言转跳
2006/12/06 PHP
PHP去除数组中重复的元素并按键名排序函数
2008/08/18 PHP
php gzip压缩输出的实现方法
2013/04/27 PHP
php合并js请求的例子
2013/11/01 PHP
javascript 面向对象编程基础 多态
2009/08/21 Javascript
jQuery Ajax使用 全解析
2010/12/15 Javascript
网页前端优化之滚动延时加载图片示例
2013/07/13 Javascript
两种不同的方法实现js对checkbox进行全选和反选
2014/05/13 Javascript
jQuery控制网页打印指定区域的方法
2015/04/07 Javascript
AngularJs bootstrap搭载前台框架——js控制部分
2016/09/01 Javascript
使用Curl命令查看请求响应时间方法
2016/11/04 Javascript
JavaScript获取select中text值的方法
2017/02/13 Javascript
Bootstrap table使用方法总结
2017/05/10 Javascript
vue2.0中vue-cli实现全选、单选计算总价格的实例代码
2017/07/18 Javascript
Vue项目中ESlint规范示例代码
2019/07/04 Javascript
vue+elementUI组件table实现前端分页功能
2020/11/15 Javascript
vue实现div可拖动位置也可改变盒子大小的原理
2020/09/16 Javascript
Nuxt.js nuxt-link与router-link的区别说明
2020/11/06 Javascript
[04:19]完美世界携手游戏风云打造 卡尔工作室模型介绍篇
2013/04/24 DOTA
[02:23]2014DOTA2国际邀请赛中国战队回顾
2014/08/01 DOTA
python 多线程应用介绍
2012/12/19 Python
5个很好的Python面试题问题答案及分析
2018/01/19 Python
pycharm 将django中多个app放到同个文件夹apps的处理方法
2018/05/30 Python
在Python中实现替换字符串中的子串的示例
2018/10/31 Python
Python自定义函数计算给定日期是该年第几天的方法示例
2019/05/30 Python
python图形开发GUI库wxpython使用方法详解
2020/02/14 Python
python 如何使用find和find_all爬虫、找文本的实现
2020/10/16 Python
如何用canvas实现在线签名的示例代码
2018/07/10 HTML / CSS
Under Armour安德玛英国官网:美国高端运动科技品牌
2018/09/17 全球购物
COSETTE官网:奢华,每天
2020/03/22 全球购物
消防工作实施方案
2014/06/09 职场文书
解放思想大讨论活动心得体会
2014/09/11 职场文书
行政工作试用期自我评价
2014/09/14 职场文书
个人廉洁自律总结
2015/03/06 职场文书
单位计划生育责任书
2015/05/09 职场文书
xhunter1.sys可以删除嘛? win11提示xhunter1.sys驱动不兼容解决办法
2022/09/23 数码科技