jQuery(简介、特点、使用方法、【重点】jQuery的选择器：是jQuery的灵魂、jQuery的属性：操作标签的属性)

齐建安

2023-12-01

https://www.jq22.com/chm/jquery/index.html

一.jQuery

1.简介：是一个对JavaScript进行了封装的库，简化了用户使用javascript

2.特点：写得少、做的多

3.使用方法：

（1）在页面中引入jQuery库：引入外部的js文件

（2）'$':是jQuery的全局对象，代表jQuery

（3）$(function(){})：jQuery代码的入口函数。

原始写法：$(document).ready(function(){})----window.onload

简写为：$(function(){})

<head>
    <script src="./js/jquery-3.4.1.js"></script>
</head>
<style>
    #box{
        width: 200px;
        height: 200px;
        background-color: pink;
    }
</style>
<body>
    <button id="show">显示</button>
    <button id="hide">隐藏</button>
    <br>
    <div id="box"></div>
    <script>
        $(document).ready(function(){})
        // document.querySelector('#hide').addEventListener('click',function(){
        //     document.querySelector('#box').style.display = 'none'
        // })
        // 可以将$换成jQuery
        $(function(){
            // 隐藏 hide()
            $('#hide').click(function(){
                $('#box').hide(2000)//hide(2000)过渡时间为2秒
            })
            // 显示 show()
            $('#show').click(function(){
                $('#box').show(2000)//show(2000)过渡时间为2秒
            })
        })

    </script>
</body>

二.jQuery的选择器：是jQuery的灵魂

1.基本选择器

（1）id选择器：$('#id')

（2）类选择器：$('.class')

（3）标签名选择器：$('标签名')

（4）通配符选择器：$('*')

（5）合并选择器：$('#id,.class')

强调：css()函数的作用：是jQuery中用于设置元素CSS样式的函数

a.css('样式属性名','属性值')：设置单个样式

<head>
    <script src="./js/jquery-3.4.1.js"></script>
</head>
<body>
    <p id="one">八百里秦川</p>
    <script>
        $(function(){
            $('#one').css('background-color','red')
        })
    </script>
</body>

b.css({'属性名1'：'属性值1'，'属性名2'：'属性值2'……})

eq(index):匹配一个给定索引值的元素。页面中元素的索引值从0开始

<head>
    <script src="./js/jquery-3.4.1.js"></script>
</head>
<body>
    <p id="one">八百里秦川</p>

    <p>钟楼</p>
    <p>鼓楼</p>
    <p>回民街</p>

    <h1>会计</h1>
    <h2>出纳</h2>
    <script>
        // $(function(){
        //     $('#one').css('background-color','red')
        // })
        $(function(){
            $('p').css({'backgroundColor':'yellow','color':'pink'})

            // 改变第一个p背景色和字体颜色
            $('p').eq(0).css({'backgroundColor':'red','color':'black'})
            // 改变最后一个p的字体颜色
            $('p').eq(2).css({'color':'skyblue'})

            // 改变所有<h1>
            $('h1,#one').css({'backgroundColor':'red'})
        })
    </script>
</body>

2.过滤选择器：是通过特定的过滤规则来筛选出所需的DOM元素。

2.1基本过滤选择器

(1):first---选择第一个元素

(2):last---选择最后一个元素

(3):not(select)---去除所有与给定选择器相匹配的元素

<head>
    <script src="./js/jquery-3.4.1.js"></script>
</head>
<body>
    <ul>
        <li>春</li>
        <li>夏</li>
        <li id="n1">秋</li>
        <li>冬</li>
    </ul>
    <script>
        $(function(){
            // 第一个
            $('li:first').css('color','red')
            // 最后一个
            $('li:last').css('fontSize','30px')
            // 除id='n1'之外的其他元素文字都为蓝色
            $('li:not(#n1)').css('color','blue')
        })
    </script>
</body>

(4):even---匹配所有索引值为偶数的元素，从0开始计数

(5):odd---匹配所有索引值为奇数的元素，从1开始计数

(6):eq(index)---匹配一个给定索引值的元素

(7):gt(index)---匹配所有大于给定索引值的元素

(8):lt(index)---匹配所有小于给定索引值的元素

<head>
    <script src="./js/jquery-3.4.1.js"></script>
