jQuery事件绑定用法详解

2019-11-20 09:02:59

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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>

效果图如下：