jQuery事件
一、頁面未加載執(zhí)行失敗
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>頁面未加載執(zhí)行失敗</title>
<script type="text/javascript">
document.getElementById("panel").onclick = function() {
alert("元素已經(jīng)加載完畢 !");
}
/*
執(zhí)行錯誤，為什么葫隙？
因為dom還未加載完畢。
*/
</script>
</head>
<body>
<div id="panel">click me.</div>
</body>
解決：
<!--解決辦法：
方式一：將JS代碼移到需要操作的html代碼后面躏仇，一般建議放到body的外面
方式二：將JS代碼放到一個頁面加載函數(shù)中去-->
<body>
<div id="panel">click me.</div>
<script type="text/javascript">
document.getElementById("panel").onclick = function() {
alert("元素已經(jīng)加載完畢 !");
}
/*正確執(zhí)行*/
</script>
</body>
二恋脚、事件綁定
1.點擊展開：
<title>點擊展開</title>
<link rel="stylesheet" type="text/css" href="../../../css/style.css" />
<script src="../../../js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#panel h5.head").bind("click", function() {
var $content = $(this).next();
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>
2.鼠標劃過：
<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 src="../../../js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$(".head").mouseover(function() {
$(this).next().show();
}).mouseout(function() {
$(this).next().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>
三犹褒、移除事件
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>事件移除</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font-size: 13px;
line-height: 130%;
padding: 60px;
}
p {
width: 200px;
background: #888;
color: white;
height: 16px;
}
</style>
<script src="../../../js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#btn').bind("click", function() {
$('#test').append("<p>我的綁定函數(shù)1</p>");
});
$('#delAll').click(function() {
$('#btn').unbind("click");
});
})
</script>
</head>
<body>
<button id="btn">點擊我</button>
<div id="test"></div>
<button id="delAll">刪除所有事件</button>
</body>
四抵窒、合成事件
1、合成事件hover：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>合成事件hover</title>
<link rel="stylesheet" type="text/css" href="../../../css/style.css" />
<script src="../../../js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$(".head").hover(function() {
$(this).next().show();
}, function() {
$(this).next().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>
2瘾杭、合成事件toggle
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>合成事件toggle</title>
<link rel="stylesheet" type="text/css" href="../../../css/style.css" />
<script src="../../../js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$(".head").toggle(function() {
$(this).next().hide();
}, function() {
$(this).next().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>