</head>
<body>
    <ul>
        <li>春</li>
        <li>夏</li>
        <li id="n1">秋</li>
        <li>冬</li>
    </ul>
    <script>
        $(function(){
            // 匹配索引为偶数的元素
            $('li:even').css('fontSize','50px')
            // 匹配索引为奇数的元素
            $('li:odd').css({'fontSize':'10px','color':'purple'})

        })
    </script>
</body>

2.2内容过滤选择器

(1):contains(text)---匹配包含给定文本的元素

(2):empty---匹配所有不包含子元素或者文本的空元素

(3):has(selector)---匹配含有选择器所匹配的元素的元素

(4):parent--- 匹配含有子元素或者文本的元素

<head>
    <script src="./js/jquery-3.4.1.js"></script>
</head>
<body>
    <div>hello World</div>
    <div>hi kitty</div>
    <div>hello pig</div>

    <table>
        <tr>
            <td>111</td>
            <td>222</td>
            <td></td>
            <td>444</td>
        </tr>
    </table>

    <ol>
        <li>mouse</li>
        <li>
            <span id="key">keyboard</span>
        </li>
        <li>computer</li>
    </ol>
    <script>
        $(function(){
            // 包含
            $("div:contains('hello')").css('color','blue')
            // 空
            $(function(){
            console.log($('td:empty'))
            })
            // 含有选择器所匹配的元素的元素
            $('li:has(#key)').css('backgroundColor','red')
        })
    </script>
</body>

val()：jQuery的函数，若不带参数，表示获取input标签的value属性值

val(参数)：带上参数，就是将参数值赋给input标签是value属性

<head>
    <script src="./js/jquery-3.4.1.js"></script>
</head>
<body>
    <input type="hidden" value="VIP">
    <input type="text" id="in">
    <script>
        $(function(){
            // val()获取
            let str = $('input:hidden').val()
            console.log(str)//VIP
            
            $('#in').val('蜗牛')
        })
    </script>
</body>

2.3可见性选择

(1):hidden--- 匹配所有不可见元素，或者type为hidden的元素。不仅包含样式属性display为none的元素，也包含文本隐藏域（<input type="hidden">）和visible：hidden之类的元素

(2):visible----匹配所有的可见元素

2.4属性过滤选择器

(1)[attribute]:匹配包含给定属性的元素

(2)[attribute=value]：匹配给定的属性是某个特定值的元素

<head>
    <script src="./js/jquery-3.4.1.js"></script>
</head>
<body>
    <div class="d1">11</div>
    <div title="one">22</div>
    <div class="d1">33</div>
    <div id="one">44</div>
    <div class="d1">55</div>

    <p title="abc-123">aaa</p>
    <p title="abc-456">bbb</p>
    <p title="aaef">ccc</p>
    <p title="axafff">ddd</p>
    <script>
        $(function(){
            // 匹配含有class属性的div
            $('div[class]').css('color','blue')
            // 
            $('div[title=one]').css('fontSize','30px')
        })
    </script>
</body>

(3)[attribute!=value]：匹配所有不包含指定的属性，或者属性不等于特定值的元素

(4)[attribute^=value]：匹配给定的属性是以某些值开始的元素

(5)[attribute$=value]：匹配给定的属性是以某些值结尾的元素

(6)[attribute*=value]：匹配给定的属性是包含某些值的元素

<head>
    <script src="./js/jquery-3.4.1.js"></script>
</head>
<body>
    <p title="abc-123">aaa</p>
    <p title="abc-456">bbb</p>
    <p title="aaef">ccc</p>
    <p title="axafff">ddd</p>
    <script>
        $(function(){
            // 匹配title属性不是aaef的
            $('p[title!=aaef]').css('color','red')
            // 匹配title属性是以abc开头的
            $('p[title^=abc]').css('color','blue')
            // 匹配title属性是以ef结尾的
            $('p[title$=ef]').css('fontSize','35px')
        })
    </script>
</body>

3.子元素选择器

(1):first-child 第一个子元素

(2):last-child 最后一个子元素

(3):nth-child() :nth-child(odd/even) 奇/偶

:nth-child(2)

:nth-child(2n/3n...)

<head>
    <script src="./js/jquery-3.4.1.js"></script>
</head>
<body>
    <ul>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
        <li>ddd</li>
        <li>eee</li>
        <li>fff</li>
        <li>ggg</li>
    </ul>
    <script>
        $(function(){
            $('li:first-child').css('color','blue')
            $('li:last-child').css('color','red')
            $('li:nth-child(odd)').css('fontSize','20px')
            $('li:nth-child(3n)').css('fontSize','40px')
            $('li:nth-child(even)').css('color','pink')
        })
    </script>
