1、jQuery概述

1.1Javascript库

JavaScript库：即library，是一个封装好的特定的集合（方法和函数），从封装一大堆函数的角度理解库，就是在这个库中，封装了许多预先定义好的函数在里边。

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

1.2、JQuery的概念

jQuery是一个快速、简洁的JavaScript库，把js里的DOM操作做了封装，我们可以快速的查询使用里面的功能。

2、jQuery的基本使用

2.1、jQuery的入口函数

$(document).ready(function(){
            $('div').hide();
})
$(function(){
            $('div').hide();
})

2.2、jQuery的顶级对象$

$是jQuery对的别称，同时也是jQuery的顶级对象

jQuery(function(){
    alert("jQuery");
});
$(function(){
    alert("dollar")
});

2.3、jQuery对象和DOM对象

1、用原生js引用过来的对象就是原生对象

2、用jQuery放法获取的元素就是jQuery对象

3、jQuery对象的本质：利用$对DOM对象包装后产生的对象（伪数组形式储存 ）

var Div = document.querySelector('div');//Div是DOM对象

$('div');//$('div')是一个jQuery对象

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

DOM对象和jQuery对象是可以相互转换的，因为原生js比jQuery更大，原生的一些属性和方法， jQuery没有给我们封装，要想使用这些属性方法必须将jQuery对象转换为DOM对象才能使用。

1、DOM对象转化为jQuery对象：$(DOM对象)

2、jQuery转化为DOM对象：(1)$（DOM对象）[index] (2)$（DOM对象).get(index) index是索引号

3、jQuery选择器

3.1、基础选择器

$（”选择器”）

image-20200707172215560

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

3.2、jQuery的筛选选择器

image-20200708143547632

 <ul>
        <li>first</li>
        <li>seccend</li>
        <li>last</li>
    </ul>
    <script>
        $(function(){
            $("ul li:first").css("color","red");
        })//将第一个li变为红色
    </script>

3.3、jQuery筛选的方法

image-20200708144842506

 <div class="grandfather">
            <div class="father">father</div>
            <div><div class="son">son</div></div>
            <p>paragraphs</p>
        </div>
        <script>
            $(function(){
                 console.log($("div").parent());
                 $(".grandfather").children("p").css("color","red")
            })//其他的方法使用方法都差不多，不一一列举
        </script>

3.4、jQuery的样式操作

jQuery可以使用css方法来修改元素样式；也可以操作类，修改多个样式

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

$(this).css("color");

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

