Jquery课堂笔记

太好用了！！

简洁快速好记好用

Write Less,do More 写的少，做的多

Jquery是什么？

jQuery is a fast, small, and feature-rich JavaScript library.
jQuery 是一个快速小巧功能丰富的JS库。

快速体验：有一首李白的诗，三个按钮【隐藏，显示，开关-折叠】

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jquery的体验</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.js"></script>
</head>
<body>
    <p>床前明月光</p>
    <p>疑是地上霜</p>
    <p>举头望明月</p>
    <p>低头思故乡</p>

    <button id="btn1">隐藏</button>
    <button id="btn2">显示</button>
    <button id="btn3">开关</button>

    <script>
        $(function () {
            // $(选择器) :通过选择器找到元素
            // 并且把元素封装成了jquery对象就可以继续调用jquery的方法了

            // $('#btn1') ID选择器
            $('#btn1').click(function () {
                // $('p') 标签选择器
                $('p').hide();
            });
            $('#btn2').click(function () {
                $('p').show();
            });
            $('#btn3').click(function () {
                $('p').toggle();
            });
        })
    </script>
</body>
</html>

为什么使用JQuery

方便，简单且强大
它封装JavaScript常用的功能代码，提供一种简便的JavaScript操作方式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
目前网络上有大量开源的 JS 框架, 但是 jQuery 是目前最流行的 JS 框架，而且提供了大量的扩展。很多大公司都在使用 jQuery，例如：Google、Microsoft、IBM、Netflix

怎么用

下面的两种方式可以任选一种

1、安装[引入]Jquery文件

html

<script src="./js/jquery-3.4.1.min.js"></script>

2、使用CDN 本质上就是在线的JS文件

html

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.js"></script>

使用

$是jQuery函数的简写 jQuery==$

$(function(){
    // 写我们的JS代码
})
// 表示页面DOM加载完毕，则执行这个匿名函数

选择器

Jquery选择器【重点】

jquery选择器
$('#id')	ID选择器
$('p')	标签选择器
$('.class')	类选择器

调用jquery方法: $('p').hide()

Jquery事件【重点】

常用事件：
mouseenter 鼠标进入
mouseleave 鼠标离开
hover 鼠标进入——鼠标离开

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./js/jquery-3.4.1.min.js"></script>
    <title>Jquery事件</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div></div>

    <script>
        $(function () {
            // 绑定事件 mouseenter：鼠标进入
            /* $('div').mouseenter(()=>{
                $('div').css('background-color','yellow');
            });*/

            // mouseout：鼠标移出
            /*  $('div').mouseleave(()=>{
                 $('div').css('background-color','blue');
             }); */

            // hover 方法的第一个参数相当于mouseenter，第二个参数相当于mouseleave
            $('div').hover(() => {
                $('div').css('background-color', 'green');
            }, () => {
                $('div').css('background-color', 'pink');
            });

        });
    </script>
</body>

</html>

focus 获取焦点
blur 失去焦点

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./js/jquery-3.4.1.min.js"></script>
    <title>Jquery事件2</title>
    <style>

    </style>
</head>

<body>
    <input type="text"><br />

    <script>
        $(function () {
            // 元素获取焦点
            $('input').focus(() => {
                $('input').css('background-color', 'red');
            });

            // 元素失去焦点
            $('input').blur(() => {
                $('input').css('background-color', 'grey');
            });

        });
    </script>
</body>

</html>

JQuery效果

显示隐藏

显示 show()
隐藏 hide()
复合方法 toggle()

淡入淡出

淡入 fadeIn() ：显示有动画效果
淡出 fadeOut()：隐藏有动画效果
复合方法 fadeToggle()

滑动

向下滑动 slideDown() : 显示
向上滑动 slideUp() :隐藏
复合方法：slideTollge()

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./js/jquery-3.4.1.min.js"></script>
    <title>Jquery效果</title>
    <style>

    </style>
