jquery尺寸的获取
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.9.1.min.js"></script>
</head>
<body>
<div id="div1" style="height: 200px;width: 400px; padding: 10px; border: 10px solid red;margin: 1px"></div>
<button>显示div元素的尺寸</button>
<script>
$(document);ready(function(){
$('button').click(function(){
var txt = ""
txt += 'div的宽度是:'+$('#div1').width()+'px'+'<br>';
txt += 'div的高度是:'+$('#div1').height()+'px'+'<br>';
txt += 'div的宽度,包括内边距是:'+$('#div1').innerWidth()+'px'+'<br>';
txt += 'div的高度,包括内边距是:'+$('#div1').innerHeight()+'px'+'<br>';
txt += 'div的宽度,包括内边距和边框是:'+$('#div1').outerWidth()+'px'+'<br>';
txt += 'div的高度,包括内边距和边框是:'+$('#div1').outerHeight()+'px'+'<br>';
txt += 'div的宽度,包括内边距和边框,外边距是:'+$('#div1').outerWidth(true)+'px'+'<br>';
txt += 'div的高度,包括内边距和边框,外边距是:'+$('#div1').outerHeight(true)+'px'+'<br>';
$("#div1").html(txt)
})
})
</script>
</body>
</html>
通过jquery实现二级菜单的显示和隐藏
slideup()//显示
slideDown() //隐藏
slideToggle() //显示和隐藏切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.9.1.min.js"></script>
<style>
#slide,#panel,#slide1,#slide2{
padding: 5px;
text-align: center;
background-color: #f59563;
border: solid 1px red;
}
#panel{
display: none;
text-align: center;
padding: 40px;
}
</style>
<script>
$(document).ready(function(){
$("#slide1").click(function(){
$("#panel").slideUp(1000)
})
})
$(document).ready(function(){
$("#slide2").click(function(){
$("#panel").slideDown(1000)
})
})
$(document).ready(function(){
$("#slide").click(function(){
$("#panel").slideToggle(1000)
})
})
</script>
</head>
<body>
<div id="slide2">显示</div>
<div id="slide1">隐藏</div>
<div id="slide">toggle</div>
<div id="panel">hello world</div>
</body>
</html