# 5.jQuery其他方法

# 5.1 jQuery对象拷贝

如果想要把某个对象拷贝(合并)给另外一个对象使用，此时可以使用 $.extend() 方法

语法：

$.exted([deep],target,object1,[objectN])

deep：如果设为true为深拷贝，默认为false浅拷贝
target：要拷贝的目标对象
object1：待拷贝到第一个对象的对象
objectN：待拷贝到第N个对象的对象
浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改对象会影响拷贝对象
深拷贝，前面加 true，完全克隆(拷贝的对象，而不是地址)，修改目标对象不会影响被拷贝对象

$(function(){
	var targetObj = {};
    var obj = {
        id: 0,
        name: '张三'
    }
    $.extend(targetObj, obj);
    console.log(targetObj);
    // 上述是 targetObj中没有内容的情况
    
    var targetObj2 = {
        id: 0,
    }
    var obj2 = {
        id: 1,
        name: '张三'
    }
    $.extend(targetObj2, obj2);
    // 会覆盖原来的数据
    console.log(targetObj2);
    
    // 浅拷贝，传地址
    var targetObj3 = {}
    var obj3 = {
        msg: {
            subject: '犯罪心理学'
        }
    }
    $.extend(targetObj3, obj3);
    targetObj3.msg.subject = '刑法';
    console.log(obj3.msg);
    
    // 深拷贝，完全克隆
    var targetObj4 = {}
    var obj4 = {
        msg: {
            subject: '犯罪心理学'
        }
    }
    $.extend(true, targetObj4, obj4);
    targetObj4.msg.subject = '刑法';
    console.log(obj4.msg)
})

# 5.2 多库共存

jQuery 使用 $ 作为标识符，随着jQuery的流行，其他js库也可能会使用$作为标识符，这样一起使用会引起冲突

解决方案：

1.统一使用jQuery

比如：

console.log(jQuery('div'));

2.jQuery变量规定新的名称： $.noConflict()

var suibian = jQuery.noConflict();
console.log(suibian('div'));

# 5.3 插件

jQuery功能比较有限，想要更复杂的特效效果，可以借助jQuery插件完成。

注意：这些插件也依赖于jQuery完成，所以必须先引入jQuery文件，因此也称为jQuery插件。

jQuery插件常用网站：

jQuery插件库 http://www.jq22.com
jQuery之家 http://www.htmleaf.com

# 5.3.1懒加载插件

图片使用延迟加载可提高网页下载速度，也能帮助减轻服务器负载

当我们滑动到可视区域，再显示图片

下载地址：https://www.jq22.com/jquery-info11629

该插件必须在图片引入之后才引入

# 5.3.2 全屏滚动插件(fullpage)

gitHub : https://github.com/alvarotrigo/fullPage.js 中文翻译网站: http://www.dowebok.com/demo/2014/77/

# 5.3.3 bootstrap JS插件

官网：https://v4.bootcss.com/

# 5.4 尺寸、位置操作

# 5.4.1 尺寸

语法	用法
width()/height()	取得匹配元素宽度和高度
innerWidth()/innerHeight()	取得匹配元素宽度和高度，包含padding
outerWidth()/outerHeight()	取得匹配元素的宽度和高度，包含padding、border
outerWidth(true)/outerHeight(true)	取得匹配元素的宽度和高度，包含padding、border、margin

console.log($('div').width);
$('div').width(300);

# 5.4.2 位置

位置主要有三个方法: offset() 、 position() 、 scrollTop()/scrollLeft()

# offset() 设置或获取元素便宜

offset()方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系
该方法有2个属性：left、top。offset().top 用于获取距离文档顶部的举例，offset().left 用于获取距离文档左侧举例
可以设置元素的偏移：offset({top: 10, left: 30});

# position() 获取元素偏移

position() 方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准
只可获取，不可设置

# scrollTop()/scrollLeft() 设置或获取元素被卷去的头部或左侧

scrollTop() 方法设置或返回被选元素被卷去的头部

# 返回顶部按钮案例

$('.back-to-top').on('click', function () {
	$('body, html').stop().animate({
        scrollTop: 0
    });
})

← 4.jQuery事件