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 this调用规则说明
Mar 08 Javascript
JQuery 返回布尔值Is()条件判断方法代码
May 14 Javascript
JavaScript高级程序设计(第3版)学习笔记5 js语句
Oct 11 Javascript
S2SH整合JQuery+Ajax实现登录验证功能实现代码
Jan 30 Javascript
ajax提交表单实现网页无刷新注册示例
May 08 Javascript
node.js中的buffer.fill方法使用说明
Dec 14 Javascript
AngularJs 60分钟入门基础教程
Apr 03 Javascript
AngularJS实现标签页的两种方式
Sep 05 Javascript
Vue-cli proxyTable 解决开发环境的跨域问题详解
May 18 Javascript
新手快速入门JavaScript装饰者模式与AOP
Jun 24 Javascript
vue实现PC端分辨率适配操作
Aug 03 Javascript
JavaScript实现简单拖拽效果
Sep 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
在MongoDB中模拟Auto Increment的php代码
2011/03/06 PHP
PHP投票系统防刷票判断流程分析
2012/02/04 PHP
php实现的SESSION类
2014/12/02 PHP
php计算税后工资的方法
2015/07/28 PHP
用JQuery实现表格隔行变色和突出显示当前行的代码
2012/02/10 Javascript
JS的replace方法详细介绍
2012/11/09 Javascript
jquery 取子节点及当前节点属性值
2014/07/25 Javascript
node.js中的fs.truncateSync方法使用说明
2014/12/15 Javascript
Nodejs express框架一个工程中同时使用ejs模版和jade模版
2015/12/28 NodeJs
JavaScript高级程序设计(第三版)学习笔记1~5章
2016/03/11 Javascript
javascript仿京东导航左侧分类导航下拉菜单效果
2020/11/25 Javascript
JS简单去除数组中重复项的方法
2016/09/13 Javascript
简单的js表格操作
2016/09/24 Javascript
jQuery实现倒计时重新发送短信验证码功能示例
2017/01/12 Javascript
基于JavaScript实现多级菜单效果
2017/07/25 Javascript
Vue2.0用户权限控制解决方案
2017/11/29 Javascript
详解webpack的文件监听实现(热更新)
2020/09/11 Javascript
spyder常用快捷键(分享)
2017/07/19 Python
Python图形绘制操作之正弦曲线实现方法分析
2017/12/25 Python
分享vim python缩进等一些配置
2018/07/02 Python
Python tkinter label 更新方法
2018/10/11 Python
python pip源配置,pip配置文件存放位置的方法
2019/07/12 Python
python psutil监控进程实例
2019/12/17 Python
JupyterNotebook 输出窗口的显示效果调整方法
2020/04/13 Python
CSS3 实现穿梭星空动画
2020/11/13 HTML / CSS
HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
2014/05/08 HTML / CSS
HTML5中原生的右键菜单创建方法
2016/06/28 HTML / CSS
AmazeUI 缩略图的实现示例
2020/08/18 HTML / CSS
白俄罗斯大卖场:21vek.by
2019/07/25 全球购物
广播电视新闻学专业应届生求职信
2013/10/08 职场文书
公务员年总结的自我评价
2013/10/25 职场文书
省级四好少年事迹材料
2014/01/25 职场文书
自主招生推荐信范文
2014/05/10 职场文书
单位员工收入证明样本
2014/10/09 职场文书
python爬取新闻门户网站的示例
2021/04/25 Python
Win11跳过联网界面创建本地管理账户的3种方法
2022/04/20 数码科技