jQuery事件綁定用法詳解
更新時間：2016年09月08日 09:37:56 作者：onestopweb
這篇文章主要介紹了jQuery事件綁定用法,結合多個實例較為詳細的分析了常見的jQuery事件綁定實現(xiàn)技巧與使用方法,需要的朋友可以參考下
本文實例講述了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之后又一個優(yōu)秀的JavaScript庫，它是一個由 John Resig 創(chuàng)建于2006年1月的開源項目。
jQuery憑借簡潔的語法和跨平臺的兼容性，極大地簡化了JavaScript開發(fā)人員遍歷HTML文檔、
操作DOM、處理事件、執(zhí)行動畫和開發(fā)Ajax。
它獨特而又優(yōu)雅的代碼風格改變了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之后又一個優(yōu)秀的JavaScript庫，它是一個由 John Resig 創(chuàng)建于2006年1月的開源項目。
jQuery憑借簡潔的語法和跨平臺的兼容性，極大地簡化了JavaScript開發(fā)人員遍歷HTML文檔、
操作DOM、處理事件、執(zhí)行動畫和開發(fā)Ajax。
它獨特而又優(yōu)雅的代碼風格改變了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之后又一個優(yōu)秀的JavaScript庫，它是一個由 John Resig 創(chuàng)建于2006年1月的開源項目。
jQuery憑借簡潔的語法和跨平臺的兼容性，極大地簡化了JavaScript開發(fā)人員遍歷HTML文檔、
操作DOM、處理事件、執(zhí)行動畫和開發(fā)Ajax。
它獨特而又優(yōu)雅的代碼風格改變了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之后又一個優(yōu)秀的JavaScript庫，它是一個由 John Resig 創(chuàng)建于2006年1月的開源項目。
jQuery憑借簡潔的語法和跨平臺的兼容性，極大地簡化了JavaScript開發(fā)人員遍歷HTML文檔、
操作DOM、處理事件、執(zhí)行動畫和開發(fā)Ajax。
它獨特而又優(yōu)雅的代碼風格改變了JavaScript程序員的設計思路和編寫程序的方式。
</div>
</div>
</body>
</html>
效果圖如下：
更多關于jQuery相關內容感興趣的讀者可查看本站專題：《jQuery常見事件用法與技巧總結》、《jQuery常用插件及用法總結》、《jQuery操作json數(shù)據技巧匯總》、《jQuery擴展技巧總結》、《jQuery拖拽特效與技巧總結》、《jQuery表格(table)操作技巧匯總》、《jQuery常見經典特效匯總》、《jQuery動畫與特效用法總結》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
您可能感興趣的文章:
- jQuery?事件綁定及取消?bind?live?delegate?on?one區(qū)別解析
- jquery事件綁定方法介紹
- jQuery事件綁定和解綁、事件冒泡與阻止事件冒泡及彈出應用示例
- jQuery實現(xiàn)的事件綁定功能基本示例
- jQuery的三種bind/One/Live/On事件綁定使用方法
- jQuery 全選 全不選 事件綁定的實現(xiàn)代碼
- jQuery事件綁定方法學習總結(推薦)
- jquery移除了live()、die(),新版事件綁定on()、off()的方法
- 關于Jquery中的事件綁定總結
- jquery事件綁定解綁機制源碼解析
- 深入理解jQuery事件綁定
- jQuery事件綁定on()與彈窗實現(xiàn)代碼
- jQuery事件綁定用法詳解(附bind和live的區(qū)別)
- jQuery實現(xiàn)按鈕只點擊一次后就取消點擊事件綁定的方法
- JQuery中DOM事件綁定用法詳解
- jQuery事件綁定on()、bind()與delegate() 方法詳解
- jQuery事件綁定與解除綁定實現(xiàn)方法
- jquery中click等事件綁定及移除的幾種方法小結
相關文章
用jquery實現(xiàn)的模擬QQ郵箱里的收件人選取及其他效果(一)
今天要說的是用jquery的語法和組件dialog及Autocomplete來制作QQ郵箱的發(fā)件人操作功能，認為這個太過簡單的可以離開了。2011-01-01
本篇文章只要是對Jquery實現(xiàn)的一種常用高亮效果示例代碼進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
這篇文章主要介紹了jQuery開發(fā)仿QQ版的音樂播放器，文中示例代碼非常詳細，幫助大家更好的理解和學習，感興趣的朋友可以了解下2020-07-07
jQuery調用AJAX時Get和post公用的亂碼解決方法實例說明
js調用AJAX時Get和post的亂碼解決辦法以前有寫過的但是使用js代碼比較繁瑣，下面與大家分享下使用jQuery該怎么解決，遇到類似情況的朋友可以參考下哈2013-06-06
默認的html復選框控件樣式可定義相當有限，下面就與大家分享下自己編寫的CheckBox控件。喜歡的朋友可以拿去使用2013-11-11
下面小編就為大家?guī)硪黄獙嵱胘query操作表單元素的簡單代碼。小編覺得挺不錯的， 現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
這篇文章主要介紹了jQuery實現(xiàn)彈出帶遮罩層的居中浮動窗口效果,涉及jQuery針對頁面元素的運算與樣式的動態(tài)修改相關技巧,需要的朋友可以參考下2016-09-09
這篇文章主要介紹了BootStrap按鈕標簽及基本樣式的相關資料，基本樣式包括顏色大小方面的知識，對bootstrap按鈕相關知識感興趣的朋友一起看看吧2016-11-11
這篇文章主要針對jQuery頁面刷新問題為大家進行詳細分析，包括局部刷新、全部刷新，感興趣的朋友可以參考一下2016-01-01
支持多文件上傳的jQuery文件上傳插件Uploadify，目前此插件有兩種版本即Flash版本和HTML5版本，2014-06-06