</body>

4.表单选择器

(1):text -- 单行文本框

(2):password ---密码框

<head>
    <script src="./js/jquery-3.4.1.js"></script>
</head>
<body>
    用户名：<input type="text">
    密码：<input type="password">
    <script>
        $(function(){
            $('input:text').css({'color':'red','fontSize':'45px'})
            $('input:password').css('fontSize','5px')
        })
    </script>
</body>

三.jQuery的属性：操作标签的属性

1.操作属性：

(1)attr(name):获取属性值。name：属性名

<head>
    <script src="./js/jquery-3.4.1.js"></script>
</head>
<body>
    <a title="https://www.bilibili.com">B站</a>
    <button id="btn">跳转</button>
    <script>
        /* // 需求：自定义函数，实现attr函数的功能
        function myAttr(name) {
            let h = this.getAttribute(name)
            return h
        }
        document.querySelector('#btn').addEventListener('click',function(){
            let t = document.querySelector('a').myAttr('title')
            location.href = t
        } */
        $(function(){
            // console.log($('a').attr('title'))
            // 通过attr方法获取制定元素的属性值
            let h =$('a').attr('title')
            $('#btn').click(function(){
                location.href = h
            })
        })
    </script>
</body>

(2)attr(key,fn):修改属性值。key:元素的属性名 fn:函数，将该函数的返回值作为key属性的值

(3)attr(key,value):修改属性值。将value的属性值赋给key。

(4)removeAttr(name):删除指定的属性

<head>
    <script src="./js/jquery-3.4.1.js"></script>
</head>
<body>
    <a href="https://www.bilibili.com">B站</a>
    <button id="btn">修改</button>
    <img src="./img/meiyanyang.jpg" alt="图片加载……" width="200">
    <button id="img">切换图片</button>
    <button id="delete">删除</button>
    <script>
        $(function(){
            // 1.修改网站
            // 选择按钮,绑定click事件
            $('#btn').click(function(){
                // 修改a的href属性
                // $('a').attr('href','http://www.hao123.com')
                $('a').attr('href',function(){
                    return 'http://www.hao123.com'
                })
            })
            // 2.切换图片
            $('#img').click(function(){
                $('img').attr({src:'./img/chou.jpg',alt:'哈哈哈',width:'300'})
            })
            // 3.删除
            $('#delete').click(function(){
                $('img').removeAttr('alt')
            })
        })
    </script>
</body>

2.操作样式

(1)css(key,value)、css({'属性名1':'属性值1','属性名2':'属性值2',...})

<style>
    div{width: 500px;
        height: 200px;
        background-color: skyblue;
        display: none;
    }
</style>
<body>
    <button id="btn">单击显示，双击隐藏</button>
    <br>
    <div></div>
    <script src="./js/jquery-3.4.1.js"></script>
    <script>
        $(function(){
            // 单击显示click
            $('#btn').click(function(){
                $('div').css('display','block')
                $('div').html('div显示')
            })
            // 双击隐藏dblclick
            $('#btn').dblclick(function(){
                $('div').css('display','none')
            })
        })
    </script>
</body>

(2)addClass(class|fn):为匹配的元素添加指定的类名

(3)removeClass(class|fn):从所有匹配的元素中删除全部或者指定的类

参数可以是类名，也可以是函数（将函数的返回值作为类名）

(4)toggleClass(class|fn):如果所匹配的元素存在某个类就删除，不存在就添加

<head>
    <script src="./js/jquery-3.4.1.js"></script>
</head>
<style>
    .success{
        color: yellowgreen;
    }
    .fail{
        color: red;
    }
    div{
        width: 200px;
        height: 200px;
        background-color: plum;
    }
    .bgred{
        background-color: red;
    }
</style>
<body>
    用户名：<input type="text" id="user"><span id="msg"></span>
<br><br>
<div></div>
    <script>
        $(function(){
            $('#user').blur(function(){
                let v = $('#user').val()
                if ('admin' === v) {
                    $("#msg").removeClass('fail')
                    $('#msg').html('true')
                    $('#msg').addClass('success')
                }else{
                    $("#msg").removeClass('success')
                    $('#msg').html('error')
                    $('#msg').addClass('fail')
                }
            })
            $('div').click(function(){
                $('div').toggleClass('bgred')
            })
        })
    </script>
