• 2022-08-26 第二小组 张明旭 前端学习记录

    目录

    重点归纳

    知识点

    JQuery的选择器

    导入JS库

     文档就绪函数

    基本选择器

    层级选择器

    过滤选择器

    内容选择器

    属性选择器

    JQuery事件

    面试题

    添加事件

    添加元素

     操作属性

    JQuery========JS:

    添加、删除、添加或删除样式

    JQuery的遍历操作（this的使用）

    this指向问题？

            如果使用ES6箭头函数，this指向的不是DOM，指向的是当前函数的调用者。

     练习

    动画函数

     2.淡入、淡出、淡入或淡出、透明

    3.上拉、下拉（恢复）

    重点归纳

    • JS库：JQuery
    • JQuery中的语法
    • 添加事件
    • 操作属性
    • 增删样式

    知识点

    JQuery的选择器

    导入JS库

      面试题：

            导入的JS库中，带min的是运行环境，把换行、代码缩进都省略了，格式乱

            不带min的是生产环境，能改，有注释

     文档就绪函数

    JQuery.js提供了一个文档就绪函数 $（JS也有）：当页面的文档部分加载完毕之后，要执行的函数

    因为有文档就绪函数script可以在任何位置，意义不大，因为我们一般在后边写js

    基本选择器

    id选择器--------返回值固定的一个

    类选择器--------返回值为一堆

    标签选择器------返回值为一堆

    *号选择器-------返回值为所有标签

    层级选择器

    div p-------div里的p，后代

    div>p-------直接子元素

    div+p-------相邻元素

                   

    过滤选择器

    :first------------获取第一个元素

    :last-------------获取最后一个元素

    :eq(index)--------获取指定位置的元素

        例：tr:eq(5)

    :gt(index)--------获取大于指定位置

    :it(index)--------获取小于指定元素

    :not(selector)----获取除了selector以外的所有选择器

    内容选择器

                    :empty-------匹配所有不包含子元素的选择器

                    :parent------含有子元素的父元素

    属性选择器

                    [name]-----------包含name属性的选择器

                    [type=text]------所有属性是text的选择器

                    [type!=text]-----所有属性不是text的选择器

    JQuery事件

    先说JS的一个事情

    window有一个事件onload：

    window.onload----------窗口加载

    面试题

            1.文档就绪和窗口加载有什么区别？

            window.onload比文档就绪的东西多，多了窗口边框（BON-DOM）

            2.他们在什么时候触发？

            (1) JQuery文档就绪函数在页面加载完之后触发，浏览器解析完HTML标签

                window.onload除了要解析完HTML之外，还要解析引入的JS等,等到浏览器创建好DOM对象

            (2) JQuery文档就绪可以执行多次

                window.onload只能执行一次

    用什么库抓对象就用这个库的语法，不能混用

                例：用JQuery抓元素，只能用JQuery的语法

    1. 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>Documenttitle>
    8. head>
    9. <body>
    10.      <div>div>
    11.      <script src="./js/jquery-3.0.0.min.js">script>
    12.      <script>
    13.         
    14.         window.onload = function(){
    15.             alert("window1");
    16.         };
    17.         
    18.         $(function(){
    19.             alert("JQuery1");
    20.         });
    21.  
    22.  
    23.  
    24.         window.onload = function(){
    25.             alert("window2");
    26.         };
    27.         
    28.         $(function(){
    29.             alert("JQuery2");
    30.         });
    31.      script>
    32. body>
    33. html>

    添加事件

    1.可以再标签加onclick()

    (万能的方法，但low)

    2.添加事件方法

        click()------单击事件

        blur()-------失去焦点事件

        mouseover()--鼠标悬停事件

        change()-----元素改变时发生的事件

            ......

    几乎所有的事件都是方法

    法一：$().click();（选择器.click();）

    法二：addEventListener("","");

    两种方法的前提条件：

    除了live()事件，添加事件的标签必须真实存在于HTML的页面上。

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Documenttitle>
    9. head>
    10.  
    11. <body>
    12.     <button id="btn1">按钮1button>
    13.     <button id="btn2" onclick="fun()">按钮2button>
    14.     <div id="btns">div>
    15.     <script src="">script>
    16.     <script>
    17.         $(() => {
    18.             $("#btn1").click(() => {
    19.                 $("").appendTo($("#btns"));
    20.             });
    21.  
    22.         })
    23.         function fun() {
    24.             $("#cr").click(() => {
    25.                 alert("cr");
    26.             });
    27.         };
    28.  
    29.     script>
    30. body>
    31.  
    32. html>

     script标签只可以做一件事：

            要么是导入js文件，要么写js代码

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

    添加元素

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Documenttitle>
    9.     <style>
    10.         div {
    11.             width: 600px;
    12.             height: 600px;
    13.             border: 1px solid;
    14.         }
    15.  
    16.         p {
    17.             background-color: yellow;
    18.         }
    19.     style>
    20. head>
    21.  
    22. <body>
    23.     
    24.  
    25.     <div id="container">
    26.         <p id="p123">123p>
    27.     div>
    28.     <script src="./js/jquery-1.9.1.js">script>
    29.     <script>
    30.         $(() => {
    31.             /*
    32.                 appendTo():参数是一个元素
    33.                 在xxx里的后面追加内容
    35.                 prepareTo():在xxx里的前面追加内容
    36.             */
    37.             $("
      456
      "      ).appendTo($("#container"));
    38.             $("
      789
      "      ).prependTo($("#container"));
    39.  
    40.             //在div之外插入元素 
    41.             $("
      888
      "      ).insertAfter($("#container"));
    42.             $("
      888
      "      ).insertBefore($("#container"));
    43.  
    44.             // 替换元素：用一个元素替换已有的指定元素
    45.             $("#p123").replaceWith($("
      456
      "      ));
    46.  
    47.             // 在元素的内部的后面追加
    48.             $("#container").append($("
      100
      "      ));
    49.  
    50.             // 在元素的内部的前面追加
    51.             $("#container").prepend($("
      200
      "      ));
    52.  
    53.             // 在元素的外部的后面追加 
    54.             $("#container").after($("
      5000
      "      ));
    55.  
    56.             // 在元素的外部的前面追加 
    57.             $("#container").before($("
      5000
      "      ));
    58.  
    59.             // 清空标签内所有内容
    60.             $("p").remove();
    61.  
    62.             // 删除指定位置的内容
    63.             $("p:eq(0)").remove();
    64.  
    65.             // 删除大于指定位置的内容
    66.             $("p:gt(5)").remove();
    67.         });
    68.  
    69.  
    70.     script>
    71. body>
    72.  
    73. html>

     操作属性

    JQuery========JS:

    1.html()========innerHTML

        获取元素HTML

        传参：添加元素

    2.text()========innerText

        获取文本

        传参：添加文本

    3.Val()=========input.Value

        Val()函数除了可以获取文本值，还可以传参给文本框赋值，还可以操作单选框、复选框、下拉菜单的状态

    4.attr()========两个参数setAttribute() / 一个参数getAttribute()

        attr()拿不到动态变化的属性

    例如：checked

        prop()也是拿属性，可以一个参数拿状态，两个参数赋值状态，返回布尔值，拿没拿到

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Documenttitle>
    9.     <style>
    10.         div {
    11.             width: 600px;
    12.             height: 600px;
    13.             border: 1px solid;
    14.         }
    15.  
    16.         p {
    17.             background-color: yellow;
    18.         }
    19.     style>
    20. head>
    21.  
    22. <body>
    23.     <div id="div1">
    24.         <input type="text" id="username">
    25.         <input type="checkbox" id="swimming" value="swimming">游泳
    26.         <button id="checkAll">全选button>
    27.     div>
    28.  
    29.  
    30.     <script src="./js/jquery-1.9.1.js">script>
    31.     <script>
    32.         $(() => {
    33.             // $("#div1").html("
      123
      ");
    34.             // $("#div1").text("
      456
      ");
    35.  
    36.             // 赋值
    37.             $("#username").val("666");
    38.  
    39.  
    40.             $("#checkAll").click(() => {
    41.                 $("#swimming").val("swimming");
    42.  
    43.                 // alert($("input[type=checkbox]").attr("value","sss"));
    44.                 // alert($("input[type=checkbox]").attr("checked"));
    45.  
    46.                 alert($("input[type=checkbox]").prop("checked", true));
    47.                 alert($("#sheng").prop("selected"));
    48.             });
    49.         });
    50.     script>
    51. body>
    52.  
    53. html>

    添加、删除、添加或删除样式

    1. 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>Documenttitle>
    8.     <style>
    9.         .a{
    10.             width: 200px;
    11.             height: 200px;
    12.             background-color: orange;
    13.         }
    14.         .f {
    15.             color: red;
    16.             font-size: 50px;
    17.         }
    18.     style>
    19. head>
    20. <body>
    21.     
    22.      <button id="addStyle">添加样式button>
    23.      <button id="delStyle">删除样式button>
    24.      <button id="toggleStyle">添加 / 删除样式button>
    25.      <div id="div1">123123div>
    26.  
    27.  
    28.      <script src="js/jquery-1.9.1.js">script>
    29.      <script>
    30.          $(()=> {
    31.              $("#addStyle").click(() => {
    32.                  $("#div1").addClass("a f");
    33.              });
    34.              $("#delStyle").click(() => {
    35.                  $("#div1").removeClass("a f");
    36.              });
    37.              $("#toggleStyle").click(() => {
    38.                  $("#div1").toggleClass("a f");
    39.              });
    40.          })
    41.      script>
    42. body>
    43. html>

    JQuery的遍历操作（this的使用）

            each()：在遍历中会有一个this对象（this就是当前正在遍历的dom对象（dom对象就是一个JS对象，可以用JS语法））

            each()不能用箭头函数（this指向问题），要用必须传参

            参数一：index-----遍历元素的下标

            参数二：？？？----当前正在遍历的项

    this指向问题？

            如果使用ES6箭头函数，this指向的不是DOM，指向的是当前函数的调用者。

     练习

    复选框问题：

        有几个爱好的复选框，设置全选/全不选、反选等按钮

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Documenttitle>
    9. head>
    10.  
    11. <body>
    12.     你的爱好是？
    13.     <input type="checkbox" id="checkAll">全选 / 全不选
    14.     <br>
    15.     <br>
    16.     <input type="checkbox" id="soccer">足球
    17.     <input type="checkbox" id="basketball">篮球
    18.     <input type="checkbox" id="badminton">羽毛球
    19.     <input type="checkbox" id="ping-pong">乒乓球
    20.     <br>
    21.     <br>
    22.     <input type="button" value="全选" id="btn1">
    23.     <input type="button" value="全不选" id="btn2">
    24.     <input type="button" value="反选" id="btn3">
    25.     <script src="./js/jquery-1.9.1.js">script>
    26.     <script>
    27.         $(() => {
    28.             $("#checkAll").click(() => {
    29.                 if ($("#checkAll").prop("checked")) {
    30.                     $("#soccer").prop("checked", true);
    31.                     $("#basketball").prop("checked", true);
    32.                     $("#badminton").prop("checked", true);
    33.                     $("#ping-pong").prop("checked", true);
    34.                     // $("#").val("");
    35.                     // alert($("#sheng").prop("selected"));
    36.                 } else {
    37.                     $("#soccer").prop("checked", false);
    38.                     $("#basketball").prop("checked", false);
    39.                     $("#badminton").prop("checked", false);
    40.                     $("#ping-pong").prop("checked", false);
    41.                 }
    42.             });
    43.             $("#btn1").click(() => {
    44.                 $("#soccer").prop("checked", true);
    45.                 $("#basketball").prop("checked", true);
    46.                 $("#badminton").prop("checked", true);
    47.                 $("#ping-pong").prop("checked", true);
    48.                 $("#checkAll").prop("checked", true);
    49.             });
    50.             $("#btn2").click(() => {
    51.                 $("#soccer").prop("checked", false);
    52.                 $("#basketball").prop("checked", false);
    53.                 $("#badminton").prop("checked", false);
    54.                 $("#ping-pong").prop("checked", false);
    55.                 $("#checkAll").prop("checked", false);
    56.             });
    57.             $("#btn3").click(() => {
    58.                 if ($("#soccer").prop("checked")) {
    59.                     $("#soccer").prop("checked", false)
    60.                 } else {
    61.                     $("#soccer").prop("checked", true)
    62.                 }
    63.                 if ($("#basketball").prop("checked")) {
    64.                     $("#basketball").prop("checked", false)
    65.                 } else {
    66.                     $("#basketball").prop("checked", true)
    67.                 }
    68.                 if ($("#badminton").prop("checked")) {
    69.                     $("#badminton").prop("checked", false)
    70.                 } else {
    71.                     $("#badminton").prop("checked", true)
    72.                 }
    73.                 if ($("#ping-pong").prop("checked")) {
    74.                     $("#ping-pong").prop("checked", false)
    75.                 } else {
    76.                     $("#ping-pong").prop("checked", true)
    77.                 }
    78.                 if ($("#soccer").prop("checked") &&
    79.                     $("#basketball").prop("checked") &&
    80.                     $("#badminton").prop("checked") &&
    81.                     $("#ping-pong").prop("checked")) {
    82.                     $("#checkAll").prop("checked", true);
    83.                 } else {
    84.                     $("#checkAll").prop("checked", false);
    85.                 }
    86.             });
    87.             $("#soccer").click(() => {
    88.                 fun();
    89.             });
    90.             $("#ping-pong").click(() => {
    91.                 fun();
    92.             });
    93.             $("#basketball").click(() => {
    94.                 fun();
    95.             });
    96.             $("#badminton").click(() => {
    97.                 fun();
    98.             });
    99.             function fun() {
    100.                 if ($("#ping-pong").prop("checked") &&
    101.                     $("#basketball").prop("checked") &&
    102.                     $("#badminton").prop("checked") &&
    103.                     $("#soccer").prop("checked")) {
    104.                     $("#checkAll").prop("checked", true);
    105.                 } else if ($("#soccer").prop("checked") ||
    106.                     $("#basketball").prop("checked") ||
    107.                     $("#badminton").prop("checked") ||
    108.                     $("#ping-pong").prop("checked")) {
    109.                     $("#checkAll").prop("checked", false);
    110.                 } else {
    111.                     $("#checkAll").prop("checked", true);
    112.                 }
    113.             }
    114.         });
    115.     script>
    116. body>
    117.  
    118. html>

    动画函数

    1.隐藏、显示、隐藏或显示

    可以传参：

    第一个参数可能是动画时间

    第二个是函数

    1. 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>Documenttitle>
    8.     <style>
    9.         .a{
    10.             width: 200px;
    11.             height: 200px;
    12.             background-color: orange;
    13.         }
    14.     style>
    15. head>
    16. <body>
    17.      <button id="btn1">隐藏button>
    18.      <button id="btn2">显示button>
    19.      <button id="btn3">隐藏 / 显示button>
    20.  
    21.      <div class="a" id="div1">div>
    22.  
    23.      <script src="js/jquery-1.9.1.js">script>
    24.      <script>
    25.          $(()=>{
    26.  
    27.              $("#btn1").click(() => {
    28.                  $("#div1").hide(5000,() => {
    29.                      alert("div已经隐藏了");
    30.                  });
    31.              });
    32.              $("#btn2").click(() => {
    33.                  $("#div1").show(5000);
    34.              });
    35.              $("#btn3").click(() => {
    36.                  $("#div1").toggle();
    37.              });
    38.          });
    39.      script>
    40. body>
    41. html>

     2.淡入、淡出、淡入或淡出、透明

    1. 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>Documenttitle>
    8.     <style>
    9.         .a{
    10.             width: 200px;
    11.             height: 200px;
    12.             background-color: orange;
    13.         }
    14.     style>
    15. head>
    16. <body>
    17.      <hr>
    18.      <button id="btn4">隐藏button>
    19.      <button id="btn5">显示button>
    20.      <button id="btn6">隐藏 / 显示button>
    21.      <button id="btn7">透明button>
    22.  
    23.      <div class="a" id="div2">div>
    24.  
    25.      <script src="js/jquery-1.9.1.js">script>
    26.      <script>
    27.          $(()=>{
    28.  
    29.              $("#btn4").click(() => {
    30.                  $("#div2").fadeOut(5000);
    31.              });
    32.              $("#btn5").click(() => {
    33.                  $("#div2").fadeIn(5000);
    34.              });
    35.              $("#btn6").click(() => {
    36.                  $("#div2").fadeToggle();
    37.              });
    38.              $("#btn7").click(() => {
    39.                  $("#div2").fadeTo(1000,0.2);
    40.              })
    41.          });
    42.      script>
    43. body>
    44. html>

    3.上拉、下拉（恢复）

    1. 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>Documenttitle>
    8.     <style>
    9.         .a{
    10.             width: 200px;
    11.             height: 200px;
    12.             background-color: orange;
    13.         }
    14.     style>
    15. head>
    16. <body>
    17.  
    18.      <hr>
    19.      <button id="btn8">隐藏button>
    20.      <button id="btn9">显示button>
    21.      <button id="btn10">隐藏 / 显示button>
    22.  
    23.      <div class="a" id="div3">div>
    24.  
    25.      <script src="js/jquery-1.9.1.js">script>
    26.      <script>
    27.          $(()=>{
    28.  
    29.              $("#btn8").click(() => {
    30.                  $("#div3").slideUp(5000);
    31.              });
    32.              $("#btn9").click(() => {
    33.                  $("#div3").slideDown(5000);
    34.              });
    35.              $("#btn10").click(() => {
    36.                  $("#div3").slideToggle();
    37.              });
    38.          });
    39.      script>
    40. body>
    41. html>
  • 相关阅读:
    计组笔记（1）——校验码、原补码乘除计算、浮点数计算
    海量数据处理利器 Roaring BitMap 原理介绍
    some和filter、map的区别
    1.计算机组成与体系结构
    物联网python开发实践
    虚拟机搭建负载均衡，mysql主从复制和读写分离（二、克隆虚拟机）
    ORA-16171当DG出现GAP的时候,如何强制启动备库
    【Redis】RedisTemplate序列化传输数据
    深析C语言的灵魂 -- 指针
    健康防猝指南2：饮食健康
  • 原文地址：https://blog.csdn.net/weixin_71777094/article/details/126551019