web实训知识点_0416_jQuery尺寸控制，以及slide（滑动复习）
上节课的回顾：二级菜单的jQuery实现方法
使用show()和hide()实现二级菜单效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery二级菜单</title>
<style>
body{
list-style: none;
margin: 8px;
text-decoration: none;
color: black;
}
ul{
list-style: none;
float: left;
}
li{
width: 80px;
height: 20px;
background-color: yellow;
border-right: 1px solid black;
float: left;
}
a{
text-decoration: none;
color: black;
}
ul li ul{
position: relative;
left: -40px;
}
</style>
<script src="jquery-1.8.3.min.js"></script>
<script>
$(document).ready(function(){
$(".turnUp").children("ul").hide();
$(".turnUp").mouseover(function(){
$(this).children("ul").show();
})
$(".turnUp").mouseout(function(){
$(this).children("ul").hide();
})
})
</script>
</head>
<body>
<ul>
<li><a href="#">一级菜单</a></li>
<li class="turnUp"><a href="#">一级菜单</a>
<ul>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
</ul>
</li>
<li class="turnUp"><a href="#">一级菜单</a>
<ul>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
</ul>
</li>
<li><a href="#">一级菜单</a></li>
<li><a href="#">一级菜单</a></li>
</ul>
</body>
</html>新方法：
children()，获取当前元素的子元素，参数是要填入的元素类型
this，指当前选取的元素
例子：
$(".turnUp").mouseover(function(){
$(this).children("ul").show();
})这一部分的this就是指代.turnUp这个元素
jQuery尺寸：
获取 或 改变 元素的尺寸
元素[ 内容 ]的宽高获取：
width()
height()
内边距（padding）的宽高获取：
innerWidth()
innerHeight()
边框的宽高获取：
outWidth()
outHeight()
外边距（margin）的宽高获取：
outerWidth(true)
outerHeight(true)
注意：当未被设置内/外边距时，上面的方法们会输出元素的宽高
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>获取宽高，width()和height()</title>
<script src="jquery-1.8.3.min.js"></script>
<script>
$(document).ready(function(){
$("#btn").click(function(){
var txt = ""
txt += "内容的宽" + $("#div1").width() + "<br/>";
txt += "内容的高" + $("#div1").height() + "<br/>";
txt += "内容的宽 + 内边距（padding）的宽" + $("#div1").innerWidth() + "<br/>";
txt += "内容的高 + 内边距（padding）的高" + $("#div1").innerHeight() + "<br/>";
txt += "内容的宽 + 内边距（padding）的宽 + 边框（border）的宽" + $("#div1").outerWidth() + "<br/>";
txt += "内容的高 + 内边距（padding）的高 + 边框（border）的高" + $("#div1").outerHeight() + "<br/>";
txt += "内容的宽 + 内边距（padding）的宽 + 边框（border）的宽 + 外边框（margin）的宽" + $("#div1").outerWidth(true) + "<br/>";
txt += "内容的高 + 内边距（padding）的高 + 边框（border）的高 + 外边框（margin）的高" + $("#div1").outerHeight(true) + "<br/>";
$("#div1").html(txt);
})
})
</script>
</head>
<body>
<div id="div1" style="width: 500px;height: 500px;border: 1px solid black;padding: 10px;margin: 10px;">
</div>
<input type="button" name="action" id="btn" value="获取宽高" />
</body>
</html>效果图：
末尾的复习作业：jQuery实现div框的显示与隐藏，以及切换显示/隐藏状态
实现方法：实际上为了实现划入的效果，这里没有直接使用show与hide，而是在执行方法前先使用sildeUp将元素移动到上方。显示就是移动下来（slideDown），隐藏就是移动上去（slideUp）。切换就是slideToggle
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>作业</title>
<style>
div{
width: 100%;
height: 100px;
border: 1px solid black;
background-color: antiquewhite;
text-align: center;
line-height: 100px;
font-size: 50px;
}
#div{
height: 200px;
}
</style>
<script src="jquery-1.8.3.min.js"></script>
<script>
$(document).ready(function(){
$("#div").slideUp();
$("#show").click(function(){
$("#div").slideDown("slow");
})
$("#hide").click(function(){
$("#div").slideUp("slow");
})
$("#toggle").click(function(){
$("#div").slideToggle("slow");
})
})
</script>
</head>
<body>
<div id="show">
出现
</div>
<div id="hide">
隐藏
</div>
<div id="toggle">
toggle
</div>
<div id="div">
hello world！
</div>
</body>
</html>效果图：