Home Explore Help
Sign In
lovecoding
/
web0331
10
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

fix:dom

e 1 week ago
parent
37bed2615c
commit
2612511bf3
8 changed files with 244 additions and 0 deletions
Split View Show Diff Stats
  1. 30 0
      4.js高级/1.let变量.html
  2. 27 0
      4.js高级/2.const变量.html
  3. 32 0
      4.js高级/3.var let const区别.html
  4. 44 0
      4.js高级/4.解构赋值.html
  5. 25 0
      4.js高级/5.模板字符串.html
  6. 25 0
      4.js高级/6.扩展运算符.html
  7. 37 0
      4.js高级/7.类数组.html
  8. 24 0
      4.js高级/8.rest.html

+ 30 - 0
4.js高级/1.let变量.html
View File 

@@ -0,0 +1,30 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <!-- 
+        var 和 let区别
 
+        1.var具备变量提升 let不具备变量提升
 
+        2.var 可以重复声明变量 let不可以重复声明变量
 
+        3.临时失效区
 
+    -->
 
+    <script>
 
+        let a=1;
 
+        console.log(a);
 
+        // let a;
 
+        // let a = 12;
 
+        a = 12;
 
+        console.log(a,'3')
 
+        let c = 3;
 
+        function fn() {
 
+           let  c = 13;
 
+        }
 
+        fn();
 
+        console.log(c);
 
+    </script>
 
+</body>
 
+</html>

+ 27 - 0
4.js高级/2.const变量.html
View File 

@@ -0,0 +1,27 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <script>
 
+        /**
 
+         * const 特点：
 
+         *   1.var具备变量提升 const不具备变量提升
 
+         *   2.const常用于声明常量
 
+         *   3.变量首字母大写
 
+         *   4.const赋值的变量 一般不做修改
 
+         *   5.不可以重复声明
 
+        */
 
+    //    console.log(a);
 
+       const a = 3.1415926;
 
+
 
+       const Vase = 12;
 
+       Vase = 22;
 
+      const a = 12;
 
+       console.log(a)
 
+    </script>
 
+</body>
 
+</html>

+ 32 - 0
4.js高级/3.var let const区别.html
View File 

@@ -0,0 +1,32 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <!-- 
+        var let const区别:
 
+        1.var可以变量提升，let const 不可以
 
+        2.var可以重复声明，let const 不可以
 
+        3.var作用域是全局：window
 
+        4.var作用域取决于使用的位置，let const作用域是块级作用域
 
+    -->
 
+    <script>
 
+        if(true) {
 
+            var a = 0;
 
+            let b = 0;
 
+            const c = 0
 
+        console.log(b,'b')
 
+        console.log(c,'c')
 
+        }    
+        console.log(a,'a')
 
+        function fn() {
 
+            var a1 = 1;
 
+        }
 
+        fn();
 
+        console.log(a1)
 
+    </script>
 
+</body>
 
+</html>

+ 44 - 0
4.js高级/4.解构赋值.html
View File 

@@ -0,0 +1,44 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <script>
 
+        var arr = [1,2,3,5,4,3,2,2,2,3,5,6];
 
+        var [a,b,c,...d] = arr;
 
+        console.log(a,b,c,...d);
 
+
 
+        var obj = {
 
+            name:"LiLi",
 
+            age:10,
 
+            address:function() {
 
+                console.log("地址")
 
+            }
 
+        }
 
+        var {name,age,address} = obj;
 
+         console.log(name,age,address)
 
+        
+
 
+        //  var a1 ='2'
 
+        function fn1(name1,age1) {
 
+            console.log(name1,'nam1')
 
+            console.log(age1,'age1')
 
+        }
 
+        fn1({name:'图图'},{age:3})
 
+
 
+        function fn2() {
 
+            return {
 
+                name2:'喜羊羊',
 
+                age2: 4
 
+            }
 
+        }
 
+       var {name2,age2} = fn2()
 
+        console.log(name2,age2)
 
+
 
+
 
+    </script>
 
+</body>
 
+</html>

+ 25 - 0
4.js高级/5.模板字符串.html
View File 

@@ -0,0 +1,25 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <script>
 
+        /**
 
+         * 模板字符串：（template string）
 
+         * 使用反引号（``）
 
+         * ${xxx}输出变量
 
+        */
 
+       let str = `
 
+        <h1>要想生活过得去</h1>
 
+       `;
 
+       document.write(str);
 
+       let name = '灰太狼';
 
+       let result =`我的名字是${name}`;
 
+    //    let result = '我的名字是' + name;
 
+       document.write(result)
 
+    </script>
 
+</body>
 
+</html>

+ 25 - 0
4.js高级/6.扩展运算符.html
View File 

@@ -0,0 +1,25 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <script>
 
+        /**
 
+         * 扩展运算符：
 
+         * （...）
 
+         * spread
 
+        */
 
+       var a = [1,2,3,4,5,6,7,8];
 
+       var b = [...a];
 
+       console.log(b);
 
+
 
+       let a1 = [1,2,3];
 
+       let b1 = [4,5,6];
 
+       let c1 = [...a1,...b1];
 
+       console.log(c1)
 
+    </script>
 
+</body>
 
+</html>

+ 37 - 0
4.js高级/7.类数组.html
View File 

@@ -0,0 +1,37 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <ul>
 
+        <li>你好1</li>
 
+        <li>你好2</li>
 
+        <li>你好3</li>
 
+        <li>你好4</li>
 
+    </ul>
 
+    <script>
 
+        /**
 
+         * 类数组：
 
+         * 不能直接使用数组的方法
 
+         * 1.js常见的类数组：arguments(实参);
 
+         * 2.由querySelectorAll,getElementsByClassName,getElementsByTagName
 
+        */
 
+       var arr = [1,2,3,4,5,6,7];
 
+       console.log(arr);
 
+       function fn1(a) {
 
+            console.log(a,arguments)
 
+       }
 
+       fn1(arr);
 
+       let list = document.querySelectorAll("ul li");
 
+    //    list.push('9')
 
+       console.log(list);
 
+       //类数组转成整行数组：
 
+       let newsList = [...list];
 
+       newsList.push(0)
 
+       console.log(newsList)
 
+    </script>
 
+</body>
 
+</html>

+ 24 - 0
4.js高级/8.rest.html
View File 

@@ -0,0 +1,24 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <script>
 
+        /**
 
+         * rest 用于获取函数中的实参 其实就是替代arguments
 
+         */
 
+        function fn1(...rest) {
 
+            console.log(...rest)
 
+            console.log(arguments)
 
+        }
 
+        fn1(1,2,3,4,5,6)
 
+        function fn2(a,b,...c) {
 
+            console.log(a,b,...c)
 
+        }
 
+        fn2(3,4,5,6,78,9)
 
+    </script>
 
+</body>
 
+</html>