*使用toggle()轉(zhuǎn)換函數(shù)控制層的顯示和隱藏.toggle(false):隱藏設(shè)置,toggle(true):顯示設(shè)置
-----------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------
<!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>控制div層</title>
<script src="jquery-1.4.1.min.js"></script>
<script type="application/javascript" language="javascript">
/****************************************************
*
*mouseover()函數(shù)--鼠標(biāo)懸停事件
*hover()函數(shù)--鼠標(biāo)懸停/離開切換事件
*toggle()函數(shù)--單擊切換事件(toggle(fn1,fn2,fn3,....),每次單擊后依次調(diào)用函數(shù)
*獲取元素的高度和寬度
*通過css函數(shù)獲取元素的高度和寬度
*利用自定義動畫animate()函數(shù)動態(tài)顯示元素寬度和高度
*使用show()和hide()方法控制層的顯示和隱藏
*使用toggle()轉(zhuǎn)換函數(shù)控制層的顯示和隱藏.toggle(false):隱藏設(shè)置,toggle(true):顯示設(shè)置
*
****************************************************/
$(function(){
$("#div1").mouseover(function(){
alert("層被選擇");
});
$("#div2").hover(function(){
alert("鼠標(biāo)懸停");
},function(){
alert("鼠標(biāo)離開");
});
$("#div3").toggle(function(){
alert("第一次單擊");
},function(){
alert("第二次單擊");
},function(){
alert("第三次單擊");
});
$("#div4").click(function(){
var w = $("div4").width();
var h = $("div4").height();
alert("div寬度:"+$("#div4").width()+",div高度:"+$(this).height());
$("#div4").width("600px");
$("#div4").height("50px");
alert("修改后的div寬度:"+$("#div4").width()+",高度:"+$(this).height());
})
$("#div5").click(function(){
alert("寬度:"+$(this).css("width")+",高度:"+$(this).css("height"));
});
$("#button6").click(function(){
var w = $("#width6").val();
var h = $("#height6").val();
//注意:這里的px不能少;
$("#div6").width(w+"px").height(h+"px");
});
$("#button6-2").click(function(){
var w = $("#width6").val();
var h = $("#height6").val();
//通過css修改div層大小的三種方法
//$("#div6").css({"width":w+"px","height":h+"px"});
//$("#div6").css("width",w+"px").css("height",h+"px");
$("#div6").css("width",w+"px").height(h+"px");
});
$("#button6-3").click(function(){
var w = $("#width6").val();
var h = $("#height6").val();
$("#div6").animate({"width":w+"px","height":h+"px"});
});
$("#button7").toggle(function(){
$("#div7").show("show",function(){
alert("顯示層");
});
},function(){
$("#div7").hide("fast",function(){
alert("隱藏層");
});
});
$("#button7-2").click(function(){
$("#div7").toggle(9000);
});
})
</script>
</head>
<body>
<!-- ************利用鼠標(biāo)懸停實現(xiàn)div選取**************-->
<div id="div1" style="background-color:#9C0; width:500px; ">測試mouseover()函數(shù)--鼠標(biāo)懸停事件</div><br />
<div id="div2" style="background-color:#969; width:500px; ">測試hover()函數(shù)--鼠標(biāo)懸停/離開切換事件</div><br />
<!-- ************利用鼠標(biāo)單擊實現(xiàn)div選取**************-->
<div id="div3" style="background-color:#6CF; width:500px; ">測試toggle()函數(shù)--單擊切換事件(toggle(fn1,fn2,fn3,....),每次單擊后依次調(diào)用函數(shù))</div><br />
<!-- ************div層的尺寸**************-->
<!-- jquery對于div層的尺寸主要是動態(tài)讀取動態(tài)修改.width(),height()-->
<div id="div4" style="background-color:#F63; width:500px; ">獲取元素的高度和寬度,并修改</div><br />
<!-- ************jQuery函數(shù)css()---樣式設(shè)定**************-->
<div id="div5" style="background-color:#FF0; width:500px; ">通過css函數(shù)獲取元素的高度和寬度</div><br />
<!-- ************jQuery動態(tài)修改div層的尺寸**************-->
<div style="width:400px; height:350px">
<center>
寬:<input type="text" id="width6" width="200" /><br />
高:<input type="text" width="200" id="height6" /><br />
<input type="button" id="button6" value="修改div尺寸" /><br />
<input type="button" id="button6-2" value="通過css修改div尺寸" /><br />
<input type="button" id="button6-3" value="利用自定義動畫animate()函數(shù)動態(tài)顯示元素寬度和高度" />
<div id="div6" style="background-color:#C93; width:400px; height:200px;"></div>
</center>
</div><br />
<!-- ************層的顯示和隱藏**************-->
<div>
<input type="button" id="button7" value="使用show()和hide()方法控制層的顯示和隱藏" /><br />
<input type="button" id="button7-2" value="使用toggle()轉(zhuǎn)換函數(shù)控制層的顯示和隱藏.toggle(false):隱藏設(shè)置,toggle(true):顯示設(shè)置" /><br />
<div id="div7" style="background-color:#F39; width:400px; height:200px"></div>
</div>
</body>
</html>
