一、尺寸操作
1、概念
jQuery 尺寸操作包括元素宽高的获取和设置，而且不同的方法对应着不同的盒子模型（标准盒模型和怪异盒模型）
2、方法
| 方法 | 作用 |
|---|---|
| width() / height() | 获取或设置对应元素的宽度或高度 |
| innerWidth() / innerHeight() | 获取或设置对应元素的宽度或高度，包含padding |
| outerWidth() / outerHeight() | 设置或获取对应元素的宽度或高度，包含padding 和 border |
| outerWidth(true) / outerHeight(true) | 只能获取对应元素的宽度或高度，包含padding、border和margin |
*注意：① 如果上述方法的参数为空，则是获取对应元素的属性值，值的类型为数字型。
② 如果参数为数字，则是设置对应元素的属性值。不需要写单位。
③ outerWidth() 和 outerHeight() 的参数为 true 时，获取的高度才会包括 margin ，且此时只能获取高度，不能设置高度。
3、案例代码
<body>
<div></div>
<script>
$(function() {
// 1. width() / height() 获取或设置元素 width和height大小
console.log($("div").width());
// $("div").width(300);
// 2. innerWidth() / innerHeight() 获取或设置元素 width和height + padding 大小
console.log($("div").innerWidth());
// $("div").innerWidth(300);
// 3. outerWidth() / outerHeight() 获取或设置元素 width和height + padding + border 大小
console.log($("div").outerWidth());
// $("div").outerWidth(300);
// 4. outerWidth(true) / outerHeight(true) 获取 width和height + padding + border + margin
console.log($("div").outerWidth(true));
})
</script>
</body>
二、位置操作
1、概念
jQuery的位置操作主要是获取和设置元素的偏移量，以及被卷去的部分大小。
2、方法
| 方法 | 作用 |
|---|---|
| offset() | 设置或获取元素的偏移量 |
| position() | 获取元素相对于带有定位的父级元素的偏移坐标 |
| scrollTop() | 设置或获取元素被卷去的头部大小 |
| scrollLeft() | 设置或获取元素被卷去的左侧大小 |
3、具体语法
4、案例代码
// offset() 和 position()
<style>
.father {
width: 400px;
height: 400px;
background-color: pink;
margin: 100px;
overflow: hidden;
position: relative;
}
.son {
width: 150px;
height: 150px;
background-color: purple;
position: absolute;
left: 10px;
top: 10px;
}
</style>
<body>
<div class="father">
<div class="son"></div>
</div>
<div class="back">返回顶部</div>
<div class="container"></div>
<script>
$(function() {
// 1. 获取设置距离文档的位置（偏移） offset
console.log($(".son").offset());
console.log($(".son").offset().top);
// $(".son").offset({
// top: 200,
// left: 200
// });
// 2. 获取距离带有定位父级位置（偏移） position 如果没有带有定位的父级，则以文档为准
// 这个方法只能获取不能设置偏移
console.log($(".son").position());
// $(".son").position({
// top: 200,
// left: 200
// });
</script>
</body>
// scrollTop() 和 scrollLeft()
<style>
body {
height: 2000px;
}
.back {
position: fixed;
width: 50px;
height: 50px;
background-color: pink;
right: 30px;
bottom: 100px;
display: none;
}
.container {
width: 900px;
height: 500px;
background-color: skyblue;
margin: 400px auto;
}
</style>
<body>
<div class="back">返回顶部</div>
<div class="container">
</div>
<script>
$(function() {
$(document).scrollTop(100);
// 被卷去的头部 scrollTop() / 被卷去的左侧 scrollLeft()
// 页面滚动事件
var boxTop = $(".container").offset().top;
$(window).scroll(function() {
// console.log(11);
console.log($(document).scrollTop());
if ($(document).scrollTop() >= boxTop) {
$(".back").fadeIn();
} else {
$(".back").fadeOut();
}
});
// 返回顶部
$(".back").click(function() {
// $(document).scrollTop(0);
$("body, html").stop().animate({
scrollTop: 0
});
// $(document).stop().animate({
// scrollTop: 0
// }); 不能是文档而是 html和body元素做动画
})
})
</script>
</body>
三、深浅拷贝
1、概念
在 js 中拷贝对象分为浅拷贝和深拷贝两种。浅拷贝对简单数据类型会完全拷贝过去，但是在遇到复杂数据类型时，只会拷贝数据的地址，所以拷贝后的复杂数据与原来的复杂数据在本质上是同一个，修改两者中的任何一个，都会影响另一个。而深拷贝，则是将简单数据类型和复杂数据类型都完全拷贝一份，与拷贝之前的数据不再关联。
浅拷贝会把接收数据的对象中的原有数据覆盖掉，而深拷贝会将不冲突的属性,会合并到一起。
2、语法
目标对象是指接收拷贝过来的数据的对象。
3、案例代码
<script>
$(function() {
// 1.合并数据
var targetObj = {};
var obj = {
id: 1,
name: "andy"
};
// $.extend(target, obj);
$.extend(targetObj, obj);
console.log(targetObj);
// 2. 会覆盖 targetObj 里面原来的数据
var targetObj = {
id: 0
};
var obj = {
id: 1,
name: "andy"
};
// $.extend(target, obj);
$.extend(targetObj, obj);
console.log(targetObj);
})
// 3、深浅拷贝
var targetObj = {
id: 0,
msg: {
sex: '男'
}
};
var obj = {
id: 1,
name: "andy",
msg: {
age: 18
}
};
// // $.extend(target, obj);
// $.extend(targetObj, obj);
// console.log(targetObj); // 会覆盖targetObj 里面原来的数据
// // 1. 浅拷贝把原来对象里面的复杂数据类型地址拷贝给目标对象
// targetObj.msg.age = 20;
// console.log(targetObj);
// console.log(obj);
// 2. 深拷贝把里面的数据完全复制一份给目标对象 如果里面有不冲突的属性,会合并到一起
$.extend(true, targetObj, obj);
// console.log(targetObj);
targetObj.msg.age = 20;
console.log(targetObj); // msg :{sex: "男", age: 20}
console.log(obj);
</script>
