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 相关文章推荐
载入进度条 效果
Jul 08 Javascript
合并table相同单元格的jquery插件分享(很精简)
Jun 20 Javascript
jQuery1.6 类型判断实现代码
Sep 01 Javascript
AngularJS模块管理问题的非常规处理方法
Apr 29 Javascript
jquery自定义表格样式
Nov 23 Javascript
javascript bom是什么及bom和dom的区别
Nov 26 Javascript
深入浅析JavaScript中with语句的理解
May 12 Javascript
JS实现仿饿了么在浏览器标签页失去焦点时网页Title改变
Jun 01 Javascript
JavaScript递归算法生成树形菜单
Aug 15 Javascript
webpack4.x开发环境配置详解
Aug 04 Javascript
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
Dec 09 Javascript
微信二次分享报错invalid signature问题及解决方法
Apr 01 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
phpmyadmin安装时提示:Warning: require_once(./libraries/common.inc.php)错误解决办法
2011/08/18 PHP
解析php中eclipse 用空格替换 tab键
2013/06/24 PHP
php使用exec shell命令注入的方法讲解
2013/11/12 PHP
ThinkPHP3.1新特性之对页面压缩输出的支持
2014/06/19 PHP
Linux系统下php获得系统分区信息的方法
2015/03/30 PHP
Symfony2安装的方法(2种方法)
2016/02/04 PHP
php实现批量上传数据到数据库(.csv格式)的案例
2017/06/18 PHP
javascript向flash swf文件传递参数值注意细节
2012/12/11 Javascript
json属性名为什么要双引号(个人猜测)
2014/07/31 Javascript
js实现横向百叶窗效果网页切换动画效果的方法
2015/03/02 Javascript
JS+CSS实现鼠标滑过时动态翻滚的导航条效果
2015/09/24 Javascript
基于Vue2x的图片预览插件的示例代码
2018/05/14 Javascript
Vue Cli 3项目使用融云IM实现聊天功能的方法
2019/04/19 Javascript
解决微信浏览器缓存站点入口文件(IIS部署Vue项目)
2019/06/17 Javascript
微信小程序录音实现功能并上传(使用node解析接收)
2020/02/26 Javascript
[29:23]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第一场1
2014/05/23 DOTA
python通过exifread模块获得图片exif信息的方法
2015/03/16 Python
Python的装饰器模式与面向切面编程详解
2015/06/21 Python
python互斥锁、加锁、同步机制、异步通信知识总结
2018/02/11 Python
在cmd中运行.py文件: python的操作步骤
2018/05/12 Python
python3实现磁盘空间监控
2018/06/21 Python
python对绑定事件的鼠标、按键的判断实例
2019/07/17 Python
Python 函数用法简单示例【定义、参数、返回值、函数嵌套】
2019/09/20 Python
Python with关键字,上下文管理器,@contextmanager文件操作示例
2019/10/17 Python
python重要函数eval多种用法解析
2020/01/14 Python
python名片管理系统开发
2020/06/18 Python
HTML5探秘:用requestAnimationFrame优化Web动画
2018/06/03 HTML / CSS
2014年会演讲稿范文
2014/01/06 职场文书
幼儿园教师节活动方案
2014/02/02 职场文书
党员大会主持词
2014/04/02 职场文书
金融系应届毕业生求职信
2014/05/26 职场文书
青奥会口号
2014/06/12 职场文书
医院党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
2015年语文教学工作总结
2015/05/25 职场文书
2015年信息技术教研组工作总结
2015/07/22 职场文书
关于实现中国梦的心得体会
2016/01/05 职场文书