jquery

jQuery

（一）jQuery入门

jquery文件的下载

下载jquery文件

官方网址：https://jquery.com/ 3x版本

各个版本的下载：https://code.jquery.com/ 1x 2x 版本

1. 点击Download jquery

2. Download the uncompressed production jQuery 3.3.1工作时用的 （ 压缩过，更小，所以选择它） Download the uncompressed development jQuery 3.3.1 —>开发者使用的

3. ctrl+A全选，复制粘贴

4. vscode里面新建一个jquery.min.js(min的意思是压缩过的) 粘贴进去

5. 引入jquery文件

6. 然后就可以使用jquery的代码啦

7. 等着页面DOM加载完毕再去执行js代码

 (1)

        $(document).ready(function() {

   ​          &('div').hide();

        })

 (2)

   &(function() {

     &('div').hide();

   })

• 等着DOM结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jquery帮我们完成了封装
• 相当于原生js中的DOMContentlLoaded。
• 不同于原生js中的load事件是等页面文档，外部的js文件，css文件，图片加载完毕才去执行内部代码。
• 更推荐使用（2）

javascript库

javascript库：即library,是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如：动画animate,hide,show,比如获取元素。

简单理解：就是一个js文件，里面对我们的原生js代码进行了封装，存放到里面。这样我们可以快速高效的使用这些封装好的功能了。

比如：jquery,就是为了快熟方便的操作DOM，里面基本都是函数（方法）。

常见js库：jquery,prototype,yui,dojo,ext js,移动端的zepto -------->这些库都是对原生javascript的封装，内部都是用javascript实现的，我们主要学习的是jquery

jquery概述

j就是javascript；Query查询；意思就是查询js，把js中的DOM操作做了封装，我们可以快速的查询使用里面的功能。

jquery中封装了javascript常用的功能代码，优化了DOM操作，事件处理，动画设计和Ajax交互

学习jquery的本质是：学习调用这些函数（方法）。

优点：

• 轻量级，核心文件才几十kb，不会影响页面加载速度
• 跨浏览器兼容。基本兼容了现在主流的浏览器
• 链式编程，隐式迭代
• 对事件，样式，动画支持，大大简化了DOM操作
• 支持插件扩展开发。有着丰富的第三方的插件，例如：树形菜单，日期控件，轮播图等
• 免费，开源

jquery的顶级对象$

(1)$是jquery的别称，在代码中可以使用jquery代替$,但一般为了方便，通常直接使用$。

eg:

$(function() {

​ alert(11)

​ $(‘div’).hide();

});

也可以：

jquery(function() {

​ alert(11)

​ jquery(‘div’).hide();

});

(2)$是jquery的顶级对象，相当于原生javascript的window,把元素利用$包装成jquery对象，就可以调用jquery的方法。

jquery对象和DOM对象

1. DOM对象：用原生js获取过来的对象就是DOM对象

   var myDiv = document.querySelector(‘div’);//myDiv是DOM对象

2. jquery对象：用jQuery方式获取过来的对象是jQuery对象。本质：通过$把DOM元素进行了包装。

   ${(}^{\prime }di{v}^{\prime });//$(‘div’)是一个jQuery对象（以一种伪数组的形式存储）

3. jQuery对象只能使用jQuery方法，DOM对象则使用原生的JavaScript属性和方法

   DOM对象：myDiv.style.display = ‘none’;

   DOM与jQuery对象混淆使用 错误实例：$(‘div’).style.display = ‘none’;

   ​ myDiv.hide();

jQuery对象和DOM对象相互转换

1. DOM对象转换为jQuery对象：$(DOM对象)

   (1)我们直接获取视频，得到的就是jQuery对象

   $(‘video’);

   (2)我们已经使用原生js,获取过来DOM对象

   var myvideo = document.querySelector(‘video’);

   $(myvideo);

2. jQuery对象转换为DOM对象

   myvideo.play();

   (1)$(‘video’)[index] index是索引号

   $(‘video’)[0].play();

   (2)$(‘video’).get(index)

   $(‘video’).get(0).play();

---

（二）jQuery常用API

#jQuery选择器

基础选择器

$(“选择器”)//里面的选择器直接写css选择器即可，但是要加引号

