1.1 盒子尺寸
以下都是获取元素的尺寸类型为number。是可读可写的。
height(); 取得匹配元素当前计算的高度值(px)。
width(); 取得匹配元素当前计算的宽度值(px)。
innerHeight(); 获取匹配元素内部区域高度(包括补白padding、不包括边框border)。
innerWidth(); 获取匹配元素内部区域宽度(包括补白padding、不包括边框border)。
outerHeight(); 获取匹配元素外部高度(默认包括补白padding和边框border)。
outerWidth(); 获取匹配元素外部宽度(默认包括补白padding和边框border)。
outerHeight(true); 获取匹配元素外部高度(默认包括补白padding和边框border和边距margin)。
outerWidth(true); 获取匹配元素外部高度(默认包括补白padding和边框border和边距margin)。
div{
width: 300px;
height: 200px;
padding: 20px;/*内边距*/
border: 30px solid yellow;/*边框*/
margin: 40px;/*外边距*/
background-color: orange;
}
<div></div>
<script type="text/javascript">
console.log($("div").width());//获取元素的width
//$("div").width(800);//可读可写
console.log($("div").innerWidth());//获取元素的width+padding
console.log($("div").outerWidth());//获取元素的width+padding+border
console.log($("div").outerWidth(true));//获取元素的width+padding+border+marign
</script>1.2 window和doucment尺寸
<script type="text/javascript">
console.log($(window).height()); //可视窗口
console.log($(document).height()); //文档高度
</script>offset([coordinates]) 获取匹配元素在当前文档的相对偏移。
返回的对象包含两个整型属性: top 和 left, 以像素计。此方法只对可见元素有效。
$("p:last").offset({ top: 10, left: 30 });<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
x=$("p").offset();
$("#span1").text(x.left);
$("#span2").text(x.top);
});
});
</script>
</head>
<body>
<p>本段落的偏移是 <span id="span1">unknown</span> left 和 <span id="span2">unknown</span> top。</p>
<button>获得 offset</button>
</body>
</html>输出结果: 本段落的偏移是 8 left 和 8 top。
position
position()获取匹配元素相对父元素的偏移。返回的对象包含两个整型属性：top 和 left。为精确计算结果, 请在补白、边框和填充属性上使用像素单位。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 300px;
height: 200px;
background-color: orange;
padding: 20px;/*内边距*/
border: 30px solid yellow;/*边框*/
margin: 40px;/*外边距*/
position: relative;
}
p{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 100px;
top: 100px;
}
</style>
</head>
<body>
<div>
<p>pppp</p>
</div>
<script src="js/jquery-2.2.4.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//返回距离定位祖先元素的距离
console.log($("p").position());//距离有定位的祖先元素的距离 {top: 100, left: 100}
</script>
</body>
</html>滚动事件：1 滚轮 2 拖拽滚动条 3 方向键
scrollLeft() 设置或返回匹配元素相对滚动条左侧的偏移。
scrollTop() 设置或返回匹配元素相对滚动条顶部的偏移。
$(".btn1").click(function(){
$("div").scrollLeft(100); //向左偏移100px
});
$(document).scroll(function(){
console.log($(window).scrollTop())
})实例: 平滑滚动页面到某个锚点
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="../jquery/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
jQuery.scrollTo=function(scrolldom,scrolltime){
$(scrolldom).click(function(){
var scrollToDom = $(this).attr("page-scroll");
$('html,body').animate(
{
scrollTop:$(scrollToDom).offset().top //滑动到当前元素的顶部
},
scrolltime
);
return false;
});
};
$.scrollTo("#scrollnav a",1000);
});
</script>
<style>
body {
font:62.5% "Trebuchet MS", sans-serif;
margin:64px;
}
#h2-caption {
font:20px "Trebuchet MS", sans-serif;
}
p {
font:16px "Trebuchet MS", sans-serif;
}
a {
font:13.5px "Trebuchet MS", sans-serif;
}
.demoHeaders {
margin-top:2em;
}
#div-log {
font:13.5px "Trebuchet MS", sans-serif;
}
</style>
</head>
<body>
<h2 id="h2-caption">超实用的jQuery代码段 - jQuery平滑滚动页面到某个锚点</h2>
<hr><br>
<div class="scrollnav" id="scrollnav">
<a href="#" page-scroll="#scrolltoTop">滑动到页面顶部</a>
<a href="#" page-scroll="#scrolltoMid">滑动到页面中部</a>
<a href="#" page-scroll="#scrolltoEnd">滑动到页面底部</a>
</div>
<p id="scrolltoTop">jQuery平滑滚动页面 - 页面顶部</p><br><br><br><br><br><br><br><br><br><br><br><br>
<p id="scrolltoMid">jQuery平滑滚动页面 - 页面中部</p><br><br><br><br><br><br><br><br><br><br><br><br>
<p id="scrolltoEnd">jQuery平滑滚动页面 - 页面底部</p><br><br><br><br><br><br><br><br><br><br><br><br>
<br><hr>
<div id="div-log">
<p>日志记录：</p>
</div>
</body>
</html>解释：平滑滚动页面到某个锚点的效果实际上是通过animate()函数与.offset()函数组合来实现的, 如今已经替代传统HTML操作DOM的window.scrollTo()函数了。