• 2022-08-26 第六小组 瞒春 学习笔记

    🚩前言

    🌻今天进行JQuery的学习

    作者简介：大家好我是烫嘴的辛拉面，大家可以叫我拉面。
    个人主页: weixin_49405762的博客
    系列专栏： 经典算法习题集
    为大推荐一款刷题神器哦 点击跳转进入网站

    目录

    ✏️JQuery

    ✒️JS库

    别人写好的JS文件，我们拿来直接用
    开发中，会引入很多的.js文件
    JQuery.js------濒临淘汰，经典。10%以下
    css库，bootstrap，layui，easyui。
    React.js-------30%市场
    Angular.js-----10%以下，最难
    Vue.js---------50%以上，简单。最主流。
    文档就绪函数
    当页面的文档部分加载完毕之后，要执行的函数
    $(document).ready(function(){
    alert(“文档就绪函数”);
    });
    $(function(){
    alert(“111”);
    })

    ✒️选择器

    基本选择器
    id选择器—返回值是固定的一个
    class选择器—返回值是一堆
    标签选择器—返回值是一堆
    *号选择器—返回值是所有标签
    层级选择器
    div p—div里的p，后代
    div>p—直接子元素
    div+p—相邻
    过滤选择器
    :first—获取第一个元素
    :last—获取最后一个元素
    :eq(index)—给定位置的元素
    :gt(index)—大于给定位置
    :lt(index)—小于给定位置
    :not(selector)—除了selector以外的所有选择器
    内容选择器：
    :empty—匹配所有不包含子元素的选择器
    :parent—含有子元素的父元素
    属性选择器：
    [name]—包含name属性的元素
    input[type=text]—文本框
    input[type!=text]—除文本框的其他

    ✒️事件

    他们分别在什么时候触发？
    1、JQuery文档就绪函数在页面加载完毕之后触发。浏览器解析完HTML标签
    window.onload，除了解析完HTML标签之外，等到浏览器创建好DOM对象
    2、JQuery文档就绪函数可以执行多次，window.onload只能执行一次

    📌click()—单击事件

                blur()----失去焦点
            mouseover()---鼠标悬停
            change()-----改变事件
            live()----它可以来绑定选择器匹配的元素的事件，哪怕这个元素是后面动态创建出来的

    • 1
    • 2
    • 3
    • 4

    我们常规的添加事件
    addEventListener
    $().click()
    前提条件：
    标签必须原原本本存在于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>Document</title>
        <style>
            div {
                width: 600px;
                height: 600px;
                border: 1px solid;
            }
            p {
                background-color: yellow;
            }
        </style>
    </head>

    <body>

        <div id="container">
            <p id="p123">123</p>
        </div>

        <!-- 
            script标签：只可以做一件事情
            要么是导入js文件，要么是写js代码
         -->
        <script src="js/jquery-1.9.1.js"></script>
        <script>
            $(() => {
                /*
                    appendTo()：参数是一个JQuery元素，追加到xxx
                    prepareTo()：在之前追加

                */
                $("
    546
    "    ).appendTo($("#container"));
                $("
    999
    "    ).prependTo($("#container"));
                $("
    888
    "    ).insertAfter($("#container"));
                $("
    777
    "    ).insertBefore($("#container"));

                $("#p123").replaceWith($("
    666
    "    ));
                // $("000").replaceAll($("p"));

                // 在内部的后面追加
                $("#container").append($("
    100
    "    ));
                $("#container").prepend($("
    200
    "    ));

                $("#container").after($("
    5000
    "    ));
                $("#container").before($("
    6000
    "    ));

                // 清空标签内的所有内容
                // $("#container").empty();
                $("p:gt(5)").remove();

            })
        </script>
    </body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60

    ✒️属性操作：

    html() ===== innerHTML
    text() ===== innerText
    val() ====== input.value
    val()函数：可以给文本框赋值，
    可以操作单选框，复选框，下拉菜单的选中状态

    📌添加删除等样式演示

    <!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>Document</title>
        <style>
            .a{
                width: 200px;
                height: 200px;
                background-color: orange;
            }
            .f {
                color: red;
                font-size: 50px;
            }
        </style>
    </head>
    <body>
        <button id="addStyle">添加样式</button>
        <button id="delStyle">删除样式</button>
        <button id="toggleStyle">添加 / 删除样式</button>
        <div id="div1">123123</div>


        <script src="js/jquery-1.9.1.js"></script>
        <script>
            $(()=> {
                $("#addStyle").click(() => {
                    $("#div1").addClass("a f");
                });
                $("#delStyle").click(() => {
                    $("#div1").removeClass("a f");
                });
                $("#toggleStyle").click(() => {
                    $("#div1").toggleClass("a f");
                });
            })
        </script>
    </body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42

    📌显示小特效展示

    <!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>Document</title>
        <style>
            .a{
                width: 200px;
                height: 200px;
                background-color: orange;
            }
        </style>
    </head>
    <body>

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

        <div class="a" id="div1"></div>

        <hr>
        <button id="btn4">隐藏</button>
        <button id="btn5">显示</button>
        <button id="btn6">隐藏 / 显示</button>
        <button id="btn7">透明</button>

        <div class="a" id="div2"></div>

        <hr>
        <button id="btn8">隐藏</button>
        <button id="btn9">显示</button>
        <button id="btn10">隐藏 / 显示</button>

        <div class="a" id="div3"></div>

        <script src="js/jquery-1.9.1.js"></script>
        <script>
            $(()=>{

                $("#btn8").click(() => {
                    $("#div3").slideUp(5000);
                });
                $("#btn9").click(() => {
                    $("#div3").slideDown(5000);
                });
                $("#btn10").click(() => {
                    $("#div3").slideToggle();
                });

                $("#btn4").click(() => {
                    $("#div2").fadeOut(5000);
                });
                $("#btn5").click(() => {
                    $("#div2").fadeIn(5000);
                });
                $("#btn6").click(() => {
                    $("#div2").fadeToggle();
                });
                $("#btn7").click(() => {
                    $("#div2").fadeTo(1000,0.2);
                });


                $("#btn1").click(() => {
                    $("#div1").hide(5000,() => {
                        alert("div已经隐藏了");
                    });
                });
                $("#btn2").click(() => {
                    $("#div1").show(5000);
                });
                $("#btn3").click(() => {
                    $("#div1").toggle();
                });
            });
        </script>
    </body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81

    ✏️练习

    ✒️关于选择按钮

    <!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>Document</title>
        <style>
            .a{
                width: 200px;
                height: 200px;
                background-color: orange;
            }
        </style>
    </head>
    <body>

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

        <div class="a" id="div1"></div>

        <hr>
        <button id="btn4">隐藏</button>
        <button id="btn5">显示</button>
        <button id="btn6">隐藏 / 显示</button>
        <button id="btn7">透明</button>

        <div class="a" id="div2"></div>

        <hr>
        <button id="btn8">隐藏</button>
        <button id="btn9">显示</button>
        <button id="btn10">隐藏 / 显示</button>

        <div class="a" id="div3"></div>

        <script src="js/jquery-1.9.1.js"></script>
        <script>
            $(()=>{

                $("#btn8").click(() => {
                    $("#div3").slideUp(5000);
                });
                $("#btn9").click(() => {
                    $("#div3").slideDown(5000);
                });
                $("#btn10").click(() => {
                    $("#div3").slideToggle();
                });

                $("#btn4").click(() => {
                    $("#div2").fadeOut(5000);
                });
                $("#btn5").click(() => {
                    $("#div2").fadeIn(5000);
                });
                $("#btn6").click(() => {
                    $("#div2").fadeToggle();
                });
                $("#btn7").click(() => {
                    $("#div2").fadeTo(1000,0.2);
                });


                $("#btn1").click(() => {
                    $("#div1").hide(5000,() => {
                        alert("div已经隐藏了");
                    });
                });
                $("#btn2").click(() => {
                    $("#div1").show(5000);
                });
                $("#btn3").click(() => {
                    $("#div1").toggle();
                });
            });
        </script>
    </body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81

    ✒️关于颜色切换

    <!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>Document</title>
        <style>
            .container {
                width: 500px;
                height: 150px;
                position: relative;
                margin: auto;
            }
            .item {
                width: 500px;
                height: 500px;
                position: absolute;
            }
            .item:nth-child(1) {
                background-color: yellow;
            }
            .item:nth-child(2) {
                background-color: red;
            }
            .item:nth-child(3) {
                background-color: green;
            }
            .item:nth-child(4) {
                background-color: blue;
            }
            .active {
                z-index: 10;
            }
        </style>
    </head>
    <body>
        <!-- 
            需求：
            每隔1s钟，切换颜色，
            当切换到第四种颜色时，再切换回第1个

            我们可以给HTML添加我们自定义的属性
            a="1"
            原则：
            div id="div1"
         -->
        <div class="container">
            <div data-index="1" class="item active"></div>
            <div data-index="2" class="item"></div>
            <div data-index="3" class="item"></div>
            <div data-index="4" class="item"></div>
        </div>

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

            function next(index) {
                index = parseInt(index);

                if(index == $(".item").length) {
                    return 1;
                }

                return index + 1;
            }

            setInterval(() => {
                // 我要先知道现在是谁在上面
                // 我要获取现在在最上面的div
                let active = $(".active");
                // 接住我们获取到的最上面的div的自定义的索引值属性
                let index = active.attr("data-index");
                // 现在最上面的div删除激活样式
                active.removeClass("active");

                $(".item[data-index="+ next(index) +"]").addClass("active");

            },500);
            
        </script>
    </body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83

    必看

    算法对程序员来说及其重要，语言和开发平台不断变化，但是万变不离其宗的是那些算法和理论，刷算法最最最直白的原因就是找一个好的工作，那刷题一定是必不可少的
    现在算法刷题平台还是蛮多的，给大家介绍一个我认为与大厂关联最深的平台——牛客网
    在这里插入图片描述

    相较于其他平台，他们的题单更和工作，大厂靠拢，不光有面试必刷的101到题目，还有大量大厂真题，内容也全程免费，相较于其它会员费结算的来说 非常的友好
    在这里插入图片描述

    牛客网还支持ACM模式，没有练习过的一定要提前适应！像某团、某为，都要求自己处理输入输出，如果不提前练习会很吃亏的！
    牛客的题解更新迭代也很快，讨论区也有奇技淫巧的分享，能帮你把所有盲点扫清楚，整体来说还是非常推荐去练习的~
    传送门：牛客网

  • 相关阅读:
    String字符串拼接原理
    解决方案 | 电子签让公共事业服务更便捷
    Java开发者的Python进修指南：JSON利器之官方json库、demjson和orjson的实用指南
    H5网页漫画小说苹果cms模板源码/支持对接公众号/支持三级分销
    微信小程序--Taro框架实际开发中的问题汇总
    高斯DWS数据库分页查询优化思路
    Jquery自定义多级导航菜单完整代码带搜索查询功能附注释
    Spark的概念、特点、应用场景
    线性系统的激励和响应以及与系统特性的联系
    L4W4作业2 深度学习与艺术 - 神经风格迁移
  • 原文地址：https://blog.csdn.net/weixin_49405762/article/details/126550729