jQuery事件綁定用法詳解

2024-05-06 15:46:11

字體：大中小

來源：轉載

供稿：網友

JavaScript在瀏覽器通常都是以單線程模式操作，當我們頁面加載后，頁面上的JavaScript代碼都執行完畢，只能依賴觸發器進行操作，感興趣的話就隨錯新技術頻道小編一起來了解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>

效果圖如下：