</head>

<body>
    <img src="http://124.223.190.53:90/images/logo.png" alt="">

    <button id="btn1">显示</button>
    <button id="btn2">隐藏</button>
    <button id="btn3">开关</button>

    <button id="btn4">定位到某个状态</button>

    <script>
        $(function () {
            /////////////////显示隐藏效果/////////////////////
            // 元素显示
            $('#btn1').click(() => {
                $('img').show();
            });

            // 元素隐藏
            $('#btn2').click(() => {
                $('img').hide();
            });

            // 元素显示/隐藏
            $('#btn3').click(() => {
                $('img').toggle();
            }); 
            /////////////////显示隐藏效果/////////////////////


            /* 
            /////////////////淡入淡出效果/////////////////////
            $('#btn1').click(() => {
                $('img').fadeIn();
            });

            // 元素隐藏
            $('#btn2').click(() => {
                $('img').fadeOut(3000, function () {
                    alert('完全隐藏了');
                });
            });

            // 元素显示/隐藏
            $('#btn3').click(() => {
                $('img').fadeToggle();
            });

            $('#btn4').click(() => {
                // 第一个参数是速度
                // 第二个参数是透明度0-1
                $('img').fadeTo(3000,0.5);
            }); 
            /////////////////淡入淡出效果/////////////////////
            */

           /* 
           /////////////////滑动效果/////////////////////
            $('#btn1').click(() => {
                $('img').slideDown();
            });

            // 元素隐藏
            $('#btn2').click(() => {
                $('img').slideUp(3000, function () {
                    alert('完全隐藏了');
                });
            });

            // 元素显示/隐藏
            $('#btn3').click(() => {
                $('img').slideToggle();
            }); 
            /////////////////滑动效果/////////////////////
            */

        });
    </script>
</body>

</html>

TIP 上面的三种效果，都有下面可选的两个参数，例如
js
$('img').fadeOut(3000, function () {
    alert('完全隐藏了');
});
1
2
3
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
下面的例子演示了 slideToggle() 方法：

动画-了解

TIP
animate() 方法：jQuery animate() 方法用于创建自定义动画。

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

TIP
必需的 params 参数定义形成动画的 CSS 属性。【动画结束时元素的最终状态】
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
下面的例子演示 animate() 方法的简单应用。它把 <div>元素往右边移动了 250 像素：

javascript

$("button").click(function(){
  $("div").animate({left:'250px'});
});

操作多个属性
请注意，生成动画的过程中可同时使用多个属性：

javascript

$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
});

可以用 animate() 方法来操作所有 CSS 属性吗？
是的，几乎可以！不过，需要记住一件重要的事情：当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。
同时，色彩动画并不包含在核心 jQuery 库中。
如果需要生成颜色动画，您需要从 jquery.com (opens new window)下载颜色动画 (opens new window)插件。
也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=：

javascript

$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });
});

使用队列功能：默认地，jQuery 提供针对动画的队列功能。
这意味着如果您在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的"内部"队列。然后逐一运行这些 animate 调用。

javascript

$("button").click(function(){
  var div=$("div");
  div.animate({height:'300px',opacity:'0.4'},"slow");
  div.animate({width:'300px',opacity:'0.8'},"slow");
  div.animate({height:'100px',opacity:'0.4'},"slow");
  div.animate({width:'100px',opacity:'0.8'},"slow");
}

停止动画-了解

jQuery stop() 方法用于停止动画或效果，在它们完成之前。
stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。

javascript

$("#stop").click(function(){
  $("#panel").stop();
});

使用动画时需要注意的地方：
animate 动画方法使用的注意事项
1、只有数字值可创建动画（比如 "margin:30px"）。
字符串值无法创建动画（比如 "background-color:red"）。
2、颜色动画默认的jquery不支持，需要单独引入颜色动画的插件
3、left/top相对位置变化的，元素的定位方式需要使用position: relative;
4、fontWeight: '900' 改变字重时数可以生效，如果使用'bold'不生效
5、样式属性需要使用驼峰命名方式，不能使用-中划线

完整代码如下：

CSS动画

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS动画</title>
    <script src="./js/jquery-3.4.1.min.js"></script>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: blue;
            /* 如果要设置相对位置变量的动画，需要设置定位方式为relative */
            position: relative;
        }
    </style>
