1、$().bind("click", function() {...........});也可以寫成 $().click(function() {..........});
2、$().bind("mouseover", function() {...........})
.bind("mouseout", function() {...........});
也可以寫成
$().mouseover(function() {...........})
.mouseout( function() {...........});
寫成第二種方式更簡單，
3、樣例：實現點擊“標題”，顯示或隱藏內容；或者鼠標滑過顯示或隱藏內容
4、源碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>綁定事件練習</title>
<script src="scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
// 帶有bind的寫法
$("#outSet h5.head").bind("click", function() {
// 獲取要顯示與隱藏的內容
var $showOrHideContent = $(this).next();
// 判斷需要顯示與隱藏的內容是否存在
if ($showOrHideContent.is(":visible")) {
$showOrHideContent.hide();
} else {
$showOrHideContent.show();
}
});
// 另一種簡寫方式
$("#outSet h5.head").click(function() {
// 獲取要顯示與隱藏的內容
var $showOrHideContent = $(this).next();
if ($showOrHideContent.is(":visible")) {
$showOrHideContent.hide();
} else {
$showOrHideContent.show();
}
});
// 帶有bind的寫法
$("#outSet h5.head").bind("mouseover", function() {
$(this).next().show();
}).bind("mouseout", function() {
$(this).next().hide();
});
// 另一種簡寫方式
$("#outSet h5.head").mouseover(function() {
$(this).next().show();
}).mouseout(function() {
$(this).next().hide();
});
})
</script>
<style type="text/css">
*{margin:0;padding:0;}
#outSet { width: 300px; border: 1px solid #0050D0;margin:50px auto; }
.head { height:24px;line-height:24px;text-indent:10px;background: #96E555; cursor: pointer;width:100%; }
.content { padding: 10px; text-indent:24px; border-top: 1px solid #0050D0;display:block;display:none; }
</style>
</head>
<body>
<div id="outSet">
<h5 class="head">綁定事件，顯示與隱藏的寫法</h5>
<div class="content">
君不見黃河之水天上來，奔流到海不復回。
君不見高堂明鏡悲白髮，朝如青絲暮成雪。
人生得意須盡歡，莫使金樽空對月。
天生我材必有用，千金散盡還復來。
烹羊宰牛且爲樂，會須一飲三百杯。
岑夫子，丹丘生，將進酒，杯莫停。
與君歌一曲，請君爲我側耳聽。
鐘鼓饌玉不足貴，但願長醉不復醒。
古來聖賢皆寂寞，惟有飲者留其名。
陳王昔時宴平樂，斗酒十千恣歡謔。
主人何爲言少錢，徑須沽取對君酌。
五花馬，千金裘，
呼兒將出換美酒，與爾同銷萬古愁。
</div>
</div>
</body>
</html>