<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery事件-div的顯示隱藏及鼠標的移入移出</title>
<style>
.header{
width:302px;
height:40px;
background:green;
font-size:20px;
margin-bottom: 0px;
}
.content{
width:300px;
border:1px solid #333;
background:#CCC;
display: none;
margin-top:0px;
}
</style>
</head>
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript">
$(function (){
//顯示隱藏
$(".header").click(function (){
var flag = $(".content").is(":hidden");
if(flag){
$(".content").show();
}else{
$(".content").hide();
}
});
/*
//使用bind的綁定事件,跟上上面的效果是一樣的
$(".header").bind("click", function (){
var flag = $(".content").is(":hidden");
if(flag){
$(".content").show();
}else{
$(".content").hide();
}
});
*/
/*
//鼠標的移入移出
$(".header").mouseover(function (){
$(".content").show();
}).mouseout(function (){
$(".content").hide();
});
*/
/*
//合成事件 hover()
$(".header").hover(function (){
$(".content").show();
},function (){
$(".content").hide();
});
*/
});
</script>
<body>
<h5 class="header" align="center">什么是jQuery？</h5>
<div class="content">
Jquery是繼prototype之后又一個優秀的Javascript庫。它是輕量級的js庫 ，
它兼容CSS3，還兼容各種瀏覽器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），
jQuery2.0及后續版本將不再支持IE6/7/8瀏覽器。
jQuery使用戶能更方便地處理HTML（標准通用標記語言下的一個應用）、events、實現動畫效果，
並且方便地為網站提供AJAX交互。jQuery還有一個比較大的優勢是，它的文檔說明很全，
而且各種應用也說得很詳細，同時還有許多成熟的插件可供選擇。
jQuery能夠使用戶的html頁面保持代碼和html內容分離，也就是說，
不用再在html里面插入一堆js來調用命令了，只需要定義id即可。
</div>
</body>
</html>
jQuery事件-div的顯示隱藏及鼠標的移入移出
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。