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的$和其它JS发生冲突的快速解决方法
Jan 24 Javascript
JavaScript函数使用的基本教程
Jun 04 Javascript
学习jQuey中的return false
Dec 18 Javascript
JavaScript String 对象常用方法详解
May 13 Javascript
必备的JS调试技巧汇总
Jul 20 Javascript
JS使用正则截取两个字符串之间的字符串实现方法详解
Jan 06 Javascript
详解Webpack实战之构建 Electron 应用
Dec 25 Javascript
原生JS实现多个小球碰撞反弹效果示例
Jan 31 Javascript
Vue.js点击切换按钮改变内容的实例讲解
Aug 22 Javascript
javascript实现动态时钟的启动和停止
Jul 29 Javascript
借助云开发实现小程序短信验证码的发送
Jan 06 Javascript
vue Element-ui表格实现树形结构表格
Jun 07 Vue.js
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
Ext.data.PagingMemoryProxy分页一次性读取数据的实现代码
2010/04/07 PHP
深入理解php的MySQL连接类
2013/06/07 PHP
PHP+jQuery+Ajax实现用户登录与退出
2015/04/27 PHP
PHP搭建大文件切割分块上传功能示例
2017/01/04 PHP
PHP面向对象多态性实现方法简单示例
2017/09/27 PHP
jquery keypress,keyup,onpropertychange键盘事件
2010/06/25 Javascript
jquery库或JS文件在eclipse下报错问题解决方法
2014/04/17 Javascript
JavaScript中的迭代器和生成器详解
2014/10/29 Javascript
javascript实现window.print()去除页眉页脚
2014/12/30 Javascript
AngularJS基础知识笔记之表格
2015/05/10 Javascript
使用postMesssage()实现iframe跨域页面间的信息传递
2016/03/29 Javascript
JS模拟bootstrap下拉菜单效果实例
2016/06/17 Javascript
AngularJs Dependency Injection(DI,依赖注入)
2016/09/02 Javascript
vue-cli项目中怎么使用mock数据
2017/09/27 Javascript
微信小程序实现获取自己所处位置的经纬度坐标功能示例
2017/11/30 Javascript
Vue文件配置全局变量的实例
2018/09/06 Javascript
javascript实现手动点赞效果
2019/04/09 Javascript
vue全局自定义指令-元素拖拽的实现代码
2019/04/14 Javascript
vue实现登录页面的验证码以及验证过程解析(面向新手)
2019/08/02 Javascript
python中kmeans聚类实现代码
2018/02/23 Python
python3.4 将16进制转成字符串的实例
2019/06/12 Python
pandas读取CSV文件时查看修改各列的数据类型格式
2019/07/07 Python
使用Python实现图像标记点的坐标输出功能
2019/08/14 Python
在pandas中遍历DataFrame行的实现方法
2019/10/23 Python
Python爬虫中Selenium实现文件上传
2020/12/04 Python
vue实现倒计时功能
2021/03/24 Vue.js
毕业生在校学习的自我评价分享
2013/10/08 职场文书
个人简历自我评价八例
2013/10/31 职场文书
保密工作承诺书
2014/08/29 职场文书
工资收入证明样本(5篇)
2014/09/16 职场文书
英语复习计划
2015/01/19 职场文书
2015年初中生自我评价范文
2015/03/03 职场文书
比赛主持人开场白
2015/05/29 职场文书
家长对孩子的寒假评语
2015/10/09 职场文书
Python深度学习之Pytorch初步使用
2021/05/20 Python
vue中data里面的数据相互使用方式
2022/06/05 Vue.js