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>

效果圖如下：