1、获取和设置元素的尺寸
- width()、height()： 获取元素width和height
- innerWidth()、innerHeight()：包括padding的width和height
- outerWidth()、outerHeight()：包括padding和border的width和height
- outerWidth(true)、outerHeight(true)：包括padding和border以及margin的width和height
2、获取元素相对页面的绝对位置
- offset()
课堂练习：制作一个加入购物车动画。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
// 获取元素
var $chart = $('.chart');
var $count = $('.chart em');
var $btn = $('.add');
var $point = $('.point');
// 获取按钮的宽高
var $w_b = $btn.outerWidth();
var $h_b = $btn.outerHeight();
// 获取购物车的宽高
var $w_c = $chart.outerWidth();
var $h_c = $chart.outerHeight();
// click事件
$btn.click(function(){
// 获取购物车和按钮的位置
var oPos_b = $btn.offset();
var oPos_c = $chart.offset();
// 圆点移到按钮中心
$point.css({'left':oPos_b.left+parseInt($w_b/2)-8,'top':oPos_b.top+parseInt($h_b/2)-8}).show();
// 圆点移到购物车中心
$point.stop().animate({'left':oPos_c.left+parseInt($w_c/2)-8,'top':oPos_c.top+parseInt($h_c/2)-8},800,function(){
// 移过去后隐藏
$point.hide();
// 获取html的数字
var iNum = $count.html();
// 移过去后购物车+1
$count.html(parseInt(iNum)+1);
});
})
})
</script>
<style type="text/css">
.chart{
width: 150px;
height: 50px;
border: 2px solid #000;
text-align: center;
line-height: 50px;
float: right;
margin-right: 100px;
margin-top: 100px;
}
.chart em{
font-style: normal;
color: red;
font-weight: bold;
}
.add{
width: 100px;
height: 50px;
background-color: green;
border: 0;
color: #fff;
float: left;
margin-top: 300px;
margin-left: 300px;
}
.point{
width: 16px;
height: 16px;
background-color: red;
/*固定定位*/
position: fixed;
left: 0px;
top: 0px;
display: none;
/*置顶*/
z-index: 9999;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="chart">购物车<em>0</em></div>
<!-- 加入购物车按钮 -->
<input type="button" name="" value="加入购物车" class="add">
<!-- 红色圆点 -->
<div class="point"></div>
</body>
</html>
效果：
3、获取浏览器可视区宽度高度
$(window).width();
$(window).height();
这里获取的是我们能看到的文档的高度。
4、获取页面文档的宽度高度
$(document).width();
$(document).height();
这里获取的是文档的总高度。
5、获取页面滚动距离
$(document).scrollTop();
$(document).scrollLeft();
6、页面滚动事件
$(window).scroll(function(){
......
})
类似于click事件，可以定义滚动式发生的事件。
课堂练习：置顶菜单
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
// 获取菜单
$menu = $('.menu')
// 建立滚动事件
$(window).scroll(function(){
// 垂直滚动距离
var iNum = $(document).scrollTop();
// 这里的200表示的是banner的高度，实现效果是当滑动页面至banner消失时，菜单栏一直在页面顶部
if (iNum>200){
$menu.css({
'position':'fixed',
'left':'50%',
'top':0,
'marginLeft':-480
})
}
//向上滑到banner出现时令menu在banner下方
else{
$menu.css({
'position':'static',
'marginLeft':'auto'
})
}
})
})
</script>
<style type="text/css">
body{
margin: 0;
}
.banner{
width: 960px;
height: 200px;
background-color: cyan;
margin: 0 auto;
}
.menu{
width: 960px;
height: 100px;
background-color: gold;
margin: 0 auto;
text-align: center;
line-height: 80px;
}
p{
text-align: center;
color: red;
}
</style>
</head>
<body>
<div class="banner"></div>
<div class="menu">菜单</div>
<p>文档内容</p>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<p>文档内容</p>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<p>文档内容</p>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<p>文档内容</p>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<p>文档内容</p>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<p>文档内容</p>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<p>文档内容</p>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<p>文档内容</p>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<p>文档内容</p>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<p>文档内容</p>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<p>文档内容</p>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</body>
</html>
效果：