</head>

<body>
    <div></div>
    <button id="btn">变大</button>
    <button id="btn2">变小</button>

    <script>
        $(function () {
            $('#btn').click(function () {
                $('div').animate({
                    // 每次执行向右移动20px
                    left: '+=20px',
                    top: '+=100px',
                    width: '+=100px',
                    height: '+=100px',
                    opacity: 0.8
                }, 1000);
            });

            $('#btn2').click(function () {
                $('div').animate({
                    width: '-=100px',
                    height: '-=100px',
                    opacity: 0.8
                }, 1000);
            });
        });
    </script>
</body>

</html>

停止动画

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>停止动画</title>
    <script src="./js/jquery-3.4.1.min.js"></script>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div></div>
    <button id="btn">变大</button>
    <button id="btn2">停止动画</button>

    <script>
        $(function () {
            $('#btn').click(function () {
                // 高度
                $('div').animate({ height: '+=200px' }, 5000);
                // 宽度变化
                $('div').animate({ width: '+=200px' }, 5000);
                // 透明度
                $('div').animate({ opacity: 0.2 }, 5000);
            });

            // 停止动画
            $('#btn2').click(function () {
                // 第一个参数默认是false 让当前的动画停止，执行下个动画
                // 第一个参数设为true 所有的动画全部停止

                // 第二个参数 默认false 当前动画直接停止 
                // 第二个参数 true 当前动画执行完毕再停止 
                $('div').stop(true,true);
            });
        });
    </script>
</body>

</html>

链式编程

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>链式编程</title>
    <script src="./js/jquery-3.4.1.min.js"></script>

</head>

<body>
    <p id="p1">变化变化变化变化变化变化</p>
    <button id="btn">变化</button>

    <script>
        $(function () {
            $('#btn').click(function () {
                $('#p1')
                .css({'color':'red','font-size':'60px'})
                .slideUp(2000)
                .slideDown(2000);
            });
        });
    </script>
</body>

</html>

