~~~
<!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>
~~~
