文章目錄
一、css()方法
css(name|pro|[,val|fn])：
（1）CSS鏈式操作如果大於三步不建議使用
（2）CSS批量設置傳入的是一個對象
（3）獲取CSS樣式返回的是帶有單位的字符串
（4）回調函數： 返回要設置的屬性值。有兩個參數，第一個是index爲元素在對象集合中的索引位置，value是原先的屬性值，是一個數值字符串。
註釋部分爲特別關注
<body>
<div></div>
<script src="../jquery.js"></script>
<script>
$(function() {
//1、逐個設置
$("div").css("width","100px");
$("div").css("height","100px");
$("div").css("background","blue");
//2、鏈式設置
//注意：鏈式操作如果大於三步建議逐個設置(閱讀性差)
$("div").css("width","100px").css("height","100px").css("background","red");
//3、批量設置（傳入一個對象,推薦）
$("div").css({
height:"100px",
width:"100px",
background:"yellow"
})
//4、獲取CSS的樣式(獲取的是一個字符串，帶有單位px )
console.log($("div").css("height"));
});
//5、回調函數
$("div").click(function() {
$(this).css({
width: function(index, value) {
return parseInt(value) * 2;
},
height: function(index, value) {
return parseInt(value) * 2;
}
});
});
</script>
</body>
二、jQuery的位置操作
1、offset()方法和position()方法
注意：
（1） 示例中分別用兩個按鈕監聽設置和獲取功能
（2）offset()方法： 獲取元素距離窗口的相對偏移。，設置offset不需要單位（即不是字符串）。返回的對象包含兩個整型屬性：top 和 left，以像素計。此方法只對可見元素有效。
（3）position()方法： 獲取元素距離父元素的相對偏移。，只能獲取不能設置。返回的對象包含兩個整型屬性：top 和 left，以像素計。此方法只對可見元素有效。
CSS樣式：
<style>
*{
margin: 0;
padding: 0;
}
.father {
width: 100px;
height: 100px;
background-color: red;
border: 2px solid #000;
margin-left: 20px;
position: relative;
}
.son {
width: 50px;
height: 50px;
background-color: blue;
position: absolute;
top:25px;
left:25px
}
</style>
核心代碼：
<body>
<div class="father">
<div class="son"></div>
</div>
<button>獲取</button>
<button>設置</button>
<script src="../jquery.js"></script>
<script>
$(function() {
var btn = document.getElementsByTagName("button");
//監聽獲取
btn[0].onclick = function() {
//獲取元素的寬度
console.log("我是father的寬度："+$(".father").width());
//offset():獲取元素距離窗口的偏移位
console.log("我是son的offset(："+$(".son").offset().left);
//position()：獲取元素距離父元素的偏移位，只能獲取不能設置
console.log("我是son的position()："+$(".son").position().left);
};
//監聽設置
btn[1].onclick = function() {
//獲取元素的寬度
$(".father").width("200px");
//設置offset,不需要單位
$(".son").offset({
left:30,
top:50
});
};
})
</script>
</body>
2、scrollTop()方法和 scrollLeft()方法
注意：
（1）scrollTop()中參數是數字，不是字符串
CSS樣式：
（2） scrollLeft()方法使用方法和 scrollTop()方法相同，此類方法對可見和隱藏元素均有效。
（3）scrollTop()方法和 scrollLeft()方法既可以獲取偏移，也可以設置偏移
<style>
.box1 {
width: 100px;
height: 200px;
border: 1px solid #000;
overflow: scroll;
}
</style>
HTML：
<div class="box1">我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div
我是div我是d我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是diviv我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div
我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div
我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div
我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div
我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div
</div>
<button>獲取</button>
<button>設置</button><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
核心代碼：
<script src="../jquery.js"></script>
<script>
$(function() {
var btn = document.getElementsByTagName("button");
//監聽獲取
btn[0].onclick = function() {
//獲取滾動的偏移位
console.log($(".box1").scrollTop());
//獲取網頁滾動的偏移位
//注意：爲了保證瀏覽器的兼容，獲取網頁滾動的偏移位時要按以下寫法
console.log($("body").scrollTop()+$("html").scrollTop());
};
//監聽設置
btn[1].onclick = function() {
//設置滾動的偏移位
//不是字符串
$(".box1").scrollTop(200);
//設置網頁滾動的偏移位
//注意：爲了保證瀏覽器的兼容，設置網頁滾動的偏移位時要按以下寫法
$("html,body").scrollTop(20)
}
});
</script>
三、jQuery的尺寸操作
1、width()和height()方法
（1）width() 方法設置或返回元素的寬度（不包括內邊距、邊框或外邊距）
（2）height() 方法設置或返回元素的高度（不包括內邊距、邊框或外邊距）
注意：
（1）width()和height()使用方法相同
（2）獲取寬度或高度直接使用：width() 和 height()
（3）設置寬度或高度有兩種方式
- 方式一： 在 width() 和 height() 中傳入字符串或者數字
- 方式二： 在 width() 和 height() 中傳入一個函數。該函數返回要設置的數值；可以接受兩個參數。第一個參數是元素在原來集合中的索引位置，第二個參數是原先的寬度或高度
//獲取寬度
$("div").width()
//設置寬度
//1、字符串或者數字
$("div").width(20)
/*
2、函數，返回要設置的數值；可以接受兩個參數
第一個參數：元素在原來集合中的索引位置
第二個參數：原先的寬度
*/
$("button").click(function() {
$("div").width(function(index,old) {
return index + old;
})
})
//獲取高度
$("div").height()
//設置高度
//1、字符串或者數字
$("div").height(20)
/*
2、函數，返回要設置的數值；可以接受兩個參數
第一個參數：元素在原來集合中的索引位置
第二個參數：原先的高度
*/
$("button").click(function() {
$("div").height(function(index,old) {
return index + old;
})
})
2、innerWidth()和innerHeight()
（1）innerWidth() 方法返回元素的寬度（包括內邊距）
（2）innerHeight() 方法返回元素的高度（包括內邊距）
注意：
（1）innerWidth() 和 innerHeight() 使用方法相同
（2）獲取直接使用：innerWidth() 和***innerHeight()***
（3）只有獲取沒有設置
//獲取innerWidth
$("div").innerWidth()
//獲取innerHeight
$("div").innerHeight()
3、outerWidth()和outerHeight()
（1）outerWidth() 方法返回元素的寬度（包括內邊距和邊框）
（2）outerHeight() 方法返回元素的高度（包括內邊距和邊框）
注意：
（1）outerWidth() 和 outerHeight() 使用方法相同
（2）獲取直接使用：outerWidth() 和 outerHeight()
（3）只有獲取沒有設置
//獲取outerWidth
$("div").outerWidth()
//獲取outerHeight
$("div").outerHeight()