</body>

3.操作元素的宽度和高度

(1)width():获取元素的宽度

(2)width(value):设置元素的宽度

(3)height():获取元素的高度

(4)height(value):设置元素的高度

4.操作元素的内容

(1)html():获取匹配元素的内容（底层使用的元素innerHTML属性）

(2)html(val):设置匹配元素的内容（可以识别标签）

<body>
    <div id="dt">
        <h2>咸阳市</h2>
    </div>
    <script src="./js/jquery-3.4.1.js"></script>
    <script>
        $(function(){
            console.log($('#dt').html())
            $('#dt').html('<h1>懒羊羊</h1>')
        })
    </script>
</body>

(3)text():获取元素的文本（底层使用的元素innerText属性）

(4)text(value):设置匹配元素的文本（不能识别标签）

(5).width()/width(value):获取或设置元素宽度

(6).height()/height(value):获取或设置元素高度

<head>
    <script src="./js/jquery-3.4.1.js"></script>
</head>
<body>
    <div id="main">
        <p>aaa</p>
        <div>bbbbb</div>
    </div>

    <div id="pt" style="width: 100px;height:100px;background:red"></div>
    <br><br>
    <button id="add">添加内容</button>
    <script>
        $(function(){
            // 获取id为main的元素的html内容
            let h = $('#main').html()
            console.log(h)

            $('#add').click(function(){
                // $('#pt').html('<h2>哈哈哈</h2>')
                $('#pt').text('<h2>哈哈哈</h2>')
            })
        })
    </script>
</body>

5.操作值

(1)val():获取匹配元素的value属性值

(2)val(args):设置匹配元素的value属性值

6.查找

(1)add():

(2)find(exp):搜索所有与指定表达式匹配的元素。

(3)first():获取第一个元素

(4)last():获取最后一个元素

(5)hasClass(class):检查当前的元素是否含有某个特定的类，如果有，则返回true。这其实就是 is("." + class)。

<head>
    <script src="./js/jquery-3.4.1.js"></script>
</head>
<body>
    <p>hello kitty<span></span></p>
    
    <button id="btn">添加元素</button>

    <ul>
        <li>1111</li>
        <li>2222</li>
        <li>3333</li>
        <li>4444</li>
        <li>5555</li>
    </ul>

    <div class="d1" style="width: 100px;height:100px;background:red"></div>
    <br>
    <div class="d2" style="width: 100px;height:100px;background:yellowgreen"></div>
    <script>
        $(function(){
            $('#btn').click(function(){
                // $('div').add('<p></p>')
                let t = $('p').find('span')
                console.log(t)
                console.log($('li').first())

                if ($('div').hasClass('d1')) {
                    $('.d1').css('backgroundColor','pink')
                }
            })
        })
    </script>
</body>

四.jQuery元素的筛选

1.children():获取所有子元素

2.find(exp):查找与给定表达式匹配的元素

3.next(exp):获取匹配元素的紧邻的同辈元素

4.nextAll(exp):查找匹配元素的所有同辈元素

5.parent(exp):取得一个包含着所有匹配元素的唯一父元素的元素集合。

6.parents(exp):取得一个包含着所有匹配元素的祖先元素的元素集合(不包含根元素)。

7.prev([expr]):获取匹配元素的紧邻的上一个同辈元素

8.prevAll([expr]):获取匹配元素之前是所有同辈元素

9.siblings([expr]):取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。

<body>
    <div>
        <p>11111</p>
        <p>22222</p>
        <p>33333</p>
        <span>00000</span>
    </div>
    <script src="./js/jquery-3.4.1.js"></script>
    <script>
        $(function(){
            // 输出div下的所有子元素
            let ele = $('div').children()
            console.log(ele)
            // 查找div下的span
            let sp = $('div').find('span')
            console.log(sp)
            console.log(sp.html())
            // 
            let t = $('div').siblings()
            console.log(t)

        })
    </script>
</body>

五.jQuery的自定义动画

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

params:一组包含作为动画属性和终值的样式属性及其值的集合

speed:三种预定速度之一的字符串（'show','normal',or'fast'）或表示动画时长的毫秒数值（如：1000）

easing:要使用的擦除效果的名称（需要插件支持），默认jQuery提供'linear'和'swing';

