• JavaScript （下）

    1.面向对象

    在 Java 中我们学习过面向对象，核心思想是万物皆对象。在 JavaScript 中同样也有面向对象。思想类似。

    把相关的数据和方法组织为一个整体来看待，从更高的层次来进行系统建模，更贴近事物的自然运行模式

    1.类的定义和使用

    格式定义：

    1. class 类名{
    2. 	constructor(变量列表) {
    3. 	变量赋值;
    4. 	}
    5. 	
    6. 	方法名(参数列表) {
    7.         方法体;
    8.         return 返回值;
    9.     }
    10. }

    使用格式：

    1. let 对象名 = new 类名(实际变量值);
    2. 对象名.方法名();

    例：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>类的定义和使用title>
    7. head>
    8. <body>
    9.     
    10. body>
    11. <script>
    12.     //定义Person类
    13.     class Person{
    14.         //构造方法
    15.         constructor(name,age){
    16.             this.name = name;
    17.             this.age = age;
    18.         }
    19.  
    20.         //show方法
    21.         show(){
    22.             document.write(this.name + "," + this.age + "
      "      );
    23.         }
    24.  
    25.         //eat方法
    26.         eat(){
    27.             document.write("吃饭...");
    28.         }
    29.     }
    30.  
    31.     //使用Person类
    32.     let p = new Person("张三",23);
    33.     p.show();
    34.     p.eat();
    35. script>
    36. html>

    2.字面量类的定义和使用

    格式定义 ：

    1. let 对象名 = {
    2.     变量名 : 变量值,
    3.     变量名 : 变量值,
    4.     ...
    5.  
    6.     方法名 : function(参数列表) {
    7.         方法体;
    8.         return 返回值;
    9.     },
    10.     ...
    11. };

    使用格式：

    1. 对象名.变量名
    2. 对象名.方法名();

    这个其实是直接创建了一个对象

    在定义类里边的变量和方法的时候，直接就创建了这个类的对象

    字面量：就是从代码字面意思就知道是啥类型

    而对象的字面量就是一对大括号意思就是，以后我们看到给变量赋值时，等号右边是一对大括号，那就知道声明的这个变量就是一个对象

    例：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>字面量定义类和使用title>
    7. head>
    8. <body>
    9.     
    10. body>
    11. <script>
    12.     //定义person
    13.     let person = {
    14.         name : "张三",
    15.         age : 23,
    16.         hobby : ["听课","学习"],
    17.  
    18.         eat : function() {
    19.             document.write("吃饭...");
    20.         }
    21.     };
    22.  
    23.     //使用person
    24.     document.write(person.name + "," + person.age + "," + person.hobby[0] + "," + person.hobby[1] + "
      "      );
    25.     person.eat();
    26. script>
    27. html>

    3. 继承

    继承：让类与类产生子父类的关系，子类可以使用父类有权限的成员（提高代码复用性与维护性）

    继承关键字：extends

    顶级父类：Object

    例：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>继承title>
    7. head>
    8. <body>
    9.     
    10. body>
    11. <script>
    12.     //定义Person类
    13.     class Person{
    14.         //构造方法
    15.         constructor(name,age){
    16.             this.name = name;
    17.             this.age = age;
    18.         }
    19.  
    20.         //eat方法
    21.         eat(){
    22.             document.write("吃饭...");
    23.         }
    24.     }
    25.  
    26.     //定义Worker类继承Person
    27.     class Worker extends Person{
    28.         constructor(name,age,salary){
    29.             super(name,age);
    30.             this.salary = salary;
    31.         }
    32.  
    33.         show(){
    34.             document.write(this.name + "," + this.age + "," + this.salary + "
      "      );
    35.         }
    36.     }
    37.  
    38.     //使用Worker
    39.     let w = new Worker("张三",23,10000);
    40.     w.show();
    41.     w.eat();
    42. script>
    43. html>

    2.内置对象

    1.Number

    方法名说明
    parseFloat()将传入的字符串浮点数转为浮点数
    parseInt()将传入的字符串整数转为整数

    例：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Numbertitle>
    7. head>
    8. <body>
    9.     
    10. body>
    11. <script>
    12.     //1. parseFloat()  将传入的字符串浮点数转为浮点数
    13.     document.write(Number.parseFloat("3.14") + "
      "      );
    14.  
    15.     //2. parseInt()    将传入的字符串整数转为整数
    16.     document.write(Number.parseInt("100") + "
      "      );
    17.     document.write(Number.parseInt("200abc") + "
      "      ); // 从数字开始转换，直到不是数字为止
    18.     
    19.     
    20.     // 3. isNaN()  判断某个东西是否是  非数字 
    21.     // not a number ： 非数字
    22.     console.log(Number.isNaN(NaN)); // true
    23.     console.log(Number.isNaN(1)); // false
    24.  
    25. script>
    26. html>

    2.Math

    方法名说明
    ceil(x)向上取整
    floor(x)向下取整
    round(x)把数四舍五入为最接近的整数
    random()随机数，返回的是0.0-1.0之间的范围(含头不含尾)
    pow(x,y)幂运算 x的y次方

    例：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Mathtitle>
    7. head>
    8. <body>
    9.     
    10. body>
    11. <script>
    12.     //1. ceil(x) 向上取整
    13.     document.write(Math.ceil(4.4) + "
      "      );    // 5
    14.     
    15.     //2. floor(x) 向下取整
    16.     document.write(Math.floor(4.4) + "
      "      );   // 4
    17.     
    18.     //3. round(x) 把数四舍五入为最接近的整数
    19.     document.write(Math.round(4.1) + "
      "      );   // 4
    20.     document.write(Math.round(4.6) + "
      "      );   // 5
    21.     
    22.     //4. random() 随机数,返回的是0.0-1.0之间范围(含头不含尾)
    23.     document.write(Math.random() + "
      "      ); // 随机数
    24.     
    25.     //5. pow(x,y) 幂运算 x的y次方
    26.     document.write(Math.pow(2,3) + "
      "      ); // 8
    27. script>
    28. html>

    3.Date

    构造方法

    构造方法说明
    Date()根据当前时间创建对象
    Date(value)根据指定毫秒值创建对象
    Date(year,month,[day,hours,minutes,seconds,milliseconds])根据指定字段创建对象(月份是0~11)

    成员方法

    成员方法说明
    getFullYear()获取年份
    getMonth()获取月份
    getDate()获取天数
    getHours()获取小时
    getMinutes()获取分钟
    getSeconds()获取秒数
    getTime()返回据1970年1月1日至今的毫秒数
    toLocaleString()返回本地日期格式的字符串

    例：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Datetitle>
    7. head>
    8. <body>
    9.     
    10. body>
    11. <script>
    12.     //构造方法
    13.     //1. Date()  根据当前时间创建对象
    14.     let d1 = new Date();
    15.     document.write(d1 + "
      "      );
    16.  
    17.     //2. Date(value) 根据指定毫秒值创建对象
    18.     let d2 = new Date(10000);
    19.     document.write(d2 + "
      "      );
    20.  
    21.     //3. Date(year,month,[day,hours,minutes,seconds,milliseconds]) 根据指定字段创建对象(月份是0~11)
    22.     let d3 = new Date(2222,2,2,20,20,20);
    23.     document.write(d3 + "
      "      );
    24.  
    25.     //成员方法
    26.     //1. getFullYear() 获取年份
    27.     document.write(d3.getFullYear() + "
      "      );
    28.  
    29.     //2. getMonth() 获取月份
    30.     document.write(d3.getMonth() + "
      "      );
    31.  
    32.     //3. getDate() 获取天数
    33.     document.write(d3.getDate() + "
      "      );
    34.  
    35.     //4. toLocaleString() 返回本地日期格式的字符串
    36.     document.write(d3.toLocaleString());
    37. script>
    38. html>

    4.String 

    构造方法

    构造方法说明
    String(value)根据指定字符串创建对象
    let s =“字符串”直接赋值

    成员方法

    成员方法说明
    length属性获取字符串长度
    charAt(index)获取指定索引处的字符
    indexOf(value)获取指定字符串出现的索引位置,找不到为-1
    substring(start,end)根据指定索引范围截取字符串(含头不含尾)
    split(value)根据指定规则切割字符串，返回数组
    replace(old,new)使用新字符串替换老字符串

    例：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Stringtitle>
    7. head>
    8. <body>
    9.     
    10. body>
    11. <script>
    12.     //1. 构造方法创建字符串对象
    13.     let s1 = new String("hello");
    14.     document.write(s1 + "
      "      );
    15.  
    16.     //2. 直接赋值
    17.     let s2 = "hello";
    18.     document.write(s2 + "
      "      );
    19.  
    20.     //属性
    21.     //1. length   获取字符串的长度
    22.     document.write(s2.length + "
      "      );
    23.  
    24.     //成员方法
    25.     //1. charAt(index)     获取指定索引处的字符
    26.     document.write(s2.charAt(1) + "
      "      );
    27.  
    28.     //2. indexOf(value)    获取指定字符串出现的索引位置
    29.     document.write(s2.indexOf("l") + "
      "      );
    30.  
    31.     //3. substring(start,end)   根据指定索引范围截取字符串(含头不含尾)
    32.     document.write(s2.substring(2,4) + "
      "      );
    33.  
    34.     //4. split(value)   根据指定规则切割字符串，返回数组
    35.     let s3 = "张三,23,男";
    36.     let arr = s3.split(",");
    37.     for(let i = 0; i < arr.length; i++) {
    38.         document.write(arr[i] + "
      "      );
    39.     }
    40.  
    41.     //5. replace(old,new)   使用新字符串替换老字符串
    42.     let s4 = "你会不会跳伞啊？让我落地成盒。你妹的。";
    43.     let s5 = s4.replace("你妹的","***");
    44.     document.write(s5 + "
      "      );
    45. script>
    46. html>

    5.RegExp 

    正则表达式：是一种对字符串进行匹配的规则

    常用在登陆、注册的表单校验

    构造方法

    构造方法说明
    RegExp(规则)根据指定规则创建对象
    let reg =/^规则$/直接赋值

    成员方法

    成员方法说明
    test(匹配的字符串)根据指定规则验证字符串是否符合

    规则

    表达式说明
    [a]只能是a
    [abc]只能是abc中的某一个
    [1]只能是1
    [123]只能是123中的某一个
    [a-z]可以是a到z中的某一个
    [A-Z]可以是A到Z中的某一个
    [0-9]可以是0到9中的某一个
    {5}只能出现5次
    {4,6}只能出现4到6次

    [] 多选一

    {}某个规则重复出现的次数

    例：

    需求一：验证手机号

            第一位1，第二位358，第三到第十一必须是数字。总长度11位

    需求二：验证用户名   

            字母，数字，下划线组成。总长度4~16位

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>RegExptitle>
    7. head>
    8. <body>
    9.     
    10. body>
    11. <script>
    12.     //1.验证手机号
    13.     //规则：第一位1，第二位358，第三到十一位必须是数字。总长度11
    14.     let reg1 = /^[1][358][0-9]{9}$/;
    15.     document.write(reg1.test("18688888888") + "
      "      );
    16.  
    17.     //2.验证用户名
    18.     //规则：字母、数字、下划线组成。总长度4~16
    19.     let reg2 = /^[a-zA-Z_0-9]{4,16}$/;
    20.     document.write(reg2.test("zhang_san123"));
    21. script>
    22. html>

    其他正则表达式：

    6.Array 

    成员方法说明
    push(元素)添加元素到数组的末尾
    pop()删除数组末尾的元素
    shift()删除数组最前面的元素
    includes(元素)判断数组是否包含给定的值
    reverse()反转数组中的元素
    sort()对数组元素进行排序

    例：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Arraytitle>
    7. head>
    8. <body>
    9.     
    10. body>
    11. <script>
    12.     let arr = [1,2,3,4,5];
    13.  
    14.     //1. push(元素)    添加元素到数组的末尾
    15.     arr.push(6);
    16.     document.write(arr + "
      "      );
    17.  
    18.     //2. pop()         删除数组末尾的元素
    19.     arr.pop();
    20.     document.write(arr + "
      "      );
    21.  
    22.     //3. shift()       删除数组最前面的元素
    23.     arr.shift();
    24.     document.write(arr + "
      "      );
    25.  
    26.     //4. includes(元素)  判断数组中是否包含指定的元素
    27.     document.write(arr.includes(2) + "
      "      );
    28.  
    29.     //5. reverse()      反转数组元素
    30.     arr.reverse();
    31.     document.write(arr + "
      "      );
    32.  
    33.     //6. sort()         对数组元素排序
    34.     arr.sort();
    35.     document.write(arr + "
      "      );
    36. script>
    37. html>

    7.Set

    JavaScript 中的 Set 集合，元素唯一，存取顺序一致

    构造方法

    构造方法说明
    Set()创建Set集合对象

    成员方法

    成员方法说明
    add(元素)向集合中添加元素
    size属性获取集合长度
    keys()获取迭代器对象
    delete(元素)删除指定元素

    例：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Settitle>
    7. head>
    8. <body>
    9.     
    10. body>
    11. <script>
    12.     // Set()   创建集合对象
    13.     let s = new Set();
    14.  
    15.     // add(元素)   添加元素
    16.     s.add("a");
    17.     s.add("b");
    18.     s.add("c");
    19.     s.add("c");
    20.  
    21.     // size属性    获取集合的长度
    22.     document.write(s.size + "
      "      );    // 3
    23.  
    24.     // keys()      获取迭代器对象
    25.     let st = s.keys();
    26.     for(let i = 0; i < s.size; i++){
    27.         document.write(st.next().value + "
      "      );
    28.     }
    29.  
    30.     // delete(元素) 删除指定元素
    31.     document.write(s.delete("c") + "
      "      );
    32.     let st2 = s.keys();
    33.     for(let i = 0; i < s.size; i++){
    34.         document.write(st2.next().value + "
      "      );
    35.     }
    36. script>
    37. html>

    8.Map 

    JavaScript 中的 Map 集合，key 唯一，存取顺序一致

    构造方法

    构造方法说明
    Map()创建Map集合对象

    成员方法 

    成员方法说明
    set(key,value)向集合中添加元素
    size属性获取集合长度
    get(key)根据key获取value
    entries()获取迭代器对象
    delete(key)根据key删除键值对

    例：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Maptitle>
    7. head>
    8. <body>
    9.     
    10. body>
    11. <script>
    12.     // Map()   创建Map集合对象
    13.     let map = new Map();
    14.  
    15.     // set(key,value)  添加元素
    16.     map.set("张三",23);
    17.     map.set("李四",24);
    18.     map.set("李四",25);
    19.  
    20.     // size属性     获取集合的长度
    21.     document.write(map.size + "
      "      );
    22.  
    23.     // get(key)     根据key获取value
    24.     document.write(map.get("李四") + "
      "      );
    25.  
    26.     // entries()    获取迭代器对象
    27.     let et = map.entries();
    28.     for(let i = 0; i < map.size; i++){
    29.         document.write(et.next().value + "
      "      );
    30.     }
    31.  
    32.     // delete(key)  根据key删除键值对
    33.     document.write(map.delete("李四") + "
      "      );
    34.     let et2 = map.entries();
    35.     for(let i = 0; i < map.size; i++){
    36.         document.write(et2.next().value + "
      "      );
    37.     }
    38. script>
    39. html>

    9.Json 

    JSON(JavaScript Object Notation)：是一种轻量级的数据交换格式

    • 它是基于 ECMAScript 规范的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据
    • 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于计算机解析和 生成，并有效的提升网络传输效率
    成员方法说明
    stringify(对象)将指定对象转换为json格式字符串
    parse(字符串)将指定json格式字符串解析成对象

    例：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>JSONtitle>
    7. head>
    8. <body>
    9.     
    10. body>
    11. <script>
    12.     //定义天气对象
    13.     let weather = {
    14.         city : "北京",
    15.         date : "2088-08-08",
    16.         wendu : "10° ~ 23°",
    17.         shidu : "22%"
    18.     };
    19.  
    20.     //1.将天气对象转换为JSON格式的字符串
    21.     let str = JSON.stringify(weather);
    22.     document.write(str + "
      "      );
    23.  
    24.     //2.将JSON格式字符串解析成JS对象
    25.     let weather2 = JSON.parse(str);
    26.     document.write("城市：" + weather2.city + "
      "      );
    27.     document.write("日期：" + weather2.date + "
      "      );
    28.     document.write("温度：" + weather2.wendu + "
      "      );
    29.     document.write("湿度：" + weather2.shidu + "
      "      );
    30. script>
    31. html>

    10.案例

    表单校验

    步骤：

    1.为注册表单绑定提交事件(true提交、false不提交)。

    2.获取用户名和密码。

    3.判断用户名是否满足条件(4到16位纯字母)。

    4.判断密码是否满足条件(6位纯数字)。

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>表单校验title>
    7.     <link rel="stylesheet" href="css/style.css">link>
    8. head>
    9. <body>
    10.     <div class="login-form-wrap">
    11.         <h1>CV程序员h1>
    12.         <form class="login-form" action="#" id="regist" method="get" autocomplete="off">
    13.             <label>
    14.                 <input type="text" id="username" name="username" placeholder="Username..." value="">
    15.             label>
    16.             <label>
    17.                 <input type="password" id="password" name="password" placeholder="Password..." value="">
    18.             label>
    19.             <input type="submit" value="注册">
    20.         form>
    21.     div>
    22. body>
    23. <script>
    24.         //1.为表单绑定提交事件
    25.         document.getElementById("regist").onsubmit = function() {
    26.         //2.获取填写的用户名和密码
    27.         let username = document.getElementById("username").value;
    28.         let password = document.getElementById("password").value;
    29.  
    30.         //3.判断用户名是否符合规则  4~16位纯字母
    31.         let reg1 = /^[a-zA-Z]{4,16}$/;
    32.         if(!reg1.test(username)) {
    33.             alert("用户名不符合规则，请输入4到16位的纯字母！");
    34.             return false;
    35.         }
    36.  
    37.         //4.判断密码是否符合规则  6位纯数字
    38.         let reg2 = /^[\d]{6}$/;
    39.         if(!reg2.test(password)) {
    40.             alert("密码不符合规则，请输入6位纯数字的密码！");
    41.             return false;
    42.         }
    43.  
    44.         //5.如果所有条件都不满足，则提交表单
    45.         return true;
    46.     }  
    47. script>
    48. html>

    3.JAvaScript  BOM

    BOM(Browser Object Model)：浏览器对象模型。

    将浏览器的各个组成部分封装成不同的对象，方便我们进行操作。

    1.Windows窗口对象

    定时器

    唯一标识 setTimeout(功能，毫秒值)：设置一次性定时器 （延时定时器）

            第一个参数，只需要传递函数名即可，不需要调用

    clearTimeout(标识)：取消一次性定时器

    唯一标识 setInterval(功能，毫秒值)：设置循环定时器 （间隔定时器）

            第一个参数，只需要传递函数名即可，不需要调用

    clearInterval(标识)：取消循环定时器

    加载事件

    window.onload：在页面加载完毕后触发此事件的功能

    例：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>window窗口对象title>
    7.     <script>
    8.         //一、定时器
    9.         function fun(){
    10.             alert("该起床了！");
    11.         }
    12.     
    13.         //设置一次性定时器
    14.         //let d1 = setTimeout("fun()",3000);
    15.         //取消一次性定时器
    16.         //clearTimeout(d1);
    17.     
    18.         //设置循环定时器
    19.         //let d2 = setInterval("fun()",3000);
    20.         //取消循环定时器
    21.         //clearInterval(d2);
    22.     
    23.         //加载事件
    24.         window.onload = function(){
    25.             let div = document.getElementById("div");
    26.             alert(div);
    27.         }
    28.     script>
    29. head>
    30. <body>
    31.     <div id="div">dddddiv>
    32. body>
    34. html>

    2.Location 地址栏对象 

    href 属性

    就是浏览器的地址栏。通过设置href来改变地址栏地址，进行界面的跳转。

    例：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>location地址栏对象title>
    7.     <style>
    8.         p{
    9.             text-align: center;
    10.         }
    11.         span{
    12.             color: red;
    13.         }
    14.     style>
    15. head>
    16. <body>
    17.     <p>
    18.         注册成功！<span id="time">5span>秒之后自动跳转到首页...
    19.     p>
    20. body>
    21. <script>
    22.     //1.定义方法。改变秒数，跳转页面
    23.     let num = 5;
    24.     function showTime() {
    25.         num--;
    26.  
    27.         if(num <= 0) {
    28.             //跳转首页
    29.             location.href = "index.html";
    30.         }
    31.  
    32.         let span = document.getElementById("time");
    33.         span.innerHTML = num;
    34.     }
    35.  
    36.     //2.设置循环定时器，每1秒钟执行showTime方法
    37.     setInterval("showTime()",1000);
    38. script>
    39. html>

    4.JAvaScript  封装（思想）

    封装：将复杂的操作进行封装隐藏，对外提供更加简单的操作

    获取元素的方法

    document.getElementById(id值)：根据 id 值获取元素

    document.getElementsByName(name值)：根据 name 属性值获取元素们

    document.getElementsByTagName(标签名)：根据标签名获取元素们

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>封装title>
    7. head>
    8. <body>
    9.     <div id="div1">div1div>
    10.     <div name="div2">div2div>
    11. body>
    12. <script src="my.js">script>
    13. <script>
    14.     let div1 = getById("div1");
    15.     alert(div1);
    16.  
    17.     // let div1 = document.getElementById("div1");
    18.     // alert(div1);
    19.  
    20.     // let divs = document.getElementsByName("div2");
    21.     // alert(divs.length);
    22.  
    23.     // let divs2 = document.getElementsByTagName("div");
    24.     // alert(divs2.length);
    25. script>
    26. html>

    my.js文件封装：

    1. function getById(id){
    2.     return document.getElementById(id);
    3. }
    4.  
    5. function getByName(name) {
    6.     return document.getElementsByName(name);
    7. }
    8.  
    9. function getByTag(tag) {
    10.     return document.getElementsByTagName(tag);
    11. }

     ​以上操作都是基于原生 JavaScript 的，比较繁琐

    JQuery 是一个前端框架技术，针对 JavaScript 进行了一系列的封装，使得操作变得非常简单

  • 相关阅读:
    Linux: 命令：echo
    从0开始python学习-29.selenium 通过cookie信息进行登录
    HJ3 明明的随机数
    基于springboot学生管理系统设计与实现
    springBoot--web--http缓存机制测试
    .NET周报 【4月第3期 2023-04-15】
    ddt源码分析
    SegGPT: Segmenting Everything In Context论文笔记
    zookeeper选举机制详解
    兰顿蚂蚁：从无序到有序的伟大征程
  • 原文地址：https://blog.csdn.net/weixin_61611746/article/details/132179529