• JavaScript学习笔记

    JavaScript输出

    1.JavaScript的页面输出：

    document.write("Hello,World!");

    2.JavaScript的控制台输出：

    1.  console.log("输出一条日志"); //最常用
    2.  
    3.  console.info("输出一条信息");
    4.  
    5.  console.warn("输出一条警告");
    6.  
    7.  console.error("输出一条错误");

    3.JavaScript的弹出窗口输出：

     alert("Hello,World!");

    强制类型转换

    1.转换为String类型：

    1.  //方式一：调用被转换数据类型的toString()方法，该方法不会影响到原变量，它会将转换的结果返回，null和undefined这两个值没有toString()方法
    2.       var a = 123;
    3.       a = a.toString();
    4.       console.log(a);
    5.       console.log("toString()方法", typeof a);
    6.  
    7.  //方式二：调用String()函数，并将被转换的数据作为参数传递给函数
    8.       var a = 123;
    9.       a = String(a);
    10.       console.log(a);
    11.       console.log("String()函数", typeof a);
    12.  
    13.  //方式三：为任意的数据类型 +""
    14.       var a = 123;
    15.       a = a + "";
    16.       console.log(a);
    17.       console.log("", typeof a);

    2.转换为Number类型：

    1.  //方式一：使用Number()函数
    2.       var a = "123";
    3.       a = Number(a);
    4.       console.log(a);
    5.       console.log("Number()函数", typeof a);
    6.  
    7.   //方式二：parseInt() 把一个字符串转换为一个整数
    8.       var a = "123";
    9.       a = parseInt(a);
    10.       console.log(a);
    11.       console.log("parseInt()", typeof a);
    12.  
    13.   //方式三：parseFloat() 把一个字符串转换为一个浮点数
    14.       var a = "123.456";
    15.       a = parseFloat(a);
    16.       console.log(a);
    17.       console.log("parseFloat()", typeof a);

    3.转换为Boolean类型：

    1.   //转换为Boolean类型,只能使用Boolean()函数
    2.       var a = "hahaha";
    3.       a = Boolean(a);
    4.       console.log(a);
    5.       console.log("Boolean()函数",typeof a);

    运算符

    运算符也叫操作符，通过运算符可以对一个或多个值进行运算并获取运算结果

    1、算术运算符，用于表达式计算 

    运算符        描述                   例子   
        +             加法                   x=y+2   
         -             减法                   x=y-2   
         *             乘法                   x=y*2    
         /              除法                  x=y/2  
        %             取模（求余数）x=y%2  
       ++             自增                  x=++y

    2、关系运算符 ，逻辑语句中使用，以测定变量或值是否相等

    运算符描述比较返回值
    >大于x>8false
    <小于x<8true
    >=大于或等于x>=8false
    <=小于或等于x<=8true

    3.赋值运算符，用于给 JavaScript 变量赋值

    运算符例子等同于运算结果
    =x=yx=5
    +=x+=yx=x+yx=15
    -=x-=yx=x-yx=5
    *=x*=yx=x*yx=50
    /=x/=yx=x/yx=2
    %=x%=yx=x%yx=0

    4.逻辑运算符，用于测定变量或值之间的逻辑。

    运算符描述例子
    &&   与and(x < 10 && y > 1) 为 true
    ||      或or(x==5 || y==5) 为 false
    !       非not!(x==y) 为 true

     5.比较运算符，用来比较两个值是否相等，如果相等会返回true，否则返回false

    使用 == 来做相等运算
    当使用==来比较两个值时，如果值的类型不同，则会自动进行类型转换，将其转换为相同的类型，然后在比较
    使用 != 来做不相等运算
    不相等用来判断两个值是否不相等，如果不相等返回true，否则返回false，不相等也会对变量进行自动的类型转换，如果转换后相等它也会返回false
    使用 === 来做全等运算
    用来判断两个值是否全等，它和相等类似，不同的是它不会做自动的类型转换，如果两个值的类型不同，直接返回false
    使用 !== 来做不全等运算
    用来判断两个值是否不全等，它和不等类似，不同的是它不会做自动的类型转换，如果两个值的类型不同，直接返回true

     6.条件运算符,对变量进行赋值的条件运算符。

    语法：variablename=(condition)?value1:value2;

    举例：result=(age<18)?"年龄太小":"年龄合适";

    执行流程：如果condition为true，则执行语句1，并返回执行结果，如果为false，则执行语句2，并返回执行结果。

     7.逗号运算符,可以在一条语句中执行多次操作。

    比如：var num1=1, num2=2, num3=3;

    条件语句

    1、if…else语句是一种最基本的控制语句，它让JavaScript可以有条件的执行语句

    1. var age = 18;
    2. if (age < 18) {
    3.     console.log("小于18岁了");
    4. } else if (age == 18) {
    5.     console.log("已经18岁了");
    6. } else {
    7.     console.log("大于18岁了")
    8. }

    2.switch…case是另一种流程控制语句。更适用于多条分支使用同一条语句的情况。

    1. var today = 1;
    2. switch (today) {
    3.     case 1:
    4.         console.log("星期一");
    5.         break;
    6.     case 2:
    7.         console.log("星期二");
    8.         break;
    9.     case 3:
    10.         console.log("星期三");
    11.         break;
    12.     case 4:
    13.         console.log("星期四");
    14.         break;
    15.     case 5:
    16.         console.log("星期五");
    17.         break;
    18.     case 6:
    19.         console.log("星期六");
    20.         break;
    21.     case 7:
    22.         console.log("星期日");
    23.         break;
    24.     default:
    25.         console.log("输入错误");
    26. }

    循环语句

    1.while语句是一个最基本的循环语句，while语句也被称为while循环

    1. var i = 1;
    2. while (i <= 10) {
    3.     console.log(i);
    4.     i++;
    5. }

    2.do…while和while非常类似，它会在循环的尾部而不是顶部检查表达式的值

    1.  var i = 1;
    2.       do {
    3.         console.log(i);
    4.         i++;
    5.       } while (i <= 10);

    3.for将计数器的三个关键操作初始化、检测和更新明确为了语法的一部分。

    1. for (var i = 1; i <= 10; i++) {
    2.     console.log(i);
    3. }

    4.跳转控制

    • break：结束最近的一次循环，可以在循环和switch语句中使用。
    • continue：结束本次循环，执行下一次循环，只能在循环中使用。
      1. outer: for (var i = 0; i < 10; i++) {
      2.     for (var j = 0; j < 10; j++) {
      3.         if (j == 5) {
      4.             break outer;
      5.         }
      6.         console.log(j);  //0 1 2 3 4
      7.     }
      8. }

    对象基础 

    1.创建对象

    1. //方法一：
    2. var person = new Object();
    3. person.name = "孙悟空";
    4. person.age = 18;
    5. console.log(person); //{name: '孙悟空', age: 18}
    6.  
    7. //方法二：
    8. var person = {
    9.     name: "孙悟空",
    10.     age: 18
    11. };
    12. console.log(person); //{name: '孙悟空', age: 18}

    2.访问属性

    1.  const obj = {
    2.         name: "我是属性名子"
    3.       };
    4. //第一种方式：使用 . 来访问
    5. const girlNamed = obj.name;  //对象.属性名
    6.  
    7. //第二种方式：使用 [] 来访问
    8.  const girlName = obj["name"];  //对象[‘属性名’]

    3.删除属性，使用delete关键字

    1. var person = new Object();
    2. person.name = "孙悟空";
    3. person.age = 18;
    4. console.log(person); //{name: '孙悟空', age: 18}
    5. delete person.name   //delete 对象.属性名
    6. console.log(person); //{age: 18}

    4.遍历对象,枚举遍历对象中的属性，可以使用for … in语句循环

    1. var person = {
    2.     name: "zhangsan",
    3.     age: 18
    4. }
    5. for (var personKey in person) {    //for (var 变量 in 对象)
    6.     var personVal = person[personKey];
    7.     console.log(personKey + ":" + personVal);  //name:zhangsan  age:18
    8. }

    函数

    1.函数创建

    1. //方法一：使用函数对象 来创建一个函数
    2. var fun = new Function("console.log('这是我的第一个函数');");
    3.  
    4. //方法二：使用函数声明 来创建一个函数
    5. function fun(){
    6.     console.log("这是我的第二个函数");
    7. }
    8.  
    9. //方法三：使用函数表达式 来创建一个函数
    10. var fun  = function() {
    11.     console.log("这是我的第三个函数");
    12. }
    13.

    2.函数调用

    1. //对于无参函数调用
    2. var fun = function () {
    3.     console.log("哈哈，我执行啦！");
    4. }
    5. fun(); // 函数调用 
    6.  
    7. //对于有参函数调用
    8. var sum = function (num1, num2) {
    9.     var result = num1 + num2;
    10.     console.log("num1 + num2 = " + result);
    11. }
    12. sum(10, 20);// 函数调用
    13.

    3.函数返回值,使用 return 来设置函数的返回值

    1. function sum(num1, num2) {
    2.     return num1 + num2;
    3. }
    4.  
    5. var result = sum(10, 20);

    4.嵌套函数,在函数中声明的函数就是嵌套函数，只能在当前函数中可以访问，在当前函数外无法访问。

    1. function fu() {
    2.     function zi() {
    3.         console.log("我是儿子")
    4.     }
    5.  
    6.     zi();
    7. }
    8.  
    9. fu();

    5.对象中的函数

    1. var person = {
    2.     name: "zhangsan",
    3.     age: 18,
    4.     sayHello: function () {
    5.         console.log(name + " hello")
    6.     }
    7. }
    8. person.sayHello();

    6.this对象

    • 以函数的形式调用时，this永远都是window
    • 以方法的形式调用时，this就是调用方法的那个对象
      1. //创建一个全局变量name
      2. var name = "全局变量name";
      3.  
      4. //创建一个函数
      5. function fun() {
      6.     console.log(this.name);
      7. }
      8.  
      9. //创建一个对象
      10. var obj = {
      11.     name: "孙悟空",
      12.     sayName: fun
      13. };
      14.  
      15. //我们希望调用obj.sayName()时可以输出obj的名字而不是全局变量name的名字
      16. obj.sayName();

    对象进阶 

    1、用工厂方法创建对象

    1. function createPerson(name, age) {
    2.     var obj = new Object(); // 创建新的对象
    3.     obj.name = name;   // 设置对象属性
    4.     obj.age = age;    // 设置对象属性
    5.     obj.sayName = function () {    // 设置对象方法
    6.         console.log(this.name);
    7.     };
    8.     return obj;  //返回新的对象
    9. }
    10. var person1 = createPerson("沙和尚", 20);
    11. console.log(person1);  //{name: '沙和尚', age: 20, sayName: ƒ}
    12.  
    13. for (var i = 1; i <= 1000; i++) {  //循环出来1000个对象
    14.     var person = createPerson("person" + i, 18);
    15.     console.log(person);
    16. }

    2、用构造函数创建对象,构造函数就是一个普通的函数，创建方式和普通函数没有区别，不同的是构造函数习惯上首字母大写，构造函数和普通函数的还有一个区别就是调用方式的不同，普通函数是直接调用，而构造函数需要使用new关键字来调用。

    1. function Person(name, age) {
    2.     this.name = name;    // 设置对象的属性
    3.     this.age = age;     // 设置对象的属性
    4.     this.sayName = function () {    // 设置对象的方法
    5.         console.log(this.name);
    6.     };
    7. }
    8. var person1 = new Person("孙悟空", 18);
    9. console.log(person1); //Person {name: '孙悟空', age: 18, sayName: ƒ}

    3.原型对象（prototype）构造函数来创建对象

    1.  function Person(name, age) {
    2.         this.name = name;   // 设置对象的属性
    3.         this.age = age;   // 设置对象的属性
    4.       }
    5.  
    6.       Person.prototype.sayName = function() { // 在Person类的原型对象中添加方法
    7.         console.log(this.name);
    8.       };
    9.  
    10.       var person1 = new Person("孙悟空", 18);
    11.       person1.sayName(); //孙悟空

    数组对象

    1、使用对象创建

    1. //同类型有序数组创建
    2.  var arr = new Array();
    3.       arr[0] = 1;
    4.       arr[1] = 2;
    5.       arr[2] = 3;
    6.       arr[3] = 4;
    7.       arr[4] = 5;
    8.       arr[5] = 6;
    9.       arr[6] = 7;
    10.       arr[7] = 8;
    11.       arr[8] = 9;
    12.       console.log(arr); //[1, 2, 3, 4, 5, 6, 7, 8, 9]
    13. //不同类型有序数组创建
    14.  var arr = new Array();
    15.       arr[0] = 1;
    16.       arr[1] = "2";
    17.       arr[2] = 3;
    18.       arr[3] = "4";
    19.       arr[4] = 5;
    20.       arr[5] = "6";
    21.       arr[6] = 7;
    22.       arr[7] = "8";
    23.       arr[8] = 9;
    24.       console.log(arr); //[1, '2', 3, '4', 5, '6', 7, '8', 9]

    2、使用字面量创建

    1. //同类型有序数组创建
    2. var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
    3. //不同类型有序数组创建
    4. var arr = [1, "2", 3, "4", 5, "6", 7, "8", 9];

    3、遍历数组

    1. for (var i = 0; i < arr.length; i++) {
    2.     console.log(arr[i]);
    3. }

    4、数组方法

    1. //push()方法演示：该方法可以向数组的末尾添加一个或多个元素，并返回数组的新的长度
    2. var arr = ["孙悟空", "猪八戒", "沙和尚"];
    3. var result = arr.push("唐僧", "蜘蛛精", "白骨精", "玉兔精");
    4. console.log(arr); //['孙悟空', '猪八戒', '沙和尚', '唐僧', '蜘蛛精', '白骨精', '玉兔精']
    5. console.log(result); //7
    6.  
    7. //pop()方法演示：该方法可以删除数组的最后一个元素，并将被删除的元素作为返回值返回
    8. var arr = ["孙悟空", "猪八戒", "沙和尚"];
    9. var result = arr.pop();
    10. console.log(arr); //['孙悟空', '猪八戒']
    11. console.log(result); //沙和尚
    12.  
    13. //unshift()方法演示：该方法向数组开头添加一个或多个元素，并返回新的数组长度
    14. var arr = ["孙悟空", "猪八戒", "沙和尚"];
    15. var result = arr.unshift("牛魔王", "二郎神");
    16. console.log(arr); //['牛魔王', '二郎神', '孙悟空', '猪八戒', '沙和尚']
    17. console.log(result); //5
    18.  
    19. //shift()方法演示：该方法可以删除数组的第一个元素，并将被删除的元素作为返回值返回
    20. var arr = ["孙悟空", "猪八戒", "沙和尚"];
    21. var result = arr.shift();
    22. console.log(arr); //['猪八戒', '沙和尚']
    23. console.log(result); //孙悟空
    24.  
    25. //forEach()方法演示：该方法可以用来遍历数组
    26. var arr = ["孙悟空", "猪八戒", "沙和尚"];
    27. arr.forEach(function (value, index, obj) {
    28.     console.log(value + " #### " + index + " #### " + obj); 
    29. //孙悟空 #### 0 #### 孙悟空,猪八戒,沙和尚
    30. //猪八戒 #### 1 #### 孙悟空,猪八戒,沙和尚
    31. //沙和尚 #### 2 #### 孙悟空,猪八戒,沙和尚
    32. });
    33.  
    34. //slice()方法演示：该方法可以用来从数组提取指定元素，该方法不会改变元素数组，而是将截取到的元素封装到一个新数组中返回
    35. var arr = ["孙悟空", "猪八戒", "沙和尚", "唐僧", "白骨精"];
    36. var result = arr.slice(1, 4);
    37. console.log(result);//['猪八戒', '沙和尚', '唐僧']
    38. result = arr.slice(3);
    39. console.log(result); //['唐僧', '白骨精']
    40. result = arr.slice(1, -2);
    41. console.log(result); //['猪八戒', '沙和尚']
    42.  
    43. //splice()方法演示：该方法可以用于删除数组中的指定元素，该方法会影响到原数组，会将指定元素从原数组中删除，并将被删除的元素作为返回值返回
    44. var arr = ["孙悟空", "猪八戒", "沙和尚", "唐僧", "白骨精"];
    45. var result = arr.splice(3, 2); //splice(开始位置, 删除的元素数量)
    46. console.log(arr); //['孙悟空', '猪八戒', '沙和尚']删除后的数组
    47. console.log(result); //['唐僧', '白骨精'] 删除的元素
    48.  
    49. //concat()方法演示：该方法可以连接两个或多个数组，并将新的数组返回，该方法不会对原数组产生影响
    50. var arr = ["孙悟空", "猪八戒", "沙和尚"];
    51. var arr2 = ["白骨精", "玉兔精", "蜘蛛精"];
    52. var arr3 = ["二郎神", "太上老君", "玉皇大帝"];
    53. var result = arr.concat(arr2, arr3, "牛魔王", "铁扇公主");
    54. console.log(result);
    55. //['孙悟空', '猪八戒', '沙和尚', '白骨精', '玉兔精', '蜘蛛精', '二郎神', '太上老君', '玉皇大帝', '牛魔王', '铁扇公主']
    56.  
    57. //join()方法演示：该方法可以将数组转换为一个字符串
    58. var arr = ["孙悟空", "猪八戒", "沙和尚"];
    59. var result = arr.join("@-@");
    60. console.log(result);  //孙悟空@-@猪八戒@-@沙和尚
    61.  
    62. //reverse()方法演示：该方法用来反转数组
    63. var arr = ["孙悟空", "猪八戒", "沙和尚"];
    64. arr.reverse();
    65. console.log(arr);//['沙和尚', '猪八戒', '孙悟空']
    66.  
    67. //sort()方法演示：该方法可以用来对数组中的元素进行排序
    68. var arr = ["b", "c", "a"];
    69. arr.sort();
    70. console.log(arr); // ['a', 'b', 'c']

    函数对象 

    1.call()方法可以将实参在对象之后依次传递

    1. function fun(a, b) {
    2.     console.log("a = " + a);
    3.     console.log("b = " + b);
    4.     console.log("fun = " + this);
    5. }
    6.  
    7. var obj = {
    8.     name: "obj",
    9.     sayName: function () {
    10.         console.log(this.name);
    11.     }
    12. };
    13.  
    14. fun(2, 3);
    15. console.log("===============");
    16. fun.call(obj, 2, 3);

    2.apply()方法需要将实参封装到一个数组中统一传递

    1. function fun(a, b) {
    2.     console.log("a = " + a);
    3.     console.log("b = " + b);
    4.     console.log("fun = " + this);
    5. }
    6.  
    7. var obj = {
    8.     name: "obj",
    9.     sayName: function () {
    10.         console.log(this.name);
    11.     }
    12. };
    13.  
    14. fun(2, 3);
    15. console.log("===============");
    16. fun.apply(obj, [2, 3]);

    Date对象 

    1. var date = new Date();
    2. console.log(date);
    3.  
    4. console.log(date.getFullYear());//获取当前日期对象的年份(四位数字年份)
    5. console.log(date.getMonth());//获取当前日期对象的月份(0 ~ 11)
    6. console.log(date.getDate());//获取当前日期对象的日数(1 ~ 31)
    7. console.log(date.getHours());//获取当前日期对象的小时(0 ~ 23)
    8. console.log(date.getMinutes());//获取当前日期对象的分钟(0 ~ 59)
    9. console.log(date.getSeconds());//获取当前日期对象的秒钟(0 ~ 59)
    10. console.log(date.getMilliseconds());//获取当前日期对象的毫秒(0 ~ 999)

    Math对象

    1. /*固定值*/
    2. console.log("PI = " + Math.PI);
    3. console.log("E  = " + Math.E);
    4. console.log("===============");
    5. /*正数*/
    6. console.log(Math.abs(1));        //可以用来计算一个数的绝对值
    7. console.log(Math.ceil(1.1));     //可以对一个数进行向上取整，小数位只有有值就自动进1
    8. console.log(Math.floor(1.99));   //可以对一个数进行向下取整，小数部分会被舍掉
    9. console.log(Math.round(1.4));    //可以对一个数进行四舍五入取整
    10. console.log("===============");
    11. /*负数*/
    12. console.log(Math.abs(-1));       //可以用来计算一个数的绝对值
    13. console.log(Math.ceil(-1.1));    //可以对一个数进行向上取整，小数部分会被舍掉
    14. console.log(Math.floor(-1.99));  //可以对一个数进行向下取整，小数位只有有值就自动进1
    15. console.log(Math.round(-1.4));   //可以对一个数进行四舍五入取整
    16. console.log("===============");
    17. /*随机数*/
    18. //Math.random()：可以用来生成一个0-1之间的随机数
    19. //生成一个0-x之间的随机数：Math.round(Math.random()*x)
    20. //生成一个x-y之间的随机数：Math.round(Math.random()*(y-x)+x)
    21. console.log(Math.round(Math.random() * 10));            //生成一个0-10之间的随机数
    22. console.log(Math.round(Math.random() * (10 - 1) + 1));  //生成一个1-10之间的随机数
    23. console.log("===============");
    24. /*数学运算*/
    25. console.log(Math.pow(12, 3));   //Math.pow(x,y)：返回x的y次幂
    26. console.log(Math.sqrt(4));      //Math.sqrt(x) ：返回x的平方根

    字符串方法

    1.charAt()方法演示：该方法可以根据索引获取指定位置的字符

    1. var str = "Hello,World!";
    2. console.log(str.charAt(1)); //e

    2.charCodeAt()方法演示：该方法获取指定位置字符的字符编码（Unicode编码）

    1. var str = "Hello,World!";
    2. console.log(str.charCodeAt(1)); //101

    3.indexof()方法：该方法可以检索一个字符串中是否含有指定内容,前往后找

    1.   var str = "Hello,World!";
    2.   console.log(str.indexOf("o")); //4
    3.   console.log(str.indexOf("o", 5));  //4 7

    4.lastIndexOf()方法:可以检索一个字符串中是否含有指定内容,后往前找

    1. var str = "Hello,World!";
    2. console.log(str.lastIndexOf("o")); //7
    3. console.log(str.lastIndexOf("o", 5)); //7  4

    5.slice()方法：可以从字符串中截取指定的内容，不会影响原字符串，将截取到内容返回,可以接受负值作为参数

    1. //slice(开始位置的索引,结束位置的索引)
    2.  var str = "Hello,World!";
    3.  var result = str.slice(1, 4);
    4.  console.log(result);  //ell
    5.  result = str.slice(1, -1);
    6.  console.log(result); //ello,World

    6.substring()方法演示：可以用来截取一个字符串,不能接受负值作为参数

    1. //substring(开始截取位置的索引,结束位置的索引)
    2. var str = "Hello,World!";
    3. var result = str.substring(1, 4);
    4. console.log(result); //ell

    7.substr()方法演示：该方法用来截取字符串

    1. //substr(截取开始位置的索引,截取的长度)
    2. var str = "Hello,World!";
    3. var result = str.substr(6, 6);
    4. console.log(result); //World!

    8.split()方法演示：该方法可以将一个字符串拆分为一个数组，需要一个字符串作为参数，将会根据该字符串去拆分数组

    1. var str = "Hello,World!";
    2. console.log(str);//Hello,World!
    3. var result = str.split(",");
    4. console.log(result); //['Hello', 'World!']

    9.toUpperCase()方法演示：将一个字符串转换为大写并返回

    1. var str = "Hello,World!";
    2. var result = str.toUpperCase();
    3. console.log(result);//HELLO,WORLD!

    10.toLowerCase()方法演示：将一个字符串转换为小写并返回

    1. var str = "Hello,World!";
    2. var result = str.toLowerCase();
    3. console.log(result); //hello,world!

     RegExp对象

    1.使用对象创建

    var 变量名 = new RegExp("正则表达式","匹配模式");

    匹配模式：

    • i：忽略大小写
    • g：全局匹配模式
    • ig：忽略大小写且全局匹配模式
    1. // 这个正则表达式可以来检查一个字符串中是否含有a
    2. var reg = new RegExp("ab", "i");
    3. var str = "Abc";
    4. var result = reg.test(str);
    5. console.log(result); //true

     2.使用字面量创建

    var 变量名 = /正则表达式/匹配模式;

    匹配模式：

    • i：忽略大小写
    • g：全局匹配模式
    • m：执行多行匹配
    1. // 这个正则表达式可以来检查一个字符串中是否含有a
    2. var reg = /a/i;
    3. var str = "Abc";
    4. var result = reg.test(str);
    5. console.log(result); //true

     3.创建一个正则表达式，检查一个字符串中是否有a或b或c

    1. // 这个正则表达式可以来检查一个字符串中是否含有a或b或c
    2. var reg = /a|b|c/;  // | 表示或者的意思
    3. var str = "Abc";
    4. var result = reg.test(str);
    5. console.log(result); //true

    4.创建一个正则表达式，检查一个字符串中是否有字母

    • [a-z]：任意小写字母           [^a-z]：除了任意小写字母
    • [A-Z]：任意大写字母          [^A-Z]：除了任意大写字母
    • [A-z]：任意字母                  [^A-z]：除了任意字母
    • [0-9]：任意数字                  [^0-9]：除了任意数字

    DOM文档操作 

    查找 HTML 元素

    方法                                                                          描述
    document.getElementById(id)                              通过元素 id 来查找元素。
    document.getElementsByTagName(name)         通过标签名来查找元素。
    document.getElementsByClassName(name)      通过类名来查找元素。
    document.querySelector(CSS选择器)                   通过CSS选择器选择一个元素。
    document.querySelectorAll(CSS选择器)              通过CSS选择器选择多个元素。

    1.创建一个按钮，通过id获取按钮节点对象

    1. <button id="btn">我是按钮</button>
    2. <script>
    3.     var btn = document.getElementById("btn");
    4.     console.log(btn);
    5. </script>

     2.创建一个按钮，通过标签名获取按钮节点对象数组

    1. <button>我是按钮</button>
    2. <script>
    3.     var btn = document.getElementsByTagName("button");
    4.     console.log(btn);
    5. </script>

    3.创建一个按钮，通过类名获取按钮节点对象数组

    1. <button class="btn">我是按钮</button>
    2. <script>
    3.     var btn = document.getElementsByClassName("btn");
    4.     console.log(btn);
    5. </script>

    4.创建一个按钮，通过CSS选择器选择该按钮

    1. <button class="btn">我是按钮</button>
    2. <script>
    3.     var btn = document.querySelector(".btn");
    4.     console.log(btn);
    5. </script>

    5.创建一个无序列表，通过CSS选择器选择该列表的所有li

    1. <ul class="list">
    2.     <li>列表项1</li>
    3.     <li>列表项2</li>
    4.     <li>列表项3</li>
    5.     <li>列表项4</li>
    6. </ul>
    7. <script>
    8.     var list = document.querySelectorAll(".list li");
    9.     console.log(list);
    10. </script>

    获取 HTML 的值

    方法                                                   描述
    元素节点.innerText                            获取 HTML 元素的 inner Text。
    元素节点.innerHTML                         获取 HTML 元素的 inner HTML。
    元素节点.属性                                    获取 HTML 元素的属性值。
    元素节点.getAttribute(attribute)         获取 HTML 元素的属性值。
    元素节点.style.样式                           获取 HTML 元素的行内样式值。

    1.创建一个按钮，然后获取按钮的文本内容

    1. <button id="btn">我是按钮</button>
    2. <script>
    3.     var btn = document.getElementById("btn");
    4.     console.log(btn.innerText);
    5. </script>

    2.创建一个div，然后在div中插入一个h1标题，获取div中的html代码

    1. <div id="box">
    2.     <h1>我是Box中的大标题</h1>
    3. </div>
    4. <script>
    5.     var box = document.getElementById("box");
    6.     console.log(box.innerHTML);
    7. </script>

    3.创建一个超链接，默认为空，设置href属性为https://www.baidu.com ，使用JavaScript代码读取href属性

    1. <a id="a" href="https://www.baidu.com">打开百度，你就知道！</a>
    2. <script>
    3.     var a = document.getElementById("a");
    4.     console.log(a.href); //https://www.baidu.com
    5. </script>

    4.创建一个正方形div，默认颜色为红色，使用JavaScript代码获取div的宽度

    1. <div style="width: 100px;height: 100px;background: red;" id="box"></div>
    2. <script>
    3.     var box = document.getElementById("box");
    4.     console.log(box.style.width); //100px
    5. </script>

    改变 HTML 的值

    方法                                                                       描述
    元素节点.innerText = new text content                  改变元素的 inner Text。
    元素节点.innerHTML = new html content              改变元素的 inner HTML。
    元素节点.属性 = new value                                    改变 HTML 元素的属性值。
    元素节点.setAttribute(attribute, value)                   改变 HTML 元素的属性值。
    元素节点.style.样式 = new style                             改变 HTML 元素的行内样式值。

    1.创建一个按钮，然后改变按钮的文本内容

    1. <button id="btn">我是按钮</button>
    2. <script>
    3.     var btn = document.getElementById("btn");
    4.     btn.innerText = "我是JavaScript的按钮";
    5.     console.log(btn);
    6. </script>

    2.创建一个div，然后在div中插入一个h1标题

    1. <div id="box"></div>
    2. <script>
    3.     var box = document.getElementById("box");
    4.     box.innerHTML = "<h1>我是Box中的大标题</h1>";
    5.     console.log(box);
    6. </script>

    3.创建一个超链接，默认为空，使用JavaScript代码设置href属性为https://www.baidu.com 

    1. <a id="a" href="">打开百度，你就知道！</a>
    2. <script>
    3.     var a = document.getElementById("a");
    4.     a.href="https://www.baidu.com";
    5.     console.log(a);
    6. </script>

    4.创建一个正方形div，默认颜色为红色，使用JavaScript代码改变为绿色

    1. <div style="width: 100px;height: 100px;background: red;" id="box"></div>
    2. <script>
    3.     var box = document.getElementById("box");
    4.     box.style.background = "green";
    5.     console.log(box);
    6. </script>

    窗口事件

    属性描述
    onblur当窗口失去焦点时运行脚本。
    onfocus当窗口获得焦点时运行脚本。
    onload当文档加载之后运行脚本。
    onresize当调整窗口大小时运行脚本。
    onstorage当 Web Storage 区域更新时（存储空间中的数据发生变化时）运行脚本。

    1：当窗口失去焦点时，输出“窗口失去焦点”

    1. <script>
    2.     window.onblur = function () {
    3.         console.log("窗口失去焦点");
    4.     };
    5. </script>

    2：当窗口获取焦点时，输出“窗口获取焦点”

    1. <script>
    2.     window.onfocus = function () {
    3.         console.log("窗口获取焦点");
    4.     };
    5. </script>

    3：当页面文档加载完成后，输出"Hello, World"

    1. <script>
    2.     window.onload = function () {
    3.         console.log("Hello,World");
    4.     };
    5. </script>

    4：当调整窗口大小时，输出"窗口大小正在改变"

    1. <script>
    2.     window.onresize = function () {
    3.         console.log("窗口大小正在改变");
    4.     };
    5. </script>

    表单事件

    属性                      描述
    onblur                   当元素失去焦点时运行脚本。
    onfocus                当元素获得焦点时运行脚本。
    onchange             当元素改变时运行脚本。
    oninput                 当元素获得用户输入时运行脚本。
    oninvalid               当元素无效时运行脚本。
    onselect                当选取元素时运行脚本。
    onsubmit               当提交表单时运行脚本。

    1：当文本框获取焦点，文本框背景为红色，当文本框失去焦点，文本框背景为黄色

    1. <form>
    2.     <input type="text" id="text">
    3. </form>
    4. <script>
    5.     var textInput = document.getElementById("text");
    6.     textInput.onfocus = function () {
    7.         this.style.background = "red";
    8.     };
    9.     textInput.onblur = function () {
    10.         this.style.background = "green";
    11.     };
    12. </script>

    2：当文本框内容改变时，鼠标离开文本框，自动将文本框的内容输出到控制台

    1. <form>
    2.     <input type="text" id="text">
    3. </form>
    4. <script>
    5.     var textInput = document.getElementById("text");
    6.     textInput.onchange = function () {
    7.         console.log(this.value);
    8.     };
    9. </script>

    3：当文本框内容改变时，立即将改变的内容输出到控制台

    1. <form>
    2.     <input type="text" id="text">
    3. </form>
    4. <script>
    5.     var textInput = document.getElementById("text");
    6.     textInput.oninput = function () {
    7.         console.log(this.value);
    8.     };
    9. </script>

    4：如果单击“submit”，则不填写文本字段，将发生警报消息

    1. <form>
    2.     <input type="text" id="text" required>
    3.     <input type="submit" value="submit">
    4. </form>
    5. <script>
    6.     var textInput = document.getElementById("text");
    7.     textInput.oninvalid = function () {
    8.         console.log("请您完善表单内容！");
    9.     };
    10. </script>

    5：当选中文本框的内容时，输出“您已经选择了文本框内容！”

    1. <form>
    2.     <input type="text" id="text">
    3. </form>
    4. <script>
    5.     var textInput = document.getElementById("text");
    6.     textInput.onselect = function () {
    7.         console.log("您已经选择了文本框内容！");
    8.     };
    9. </script>

    6：当提交表单的时候，在控制台输出“表单提交”

    1. <form id="myform">
    2.     <input type="submit" id="submit">
    3. </form>
    4. <script>
    5.     var myform = document.getElementById("myform");
    6.     myform.onsubmit = function () {
    7.         console.log("表单提交");
    8.         return false;
    9.     };
    10. </script>

    键盘事件

    属性描述
    onkeydown当按下按键时运行脚本。
    onkeyup当松开按键时运行脚本。
    onkeypress当按下并松开按键时运行脚本。

    1：当键盘按下判断当前的按键是不是 a ，如果是就输出true，否则输出false

    1. <script>
    2.     window.onkeydown = function (event) {
    3.         event = event || window.event;
    4.  
    5.         if (event.keyCode == 65) {
    6.             console.log("true");
    7.         } else {
    8.             console.log("false");
    9.         }
    10.     };
    11. </script>

    2：使div可以根据不同的方向键向不同的方向移动

    1. <div id="box" style="width: 100px;height: 100px;background: red;position: absolute;"></div>
    2. <script>
    3.     var box = document.getElementById("box");
    4.     //为document绑定一个按键按下的事件
    5.     document.onkeydown = function (event) {
    6.         event = event || window.event;
    7.  
    8.         // 定义移动速度
    9.         var speed = 10;
    10.  
    11.         // 选择移动方向
    12.         switch (event.keyCode) {
    13.             case 37:
    14.                 box.style.left = box.offsetLeft - speed + "px";
    15.                 break;
    16.             case 39:
    17.                 box.style.left = box.offsetLeft + speed + "px";
    18.                 break;
    19.             case 38:
    20.                 box.style.top = box.offsetTop - speed + "px";
    21.                 break;
    22.             case 40:
    23.                 box.style.top = box.offsetTop + speed + "px";
    24.                 break;
    25.         }
    26.     };
    27. </script>

    鼠标事件

    属性                      描述
    onclick                  当单击鼠标时运行脚本。
    ondblclick             当双击鼠标时运行脚本。
    onmousedown     当按下鼠标按钮时运行脚本。
    onmouseup          当松开鼠标按钮时运行脚本。
    onmousemove     当鼠标指针移动时运行脚本。
    onmouseover      当鼠标指针移至元素之上时运行脚本，不可以阻止冒泡。
    onmouseout        当鼠标指针移出元素时运行脚本，不可以阻止冒泡。
    onmouseenter     当鼠标指针移至元素之上时运行脚本，可以阻止冒泡。
    onmouseleave     当鼠标指针移出元素时运行脚本，可以阻止冒泡。
    onmousewheel    当转动鼠标滚轮时运行脚本。
    onscroll                当滚动元素的滚动条时运行脚本。

    1：创建一个正方形div，默认颜色为黑色，当鼠标移入div，背景颜色变为红色，当鼠标移出div，背景颜色变为绿色 

    1. <div id="box" style="width: 100px;height: 100px;background: black;"></div>
    2. <script>
    3.     var box = document.getElementById("box");
    4.     /* 当鼠标移入div，背景颜色变为红色 */
    5.     box.onmouseenter = function () {
    6.         this.style.background = "red";
    7.     };
    8.     /* 当鼠标移出div，背景颜色变为绿色 */
    9.     box.onmouseleave = function () {
    10.         this.style.background = "green";
    11.     };
    12. </script>

    媒体事件

    通过视频（videos），图像（images）或音频（audio） 触发该事件。

    属性                          描述
    onabort                    当发生中止事件时运行脚本。
    oncanplay                当媒介能够开始播放但可能因缓冲而需要停止时运行脚本。
    oncanplaythrough    当媒介能够无需因缓冲而停止即可播放至结尾时运行脚本。
    ondurationchange    当媒介长度改变时运行脚本。
    onemptied                当媒介资源元素突然为空时（网络错误、加载错误等）运行脚本。
    onended                   当媒介已抵达结尾时运行脚本。
    onerror                      当在元素加载期间发生错误时运行脚本。
    onloadeddata            当加载媒介数据时运行脚本。
    onloadedmetadata    当媒介元素的持续时间以及其它媒介数据已加载时运行脚本。
    onloadstart                当浏览器开始加载媒介数据时运行脚本。
    onpause                    当媒介数据暂停时运行脚本。
    onplay                       当媒介数据将要开始播放时运行脚本。
    onplaying                  当媒介数据已开始播放时运行脚本。
    onprogress               当浏览器正在取媒介数据时运行脚本。
    onratechange           当媒介数据的播放速率改变时运行脚本。
    onreadystatechange 当就绪状态（ready-state）改变时运行脚本。
    onseeked                  当媒介元素的定位属性不再为真且定位已结束时运行脚本。
    onseeking                 当媒介元素的定位属性为真且定位已开始时运行脚本。
    onstalled                   当取回媒介数据过程中（延迟）存在错误时运行脚本。
    onsuspend                当浏览器已在取媒介数据但在取回整个媒介文件之前停止时运行脚本。
    ontimeupdate            当媒介改变其播放位置时运行脚本。
    onvolumechange      当媒介改变音量亦或当音量被设置为静音时运行脚本。
    onwaiting                  当媒介已停止播放但打算继续播放时运行脚本。

    其它事件

    属性描述
    onshow当 <menu> 元素在上下文显示时触发。
    ontoggle当用户打开或关闭 <details> 元素时触发。

     

    事件冒泡

    事件的冒泡（Bubble）：所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发，在开发中大部分情况冒泡都是有用的，如果不希望发生事件冒泡可以通过事件对象来取消冒泡

    1：创建两个div，叠放在一起，分别绑定单击事件，点击最里边的div，会触发两个div的单击事件

    1. <style>
    2.     #div1 {
    3.             width: 200px;
    4.             height: 200px;
    5.             background: pink;
    6.     }
    7.  
    8.      #div2 {
    9.             width: 100px;
    10.             height: 100px;
    11.             background: coral;
    12.      }
    13. </style>
    14. <div id="div1">
    15.     我是DIV1
    16.     <div id="div2">
    17.         我是DIV2
    18.     </div>
    19. </div>
    20. <script>
    21.     var div1 = document.getElementById("div1");
    22.     var div2 = document.getElementById("div2");
    23.     // 为div1绑定单击事件
    24.     div1.onclick = function () {
    25.         console.log("div1 的单击事件触发了！");
    26.     };
    27.     // 为div2绑定单击事件
    28.     div2.onclick = function () {
    29.         console.log("div2 的单击事件触发了！");
    30.     };
    31. </script>

    弹出框

    1、警告框

    1. window.alert("sometext");
    2. alert("我是一个警告框！");

    2、确认框

    1. window.confirm("sometext");
    2. var r = confirm("请按按钮");
    3. if (r == true) {
    4.     x = "您按了确认！";
    5. } else {
    6.     x = "您按了取消！";
    7. }

    3、提示框

    1. window.prompt("sometext","defaultText");
    2. var person = prompt("请输入您的姓名", "比尔盖茨");
    3. if (person != null) {
    4.     console.log(person);
    5. }

    定时事件

    1、setTimeout() 方法：延时器

    window.setTimeout(function, milliseconds);

    • 第一个参数是要执行的函数。
    • 第二个参数指示执行之前的毫秒数。

    单击按钮，等待 3 秒，然后控制台会输出 "Hello" 

    1. <button id="btn">按钮</button>
    2. <script>
    3.     var btn = document.getElementById("btn");
    4.     btn.onclick = function () {
    5.         // 创建延时器
    6.         var timer = setTimeout(function () {
    7.             console.log("Hello");
    8.         }, 3000);
    9.         
    10.         // 清除延时器
    11.         clearTimeout(timer);        
    12.     };
    13. </script>

    2、setInterval() 方法：定时器

    window.setInterval(function, milliseconds);

    • 第一个参数是要执行的函数。
    • 第二个参数每个执行之间的时间间隔的长度。

    单击按钮，每隔一秒向控制台输出 "Hello" 

    1. <button id="btn">按钮</button>
    2. <script>
    3.     var btn = document.getElementById("btn");
    4.     btn.onclick = function () {
    5.         // 创建定时器
    6.         var timer = setInterval(function () {
    7.             console.log("Hello");
    8.         }, 1000);
    9.         // 清除定时器
    10.         clearInterval(timer);
    11.     };
    12. </script>

    JS对象转JSON字符串：JSON.stringify()

    1. var obj = {name: "猪八戒", age: 28, gender: "男"};
    2. var jsonStr = JSON.stringify(obj);
    3. console.log(jsonStr);

  • 相关阅读:
    云主机修复监控插件异常的方法
    机器学习评价指标（分类、目标检测）
    Linux：环境变量、地址空间
    VMware下Linux虚拟机挂载Windows共享文件夹
    VuePress + Github Pages 搭建博客网站
    LLMs 蒸馏, 量化精度, 剪枝 模型优化以用于部署 Model optimizations for deployment
    Unity技术手册 - 粒子发射和生命周期内速度子模块
    数据库系统原理与应用教程（078）—— MySQL 练习题：操作题 173-180（二十二）：综合练习
    数据标注工具 doccano | 文本分类（Text Classification）
    SQL学习记录
  • 原文地址：https://blog.csdn.net/weixin_58431406/article/details/125514536