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 相关文章推荐
Jquery css函数用法(判断标签是否拥有某属性)
May 28 Javascript
jQuery事件用法实例汇总
Aug 29 Javascript
JavaScript lastIndexOf方法入门实例(计算指定字符在字符串中最后一次出现的位置)
Oct 17 Javascript
AngularJS入门心得之directive和controller通信过程
Jan 25 Javascript
AngularJS 使用 UI Router 实现表单向导
Jan 29 Javascript
JavaScript动态生成二维码图片
Apr 20 Javascript
详解node.js搭建代理服务器请求数据
Apr 08 Javascript
微信小程序实现tab和swiper切换结合效果
Jul 17 Javascript
React-router4路由监听的实现
Aug 07 Javascript
vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新
May 14 Javascript
微信小程序收货地址API兼容低版本解决方法
May 18 Javascript
手写实现JS中的new
Nov 07 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 5.0对象模型深度探索之对象复制
2008/03/27 PHP
php学习之变量的使用
2011/05/29 PHP
ThinkPHP的截取字符串函数无法显示省略号的解决方法
2014/06/25 PHP
PHP基于php_imagick_st-Q8.dll实现JPG合成GIF图片的方法
2014/07/11 PHP
PHP哈希表实现算法原理解析
2020/12/11 PHP
jQuery 浮动广告实现代码
2008/12/25 Javascript
javascript操作cookie_获取与修改代码
2009/05/21 Javascript
jquery中获得$.ajax()事件返回的值并添加事件的方法
2010/04/15 Javascript
javascript解决innerText浏览器兼容问题思路代码
2013/05/17 Javascript
JavaScript获取当前页面上的指定对象示例代码
2014/02/28 Javascript
jquery中ajax函数执行顺序问题之如何设置同步
2014/02/28 Javascript
JS获取随机数和时间转换的简单实例
2016/07/10 Javascript
javascript简写常用的12个技巧(可以大大减少你的js代码量)
2020/03/28 Javascript
使用live-server快速搭建本地服务器+自动刷新的方法
2018/03/09 Javascript
Angular实现模版驱动表单的自定义校验功能(密码确认为例)
2018/05/17 Javascript
JS事件绑定的常用方式实例总结
2019/03/02 Javascript
vue实现简单的日历效果
2020/09/24 Javascript
[02:04]2018DOTA2亚洲邀请赛Secret赛前采访
2018/04/03 DOTA
python从入门到精通(DAY 3)
2015/12/20 Python
asyncio 的 coroutine对象 与 Future对象使用指南
2016/09/11 Python
Python程序退出方式小结
2017/12/09 Python
教你使用python实现微信每天给女朋友说晚安
2018/03/23 Python
《与孩子一起学编程》python自测题
2018/05/27 Python
Python常用库大全及简要说明
2020/01/17 Python
python使用opencv resize图像不进行插值的操作
2020/07/05 Python
澳大利亚领先的在线葡萄酒零售商:Get Wines Direct
2018/03/27 全球购物
耐克亚太地区:Nike APAC
2019/12/07 全球购物
应用数学自荐书范文
2013/11/24 职场文书
行政办公员自我评价分享
2013/12/14 职场文书
物理力学求职信
2014/02/18 职场文书
教研处工作方案
2014/05/26 职场文书
护理专科学生自荐书
2014/07/05 职场文书
退学证明范本3篇
2014/10/29 职场文书
给校长的建议书作文400字
2015/09/14 职场文书
PHP遍历数组的6种方式总结
2021/11/17 PHP
windows安装 redis 6.2.6最新步骤详解
2022/04/26 Redis