~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div1 {
width: 100px;
height: 100px;
background: red;
padding: 10px;
border: 1px solid #000;
}
</style>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script>
$(function() {
alert($('#div1').width()); //100 不带单位
//width() => width
alert($('#div1').innerWidth()); //120
//innerWidth() => width + padding
alert($('#div1').outerWidth()); //122
//outerWidth() => width + padding + border
alert($('#div1').outerWidth(true)); //132
//outerWidth(true) => width + padding + border + margin
})
</script>
</head>
<body>
<div id="div1">div</div>
</body>
</html>
~~~
***
### 尺寸设置
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div1 {
width: 100px;
height: 100px;
background: red;
padding: 10px;
border: 1px solid #000;
margin: 5px;
}
</style>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script>
$(function() {
$('#div1').width(300); //设置了style中的width
// $('#div1').innerWidth(200); //padding左右是20；然后总共是200，那么style中的width就是180 => width: 200 - padding
//$('#div1').outerWidth(200); //padding左右是20；border左右是2；总共200，那么width就是178 => width: 200 - padding - border
// $('#div1').outerWidth(200, true);
//width: 200 - padding - border - margin为168
})
</script>
</head>
<body>
<div id="div1">div</div>
</body>
</html>
~~~
***
### 可视区尺寸，页面尺寸
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body {
margin: 0;
padding: 0;
}
</style>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script>
$(function() {
alert($(window).height()); //可视区的高
alert($(document).height()); //页面的高 2000
//如果没有给body清margin和padding，得到的是2016；如果清掉了，得到的就是2000
})
</script>
</head>
<body style="height: 2000px;">
</body>
</html>
~~~
***
### 滚动距离
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body {
margin: 0;
padding: 0;
}
</style>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script>
$(function() {
// alert($(document).scrollTop()); //获取滚动距离
//当滚动条滚到最底部的时候 $(document).scrollTop() == $(document).height() - $(window).height()
// 2000 - 860
$(document).scrollTop(900); //设置滚动距离
// 页面默认初始滚动距离就是300
})
</script>
</head>
<body style="height: 2000px;">
<div id="div1">
<div id="div2"></div>
</div>
</body>
</html>
~~~
***
### 元素距离
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>到达页面的距离：offset()</title>
<style>
body {
margin: 0;
padding: 0;
}
#div1 {
width: 200px;
height: 200px;
background: red;
margin-left: 200px;
position: relative;
}
#div2 {
width: 100px;
height: 100px;
margin-left: 50px;
background: yellow;
}
</style>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script>
$(function() {
//offset()的距离值都是相对于整个页面的
alert($('#div1').offset().left); // 200
//元素距离整个页面左边的距离是offset().left，
//top就是距离整个页面上边的距离。注意left和top后面都不加括号。
alert($('#div2').offset().left); // 250
//不论怎样嵌套，定位父级是谁，都是到达页面边缘的距离。
//这个与原生的offsetLeft和offsetTop不同。原生的相对于定位的祖先节点的距离。
})
</script>
</head>
<body>
<div id="div1">
<div id="div2"></div>
</div>
</body>
</html>
~~~
### position
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body {
margin: 0;
padding: 0;
}
#div1 {
width: 200px;
height: 200px;
background: red;
margin: 200px;
position: relative;
}
#div2 {
width: 100px;
height: 100px;
margin: 50px;
background: yellow;
}
</style>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script>
$(function() {
alert($('#div2').position().left); //0
//position()就是到有定位的祖先节点的距离
//position()方法默认是不认margin值的。所以上面的代码弹出0
})
</script>
</head>
<body>
<div id="div1">
<div id="div2"></div>
</div>
</body>
</html>
~~~
***
### 图片懒加载
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body {
margin: 0;
padding: 0;
}
div {
margin-top: 300px;
width: 470px;
height: 150px;
border: 1px #000 solid;
}
</style>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script>
$(function() {
toChange();
$(window).scroll(toChange);
// 没看懂
function toChange() {
$('img').each(function(i, elem) {
if($(elem).offset().top < $(window).height() + $(document).scrollTop()) { //如果图片进入了可视区
$(elem).attr('src', $(elem).attr('_src'));
}
});
}
})
</script>
</head>
<body>
<div><img _src="images/1.jpg" alt=""></div>
<div><img _src="images/2.jpg" alt=""></div>
<div><img _src="images/3.jpg" alt=""></div>
<div><img _src="images/4.jpg" alt=""></div>
<div><img _src="images/5.jpg" alt=""></div>
</body>
</html>
~~~
