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 代码也可以变得优美的实现方法
Jun 22 Javascript
Javascript技术栈中的四种依赖注入详解
Feb 23 Javascript
jQuery实现点击弹出背景变暗遮罩效果实例代码
Jun 24 Javascript
写jQuery插件时的注意点
Feb 20 Javascript
原生js实现吸顶效果
Mar 13 Javascript
关于javascript作用域的常见面试题分享
Jun 18 Javascript
微信小程序实现动态设置页面标题的方法【附源码下载】
Nov 29 Javascript
解决VUE框架 导致绑定事件的阻止冒泡失效问题
Feb 24 Javascript
详解微信小程序支付流程与梳理
Jul 16 Javascript
解决vue项目中遇到 Cannot find module ‘chalk‘ 报错的问题
Nov 05 Javascript
vue前端和Django后端如何查询一定时间段内的数据
Feb 28 Vue.js
html5 录制mp3音频支持采样率和比特率设置
Jul 15 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) static
2006/12/13 PHP
PHP函数常用用法小结
2010/02/08 PHP
深入PHP变量存储的详解
2013/06/13 PHP
ThinkPHP表单自动验证实例
2014/10/13 PHP
php实现数据库的增删改查
2017/02/26 PHP
PHP mkdir创建文件夹实现方法解析
2020/11/13 PHP
用CSS+JS实现的进度条效果效果
2007/06/05 Javascript
js利用与或运算符优先级实现if else条件判断表达式
2010/04/15 Javascript
JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招
2016/03/07 Javascript
onmouseover事件和onmouseout事件全面理解
2016/08/15 Javascript
原生js实现tab选项卡切换
2020/03/23 Javascript
easyui取消表单实时验证,提交时统一验证的简单实例
2016/11/07 Javascript
JavaScript获取短信验证码(周期性)
2016/12/29 Javascript
解析jquery easyui tree异步加载子节点问题
2017/03/08 Javascript
详解Angular CLI + Electron 开发环境搭建
2017/07/20 Javascript
Vee-validate 父组件获取子组件表单校验结果的实例代码
2019/05/20 Javascript
layui多iframe页面控制定时器运行的方法
2019/09/05 Javascript
JS工厂模式开发实践案例分析
2019/10/17 Javascript
[26:21]浴火之凤-TI4世界冠军Newbee战队纪录片
2014/08/07 DOTA
[02:42]决战东方!DOTA2亚洲邀请赛重启荣耀之争
2017/03/17 DOTA
尝试使用Python多线程抓取代理服务器IP地址的示例
2015/11/09 Python
Python登录系统界面实现详解
2019/06/25 Python
Python爬虫库BeautifulSoup的介绍与简单使用实例
2020/01/25 Python
Python2 与Python3的版本区别实例分析
2020/03/30 Python
html5 Canvas画图教程(6)—canvas里画曲线之arcTo方法
2013/01/09 HTML / CSS
iPad和Surface Pro蓝牙键盘:Brydge
2018/11/10 全球购物
高中生学习总结的自我评价范文
2013/10/13 职场文书
建筑实习自我鉴定
2013/10/18 职场文书
推荐信格式范文
2014/05/09 职场文书
责任心演讲稿
2014/05/14 职场文书
企业演讲稿范文大全
2014/05/20 职场文书
汉语言文学毕业求职信
2014/07/17 职场文书
公安纪律作风整顿剖析材料
2014/10/10 职场文书
共产党员批评与自我批评
2014/10/15 职场文书
简历自我评价模板
2015/03/11 职场文书
python基础之类属性和实例属性
2021/10/24 Python