fn:在动画完成时执行的函数，每个元素执行一次

六.jQuery的对象访问

index([selector|element]):获取页面元素的索引值，索引值从0开始计数。

手风琴

<style>
    .con{
        width:661px;
        height:425px;
        position: relative;
        overflow: hidden;
        margin:0 auto;
    }
    .con ul{
        list-style: none;
        width:3305px;
        height:425px;
        position: relative;
    }

    .con span{
        width:20px;
        height:425px;
        background-color:gold;
        color:green;
        float: left;
        box-sizing: border-box;
        padding-top:100px;
        cursor:pointer;
    }
    .con li{
        float: left
    }
    .bar01 {
        position:absolute;
        left:0px;
    }
    .bar01 span{
        background-color: green;
        color:#000;
    }
    .bar02{
        position: absolute;
        left:580px;
    }
    .bar02 span{
        background-color: pink;
        color:#000;
    }
    .bar03{
        position: absolute;
        left:600px;
    }
    .bar03 span{
        background-color:gold;
        color:#000;
    }
    .bar04{
        position: absolute;
        left:620px;
    }
    .bar04 span{
        background-color:cyan;
        color:#000;
    }
    .bar05{
        position: absolute;
        left:640px;
    }
    .bar05 span{
        background-color:lightgreen;
        color:#000;
    }
   img{
    width: 661px;
    height: 425px;
   }
</style>
<body>
    <div class="con">
        <ul>
            <li class="bar01">
                <span>一</span>
                <img src="../images/flc-1.png" alt="">
            </li>
            <li class="bar02"><span>二</span><img src="../images/flc-2.png" alt=""></li>
            <li class="bar03"><span>三</span><img src="../images/flc-3.png" alt=""></li>
            <li class="bar04"><span>四</span><img src="../images/flc-4.png" alt=""></li>
            <li class="bar05"><span>五</span><img src="../images/flc-5.png" alt=""></li>
        </ul>
    </div>
    <script src="../js/jquery-3.4.1.js"></script>
    <script>
        $(function(){
            var $li = $(".con li")
            $li.click(function(){
                $(this).animate({'left':20*$(this).index()}); //'left'样式，当前图片水平坐标的位置

                //点击时，li前面的li都向左移动
                $(this).prevAll().each(function(){ //each函数：是forEach的封装，用来遍历数组
                    //这里的this是指循环选择的每个li
                    $(this).animate({left:20*$(this).index()}); //让当前元素向左移动
                })

                //点击时，li后面的li都向右移动
                $(this).nextAll().each(function(){
                    $(this).animate({left:661-20*(5-$(this).index())});  //让当前元素向右移动
                })    
            })
        })
       
    </script>
</body>

七.jQuery的事件处理：

1.事件绑定：bind(type,[data],fn):给匹配元素的事件绑定事件处理程序

type：事件类型

data：作为event.data传递事件处理程序的数据对象

fn:事件处理程序

2.模拟鼠标悬停事件:当鼠标悬停到目标对象上方、离开目标对象时触发

hover(over,out)

over：是一个函数，鼠标悬停到目标上方时触发

out：是一个函数，鼠标离开目标对象时触发

强调：在jQuery的应用中如果某个对象同时会触发mouseover、mouseout事件，建议使用hover模拟鼠标悬停事件

3.one(type,[data],fn):为匹配的元素绑定一个一次性的事件处理函数

<style>
    div{
        background-color: pink;
        width: 400px;
        height: 400px;
    }
</style>
<body>
    <button id="btn">事件绑定</button>
    <br>
    <img src="./img/chou.jpg" alt="" width="200">
    <div></div>
    <script src="./js/jquery-3.4.1.js"></script>
    <script>
        $(function(){
            // $('#btn').bind('click',function(e){
            //     alert(e)
            // })
            $('#btn').one('click',function(){
                alert('一次性的事件处理程序')
            })
            // $('img').bind('mouseover',function(){
            //     $(this).attr('src','./img/meiyanyang.jpg')
            // })
            // 当鼠标悬停到img上方时执行第一个函数，鼠标离开时执行第二个函数
            $('img').hover(function(){
                $(this).attr('src','./img/meiyanyang.jpg')
            },function(){
                $(this).attr('src','./img/chou.jpg')
            })
            // 当鼠标悬停到div上方时执行第一个函数，当鼠标离开时执行第二个函数
            $('div').hover(function(){
                $(this).css('backgroundColor','red')
            },function(){
                $(this).css('backgroundColor','skyblue')
            })

        })
    </script>
