文章目录
一、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()
