jQuery

Posted 2021-02-14 hexiaorui123

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery相关的知识，希望对你有一定的参考价值。

为什么要使用jQuery

在用js写代码时，会遇到一些问题：

window.onload 事件有事件覆盖的问题，因此只能写一个事件。
代码容错性差。
浏览器兼容性问题。
书写很繁琐，代码量多。
代码很乱，各个页面到处都是。
动画效果很难实现。

jQuery的出现，可以解决以上问题。

DOM文档加载的步骤

解析html结构。
加载外部脚本和样式表文件。
解析并执行脚本代码。
DOM树构建完成。
加载图片等外部文件。
页面加载完毕。

执行时间不同

window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。

$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。

编写个数不同

window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个

$(document).ready()可以同时编写多个，并且都可以得到执行

简化写法不同

window.onload没有简化写法

$(document).ready(function(){})可以简写成$(function(){});

使用 jQuery 的基本步骤

(1）引包

（2）入口函数

（3）功能实现代码（事件处理）

jquery文件的引入

<script src="jquery-3.3.1.js"></script>

jquery的入口函数

写法一：

//1.文档加载完毕，图片不加载的时候，就可以执行这个函数。
       $(document).ready(function () {
           alert(1);
       })

写法二：（写法一的简洁版）
 //2.文档加载完毕，图片不加载的时候，就可以执行这个函数。
       $(function () {
           alert(1);
       });

写法三：

写法三：
  //3.文档加载完毕，图片也加载完毕的时候，在执行这个函数。
       $(window).ready(function () {
           alert(1);
       })

jQuery入口函数与js入口函数的区别：

区别一：书写个数不同：

Js 的入口函数只能出现一次，出现多次会存在事件覆盖的问题。
jQuery 的入口函数，可以出现任意多次，并不存在事件覆盖问题。

区别二：执行时机不同：

Js的入口函数是在所有的文件资源加载完成后，才执行。这些文件资源包括：页面文档、外部的js文件、外部的css文件、图片等。
jQuery的入口函数，是在文档加载完成后，就执行。文档加载完成指的是：DOM树加载完成后，就可以操作DOM了，不用等到所有的外部资源都加载完成。

文档加载的顺序：从上往下，边解析边执行。

jQuery的`$`符号

jQuery 使用 $ 符号原因：书写简洁、相对于其他字符与众不同、容易被记住。

jQuery占用了我们两个变量：$ 和 jQuery

$ 实际上表示的是一个函数名

jQuery函数跟 $ 函数的关系：jQuery === $。

js中的DOM对象和 jQuery对象比较

区别

举例子：

<div></div>
<div id="app"></div>
<div class="box"></div>
<div class="box"></div>
<div></div>
---------------------------

通过原生 js 获取这些元素节点的方式是：

    var myBox = document.getElementById("app");           //通过 id 获取单个元素
    var boxArr = document.getElementsByClassName("box");  //通过 class 获取的是伪数组
    var divArr = document.getElementsByTagName("div");    //通过标签获取的是伪数组


通过 jQuery 获取这些元素节点的方式是：（获取的都是数组）

  //获取的是数组，里面包含着原生 JS 中的DOM对象。
　　console.log($(‘#app‘));
　　console.log($(‘.box‘));
　　console.log($(‘div‘));

由于JQuery 自带了 css()方法，我们还可以直接在代码中给 div 设置 css 属性。

总结：jQuery 就是把 DOM 对象重新包装了一下，让其具有了 jQuery 方法。

JQuery对象和JS对象的互相转换

1、 DOM 对象转为 jQuery对象：

$(js对象);

2、jQuery对象转为 DOM 对象：

jquery对象[index];      //方式1（推荐）

  jquery对象.get(index);  //方式2

jQuery对象转换成了 DOM 对象之后，可以直接调用 DOM 提供的一些功能。如：

$(‘div‘)[1].style.backgroundColor = ‘yellow‘;
$(‘div‘)[3].style.backgroundColor = ‘green‘;

如果想要用哪种方式设置属性或方法，必须转换成该类型。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #box{
            width:100px;
            height:100px;
            background-color:red;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div id="box2"></div>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">

        $(function () {
            //获取jquery对象
            console.log($(‘#box2‘));
            console.log($(‘#box2‘));
            console.log($(‘#box2‘));
            console.log($(‘#box2‘));
            console.log($(‘.box‘));

            //获取js对象
            var oDiv2 = document.getElementById(‘box2‘);
            var oDiv2 = document.getElementById(‘box2‘);
            console.log(oDiv2);

            //jquery对象 转化  js对象
            console.log($(‘#box2‘)[0]);
            console.log($(‘#box2‘).get(0));

            //js对象转 jquery对象，$(js对象)
            console.log($(oDiv2));

            //如果是js对象，更加希望转化成jquery  再操作简便的dom
            //因为js包含jquery，而jquery只是封装了（dom、 事件、ajax动画）。如果涉及其他方法等，就要将jquery对象 转化为js对象
            //是什么对象，就用什么对象的属性和方法，被混淆
            //jquery大部分都是api方法，length和索引 是它的属性
            
        });

    </script>

</body>
</html>

jQuery如何操作DOM对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div{
            margin-top:10px;
            width:100px;
            height:100px;
            background-color:red;
        }
    </style>
</head>
<body>
    <div class="box">wusir</div>
    <div id="box">yuan</div>
    <div>alex</div>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">
        $(function(){
            //事件三步走：事件源  事件  事件驱动程序
            // jquery如何获取dom

            //jquery的标签选择器
            console.log($(‘div‘));

            //js对象
            $(‘div‘)[0].onclick

            //jquery内部自己遍历每一个对象
             $(‘div‘).click(function(){
                alert(1);

                //this 指的是js对象
                 console.log(this.innerHTML);
                 console.log($(this).text())//这个是将this这个js对象转化为jquery对象，再调用text()方法
                 $(this).hide(300);//让盒子在300hs中消失
             });



            //2.类选择器
            console.log($(‘.box‘));

            //3.id选择器
            console.log($(‘#box‘));
        })


    </script>
</body>
</html>

jQuery 的基本选择器

技术图片

// 基本选择器
        // 1.id选择器
        $(‘#brother‘).css(‘color‘,‘black‘);
        // 2.标签选择器
        $(‘a‘).css(‘color‘,‘yellow‘)

        // 3.类选择器
        $(‘.item‘).css(‘background‘,‘#FC4708‘)

        // 4.通配符选择器
        // console.log($(‘*‘).html())
        console.log($(‘a‘).val())

层级选择器

技术图片

// 后代选择器
        console.log($(‘div p‘))
        $(‘div p‘).css(‘color‘,‘red‘)

        // 子代选择器
        $(‘div >p‘).css(‘background‘,‘green‘)

        // 毗邻选择器 匹配 所有紧接在#brother元素后的下一个元素
        $(‘#brother+ li‘).css(‘color‘,‘yellow‘)

        // 兄弟选择器
        // 匹配所有#brother之后的所有兄弟姐妹元素
        $(‘#brother~li‘).css(‘background‘,‘#996633‘)

        // :first  获取第一个元素
        $(‘li:first‘).text(‘真的吗？‘)
        // :last 获取最后一个元素
        $(‘li:last‘).html(‘真的吗？‘)



        //一个给定索引值的元素
        console.log($(‘p:eq(3)‘).text())

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-3.3.1.js"></script>
    <script>
        $(function () {
            //获取ul中的li设置为粉色
            //后代：儿孙重孙曾孙玄孙....
            var jqLi = $("ul li");
            jqLi.css("margin", 5);
            jqLi.css("background", "pink");

            //子代：亲儿子
            var jqOtherLi = $("ul>li");
            jqOtherLi.css("background", "red");
        });
    </script>
</head>
<body>
<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <ol>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
    </ol>
</ul>
</body>
</html>

基本过滤选择器

技术图片

//:first  获取第一个元素
        $(‘li:first‘).text(‘真的吗？‘)
        //:last 获取最后一个元素
        $(‘li:last‘).html(‘我是最后一个元素？‘)

        //:odd 匹配所有索引值为奇数的元素，从0开始计数
        $(‘li:odd‘).css(‘color‘,‘green‘);

        //:even 匹配所有索引值为偶数的元素，从0开始计数
        $(‘li:even‘).css(‘color‘,‘red‘)

        //:eq(index) 获取给定索引值的元素 从0开始计数
        $(‘li:eq(1)‘).css(‘font-size‘,‘30px‘)

        //:gt(index)匹配所有大于给定索引值的元素
        $(‘li:gt(1)‘).css(‘font-size‘,‘40px‘)

        //:lt(index) 匹配所有小于给定索引值的元素
        $(‘li:lt(1)‘).css(‘font-size‘,‘40px‘)

        //一个给定索引值的元素
        console.log($(‘p:eq(3)‘).text())

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>基本过滤选择器</title>
    </head>
    <body>
        <ul>
            <li>哈哈哈哈，基本过滤选择器</li>
            <li>嘿嘿嘿</li>
            <li>天王盖地虎</li>
            <li>小鸡炖蘑菇</li>
            
        </ul>
    </body>
    <script src="jquery-3.3.1.js"></script>
    <script type="text/javascript">
        
        $(function(){
            //获取第一个 :first ,获取最后一个 :last
            
            //奇数
            $(‘li:odd‘).css(‘color‘,‘red‘);
            //偶数
            $(‘li:even‘).css(‘color‘,‘green‘);
            
            //选中索引值为1的元素 *
            $(‘li:eq(1)‘).css(‘font-size‘,‘30px‘);
            
            //大于索引值1
            $(‘li:gt(1)‘).css(‘font-size‘,‘50px‘);
            
            //小于索引值1
            $(‘li:lt(1)‘).css(‘font-size‘,‘12px‘);
            
        })
        
        
    </script>
</html>

属性选择器

技术图片

//属性选择器

        //标签名[属性名] 查找所有含有id属性的该标签名的元素
        $("li[id]").css(‘color‘,‘red‘)

        //[attr=value] 匹配给定的属性是某个特定值的元素
        $(‘li[class=what]‘).css(‘font-size‘,‘30px‘)

        //[attr!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素
        $(‘li[class!=what]‘).css(‘color‘,‘darkgreen‘)

        //匹配给定的属性是以某些值开始的元素
        $(‘input[name^=username]‘).css(‘background‘,‘red‘)

        //匹配给定的属性是以某些值结尾的元素
        $(‘input[name$=222]‘).css(‘background‘,‘yellow‘)
        //匹配给定的属性是以包含某些值的元素
        $("button[class*=‘btn‘]").css(‘background‘,‘#0000FF‘)

<div id="box">
            <h2 class="title">属性元素器</h2>
            <p class="p1">我是一个段落</p>
            <ul>
                <li id="li1">分手应该体面</li>
                <li class="what">分手应该体面</li>
                <li class="what">分手应该体面</li>
                <li class="heihei">分手应该体面</li>

            </ul>

            <form action="" method="post">

                <input name="username" type=‘text‘ value="1" checked="checked"></input>
                <input name="username1111" type=‘text‘ value="1"></input>
                <input name="username2222" type=‘text‘ value="1"></input>
                <input name="username3333" type=‘text‘ value="1"></input>
                <button class="btn-default">按钮1</button>
                <button class="btn-info">按钮1</button>
                <button class="btn-success">按钮1</button>
                <button class="btn-danger">按钮1</button>


            </form>
        </div>

筛选选择器

技术图片

//获取第n个元素 数值从0开始
        $(‘span‘).eq(0).css(‘font-size‘,‘30px‘)

        //first()获取第一个元素
        $(‘span‘).first().css(‘background‘,‘red‘)

        //last()获取最后一个元素

        //.parent() 选择父亲元素
        $(‘span‘).parent(‘.p1‘).css({width:‘300px‘,height:‘300px‘,background:‘yellow‘})


        //.siblings()选择所有的兄弟元素
        $(‘.list‘).siblings(‘li‘).css(‘color‘,‘red‘)

        //.find()
        //查找所有的后代元素
        $(‘div‘).find(‘button‘).css(‘background‘,‘#313131‘)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
         <div id="box">
            <p class="p1">
                <span>我是第一个span标签</span>
                <span>我是第二个span标签</span>
                <span>我是第三个span标签</span>
            </p>
            <button>按钮</button>
        </div>
        <ul>
            <li class="list">2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </body>
    <script src="jquery-3.2.1.js"></script>
    <script type="text/javascript">
        
        //获取第n个元素 数值从0开始
        $(‘span‘).eq(1).css(‘color‘,‘#FF0000‘);
        
        //获取第一个元素 :first :last    点语法  ：get方法 和set方法
        $(‘span‘).last().css(‘color‘,‘greenyellow‘);
        $(‘span‘).first().css(‘color‘,‘greenyellow‘);
        
        //查找span标签的父元素（亲的）
        $(‘span‘).parent(‘.p1‘).css({"width":‘200px‘,‘height‘:‘200px‘,"background":‘red‘});
        
        //选择所有的兄弟元素（不包括自己）
                  $(‘.list‘).siblings(‘li‘).css(‘color‘,‘red‘);

                  
                //查找所有的后代元素
                   $(‘div‘).find(‘button‘).css(‘background‘,‘yellow‘);

                
                //不写参数代表获取所有子元素。
                   $(‘ul‘).children().css("background", "green");
                   $(‘ul‘).children("li").css("margin-top", 10);
                   

        
        
    </script>
</html>

siblings选择器方法的基本使用

查找所有兄弟元素（不包括自己）

选项卡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        ul{
            width: 400px;
            height: 100px;
            overflow: hidden;
        }
        ul li{
            list-style: none;
            float: left;
            width: 80px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            background-color: red;
            margin-right: 10px;

        }
        ul li a{
            padding: 20px;
            /*background-color: green;*/
            color:#fff;
        }
        p{
            display: none;
        }
        p.active{
            display: block;
        }
    </style>
<body>
    <ul>
        <li>
            <a href="javascript:void(0)">
                alex1
            </a>
        </li>
        <li>
            <a href="javascript:void(0)">
                alex2
            </a>
        </li>
        <li>
            <a href="javascript:void(0)">
                alex3
            </a>
        </li>
        <li>
            <a href="javascript:void(0)">
                alex4
            </a>
        </li>
    </ul>
    <p>alex1</p>
    <p>alex2</p>
    <p>alex3</p>
    <p>alex4</p>

    <script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">
        $(function(){
            $(‘ul li a‘).click(function() {
                // 选项卡的完整版
                $(this).css(‘background‘,‘green‘).parent(‘li‘).siblings(‘li‘).find(‘a‘).css(‘background‘,‘transparent‘);

                // 得获取到点击的 dom的索引 通过 index()方法获取  注意 这个要找的是有兄弟元素的索引
                var i = $(this).parent(‘li‘).index();
                // addClass()  removeClass()
                $(‘p‘).eq(i).addClass(‘active‘).siblings(‘p‘).removeClass(‘active‘);
            });
        })
    </script>
    
    
</body>
</html>

jQuery动画

jQuery提供的一组网页中常见的动画效果，这些动画是标准的、有规律的效果；同时还提供给我们了自定义动画的功能。

显示动画

方式一：

  $("div").show();
解释：无参数，表示让指定的元素直接显示出来。其实这个方法的底层就是通过display: block;实现的。

方式二：

$(‘div‘).show(3000);
解释：通过控制元素的宽高、透明度、display属性，逐渐显示，2秒后显示完毕。

方式三：

 $("div").show("slow");
参数可以是：

slow 慢：600ms

normal 正常：400ms

fast 快：200ms

解释：和方式二类似，也是通过控制元素的宽高、透明度、display属性，逐渐显示。

方式四：

 //show(毫秒值，回调函数;
    $("div").show(5000,function () {
        alert("动画执行完毕！");
    });
解释：动画执行完后，立即执行回调函数。

上面的四种方式几乎一致：参数可以有两个，第一个是动画的执行时长，第二个是动画结束后执行的回调函数。

隐藏动画

方式参照上面的show()方法的方式。如下：

$(selector).hide();

$(selector).hide(1000); 

$(selector).hide("slow");

$(selector).hide(1000, function(){});

点击盒子，实现显示隐藏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #box{
                width: 200px;
                height: 200px;
                background-color: green;
                border: 1px solid red;
                display: none;
            }
        </style>
    </head>
    <body>
        <div id="box">        
        </div>
        <button id="btn">隐藏</button>    
    </body>
    <script src="jquery-3.3.1.js"></script>
    
    <script type="text/javascript">
        
        //jquery 提供了一些方法 show() hide() 控制元素显示隐藏
        var isShow = true;
        $(‘#btn‘).click(function(){
            if(isShow){
                $(‘#box‘).show(‘slow‘,function(){
                    $(this).text(‘盒子出来了‘);            
                    $(‘#btn‘).text(‘显示‘);
                    isShow = false;
                })
            }else{
                $(‘#box‘).hide(2000,function(){
                    $(this).text(‘‘);    
                    $(‘#btn‘).text(‘隐藏‘);
                    isShow = true;
                    
                })
            }
        })
    
        
    </script>
</html>

开关式显示隐藏动画

$(‘#box‘).toggle(3000,function(){});

显示和隐藏的来回切换采用的是toggle()方法：就是先执行show()，再执行hide()。

$(‘#btn‘).click(function(){
            $(‘#box‘).toggle(3000,function(){
                $(this).text(‘盒子出来了‘);    
                if ($(‘#btn‘).text()==‘隐藏‘) {
                    $(‘#btn‘).text(‘显示‘);    
                }else{
                    $(‘#btn‘).text(‘隐藏‘);    
                }
            });
        })

滑入和滑出（卷帘门效果）

1、滑入动画效果：

$(selector).slideDown(speed, 回调函数);
解释：下拉动画，显示元素。

注意：省略参数或者传入不合法的字符串，那么则使用默认值：400毫秒（同样适用于fadeIn/slideDown/slideUp）

2、滑出动画效果： 

 $(selector).slideUp(speed, 回调函数);
解释：上拉动画，隐藏元素。

3、滑入滑出切换动画效果：

 $(selector).slideToggle(speed, 回调函数);

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 300px;
            height: 300px;
            display: none;
            background-color: green;
        }
    </style>

    <script src="jquery-3.3.1.js"></script>
    <script>
        $(function () {
            //点击按钮后产生动画
            $("button:eq(0)").click(function () {

                //滑入动画： slideDown(毫秒值，回调函数[显示完毕执行什么]);
                $("div").slideDown(2000, function () {
                    alert("动画执行完毕！");
                });
            })

            //滑出动画
            $("button:eq(1)").click(function () {

                //滑出动画：slideUp(毫秒值，回调函数[显示完毕后执行什么]);
                $("div").slideUp(2000, function () {
                    alert("动画执行完毕！");
                });
            })

            $("button:eq(2)").click(function () {
                //滑入滑出切换（同样有四种用法）
                $("div").slideToggle(1000);
            })

        })
    </script>
</head>
<body>
<button>滑入</button>
<button>滑出</button>
<button>切换</button>
<div></div>

</body>
</html>

淡入淡出动画

1、淡入动画效果：

 $(selector).fadeIn(speed, callback);
作用：让元素以淡淡的进入视线的方式展示出来。

 

2、淡出动画效果：

$(selector).fadeOut(1000);
作用：让元素以渐渐消失的方式隐藏起来

 

3、淡入淡出切换动画效果：

 $(selector).fadeToggle(‘fast‘, callback);
作用：通过改变透明度，切换匹配元素的显示或隐藏状态。

参数的含义同show()方法。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 300px;
            height: 300px;
            display: none;
            /*透明度*/
            opacity: 0.5;
            background-color: red;
        }
    </style>

    <script src="jquery-3.3.1.js"></script>
    <script>
        $(function () {
            //点击按钮后产生动画
            $("button:eq(0)").click(function () {

//                //淡入动画用法1:   fadeIn();   不加参数
                $("div").fadeIn();

//                //淡入动画用法2:   fadeIn(2000);   毫秒值
//                $("div").fadeIn(2000);
//                //通过控制  透明度和display

                //淡入动画用法3:   fadeIn(字符串);   slow慢：600ms   normal正常:400ms   fast快：200ms
//                $("div").fadeIn("slow");
//                $("div").fadeIn("fast");
//                $("div").fadeIn("normal");

                //淡入动画用法4:   fadeIn(毫秒值，回调函数[显示完毕执行什么]);
//                $("div").fadeIn(5000,function () {
//                    alert("动画执行完毕！");
//                });
            })

            //滑出动画
            $("button:eq(1)").click(function () {
//                //滑出动画用法1:   fadeOut();   不加参数
               $("div").fadeOut();

//                //滑出动画用法2:   fadeOut(2000);   毫秒值
//                $("div").fadeOut(2000);  //通过这个方法实现的：display: none;
//                //通过控制  透明度和display

                //滑出动画用法3:   fadeOut(字符串);   slow慢：600ms   normal正常:400ms   fast快：200ms
//                $("div").fadeOut("slow");
//                $("div").fadeOut("fast");
//                $("div").fadeOut("normal");

                //滑出动画用法1:   fadeOut(毫秒值，回调函数[显示完毕执行什么]);
//                $("div").fadeOut(2000,function () {
//                    alert("动画执行完毕！");
//                });
            })

            $("button:eq(2)").click(function () {
                //滑入滑出切换
                //同样有四种用法
                $("div").fadeToggle(1000);
            })

            $("button:eq(3)").click(function () {
                //改透明度
                //同样有四种用法
                $("div").fadeTo(1000, 0.5, function () {
                    alert(1);
                });
            })
        })
    </script>
</head>
<body>
<button>淡入</button>
<button>淡出</button>
<button>切换</button>
<button>改透明度为0.5</button>
<div></div>

</body>
</html>

自定义动画

语法：

 $(selector).animate({params}, speed, callback);

作用：执行一组CSS属性的自定义动画。

第一个参数表示：要执行动画的CSS属性（必选）
第二个参数表示：执行动画时长（可选）
第三个参数表示：动画执行完后，立即执行的回调函数（可选）

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            position: absolute;
            left: 20px;
            top: 30px;
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
    <script src="jquery-3.3.1.js"></script>
    <script>
        jQuery(function () {
            $("button").click(function () {
                var json = {"width": 500, "height": 500, "left": 300, "top": 300, "border-radius": 100};
                var json2 = {
                    "width": 100,
                    "height": 100,
                    "left": 100,
                    "top": 100,
                    "border-radius": 100,
                    "background-color": "red"
                };

                //自定义动画
                $("div").animate(json, 1000, function () {
                    $("div").animate(json2, 1000, function () {
                        alert("动画执行完毕！");
                    });
                });

            })
        })
    </script>
</head>
<body>
<button>自定义动画</button>
<div></div>
</body>
</html>

停止动画

$(selector).stop(true, false);

里面的两个参数，有不同的含义。

第一个参数：

true：后续动画不执行。
false：后续动画会执行。

第二个参数：

true：立即执行完成当前动画。
false：立即停止当前动画。

参数如果都不写，默认两个都是false。实际工作中，直接写stop()用的多。

案例：鼠标悬停时，弹出下拉菜单（下拉时带动画）

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .wrap {
            width: 330px;
            height: 30px;
            margin: 100px auto 0;
            padding-left: 10px;
            background-color: pink;
        }

        .wrap li {
            background-color: green;
        }

        .wrap > ul > li {
            float: left;
            margin-right: 10px;
            position: relative;
        }

        .wrap a {
            display: block;
            height: 30px;
            width: 100px;
            text-decoration: none;
            color: #000;
            line-height: 30px;
            text-align: center;
        }

        .wrap li ul {
            position: absolute;
            top: 30px;
            display: none;
        }
    </style>
    <script src="jquery-3.3.1.js"></script>
    <script>
        //入口函数
        $(document).ready(function () {
            //需求：鼠标放入一级li中，让他里面的ul显示。移开隐藏。
            var jqli = $(".wrap>ul>li");

            //绑定事件
            jqli.mouseenter(function () {
                $(this).children("ul").stop().slideDown(1000);
            });

            //绑定事件(移开隐藏)
            jqli.mouseleave(function () {
                $(this).children("ul").stop().slideUp(1000);
            });
        });
    </script>

</head>
<body>
<div class="wrap">
    <ul>
        <li>
            <a href="javascript:void(0);">一级菜单1</a>
            <ul>
                <li><a href="javascript:void(0);">二级菜单2</a></li>
                <li><a href="javascript:void(0);">二级菜单3</a></li>
                <li><a href="javascript:void(0);">二级菜单4</a></li>
            </ul>
        </li>
        <li>
            <a href="javascript:void(0);">二级菜单1</a>
            <ul>
                <li><a href="javascript:void(0);">二级菜单2</a></li>
                <li><a href="javascript:void(0);">二级菜单3</a></li>
                <li><a href="javascript:void(0);">二级菜单4</a></li>
            </ul>
        </li>
        <li>
            <a href="javascript:void(0);">三级菜单1</a>
            <ul>
                <li><a href="javascript:void(0);">三级菜单2</a></li>
                <li><a href="javascript:void(0);">三级菜单3</a></li>
                <li><a href="javascript:void(0);">三级菜单4</a></li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>

javascript:void(0); //跟javascript:;效果一样

jquery的属性操作

四个部分：html属性操作，dom属性操作，类样式操作和值操作

html属性操作：是对html文档中的属性进行读取，设置和移除操作。比如attr()、removeAttr()
DOM属性操作：对DOM元素的属性进行读取，设置和移除操作。比如prop()、removeProp()
类样式操作：是指对DOM属性className进行添加，移除操作。比如addClass()、removeClass()、toggleClass()
值操作：是对DOM属性value进行读取和设置操作。比如html()、text()、val()

attr()

设置属性值或者返回被选元素的属性值

//获取值：attr()设置一个属性值的时候 只是获取值
        var id = $(‘div‘).attr(‘id‘)
        console.log(id)
        var cla = $(‘div‘).attr(‘class‘)
        console.log(cla)
        //设置值
        //1.设置一个值 设置div的class为box
        $(‘div‘).attr(‘class‘,‘box‘)
        //2.设置多个值，参数为对象，键值对存储
        $(‘div‘).attr({name:‘hahaha‘,class:‘happy‘})

以上是关于jQuery的主要内容，如果未能解决你的问题，请参考以下文章

markdown 在WordPress中使用jQuery代码片段

使用 NodeJS 和 JSDOM/jQuery 从代码片段构建 PHP 页面

很实用的JQuery代码片段（转）

几个有用的JavaScript/jQuery代码片段（转）

几个非常实用的JQuery代码片段

高效Web开发的10个jQuery代码片段

jQuery

为什么要使用jQuery

DOM文档加载的步骤

执行时间不同

编写个数不同

简化写法不同

使用 jQuery 的基本步骤

jquery文件的引入

jquery的入口函数

jQuery的$符号

js中的DOM对象 和 jQuery对象 比较

区别

JQuery对象和JS对象的互相转换

jQuery 的基本选择器

层级选择器

基本过滤选择器

属性选择器

筛选选择器

siblings选择器方法的基本使用

jQuery动画

显示动画

隐藏动画

点击盒子，实现显示隐藏

开关式显示隐藏动画

滑入和滑出（卷帘门效果）

淡入淡出动画

自定义动画

停止动画

jquery的属性操作

attr()

jQuery的`$`符号

js中的DOM对象和 jQuery对象比较