</body>

4.unbind(type,[data],fn):bind()反向操作，从每一个匹配的元素中删除绑定的事件。如果没有参数，则删除所有绑定事件。

5.on(events,[selector],[data],fn):在选择元素上绑定一个或多个事件的事件处理函数

events：一个或多个用空格分隔的事件类型

6.off(events,[selector],[data],fn):在选择元素上移除一个或多个事件的事件处理函数

7.事件类型

(1)click：鼠标单击

(2)blur：失去焦点

(3)focus：获得焦点

(4)change：当元素的值发生改变时，会发生change事件。

<style>
    div{
        width: 200px;
        height: 200px;
        background-color: red;
    }
</style>
<body>
    <div></div>
    <button id="btn">反绑定(删除所有事件)</button>
    <button id="btn_one">反绑定(删除某个事件)</button>
    <script src="./js/jquery-3.4.1.js"></script>
    <script>
        $(function(){
            $('div').bind('click',function(){
                alert('单击')
            })
            $('div').bind('dblclick',function(){
                alert('双击')
            })
            // 删除所有绑定的事件
            $('#btn').click(function(){
                $('div').unbind()
            })
            // 删除指定的事件
            // $('#btn_one').click(function(){
            //     $('div').unbind('click')
            // })
            $('#btn_one').on('click',function(){
                $('div').unbind('click')
            })
            
        })
    </script>
</body>

八.jQuery的动画

1.显示/隐藏:

show()：显示

hide()：隐藏

toggle(speed)：交替显示、隐藏,若匹配的元素显示了就隐藏，若隐藏了就显示

<style>
    div{
        width: 400px;
        height: 400px;
        display: none;
        background-color: blue;
    }
</style>
<body>
    <div id=""></div>
    <button id="show">显示</button>
    <button id="hide">隐藏</button>
    <button id="toggle">交替</button>
    <script src="./js/jquery-3.4.1.js"></script>
    <script>
        $(function(){
            // $('#show').click(function(){
            //     $('div').show('slow')
            // })
            // $('#hide').click(function(){
            //     $('div').hide(2000)//2秒隐藏
            // })
            // 交替
            $('#toggle').click(function(){
                $('div').toggle(2000)//2秒隐藏
            })

        })
    </script>
</body>

2.向上收缩/向下展开:通过高度变化来显示和隐藏元素

slideUp(speed,[easing],[fn]):向上收缩

slideDown(speed,[easing],[fn]):向下展开

slideToggle(speed,[easing],[fn]):交替收缩、展开

<body>
    <img src="./img/like02.jpg" alt="" width="200">
    <br>
    <button id="up">向上收缩</button>
    <button id="down">向下展开</button>
    <button id="toggle">交替</button>
    <script src="./js/jquery-3.4.1.js"></script>
    <script>
        $(function(){
            // 向上收缩
            $('#up').click(function(){
                $('img').slideUp(2000)
            })
            // 向下展开
            $('#down').click(function(){
                $('img').slideDown(1000)
            })
            // 交替
            $('#toggle').click(function(){
                $('img').slideToggle(1000)
            })

        })
    </script>
</body>

3.淡入淡出:通过改变匹配元素的透明度来显示和隐藏元素

fadeIn(speed,[easing],[fn]):通过不透明度的变化来实现所有匹配元素的淡入效果。

fadeOut(speed,[easing],[fn]):通过不透明度的变化来实现所有匹配元素的淡出效果。

fadeToggle(speed,[easing],[fn]):交替实现元素的淡入淡出

<style>
    div{
        width: 200px;
        height: 200px;
        background-color: red;
        display: none;
    }
</style>
<body>
    <div></div>
    <br>
    <button id="fadein">淡入</button>
    <button id="fadeout">淡出</button>
    <button id="toggle">交替</button>
    <script src="./js/jquery-3.4.1.js"></script>
    <script>
        $(function(){
            // 淡入
            $('#fadein').click(function(){
                $('div').fadeIn(2000)
            })
            // 淡出
            $('#fadeout').click(function(){
                $('div').fadeOut(2000)
            })
            // 交替
            $('#toggle').click(function(){
                $('div').fadeToggle(2000)
            })
        })
    </script>
</body>