上面内容的总结
引用Juery文件 1、本地引用 2、在线CDN引用Jquery文件
$(function(){ // 代码书写的位置 // 表示DOM对象加载完毕后会执行这个函数 })
选择器【重点】 $("#id") $(".class") $('标签名')
事件【重点】 $("#id").事件名(function(){ // 事件发生时处理代码 })
事件名：鼠标 click dbclick mouseover mouseleave mouseenter mouseout 键盘 keydown keyup 浏览器 resize 文档 load unload
元素：输入框,单选,复选 focus blur
效果【重点】: 显示 show() 隐藏 hide() 显示/隐藏 toggle()
淡入 fadeIn() 淡出 fadeOut() 淡入/淡出 fadeToggle()
折叠 slideUp() 展开 slideDown() 折叠/展开 slideToggle()
这三种效果，默认是带动画效果的设置动画时间: 上面方法的第一个参数可以设置 fast/slow/数值【正整数/毫秒值】第二个参数表示动画执行完毕后有个回调方法
动画 animate({JSON对象},speed,callback) jquery元素.animate() 对元素调用animate方法是给元素添加动画效果的第一个参数表示动画执行完毕后，元素的最终状态，css样式设置的第二个参数还是动画的执行时间[速度] 第三个参数表示动画执行完毕后的回调方法
停止动画 jquery元素.stop()

DOM操作【重点】

获取/设置内容和属性

是什么？使用Jquery对网页元素的内容/属性的获取和设置

获取/设置元素的内容【直接的文本内容/带HTML标签的内容】
获取 text()/html() 返回元素的内容
设置内容 text(新的内容)/html(新的内容)
获取/设置输入框的内容 input
获取内容 val()
设置内容 val(新的内容)
获取/设置元素的属性
获取指定属性的值 attr(属性名) 这个方法会返回属性的值
设置属性的值 attr(属性名,属性值)

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM操作</title>
    <script src="./js/jquery-3.4.1.min.js"></script>
</head>
<body>
    <p><span style="color: red;">这里是一个文本</span></p>
    <input type="text" id="uname"><br/>
    <img src="http://124.223.190.53:90/images/logo.png" alt="LOGO">

    <button id="btn">获取/设置值</button>

    <script>
        $(function () {
            $('#btn').click(function () {
                // 获取p标签中的文字，弹出来
                // alert($('p').text());

                // 获取p标签中的文字[带html]，弹出来
                // alert($('p').html());

                // 获取input输入框/select/radio/checkbox/textarea的内容
                // alert($('#uname').val());

                // 获取图片地址
                // alert($('img').attr('alt'));

                /////////设置值的/////////
                // $('p').text('看看谁再睡觉');

                // $('p').html('<span style="color:blue">看看谁再睡觉</span>');

                // $('#uname').val('困的站起来听');
	 $('img').attr('src','https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png');
            });
        })
    </script>
</body>
</html>

添加元素

我们将学习用于添加新内容的四个 jQuery 方法：
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>添加元素</title>
    <script src="./js/jquery-3.4.1.min.js"></script>
</head>
<body>
    <p>这里是一段文本</p>
    <button id="btn">添加元素，注意看元素添加的位置</button>

    <script>
        $(function () {
            $('#btn').click(function () {
                // 到元素的末尾追加内容
                // $('p').append('!!!');

                // 到元素的开头追加内容
                // $('p').prepend('!!!');
                
                // 到元素的后面追加内容
                // $('p').after('!!!');

                // 到元素的前面追加内容
                $('p').before('!!!');
            })
        });
    </script>
</body>
</html>

末尾 append 开头 prepend : 是到被选元素的内部【后/前】追加内容
后面 after 前面 befor ：是到被选元素的同级别，前后追加内容

创建新的元素的三种方式
var pN = '
新的段落
'; 直接书写标签和内容
var pN = $('
').text('新的段落'); 用Jquery方式创建元素
var pN = document.createElement('p'); 用元素JavaScript方式创建元素

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元素创建的三种方式</title>
    <script src="./js/jquery-3.4.1.min.js"></script>
</head>

<body>
    <p>这里是一段文本</p>
    <button id="btn">添加元素，注意看元素添加的位置</button>

    <script>
        $(function () {
            $('#btn').click(function () {
                // 第一种创建元素的方式，直接写html元素内容
                // var pN = '<p>新的段落</p>';

                // 第二种创建元素的方式，新创建jquery元素设置了内容
                // var pN = $('<p></p>').text('新的段落');

                // 第三种创建元素的方式，使用原生JS创建
                var pN = document.createElement('p');
                pN.innerText = '新的段落';
                $('p').after(pN);
            })
        });
    </script>
</body>

</html>

删除元素

删除元素分两种操作
清空元素里的内容，元素本身不删除 empty()
直接把元素给删除了 remove()
删除元素时还可以进行过滤 remove(选择器)

清空元素：相当于把购物袋里的东西全扔掉了保留了袋子
删除元素：直接把购物袋都扔掉了

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>删除元素</title>
    <script src="./js/jquery-3.4.1.min.js"></script>
    <style>
        div {
            border: solid blue 2px;
        }
    </style>
</head>

<body>
    <div id="div1">
        <p id="p1">这里是一段文本111</p>
        <p id="p2">这里是一段文本222</p>
    </div>
    <button id="btn">删除元素</button>

    <script>
        $(function () {
            $('#btn').click(function () {
                // 把DIV里面的东西清空
                // $('#div1').empty();

                // 把DIV直接删除了
                // $('#div1').remove();

                // 带过滤器的删除,把ID是p1的p标签删除
                $('p').remove('#p1');

            })
        });
    </script>
</body>

</html>

CSS类

给元素添加样式addClass()，移除样式的removeClass()

复合的惭怍 toggleClass() 如果元素存在某个类[样式]就移出，如果元素没有某个样式就添加

addClass()/removeClass()/ toggleClass() 参数是一个样式【类】名称

直接指定样式 css()

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS样式</title>
    <script src="./js/jquery-3.4.1.min.js"></script>
    <style>
        .blue {
            color: blue;
        }

        .big {
            font-weight: bold;
            font-size: 30px;
        }
    </style>
</head>

<body>
    <p>这里是一段文本 <span class="blue">蓝色文字</span> <span id="s2">红色大字</span>后面的文字</p>

    <button id="btn">修改样式</button>
    <script>
        $(function () {
            $('#btn').click(function () {
                // 给元素添加指定的样式
                // $('span').addClass('big blue');

                // 移除元素的指定样式
                // $('span').removeClass('blue');

                // $('span').toggleClass('blue big');

                $('p').css({
                    'background-color':'yellow',
                    'border':'dotted green 2px',
                    'text-shadow':'6px 4px 2px grey'
                });
            });
        });
    </script>
</body>

</html>

元素的宽高

jQuery 提供多个处理尺寸的重要方法：
width() 内容的宽高
height()
innerWidth() 内容+填充padding的宽高
innerHeight()
outerWidth() 内容+填充padding+边框border的宽高
outerHeight()
outerWidth(true) 内容+填充padding+边框border+外边距marging的宽高
outerHeight(true)

盒子模型

盒子模型和宽高的值

Jquery遍历

什么是遍历？
就是通过一个元素，找跟他相关的元素
相关的元素可以怎么找？
在父辈中查找【向上找】parent()
在子孙中查找【向下找】 children()
在兄弟中查找【水平找】siblings() 同胞
找到后的过滤 first()找第一个 last()找对后一个 eq(数字)找第几个

通过 jQuery 遍历，您能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对 DOM 进行遍历。

parent() 直接父元素
parents() 所有父元素
parents(元素名) 过滤某种父元素
parentsUntil(元素) 从自身向上找直到某个元素

其他的子元素，兄弟元素类型

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM遍历</title>
    <script src='./js/jquery-3.4.1.min.js'></script>
</head>

<body>
    <span>前一个span</span>

    <p>这里是P段落标签
        <span id="s1">子元素1</span>
        <span>子元素2</span>
        <a href="#">百度一下</a>
    </p>

    <span>后一个span</span>

    <script>
        $(function () {
            // $('p').parent(); 查找直接父元素
            // $('p').parents(); 查找所有父元素
            // $('p').parents('body'); 可以通过参数进行过滤祖先元素 

            // $('p').children(); 获取直接子元素
            // $('p').children('span'); 通过选择器进行过滤子元素只返回span元素
            // $('p').children('#s1'); 通过选择器进行过滤子元素 只返回ID是s1的元素

            // $('p').find(); // 查找子子孙孙元素，没有参数的化找不到
            // $('p').find('*'); // 查找子子孙孙元素中的所有
            // $('p').find('a'); // 查找子子孙孙元素中的a元素

            // $('p').siblings(); 获取被选元素的兄弟元素
            // $('p').siblings('span'); 过滤选中的兄弟元素

            // $('p').next(); 元素的弟弟
            // $('p').nextAll(); 元素的所有弟弟
            // $('p').nextUntil('#s1'); 查找当前元素和参数中元素中间的弟弟元素

            // $('p').prev(); 元素的哥哥
            // $('p').prevAll(); 元素的所有哥哥
            // $('p').prevUntil('html'); 查找当前元素和参数中元素中间的哥哥元素

            // $("span").first(); 过滤被选元素中的第一个
            // $("span").last(); 过滤被选元素中的最后一个
            // $("span").eq(数字n); 过滤被选元素中下标是n的元素

            // $("span").filter('#s1'); 过滤被选元素中的某些元素,比如id是s1的
            // $("span").not('#s1'); 过滤被选元素中的某些元素以外的元素，比如Id不是s1的

        });
    </script>
</body>

</html>

Ajax【重点】

背单词

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背单词</title>
    <script src="./js/jquery-3.4.1.min.js"></script>
    <link rel="stylesheet" href="./css/iconfont.css">
    <style>
        #container {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
        }

        .play {
            float: right;
            font-size: 30px;
        }

        a:link {
            text-decoration-line: none;
            color: black;
        }

        .eye {
            width: 80px;
            height: 80px;
            background-color: bisque;
            position: fixed;
            bottom: 30px;
            right: 30px;
            border-radius: 50%;
            text-align: center;
            line-height: 80px;
        }

        .ziti {
            font-size: 24px;
        }
    </style>
</head>

<body>
    <div id="container"></div>
    <div class="eye"><span class="iconfont icon-xianshi ziti"></span></div>
    <script>

        $(function () {
            var url = './txt/words.txt';
            // ajax发送get请求，第一个参数请求地址，第二个参数是回调函数 data就是后端接口返回的数组
            $.get(url, function (data) {
                // 按换行拆分单词
                var words = data.split('\n');
                for (const word of words) {
                    // word每一行的内容 、
                    // 创建一个单词卡片
                    var card = $('<div></div>');
                    // 设置卡片样式
                    card.css({
                        width: '200px',
                        height: '80px',
                        backgroundColor: 'pink',
                        marginBottom: '10px',
                        borderRadius: '10px',
                        boxShadow: '4px 4px 2px #CCC',
                        padding: '8px'
                    });

                    // wd ===> [auto 自动]
                    var wd = word.split(' ');
                    // 英文单词
                    var yw = $('<div></div>').text(wd[0]);
                    // 中文解释
                    var zw = $('<div class="zwfy"></div>').text(wd[1]);
                    // 播放按钮
                    var bf = $(`<a class="iconfont icon-bofang play"></a>`);
                    // 单词的播放地址
                    var mp3 = `https://dict.youdao.com/dictvoice?audio=${wd[0]}&type=2`;
                    bf.attr('href', mp3);

                    // 把英文单词和中文解释的p段落追加到卡片中
                    card.append(yw, bf, zw);
                    $('#container').append(card);
                }
            });


            // 给浮动按钮添加点击事件 显示或者隐藏中文解释
            $('.eye').click(function () {
                // 小眼睛的显示关闭
                $('.eye span').toggleClass('icon-xianshi icon-bg-hide');
                // 中文翻译的显示隐藏
                $('.zwfy').fadeToggle();
            });
        });
    </script>
</body>

</html>

本文档代码

仓库地址

Jquery是什么？ ​

为什么使用JQuery ​

怎么用 ​

使用 ​

Jquery选择器【重点】 ​

Jquery事件【重点】 ​

JQuery效果 ​

显示隐藏 ​

淡入淡出 ​

滑动 ​

动画-了解 ​

停止动画-了解 ​

DOM操作【重点】 ​

获取/设置内容和属性 ​

添加元素 ​

删除元素 ​

CSS类 ​

元素的宽高 ​

Jquery遍历 ​

Ajax【重点】 ​

Jquery是什么？

为什么使用JQuery

怎么用

使用

Jquery选择器【重点】

Jquery事件【重点】

JQuery效果

显示隐藏

淡入淡出

滑动

动画-了解

停止动画-了解

DOM操作【重点】

获取/设置内容和属性

添加元素

删除元素

CSS类

元素的宽高

Jquery遍历

Ajax【重点】