console
.log($("div").width());
$("div").width(300); 带数值则修改大小
② innerWidth() / innerHeight()
用于获取或设置元素 width和height + padding 大小
console.log($("div").innerWidth());
③ outerWidth() / outerHeight()
用于获取设置元素 width和height + padding + border 大小
console.log($("div").outerWidth());
④ outerWidth(true) / outerHeight(true)
用于获取设置 width和height + padding + border + margin
console.log($("div").outerWidth(true));
以上参数为空，则是获取相应数值，返回的是数字型
如果参数为数字，则是修改相应值
参数可以不用写单位
2. jQuery位置
位置主要有3个：offset()、position()、scrollTop()/scrollLeft()
<style>
.father {
position: relative;
width: 400px;
height: 400px;
background-color: pink;
margin: 100px;
overflow: hidden;
.son {
width: 150px;
height: 150px;
background-color: purple;
</style>
<div class="father">
<div class="son"></div>
</div>
① offset()设置或获取元素偏移
该方法设置或者返回被选元素相对于文档的偏移坐标，👉跟父级没有关系👈
console.log($(".son").offset());
console.log($(".son").offset().top);
也可以在offset()方法中传递一个对象就可以重新设置盒子的偏移
$(".son").offset({
top: 200,
left: 200
② position()获取元素偏移
该方法用于返回元素相对于带有定位的父级的偏移坐标，如果父级没定位，则以文档为准
console.log($(".son").position());
这时候因为刚刚上面在offset中传了一个设置盒子偏移的对象，而这个方法是以文档为准(此时父盒子外边距是100px)，结果就是子盒子在父盒子中的偏移是top 100px 和 left 100px。
③ 被卷去的头部 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>
<div class="back">返回顶部</div>
<div class="container"></div>
var boxTop = $(".container").offset().top;
$(window).scroll(function () {
console.log($(document).scrollTop());
if ($(document).scrollTop() >= boxTop) {
$(".back").fadeIn();
} else {
$(".back").fadeOut();
$(".back").click(function () {
$("body, html").stop().animate({
scrollTop: 0
该案例效果是，当被卷去的头部到达目标数值，就让对应的“返回顶部”模块出现，点击后能返回顶部，模仿了一些网站返回顶部功能。
3. 事件处理
① 单个事件注册
同一个对象多个事件需要一个一个绑定
语法: element.事件(function(){})
$("div").click(function () {
$(this).css("background", "purple");
$("div").mouseenter(function () {
$(this).css("background", "skyblue");
② 事件处理on
on()方法在匹配元上绑定一个或多个事件的事件处理函数
语法：element.on(events,[selector],fn)
events : 一个或多个用空格分隔的事件类型，如"click"、"keydown"
selector : 元素的子元素选择器
fn : 回调函数 绑定在元素身上的监听函数
on()方法的特点：
(1) on可以绑定一个或多个事件
$("div").on({
mouseenter: function () {
$(this).css("background", "skyblue");
click: function () {
$(this).css("background", "purple");
mouseleave: function () {
$(this).css("background", "blue");
以上是事件处理程序不同的情况下。如果事件处理程序相同,可以这么写
$("div").on("mouseover mouseout", function () {
$(this).toggleClass("current");
(2) on可以实现事件委托(委派)
$("ul").on("click", "li", function () {
alert("11");
利用on实现事件委派，将li的事件委派给ul，只有ul添加了事件，而触发对象是每一个ul中的li。事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，即把事件委派给父亲。
(3) on可以给未来动态创建的元素绑定事件
之前的绑定事件，无法给未来动态创建的元素绑定事件，如
$("ol li").click(function () {
alert("11");
var li = $("<li>我是后来创建的</li>");
$("ol").append(li);
后来动态创建的元素没有绑定到事件。
$("ol").on("click", "li", function () {
alert("11");
将注册事件的方式换成on，就能解决上面的问题。
4. jQuery对象拷贝
如果想要把某个对象拷贝(合并)给另外一个对象使用，此时可以使用$.extend()方法
语法: $.extend([deep],target,object1,[objectN])
deep:如果设为true则为深拷贝，默认为false
target： 目标对象
object1：待拷贝到目标对象的对象
var targetObj = {};
var obj = {
id: 1,
name: "andy"
$.extend(targetObj, obj);
console.log(targetObj);
var targetObj = {
id: 0,
msg: {
sex: '男'
var obj = {
id: 1,
name: "andy",
msg: {
age: 18
$.extend(targetObj, obj);
console.log(targetObj);
被拷贝的对象会覆盖目标对象原来的冲突的数据
比如案例2中，目标对象已经存在id和msg，被拷贝的对象也有，则被拷贝对象中的这两个属性值会覆盖目标对象中的。console.log(targetObj)输出如下：
以上这些呢，默认是浅拷贝，什么是浅拷贝，就是把被拷贝的对象中复杂数据类型的地址拷贝给目标对象，修改目标对象中的复杂数据类型，会影响原先被拷贝的对象。
targetObj.msg.age = 20;
console.log(targetObj);
console.log(obj);
输出结果如下
可以看到，age都变为20了，就是因为浅拷贝遇到复杂数据类型时，拷贝的是地址，这两个对象中的复杂数据类型地址相同，指向的都是同一个数据，那么任何一方进行修改的时候，都会影响另外一方。
深拷贝： extend方法中第一个参数设置为true，完全克隆(拷贝的对象，而不是地址)，修改目标对象，不会影响到被拷贝对象,如果里面有不冲突的属性，那么会合并到一起。
$.extend(true, targetObj, obj);
console.log(targetObj);
console.log(obj);
这时候你再对拷贝完的目标对象修改里面的属性值，不会影响到原先的被拷贝对象中的属性，因为深拷贝在内存中又开辟一块空间来存被拷贝的内容，两者地址不同，不影响。
5. 多库共存
问题概述： jQuery使用$作为标示符，随着jQuery的流行，其他js库也会用这$作为标识符，这样可能会引起一些冲突
客观需求： 需要一个解决方案，让jQuery和其他的js库不存在冲突，可以同时存在，这就叫多库共存
jQuery的解决方案:
统一把$符号改成jQuery，之前讲过，$等同于jQuery,比如jQuery("div")
让jquery释放对$的控制权，让用户重新规定jQuery变量的名称:$.noConflict()
var xx = $.noConflict(); 那么这个xx就可以直接替换jQuery和$进行使用
var Guguuuu = jQuery.noConflict();
console.log(Guguuu("span"));
Guguuuu
17.4k
粉丝