$(this).css("color","red)

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

$(this).css({

"color":"red",

"height":"200px"})

作用相当于classList，可以操作类样式，注意操作类里面的参数不要加点

1、添加删除类

$(this).addclass(···)

$(this).removeclass(···)

2、切换类

$(this).toggleclas(···)

3.5、jQuery的样式操作

原生的JS中，className会覆盖掉原来的类名，而jQuery里面类操作只是针对类进行操作，不影响原先的类名

3.6、jQuery的效果

3.6.1、显示隐藏效果

show（[speed],[easing],[fn]）

hide（[speed],[easing],[fn]）

toggle（[speed],[easing],[fn]）

（1）、参数都可以省略，无动画直接显示。

（2）、speed：三种预定速度之一的字符串（“show”，“normal”，“fast”）或表示动画时长的毫秒数值。

（3）、easing：（Optional）用来指定切换效果，默认是“swing”，可用参数“linear”。

（4）、fn：回调函数，在动画完成时执行函数，每个元素执行一次。

    <button>显示</button>
    <button>隐藏</button>
    <button>切换</button>
    <div class="R"></div>
    <script>
        $(function(){
            $("button").eq(1).click(function(){
                $("div").hide();//可以加参数，隐藏效果可查API文档，一般不会加参数
            });
            $("button").eq(0).click(function(){
                $("div").show();
            });
            $(button).eq(2).click(function(){
                $("div").toggle(2);
            });
        })
    </script>
3.6.2、滑动

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

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

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

<script src="jsJQuery.js"></script>
    <style>
        div{
            background-color: blue;
            width: 200px;
            height: 200px;
            display: none;
        }
    </style>
</head>
<body>
    <button>下拉</button>
    <button>上拉</button>
    <button>切换</button>
    <div class="R"></div>
    <script>
        $(function(){
            $("button").eq(0).click(function(){
                $("div").slideDown();
            });
            $("button").eq(1).click(function(){
                $("div").slideUp();
            });
            $(button).eq(2).click(function(){
                $("div").slideToggle();
            });
        })
    </script>
</body>
</html>
3.6.3、事件切换

hover([over,out])

(1)over:鼠标移动到要素上触发的函数(相当于mouseenter)

(2)out:鼠标移出元素要触发的函数(相当于mouseleave)

$("this").hover(function(){
    $(this).slideDown()
},function(){
    $(this).slideUp()
})
3.6.4、动画队列及其停止的方法
3.6.4.1、动画或效果队列

当我们执行一个动画过多的时候，会出现掉帧的现象，使用队列的话，动画或者效果一旦触发就会执行，如果多次触发，就会造成多个动画或者效果队列执行。

3.6.4.2、停止队列

stop()

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

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

$("this").hover(function(){
    $("this").stop().slideToggle();
})
3.6.5、淡入淡出

fadeIn（[speed],[easing],[fn]）//淡入

fadeOut（[speed],[easing],[fn]）//淡出

fadeTo（[speed],opacity,[easing],[fn]）//改变透明度

opacity透明度必须要写，娶值为0~1。

fadeToggle（[speed],[easing],[fn]）//淡入淡出切换

    <button>淡入</button>
    <button>淡出</button>
    <button>切换</button>
    <button>改变透明度</button>
    <div class="R"></div>
    <script>
        $(function(){
            $("button").eq(0).click(function(){
                $("div").fadeIn();
            });
            $("button").eq(1).click(function(){
                $("div").fadeOut();
            });
            $(button).eq(2).click(function(){
                $("div").fadeToggle();
            });
            $(button).eq(2).click(function(){
                $("div").fadeTo();
            });
        })
3.6.6、自定义动画abimate

animate（params，[speed],[easing],[fn]）

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

<style>
        div {
            position: absolute;
            background-color: blue;
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <button>自定义</button>
    <div></div>
    <script>
        $(function(){
            $("button").click(function(){
                $("div").animate({
                    left : 200
                });
            })
        })
    </script>
</body>

3.7、jQuery属性操作

3.7.1、设置或获取元素固有的属性值prop（）

所有的元素固有属性就是元素本身自带的属性，就像里面的href，里面的type

获取方式：prop(“属性”)

设置属性语法：prop("属性"，"属性值")

3.7.2、设置或者获取元素的自定义属性值atter()

获取方式：atter(“属性”)

设置属性语法：atter("属性"，"属性值")

3.7.3、数据缓存date()

date()方法可以在指定的元素上存取数据，并不会修改DOM元素结构，一单页面刷新，之前存放的数据将被移出。date()里面的数据是存放在元素内存里面的。

3.8、jQuery的类容文本值

1、普通的元素类容

html（）//获取元素类容

`html（”类容”）//设置元素类容 类容

val()//获取表单类容

val("类容")//修改表单类容

 <input type="text" value="input">
    <script>
        console.log($("input").val());
        $("input").val("输入");
        console.log($("input").val());
    </script>

3.9、jQuery元素操作

3.9.1、遍历元素

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

$("div").each(function(index,domEle){xxx;})

回调函数第一个参数是索引号，可以随便指定索引号名称，第二个参数是dom元素对象

$.each(object,funcyion(index,domEle){xxx;})

$.each()方法可以遍历任何对象，主要用于数据处理，如数组、对象等。index是每个元素的索引号，element是遍历类容

3.9.2、创建元素

$("<li></li>")动态创建一个li标签

3.9.3、创建元素

内部添加：

element.apend("类容")内部添加，并且放到类容后面

element.prepend("类容")内部添加，并且放到类容前面

外部添加：

element.after("类容")外部添加，并且放到类容后面

element.before("类容")外部添加，并且放到类容后面。

删除：

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

element.empty()删除匹配的元素集合中的所有子节点

element.html("")删除匹配的元素内容

     <ul></ul>
    <div></div>
    <script>
        $(function(){
            var li = $("<li>添加的li标签</li>")
            $("ul").append(li);
            var div=$("<div>添加的div标签</div>")
            $("div").before(div);
            //$("ul").empty();
            //$("div").html("");
        })
    </script>
3.10、jQuery的尺寸位置操作
3.10.1、尺寸

image-20200712175227304

若参数为空，则方法会返回对应的值，若有参数则是修改为相应的值。

3.10.2、位置

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

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

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

(3) 、可以设置元素的偏移：offset{(left:100,top:100)}

2、position()获取元素偏移

(1)、有时候有的元素有父级，我们想知道此元素与父级元素的位置关系，position()可以获得带有父级元素的相对位置，只能获取，不能修改。

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

(1)、scrollTop()方法设置或返回被选元素被卷去的头部（无动画返回顶部制作方法）

4、jQuery事件

4.1、jQuery的事件注册

element.事件(function(){})

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

4.2、事件处理
4.2.1、事件处理on()绑定事件

on()方法在匹配元素上绑定一个或多个事件处理函数，可以委派操作，委派的定义就是把原来的子元素身上的事件绑定在负元素上，就是把事件委派给父元素。也可以绑定动态元素。

element.on(events,[selector],fn)

(1)、events：一个或多个用空格分开的类型

(2)、selector：元素的子元素选择器

<style>
    div{
        position: absolute;
        background-color: red;
        height: 200px;
        width: 200px;
    }
</style>
<body>
    <div></div>
    <script>
        $("div").on({
            mouseenter:function(){
                $(this).css("background","blue")
            },
            click:function(){
                $(this).css("right",200)
            }
        })


        $("div").on("mouseenter mouseleave",function(){
            alert("触发事件")
        })
    </script>
</body>
<body>
    <ul>
        <li>li</li>
        <li>li</li>

    </ul>
    <script>     //on事件可以委托（委派）
        $("ul").on("click","li",function(){//click绑定在ul上，但触发的是li标签
            alert("触发")
        })
    </script>
</body>
<body>
    <ul>
        <li>li</li>
        <li>li</li>

    </ul>
    <script>     
        $("ul").on("click","li",function(){
            alert("触发")
        })
        var li = $("<li>创建的li标签</li>")
        $("ul").append(li);
    </script>
</body>
4.2.2、事件处理off()解绑事件

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

$("div").off()//解除了div上的所有事件

$("div").off("click")//解除了div上的点击事件

$("ul").off("click"，"li")//解除了li上的事件委托

如果只想触发一次，可以用one()来绑定

$("div").one("click",function{
    alert("触发")
})
4.2.3、自动触发事件trigger()

有的事件我们希望我们不用自己动手，程序自动处理，像自动播放，换集、轮播。

元素.trigger("事件")

元素.triggerHandler("事件")

4.3、事件对象

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

&("div").on("click",function(event){
    console.log(event);
})

阻止默认行为:event.preventDefault() 或者 return false

阻止冒泡: event.stopPropagation()

5、jQuery的其他方法

5.1、jQuery对象拷贝

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

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

1、deep:如果设true为深拷贝，false就是浅拷贝

2、target:要拷贝的目标对象

3、object1:待拷贝的第一个对象

4、objectN是拷贝到第N个对象

5、浅拷贝是把拷贝的对象复杂类型中的地址拷贝给目标对象，深拷贝就是把里面的东西完全复制给目标对象，里面有不冲突对象会合并在一起。

<script>
        $(function(){
        var target = {};
        var person = {
            name : "CJSH",
            age : 18,
            sex : "man"
        };
        $.extend(target,person);//将persion拷贝给target
        console.log(target);
    })
    </script>
5.2、多库共存

jQuery使用$作为标识符，随着jQuery的流行，其他js库也会用这$作为标识，这样会引起冲突 ，jQuery通过将$符号统一改为jQuery，如jQuery(“div”)来解决这类问题。也可以采用自定义的方式使用noconflict（），如：var a = $.noConflict()这样就可以用a来更替$符号。

5.3、jQuery插件

jQuery功能比较有限，想要完成复杂的特效效果，可以借助jQuery插件完成，插件也是依赖于jQuery来完成的，所以必须先引入jQuery文件。

插件常用网站：

1、jQuery插件库 http://www.jQ22.com

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

下载下方有使用教程参考。

本人总结，若有不妥，望指正，谢谢观看！