jQuery事件绑定用法详解


Posted in Javascript onSeptember 08, 2016

本文实例讲述了jQuery事件绑定。分享给大家供大家参考,具体如下:

style.css

*{margin:0;padding:0;}
body { font-size: 13px; line-height: 130%; padding: 60px }
#panel { width: 300px; border: 1px solid #0050D0 }
.head { padding: 5px; background: #96E555; cursor: pointer }
.content { padding: 10px; text-indent: 2em; border-top: 1px solid #0050D0;display:block;display:none; }

demo1.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(function(){
  $("#panel h5.head").bind("click",function(){
    $(this).next("div.content").show();
  })
})
</script>
</head>
<body>
<div id="panel">
  <h5 class="head">什么是jQuery?</h5>
  <div class="content">
    jQuery是继Prototype之后又一个优秀的JavaScript库,它是一个由 John Resig 创建于2006年1月的开源项目。
    jQuery凭借简洁的语法和跨平台的兼容性,极大地简化了JavaScript开发人员遍历HTML文档、
    操作DOM、处理事件、执行动画和开发Ajax。
    它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
  </div>
</div>
</body>
</html>

demo2.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(function(){
  $("#panel h5.head").bind("click",function(){
    var $content = $(this).next("div.content");
    if($content.is(":visible")){
      $content.hide();
    }else{
      $content.show();
    }
  })
})
</script>
</head>
<body>
<div id="panel">
  <h5 class="head">什么是jQuery?</h5>
  <div class="content">
    jQuery是继Prototype之后又一个优秀的JavaScript库,它是一个由 John Resig 创建于2006年1月的开源项目。
    jQuery凭借简洁的语法和跨平台的兼容性,极大地简化了JavaScript开发人员遍历HTML文档、
    操作DOM、处理事件、执行动画和开发Ajax。
    它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
  </div>
</div>
</body>
</html>

demo3.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(function(){
  $("#panel h5.head").bind("mouseover",function(){
    $(this).next("div.content").show();
  });
   $("#panel h5.head").bind("mouseout",function(){
     $(this).next("div.content").hide();
  })
})
</script>
</head>
<body>
<div id="panel">
  <h5 class="head">什么是jQuery?</h5>
  <div class="content">
    jQuery是继Prototype之后又一个优秀的JavaScript库,它是一个由 John Resig 创建于2006年1月的开源项目。
    jQuery凭借简洁的语法和跨平台的兼容性,极大地简化了JavaScript开发人员遍历HTML文档、
    操作DOM、处理事件、执行动画和开发Ajax。
    它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
  </div>
</div>
</body>
</html>

demo4.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(function(){
  $("#panel h5.head").mouseover(function(){
    $(this).next("div.content").show();
  });
  $("#panel h5.head").mouseout(function(){
     $(this).next("div.content").hide();
  })
})
</script>
</head>
<body>
<div id="panel">
  <h5 class="head">什么是jQuery?</h5>
  <div class="content">
    jQuery是继Prototype之后又一个优秀的JavaScript库,它是一个由 John Resig 创建于2006年1月的开源项目。
    jQuery凭借简洁的语法和跨平台的兼容性,极大地简化了JavaScript开发人员遍历HTML文档、
    操作DOM、处理事件、执行动画和开发Ajax。
    它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
  </div>
</div>
</body>
</html>

效果图如下:

jQuery事件绑定用法详解

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
原生javascript实现图片轮播效果代码
Sep 03 Javascript
js Html结构转字符串形式显示代码
Nov 15 Javascript
JavaScript 浏览器对象模型BOM使用介绍
Apr 13 Javascript
jquery实现左右滑动菜单效果代码
Aug 27 Javascript
Vue.js动态添加、删除选题的实例代码
Sep 30 Javascript
AngularJS实践之使用NgModelController进行数据绑定
Oct 08 Javascript
node.js文件上传重命名以及移动位置的示例代码
Jan 19 Javascript
vuex操作state对象的实例代码
Apr 25 Javascript
基于js Canvas实现二次贝塞尔曲线
Dec 25 Javascript
js实现无缝滚动双图切换效果
Jul 09 Javascript
通过layer实现可输入的模态框的例子
Sep 27 Javascript
JavaScript如何利用Promise控制并发请求个数
May 14 Javascript
Js操作DOM元素及获取浏览器高宽的简单方法
Sep 08 #Javascript
利用AngularJs实现京东首页轮播图效果
Sep 08 #Javascript
Vue.js每天必学之组件与组件间的通信
Sep 08 #Javascript
JS输出空格的简单实现方法
Sep 08 #Javascript
jQuery文本框得到与失去焦点动态改变样式效果
Sep 08 #Javascript
jQuery动态改变多行文本框高度的方法
Sep 07 #Javascript
jQuery Ajax使用FormData对象上传文件的方法
Sep 07 #Javascript
You might like
ThinkPHP基于PHPExcel导入Excel文件的方法
2014/10/15 PHP
tp5 实现列表数据根据状态排序
2019/10/18 PHP
ie 处理 gif动画 的onload 事件的一个 bug
2007/04/12 Javascript
转换json格式的日期为Javascript对象的函数
2010/07/13 Javascript
jQuery中hover与mouseover和mouseout的区别分析
2015/12/24 Javascript
动态加载js文件简单示例
2016/04/21 Javascript
图文详解JavaScript的原型对象及原型链
2016/08/02 Javascript
BootStrap中Datepicker控件带中文的js文件
2016/08/10 Javascript
AngularJS动态生成div的ID源码解析
2016/08/29 Javascript
JavaScript模仿Pinterest实现图片预加载功能
2016/10/25 Javascript
Node.js中如何合并两个复杂对象详解
2016/12/31 Javascript
Vue2学习笔记之请求数据交互vue-resource
2017/02/23 Javascript
javaScript实现滚动条事件详解
2020/03/24 Javascript
webpack本地开发环境无法用IP访问的解决方法
2018/03/20 Javascript
详解vue 计算属性与方法跟侦听器区别(面试考点)
2018/04/23 Javascript
webpack3里使用uglifyjs压缩js时打包报错的解决
2018/12/13 Javascript
微信小程序授权登录解决方案的代码实例(含未通过授权解决方案)
2019/05/10 Javascript
Vue基础学习之项目整合及优化
2019/06/02 Javascript
后台使用freeMarker和前端使用vue的方法及遇到的问题
2019/06/13 Javascript
Vue商品控件与购物车联动效果的实例代码
2019/07/21 Javascript
使用React-Router实现前端路由鉴权的示例代码
2020/07/26 Javascript
Vue2.x和Vue3.x的双向绑定原理详解
2020/11/05 Javascript
[03:02]2014DOTA2西雅图邀请赛 让队员自己告诉你DK NAVI备战情况
2014/07/08 DOTA
python字符串连接方法分析
2016/04/12 Python
django的settings中设置中文支持的实现
2019/04/28 Python
树莓派与PC端在局域网内运用python实现即时通讯
2019/06/22 Python
python使用装饰器作日志处理的方法
2019/07/11 Python
Python将list元素转存为CSV文件的实现
2020/11/16 Python
CSS3 3D位移translate效果实例介绍
2016/05/03 HTML / CSS
基层干部十八大感言
2014/01/19 职场文书
2014端午节活动策划方案
2014/01/27 职场文书
2014年五四青年节演讲稿范文
2014/04/22 职场文书
读书活动总结范文
2014/04/26 职场文书
单位授权委托书范本
2014/09/26 职场文书
二十年同学聚会感言
2015/07/30 职场文书
浅谈Redis 中的过期删除策略和内存淘汰机制
2022/04/03 Redis