• 2022-08-26 学习笔记

    JQuery: 

    JS库：别人写好的JS文件，我们拿来直接用

                    开发中，会引入很多的.js文件

                    JQuery.js------濒临淘汰，经典。10%以下

                        css库，bootstrap，layui，easyui。

                    React.js-------30%市场

                    Angular.js-----10%以下，最难

                    Vue.js---------50%以上，简单。最主流。

    文档就绪函数

                    当页面的文档部分加载完毕之后，要执行的函数

    $(document).ready(function(){
        alert("文档就绪函数");
    });

    选择器

                    基本选择器

                        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只能执行一次

    1.            $(function(){
    2.                 alert("JQuery1");
    3.            })
    4.            window.onload = function() {
    5.                 alert("window1");
    6.            }

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

    1. function fun() {
    2.                     $("#cr").click(()=>{
    3.                         alert("cr");
    4.                     });
    5.                 };
    1. <!DOCTYPE html>
    2. <html lang="en">
    3.     <head>
    4.         <meta charset="UTF-8">
    5.         <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.         <title>Document</title>
    8.         <style>
    9.             div {
    10.                 width: 600px;
    11.                 height: 600px;
    12.                 border: 1px solid;
    13.             }
    14.             p {
    15.                 background-color: yellow;
    16.             }
    17.         </style>
    18.     </head>
    19.  
    20.     <body>
    21.  
    22.         <div id="container">
    23.             <p id="p123">123</p>
    24.         </div>
    25.  
    26.         <!-- 
    27.             script标签：只可以做一件事情
    28.             要么是导入js文件，要么是写js代码
    29.          -->
    30.         <script src="js/jquery-1.9.1.js"></script>
    31.         <script>
    32.             $(() => {
    33.                 /*
    34.                     appendTo()：参数是一个JQuery元素，追加到xxx
    35.                     prepareTo()：在之前追加
    36.  
    37.                 */
    38.                 // $("
      546
      "      ).appendTo($("#container"));
    39.                 // $("
      999
      "      ).prependTo($("#container"));
    40.                 //  $("
      888
      "      ).insertAfter($("#container"));
    41.                 //  $("
      777
      "      ).insertBefore($("#container"));
    42.  
    43.                 // $("#p123").replaceWith($("
      666
      "      ));
    44.                 // $("000").replaceAll($("p"));
    45.  
    46.                 // // 在内部的后面追加
    47.                 // $("#container").append($("
      100
      "      ));
    48.                  //$("#container").prepend($("
      200
      "      ));
    49.  
    50.                // $("#container").after($("
      5000
      "      ));
    51.                 // $("#container").before($("
      6000
      "      ));
    52.  
    53.                 // // 清空标签内的所有内容
    54.                 // // $("#container").empty();
    55.                 // $("p:gt(5)").remove();
    56.  
    57.             })
    58.         </script>
    59.     </body>
    60. </html>

     属性操作：

                        html() ===== innerHTML

                        text() ===== innerText

                        val() ====== input.value

                        val()函数：可以给文本框赋值，

                            可以操作单选框，复选框，下拉菜单的选中状态

    1. 相当于setAttribute
    2. getAttribute
    3. alert($("input[type=checkbox]").attr("value","sss"));
    4. alert($("input[type=checkbox]").attr("checked"));
    5. alert($("input[type=checkbox]").prop("checked",true));
    6. alert($("#sheng").prop("selected"));

    练习题

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.     <head>
    4.         <meta charset="UTF-8">
    5.         <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.         <title>Document</title>
    8.     </head>
    9.     <body>
    10.         你爱好的运动是？
    11.         <input type="checkbox" id="checkAllBox">全选 / 全不选
    12.         <br>
    13.         <br>
    14.         <input type="checkbox" class="item" value="足球">足球
    15.         <input type="checkbox" class="item" value="篮球">篮球
    16.         <input type="checkbox" class="item" value="羽毛球">羽毛球
    17.         <input type="checkbox" class="item" value="乒乓球">乒乓球
    18.         <br>
    19.         <br>
    20.         <input type="button" value="全选" id="checkedAllBtn">
    21.         <input type="button" value="全不选" id="checkedNoBtn">
    22.         <input type="button" value="反选" id="checkedReverseBtn">
    23.  
    24.  
    25.         <script src="js/jquery-1.9.1.js"></script>
    26.         <script>
    27.             $(()=>{
    28.                 // 给全选按钮绑定事件
    29.                 $("#checkedAllBtn").click(()=>{
    30.                     // 选取所有带有checkbox这个属性的值的元素们
    31.                     $(":checkbox").prop("checked",true);
    32.                 });
    33.                 // 全不选绑定事件
    34.                 $("#checkedNoBtn").click(()=>{
    35.                     // 选取所有带有checkbox这个属性的值的元素们
    36.                     $(":checkbox").prop("checked",false);
    37.                 });
    38.                 // 反选
    39.                 $("#checkedReverseBtn").click(()=>{
    40.                     // 获取全部的复选框
    41.                     // 遍历复选框
    42.                     // 
    43.                     // for(let i = 0;i < $(".item").length;i++) {
    44.                     //     $(".item:eq("+i+")").prop("checked",!$(".item:eq("+i+")").prop("checked"));
    45.                     // }
    46.                     // JQuery的遍历操作
    47.                     /*
    48.                         参数1：index---遍历元素的下标
    49.                         参数2：item----当前正在遍历的项，这个item是一个DOM对象
    50.                     */
    51.                     $(".item").each((index,item) => {
    52.                         // 在each遍历的function中，有一个this对象，this就是当前正在遍历的dom对象（JS对象）
    53.                         /* this指向的问题？如果使用ES6箭头函数，
    54.                             this指向不是DOM，指向的是当前函数的调用者。
    55.                         */
    56.                         item.checked = !item.checked;
    57.                     });
    58.                      // 检查是否满选
    59.                     // 获取全部的选项的个数
    60.                     let allCount = $(".item").length;
    61.                     // 在获取选中的个数
    62.                     let checkedCount = $(".item:checked").length;
    63.                         $("#checkAllBox").prop("checked",allCount == checkedCount);
    64.                 });
    65.  
    66.                 
    67.                 // if(allCount == checkedCount) {
    68.                 //     $("#checkAllBox").prop("checked",true);
    69.                 // }else {
    70.                 //     $("#checkAllBox").prop("checked",false);
    71.                 // }
    72.                 
    73.                 $("#checkAllBox").click(() => {
    74.                     $(".item").prop("checked",$("#checkAllBox").prop("checked"));
    75.                 });
    76.  
    77.                 // 获取所有样式为.item的元素
    78.                 // 可以直接绑定事件
    79.                 $(".item").click(()=> {
    80.                     
    81.                     // 检查是否满选
    82.                     // 获取全部的选项的个数
    83.                     let allCount = $(".item").length;
    84.                     // 在获取选中的个数
    85.                     let checkedCount = $(".item:checked").length;
    86.                         $("#checkAllBox").prop("checked",allCount == checkedCount);
    87.                 });
    88.             })
    89.         </script>
    90.     </body>
    91. </html>
    1.   <style>
    2.             .a{
    3.                 width: 200px;
    4.                 height: 200px;
    5.                 background-color: orange;
    6.             }
    7.             .f {
    8.                 color: red;
    9.                 font-size: 50px;
    10.             }
    11.         </style>
    12.     </head>
    13.     <body>
    14.         <button id="addStyle">添加样式</button>
    15.         <button id="delStyle">删除样式</button>
    16.         <button id="toggleStyle">添加 / 删除样式</button>
    17.         <div id="div1">123123</div>
    18.  
    19.  
    20.         <script src="js/jquery-1.9.1.js"></script>
    21.         <script>
    22.             $(()=> {
    23.                 $("#addStyle").click(() => {
    24.                     $("#div1").addClass("a f");
    25.                 });
    26.                 $("#delStyle").click(() => {
    27.                     $("#div1").removeClass("a f");
    28.                 });
    29.                 $("#toggleStyle").click(() => {
    30.                     $("#div1").toggleClass("a f");
    31.                 });
    32.             })
    33.         </script>
    34.     </body>

    动画样式

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.     <head>
    4.         <meta charset="UTF-8">
    5.         <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.         <title>Document</title>
    8.         <style>
    9.             .a{
    10.                 width: 200px;
    11.                 height: 200px;
    12.                 background-color: orange;
    13.             }
    14.         </style>
    15.     </head>
    16.     <body>
    17.  
    18.         <button id="btn1">隐藏</button>
    19.         <button id="btn2">显示</button>
    20.         <button id="btn3">隐藏 / 显示</button>
    21.  
    22.         <div class="a" id="div1"></div>
    23.  
    24.         <hr>
    25.         <button id="btn4">隐藏</button>
    26.         <button id="btn5">显示</button>
    27.         <button id="btn6">隐藏 / 显示</button>
    28.         <button id="btn7">透明</button>
    29.  
    30.         <div class="a" id="div2"></div>
    31.  
    32.         <hr>
    33.         <button id="btn8">隐藏</button>
    34.         <button id="btn9">显示</button>
    35.         <button id="btn10">隐藏 / 显示</button>
    36.  
    37.         <div class="a" id="div3"></div>
    38.  
    39.         <script src="js/jquery-1.9.1.js"></script>
    40.         <script>
    41.             $(()=>{
    42.  
    43.                 $("#btn8").click(() => {
    44.                     $("#div3").slideUp(5000);
    45.                 });
    46.                 $("#btn9").click(() => {
    47.                     $("#div3").slideDown(5000);
    48.                 });
    49.                 $("#btn10").click(() => {
    50.                     $("#div3").slideToggle();
    51.                 });
    52.  
    53.                 $("#btn4").click(() => {
    54.                     $("#div2").fadeOut(5000);
    55.                 });
    56.                 $("#btn5").click(() => {
    57.                     $("#div2").fadeIn(5000);
    58.                 });
    59.                 $("#btn6").click(() => {
    60.                     $("#div2").fadeToggle();
    61.                 });
    62.                 $("#btn7").click(() => {
    63.                     $("#div2").fadeTo(1000,0.2);
    64.                 });
    65.  
    66.  
    67.                 $("#btn1").click(() => {
    68.                     $("#div1").hide(5000,() => {
    69.                         alert("div已经隐藏了");
    70.                     });
    71.                 });
    72.                 $("#btn2").click(() => {
    73.                     $("#div1").show(5000);
    74.                 });
    75.                 $("#btn3").click(() => {
    76.                     $("#div1").toggle();
    77.                 });
    78.             });
    79.         </script>
    80.     </body>
    81. </html>

    练习

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.     <head>
    4.         <meta charset="UTF-8">
    5.         <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.         <title>Document</title>
    8.         <style>
    9.             .container {
    10.                 width: 500px;
    11.                 height: 150px;
    12.                 position: relative;
    13.                 margin: auto;
    14.             }
    15.             .item {
    16.                 width: 500px;
    17.                 height: 500px;
    18.                 position: absolute;
    19.             }
    20.             .item:nth-child(1) {
    21.                 background-color: yellow;
    22.             }
    23.             .item:nth-child(2) {
    24.                 background-color: red;
    25.             }
    26.             .item:nth-child(3) {
    27.                 background-color: green;
    28.             }
    29.             .item:nth-child(4) {
    30.                 background-color: blue;
    31.             }
    32.             .active {
    33.                 z-index: 10;
    34.             }
    35.         </style>
    36.     </head>
    37.     <body>
    38.         <!-- 
    39.             需求：
    40.             每隔1s钟，切换颜色，
    41.             当切换到第四种颜色时，再切换回第1个
    42.  
    43.             我们可以给HTML添加我们自定义的属性
    44.             a="1"
    45.             原则：
    46.             div id="div1"
    47.          -->
    48.         <div class="container">
    49.             <div data-index="1" class="item active"></div>
    50.             <div data-index="2" class="item"></div>
    51.             <div data-index="3" class="item"></div>
    52.             <div data-index="4" class="item"></div>
    53.         </div>
    54.  
    55.         <script src="js/jquery-1.9.1.js"></script>
    56.         <script>
    57.  
    58.             function next(index) {
    59.                 index = parseInt(index);
    60.  
    61.                 if(index == $(".item").length) {
    62.                     return 1;
    63.                 }
    64.  
    65.                 return index + 1;
    66.             }
    67.  
    68.             setInterval(() => {
    69.                 // 我要先知道现在是谁在上面
    70.                 // 我要获取现在在最上面的div
    71.                 let active = $(".active");
    72.                 // 接住我们获取到的最上面的div的自定义的索引值属性
    73.                 let index = active.attr("data-index");
    74.                 // 现在最上面的div删除激活样式
    75.                 active.removeClass("active");
    76.  
    77.                 $(".item[data-index="+ next(index) +"]").addClass("active");
    78.  
    79.             },500);
    80.             
    81.         </script>
    82.     </body>
    83. </html>

  • 相关阅读:
    C++对象实例创建实验
    MySQL完全备份与恢复
    带你学习MindSpore中算子使用方法
    Postman如何发送Https请求
    VSCode 好用的插件分享
    小白学java
    k8s常用命令2
    vue 中 keep-alive 组件的作用
    虹科 | 解决方案 | 经销商（OEM）方案
    SpringCloudalibaba2
  • 原文地址：https://blog.csdn.net/weixin_45777469/article/details/126549740