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