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系列(2) 揭秘命名函数表达式
Jan 15 Javascript
javascript/jquery获取地址栏url参数的方法
Mar 05 Javascript
jquery实现预览提交的表单代码分享
May 21 Javascript
Javascript单例模式的介绍和实例
Oct 08 Javascript
JS日程管理插件FullCalendar简单实例
Feb 07 Javascript
AngularJS使用拦截器实现的loading功能完整实例
May 17 Javascript
fetch 使用及如何接收JS传值
Nov 11 Javascript
详解js正则表达式验证时间格式xxxx-xx-xx形式
Feb 09 Javascript
深入理解Angularjs 脏值检测
Oct 12 Javascript
解决Vue调用springboot接口403跨域问题
Sep 02 Javascript
在Vue 中获取下拉框的文本及选项值操作
Aug 13 Javascript
关于JavaScript 中 if包含逗号表达式
Nov 27 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
色色整理的PHP面试题集锦
2012/03/08 PHP
jquery下组织javascript代码(js函数化)
2010/08/25 Javascript
javascript textarea光标定位方法(兼容IE和FF)
2011/03/12 Javascript
JavaScript中实现PHP的打乱数组函数shuffle实例
2014/10/11 Javascript
node.js中的forEach()是同步还是异步呢
2015/01/29 Javascript
javascript获取文档坐标和视口坐标
2015/05/26 Javascript
HTML5使用DeviceOrientation实现摇一摇功能
2015/06/05 Javascript
JavaScript实现的多种鼠标拖放效果
2015/11/03 Javascript
Bootstrap4一次重大更新 几乎涉及每行代码
2016/05/16 Javascript
js仿微博动态栏功能
2017/02/22 Javascript
Javascript实现找不同色块的游戏
2017/07/17 Javascript
浅谈node模块与npm包管理工具
2018/01/03 Javascript
JavaScript中为事件指定处理程序的五种方式分析
2018/07/27 Javascript
详解ES6 Fetch API HTTP请求实用指南
2018/11/14 Javascript
详解在Javascript中进行面向切面编程
2019/04/28 Javascript
Vue执行方法,方法获取data值,设置data值,方法传值操作
2020/08/05 Javascript
[02:40]DOTA2超级联赛专访430 从小就爱玩对抗性游戏
2013/06/18 DOTA
[01:04:01]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第一场
2014/05/24 DOTA
[03:37]2014DOTA2国际邀请赛 主赛事第一日胜者组TOPPLAY
2014/07/19 DOTA
对python文件读写的缓冲行为详解
2019/02/13 Python
python3 pygame实现接小球游戏
2019/05/14 Python
关于Python 的简单栅格图像边界提取方法
2019/07/05 Python
Python实现新型冠状病毒传播模型及预测代码实例
2020/02/05 Python
TFRecord文件查看包含的所有Features代码
2020/02/17 Python
Spring http服务远程调用实现过程解析
2020/06/11 Python
HTML5对比HTML4的主要改变和改进总结
2016/05/27 HTML / CSS
AmazeUI折叠式卡片布局,整合内容列表、表格组件实现
2020/08/20 HTML / CSS
雅诗兰黛香港官网:Estee Lauder香港
2017/09/26 全球购物
伊莱克斯(Electrolux)俄罗斯网上商店:瑞典家用电器品牌
2021/01/23 全球购物
建筑工程技术应届生求职信
2013/11/17 职场文书
学生安全责任书模板
2014/07/25 职场文书
2014年银行柜员工作总结
2014/11/12 职场文书
先进教育工作者事迹材料
2014/12/23 职场文书
暑期辅导班宣传单
2015/07/14 职场文书
幽默导游词应该怎么写?
2019/08/26 职场文书
SQL Server 中的事务介绍
2022/05/20 SQL Server