名称	用法	描述
ID选择器	$(“#id”)	获取指定ID元素
全选选择器	$(“*”)	匹配所有元素
类选择器	$(“.class”)	获取同一类class的元素
标签选择器	$(“div”)	获取同一类标签的所有元素
并集选择器	$(“div,p,li”)	获取多个元素
交集选择器	$(“li.current”)	交集元素

层级选择器

名称	用法	描述
子代选择器	$(“ul>li”)	使用>号，获取亲儿子层级的元素；注意，并不会获取孙子层级的元素
后代选择器	$(“ul li”)	使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等

筛选选择器

名称	用法	描述
:first	$(“li:first”)	获取第一个li元素
:last	$(“li:last”)	获取最后一个li元素
:eq(index)	$(“li:eq(2)”)	获取到的li元素中，选择索引号为2的元素，索引号index从0开始
:odd	$(“li:odd”)	获取到的li元素中，选择索引号为奇数的元素，索引号index从0开始
:even	$(“li:even”)	获取到的li元素中，选择索引号为偶数的元素，索引号index从0开始

筛选方法（重点）-选取父子元素

名称	用法	说明
parent()	$(“li”).parent()	查找父级
children(selector)	$(“ul”).children(“li”)	相当于$(“ul>li”),最近一级（亲儿子）
find(selector)	$(“ul”).find(“li”)	相当于$(“ul li”)，后代选择器
siblings(selector)	$(“.first”).siblings(“li”)	查找兄弟节点，不包括自己本身
nextAll([expr])	$(“.first”).nextAll()	查找当前元素之后所有的同辈元素
prevtAll([expr])	$(“.last”).prevtAll()	查找当前元素之前所有的同辈元素
hasClass(class)	$(‘div’).hasClass(“protected”)	检查当前的元素是否含有某个特定的类，如果有，则返回true
eq(index)	$(“li”).eq(2)	相当于$(“li:eq(2)”)，索引号index从0开始

重点：parent() children() find() siblings() eq()

eg：显示隐藏元素 鼠标经过离开

eg:hide() show() mouseover mouseout

<script>
        $(function() {
            //鼠标经过
            $(".nav>li").mouseover(function() {
                //$(this)   jquery当前元素，不要加引号
                //show()显示元素     hide()隐藏元素
                $(this).children("ul").show();
                $(this).css("background-color","gray")
            })
            //鼠标离开
            $(".nav>li").mouseout(function() {
                $(this).children("ul").hide();
                $(this).css("background-color","")
            })
        })
 </script>

eg:链式编程 获得当前元素索引号

<script>
        $(function() {
            $("button").click(function() {
                //链式编程
                $(this).css("background-color","red").siblings().css("background-color","");
            })
            $("button").click(function() {
                //获得当前元素索引号
                var index = $(this).index();
                console.log(index);
                //使用索引号index
                $("button").eq(index).show();
            })})
</script>

#jQuery隐式迭代

隐式迭代就是把匹配的所有元素内部进行遍历循环，给每一个元素添加css这个方法

$(“ul li”).css(“color”,“red”) —>所有ul里面所有的li全改为红色

简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用。

#jQuery样式操作

操作css方法

1.参数只写属性名，则是返回属性值

 $('div').css('属性')

​ $(‘div’).css(‘width’)

2.参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号

  $('div').css('属性'，'值')

3.参数可以是对象形式，方便设置多组样式，属性名和属性值用冒号隔开，属性可以不用加引号

​ 一，

   $(this).css({

              "color":"white",

              "font-size":"20px"

       });

​ 二，

  $(this).css({

​               width: 400,
​               height:400,
​               color:"white",
​               font-size:20px，
​               //复合属性采用驼峰命名法，值不是数字，则需要加引号
​               backgroundColor: "red"
​        })；

设置类样式方法

作用等同于以前的classList,可以操作类样式，注意操作类里面的参数不要加点

1.添加类	$(“div”).addClass(“current”);
2.移除类	$(“div”).removeClass(“current”);
3.切换类	$(“div”).toggleClass(“current”);

jQuery类操作和className区别

className:

<script>
    //将one改成了two,最后只有two这个类名
        var one = document.querySelector(".one");
        one.className = "two";
</script>

addClass:

<script>
    //添加后就有one和two两个类名，即追加类名
    $(".one").addClass("two");
</script>

#jQuery效果

显示隐藏

show()显示
hide()隐藏
toggle()切换显示隐藏

一般情况下，都是不加参数直接使用显示隐藏

• show()

  show([speed,[easing],[fn]])

  1. 参数都可以省略，无动画直接显示
  2. speed:三种预定义速度之一的字符串(“slow”,“normal”,or “fast”)或表示动画时长的毫秒数值（如：1000）。
  3. easing：（Optional）用来指定切换效果，默认"swing"，可用参数"linear"
  4. fn:回调函数，在动画完成时执行的函数，每个元素执行一次。

• hide()

  hide([speed,[easing],[fn]])

  1. 参数都可以省略，无动画直接显示
  2. speed:三种预定义速度之一的字符串(“slow”,“normal”,or “fast”)或表示动画时长的毫秒数值（如：1000）。
  3. easing：（Optional）用来指定切换效果，默认"swing"，可用参数"linear"
  4. fn:回调函数，在动画完成时执行的函数，每个元素执行一次。

• toggle()同上

括号里的数字为多长时间后显示

• show(100)

• hide(200)

• toggle(300)

滑动

slideDown() 下拉滑动
slideUp()   上拉滑动
slideToggle()  切换上下拉滑动

slideUp([speed,[easing],[fn]])/slideDown([speed,[easing],[fn]])/slideToggle([speed,[easing],[fn]])

1. 参数都可以省略，无动画直接显示
2. speed:三种预定义速度之一的字符串(“slow”,“normal”,or “fast”)或表示动画时长的毫秒数值（如：1000）。
3. easing：（Optional）用来指定切换效果，默认"swing"，可用参数"linear"
4. fn:回调函数，在动画完成时执行的函数，每个元素执行一次。

$(".box").on("click","a",function() {
                //slideUp里面的fn函数
                $(this).parent().slideUp(function() {
                    $(this).remove();
                });
            })

事件切换hover()

hover([over,]out)  事件切换

<script>
$(".nav>li").hover(function() {  //第一个函数为鼠标经过的
    $(this).children("ul").slideDown(200);
},function() {     //第二个函数为鼠标离开的
    $(this).children("ul").slideUp(200);
});
</script>

动画队列及其停止排队方法

动画出现的问题：动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行

stop()

1. stop()方法用于停止动画或效果

2. 注意：stop()写到动画或者效果的前面，相当于停止结束上一次的动画

 <script>
       //stop()必须写在动画的前面
   $(".nav>li").hover(function() {  
       $(this).children("ul").stop().slideDown(200);
   },function() {     
       $(this).children("ul").stop().slideUp(200);
   });
   </script>

淡入淡出

fadeIn()  淡入
fadeOut()  淡出
fadeToggle()  切换淡入淡出
fadeTo()  修改透明度

• fadeIn(1000)
  fadeOut(1000)
  fadeToggle(1000)

  括号里面写时间

• 渐进方式调整到指定的不透明度

  fadeTo([[speed],opacity,[easing].[fn]])

  //速度为1000毫秒，透明度为0.5，速度和透明度必须写
  $("div").fadeTo(1000,0.5);
  

  效果参数：

  1. opacity透明度必须写，取值0~1之间
  2. speed：三种预定速度之一的字符串（“slow”,“normal”,or “fast”）或者表示动画时长的毫秒数值（如：1000）必须写。
  3. easing：（Optional）用来指定切换效果，默认时"swing"，可用参数"linear"
  4. 速度和透明度必须写

自定义动画

animate()

• 1. 语法

  animate(params,[speed],[easing],[fn])

  2. 参数

     • params：想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是复合属性则需要采取驼峰命名法borderLeft。其余参数都可以省略。

  3. <script>
         $(funtion() {
           $("button").click(function() {
             $("div").stop().animate({
                 left:500//向右走500px
                 top:300//向下走300px
                 opacity:.4//透明度改为0.4
             },500)//在500秒内走完
         })
           })
     </script>
     

     1. speed:三种预定义速度之一的字符串(“slow”,“normal”,or “fast”)或表示动画时长的毫秒数值（如：1000）。
     2. easing：（Optional）用来指定切换效果，默认"swing"，可用参数"linear"
     3. fn:回调函数，在动画完成时执行的函数，每个元素执行一次。

• 带有动画的返回顶部

  • 核心原理：使用animate动画返回顶部

  • animate动画函数里面有个scrollTop属性，可以设置位置

  • 但是是元素做动画，因此$(“body,html”).animate({scrollTop:0})

  • 注意：不能是文档而是html和body元素做动画

  • // $(".back").click(function() {
    //     $($(document).scrollTop(0));
    // })
    
    //做成动画效果
    $(".back").click(function() {
          $("body,html").stop().animate({
               scrollTop:0
          })
    })
    

#jQuery属性操作

设置或获取元素固有属性值 prop()

所谓固有属性就是元素本身自带的属性，比如<a>元素里面的href，比如<input>元素里面的type。

1.获取属性值

<script>
    //element.prop("属性名")获取属性值
    console.log($("a").prop("href"))
    $("input").change(function() {//change 改变了就执行
        //获取复选框里的选中状态，选中为true，没有选中为flase
        console.log($(this).prop("checked"))
    })
</script>

2.设置属性值

<script>
    //prop("属性","属性值")
    $("a").prop("title","我们都挺好")
</script>

设置或获取元素自定义属性值 attr()

用户自己给元素添加的属性，我们称为自定义属性，比如给div添加index = “1”。

1.获取属性值

<script>
    //attr("属性")    类似于原生getAttribute()
</script>

2.设置属性值

<script>
    //attr("属性","属性值")   类似于原生的setAttribute()
</script>

数据缓存 data()

data()方法可以在指定的元素上存取数据，并不会修改DOM元素结构，一旦页面刷新，之前存放的数据都将被移除

1.附加数据语法

data("name","value")//向被选元素附加数据

2.获取数据语法

date("name")//向被选元素获取数据

使用：

<script>
    //里面的数据是存放在元素的内存里面
    //已经把andy存到了uname里面，在页面中是看不到的
    $("span").data("uname","andy")
    console.log(${"span"}.data("uname"));
</script>

3.获取data-index = 1 h5自定义属性 第一个 不用写data 而且返回的是数字型

//获取data-index自定义属性里的内容时，前面的data不要写，只需写index
$("div").data("index");
返回的是数字型

#jQuery文本属性值

主要针对元素的内容还有表单的值操作

普通元素内容html() (相当于原生的inner HTML)

1.获取设置元素内容    (相当于原生的innerHTML)
$("div").html()      //获取里面的标签和内容
$("div").html("123")  //内容改为123


2.获取设置元素文本内容 text()    (相当于原生的innertext)
$("div").text()  //获取里面的内容
$("div").text("123")  //内容改为123


3.获取设置表单值 val()   (相当于原生的value)
$("input").val()  //获取里面的内容
$("input").val("123")  //内容改为123
$("input").val("")//清空元素

#jQuery元素操作

遍历元素

jQuery隐式迭代是对同一类元素做了同样的操作。如果想要给同一类元素做不同操作，就需要用到遍历。

语法1：
$("div").each(function(index,domEle) {xxx;})
1.each()方法遍历匹配的每一个元素。主要用DOM处理。each每一个
2.里面的回调函数有两个参数：index是每个元素的索引号；demEle是每个DOM元素对象，不是jQuery对象
3.所以要想使用jQuery方法，需要给这个dom元素转换为jQuery对象

1.回调函数的第一个参数一定是索引号，可以自己指定索引号的名称
   index为索引号，可以换成随便其他的名称
   console.log(index);  ----->输出为每个元素的索引号0 1 2 3 4.....
2.回调函数第二个参数一定是dom元素对象，dom对象没有css方法
   console.log(domEle); ----->输出为每个元素里面的内容及标签
   $(domEle).css("color","blue")

使用each代码实现：
$(function() {
     var sum = 0;
     var arr = ["red","green","blue"];
     $("div").each(function(i,domEle) {
           $(domEle).css("color",arr[i]);
           sum += parseInt($(domEle).text());
   }) 
})

语法二：
$.each(object,function(index,element) { xxx; })

1.$.each()方法可用于遍历任何对象，主要用于遍历数组，数据处理，比如数组，对象
2.里面的函数有2个参数：index是每个元素的索引号；element遍历内容

$.each($("div"),function(i,ele) {
   console.log(i) ----->0,1,2...
   console.log(ele)  ----->内容及标签
})
$.each({name:"andy",age:18},function(i,ele) {
     console.log(i); //输出的是name age 属性名、、
     console.log(ele); //输出的是andy 18 属性值
     })

创建元素

语法：$("<li>我是后来创建的</li>");    动态创建了一个li标签

添加元素

• > 内部添加（生成之后，他们是父子关系）

element.append(“内容”)；

$(“ul”).append(li)

把内容放入匹配元素内部的最后面，类似原生appendChild

$(“ul”).prepend(li); 内部添加并且放到内容的最前面

• > 外部添加（生成之后，他们是兄弟关系

element.after //把内容放入目标元素的后面

element.before(“内容”) //把内容放到目标元素的前面

<div class="test">我是原先的div</div>

var div = $("<div>我是后妈生的</div>")
$(".test").after(div);

//1.创建元素
var li = $("<li></li>");
  //2.给创建的元素内添加内容
  li.html($(".txt").val() + "<a href='javascript:;'>删除</a>")
      //3.添加元素到指定位置
      $(".ul").prepend(li);
      $(".txt").val("");//把内容清空

删除元素

element.remove() // 删除匹配的元素(本身)

$(“ul”).remove(); //可以删除匹配的元素，即自杀

<script>
   $(function() {
//1.点击发布按钮，动态创建一个小li，放入文本框的内容和删除按钮，并且添加到ul中
   $(".btn").on("click", function() {
      var li = $("<li></li>");
      li.html($(".txt").val() + "<a href='javascript:;'>删除</a>")
      $(".ul").prepend(li);
      $(".txt").val("");
            })
//2.点击的删除按钮，可以删除当前的微博留言
      $("ul").on("click","a",function() {//ul为父元素,a为li里面的删除
      $(this).parent().remove();//删除的为ul里面的li
            })
    })    
</script>

element.empty() //可以删除匹配的元素里面所有的子节点 孩子

element.html(“”) //可以删除匹配的元素里面所有的子节点 孩子

#jQuery尺寸位置操作

jQuery尺寸

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

• 以上参数为空，则是获取相应值，返回的是数字型
• 如果参数是数字，则是修改相应值
• 参数可以不写单位

jQuery位置

位置主要有三个：offset()，position()，scrollTop()/scrollLeft()

(1) offset()设置或获取元素偏移

1.offset()方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系

2.改方法有两个属性left，top。offset().top用于获取距离文档顶部的距离，offset().left用于获取距离文档左侧的距离

3.可以设置元素的偏移：offset({top:10,left:30});

//1.获取设置距离文档的位置
console.log($(".son").offset());//返回一个object对象，里面有left值top值等

console.log($(".son").offset().top);//得到的就是距离文档上部的像素

$(".son").offset({//修改距离文档的距离
      top:200,
      left:200
});

(2)position获取元素偏移

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

$(“.son”).position();//距离带有定位的父亲的距离top,left

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

1.scollTop()方法设置或返回被选元素被卷去的头部。

//页面滚动事件

$(window).scroll(function() {

​ //console.log(11);

​ $(document).scrollTop();//获得被卷去头部的距离

})

scrollTop(100)//设置开始已经被卷曲100px

jQuery事件

#jquery事件注册

事件处理on绑定一个或者多个事件

语法：
element.事件(function() {})
$("div").click(function() {事件处理程序})

//其他事件和元素基本一致
//比如mouseover，mouseout，blur，focus，change，keydown，keyup，resize，scroll等

代码：
<script>
    //1.单个事件注册
    $("div").click(function() {
        $(this).css("background","purple");
    })
    $("div").mouseenter(function() {//鼠标经过
        $(this).css("background","skyblue");
    })
</script>

#jQuery事件处理

事件处理on()绑定事件

解释：on()方法在匹配元素上绑定一个或多个事件的事件处理函数
语法：
element.on(events,[selector],fn)
1.events:一个或多个用空格分隔的事件类型，如：“click"或"keydown”。
2.selector:元素的子元素选择器。
3.fn:回调函数，即绑定在元素身上的侦听函数。

实例代码：

<script>
    //1.事件处理on
    $(function() {
        $("div").on({
            mouseenter:function() {
                $(this).css("background","purple");
            },
            click:function() {
                $(this).css("background","skyblue");
            },
            mouseleave:function() {
                $(this).css("background","blue");
            }
        });
    })
</script>

优势1

<script>
    //on()方法优势1：可以绑定多个事件，多个处理事件处理程序
    $("div").on({
        mouseover:function() {},
        mouseout:function() {},
        click:function() {}
    });
    //如果事件处理程序相同
    $("div").on("mouseover mouseout",function() {
        $(this).toggleClass("current");
    });
</script>

优势2

<script>
    //on()方法优势2：可以事件委派操作。事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。
    //on()可以实现事件委托
    $("ul li").click();//相当于下面的
    $("ul").on("click","li",function() {
        alert('hello world!');//click是绑定在ul身上的，但是，触发对象是ul里面的小li。
    });
    注意：在此之前有bind(),live(),delegate()等方法来处理事件绑定或者事件委派，最新版本的请用on替代他们
</script>

优势3

on()方法优势3
动态创建的元素，click()没有办法绑定事件，on()可以给未来动态生成的元素绑定事件

<script>
    $("ol").on("click","li",function() {
        alert(11);
    })
    var li = $("<li>我是后来创建的</li>");
    $("ol").append(li);
    /*下面这个为错误的代码：
    $("ol li").click(function() {
        alert(11);
    })
    var li = $("<li>我是后来创建的</li>");
    $("ol").append(li);*/
</script>

​

事件处理off()解绑事件

off()方法可以移除通过on()方法添加的事件处理程序

$("div").off();//解除了div身上所有的事件
$("div").off("click");//这个是解除了div身上的点击事件
$("ul").off("click","li");//解绑事件委托
如果有的事件只想触发一次，可以使用one()来绑定事件
$("p").one("click",function() {
      alert(11);
})

自动触发事件trigger()

有些事件希望自动触发，比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发。

自动触发事件
element.click() //第一种简写形式   元素.页面
$("div").click();

element.trigger("type")//第二种自动触发模式   元素.trigger("事件")
$("div").trigger("click");

element.triggerHandler(type)  //第三种自动触发模式  不会触发元素的默认行为
$("div").triggerHandler("click");

#jQuery事件对象

事件被触发，就会有事件对象的产生

element.on(events,[selector],function(event) {})

<script>
    //阻止默认行为：event.preventDefault()或者return false
    //阻止冒泡：event.stopPropagation()
    $(function() {
        $(document).on("click",function() {
            console.log("点击了document");//后冒泡到这时，才执行
        })
        $("div").on("click",function(event) {
            //console.log(event);
            console.log("点击了div")//先执行，再往上冒泡，冒泡到document上
            event.stopPropagation();//写了这个就直接不冒泡到document了
        })
    })
</script>

jQuery其他方法

#jQuery拷贝对象

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

语法：

$.extend([deep],target,object,[objectN])
1.deep:如果设为true为深拷贝，默认为false浅拷贝
2.target:要拷贝的目标对象
3.object1:待拷贝到第一个对象的对象
4.objectN:待拷贝到第N个对象的对象
5.浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象。（修改了目标对象和被拷贝对象都会变化）
6.深拷贝，前面加true，完全克隆（拷贝的对象，而不是地址），修改目标对象不会影响被拷贝对象

$(function() {
     var targetObj = {};
     var obj = {
          id:1,
          name:"andy"
          msg: {
              age:18
          }
     }
     $.extend(targetObj,obj);//把obj拷贝给targetObj
     console.log(targetObj);//还会覆盖targetObj里面原来的数据
     targetObj.msg.age = 20;
})

#多库共存

问题概述：

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

客观需求：

需要一个解决方案，让jQuery和其他的js库不存在冲突，可以同时存在，这就叫做多库共存。

jQuery解决方案：

1.把里面的$符号统一改为jQuery，比如jQuery(“div”)

如果$符号冲突了，就使用jQuery

$(function() {
     function $(ele) {
          return document.querySelector(ele);
     }
     console.log($("div"));
     jQuery.each();
})

2.jquery变量规定新的名称：$.noConflict() var xx = $.noConflict();

让jQuery释放$控制权，让用自己决定

$(function() {
     var suibian = $.noConflict();
     suibian("span");//suibian相当于$,这里获取了span盒子
     suibian.each();
})

#jQuery插件

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

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

jQuery插件常用的网站：

1.jQuery插件库：http://www.jq22.com/

2.jQuery之家：http://www.htmleaf.com/