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

dom

e 1 year ago
parent
aa9a2aa257
commit
864d84ee71
8 changed files with 250 additions and 1 deletions
Split View Show Diff Stats
  1. 14 1
      js/js初阶/DOM/22.类.html
  2. 19 0
      js/js高阶/1.认知.html
  3. 30 0
      js/js高阶/2.let.html
  4. 23 0
      js/js高阶/3.const.html
  5. 43 0
      js/js高阶/4.解构赋值.html
  6. 33 0
      js/js高阶/5.扩展运算符.html
  7. 24 0
      js/js高阶/6.剩余参数rest.html
  8. 64 0
      js/js高阶/7.箭头函数.html

+ 14 - 1
js/js初阶/DOM/22.类.html
View File 

@@ -12,7 +12,6 @@
 
          * new 实例化对象
 
          * this指向当前对象本身
 
          * 首字母大写
 
-         * 不使用return
 
          * 自带了prototype 原型对象 和 constructor 构造器
 
          * 
          * 属性 写在构造函数下
 
@@ -26,6 +25,7 @@
 
         }
 
         Person.prototype.eat = function() {
 
             console.log("吃粽子")
 
+
 
         }
 
         Person.prototype.drink = function() {
 
             console.log("喝甜水")
 
@@ -36,6 +36,19 @@
 
       p1.drink();
 
       p1.name = '哈哈';
 
       console.log(p1);
 
+      
+        /**
 
+         * 原型
 
+         * 1.构造函数中自带了constructor(构造器)和prototype(原型对象/显式的方法)
 
+         * 2.constructor 指向的是 prototype 的构造函数
 
+         * 3.__proto__和prototype是等价的
 
+        */
 
+        /**
 
+         * 原型链：
 
+         * 访问对象属性时 先上对象本身的属性去找
 
+         * 通过__proto__（原型自带的一个隐式方法）去构造函数上找
 
+         * 若还未找到 则在原型对象prototype上去找 若在为找到 则返回null
 
+        */
 
     </script>
 
 </body>
 
 </html>

+ 19 - 0
js/js高阶/1.认知.html
View File 

@@ -0,0 +1,19 @@
 
+<!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>
 
+    <!-- 
+        js是一门弱语言类型
 
+        数据 决定 类型
 
+        JavaScript
 
+        由以下三部分组成：
 
+            Dom 文档对象模型
 
+            BOM 浏览器对象模型
 
+            ES(ECMAScript) es5 es2009 es6 es2015 es7 es8 es10...
 
+     -->
 
+</body>
 
+</html>

+ 30 - 0
js/js高阶/2.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>
 
+    <script>
 
+      /**
 
+       * let 定义变量
 
+       * 1.不能重复声明变量
 
+       * 2.不具备变量提升
 
+       * 3.具备块级作用域
 
+       */
 
+      // let a = 1;
 
+      // let a = 2;
 
+      // var a = 1;
 
+      // var a = 2;
 
+      // console.log(a);
 
+    //   console.log(b);
 
+    //   let b = 1;
 
+    //   console.log(b);
 
+      console.log(c);
 
+      function fn1() {
 
+        var c = 1;
 
+      }
 
+    </script>
 
+  </body>
 
+</html>

+ 23 - 0
js/js高阶/3.const.html
View File 

@@ -0,0 +1,23 @@
 
+<!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.一般用于定义常量
 
+         * 2.不具备变量提升
 
+         * 3.不能重复声明
 
+         * 4.几乎不常修改
 
+        */
 
+        // console.log(PI);
 
+        const PI ='3.14';
 
+        // const PI = 
+        console.log(PI);
 
+    </script>
 
+</body>
 
+</html>

+ 43 - 0
js/js高阶/4.解构赋值.html
View File 

@@ -0,0 +1,43 @@
 
+<!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>
 
+        // 1.数组
 
+        // let arr = [1,2,3,'55',true];
 
+        // let [a,b,c,d,e] = arr;
 
+        // console.log(a,b,c,d,e);
 
+        // 2.对象
 
+        // let obj = {
 
+        //     a1:1,
 
+        //     b2:"哈哈",
 
+        //     c3:function() {
 
+        //         console.log(this)
 
+        //     }
 
+        // }
 
+        // // console.log(obj.c())
 
+        // let {a1,b2,c3} = obj;
 
+        // console.log(a1,b2,c3)
 
+        // 3.函数
 
+        // function fn1() {
 
+        //     return {
 
+        //         name:"LiLi",
 
+        //         age: 10,
 
+        //         eat:function() {
 
+        //             console.log(this);
 
+        //         }
 
+        //     }
 
+        // }
 
+        // let {name,age,eat} = fn1();
 
+        // console.log(name,age,eat);
 
+        // 4.字符串
 
+        let str = 'hello';
 
+        let [q,w,r,t,y] = str;
 
+        console.log(q,w,r,t,y)
 
+    </script>
 
+</body>
 
+</html>

+ 33 - 0
js/js高阶/5.扩展运算符.html
View File 

@@ -0,0 +1,33 @@
 
+<!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>
 
+    <!-- 
+        扩展运算符 
+        ... spread
 
+        类数组中无法使用数组方法 可以通过扩展运算符进行转换
 
+     -->
 
+     <ul>
 
+        <li>aaa</li>
 
+        <li>aaa</li>
 
+        <li>aaa</li>
 
+        <li>aaa</li>
 
+     </ul>
 
+     <script>
 
+        let arr = [1,2,3,4,5,6];
 
+        console.log(arr);
 
+        console.log(...arr);
 
+        let b = ["哈哈","oo"]
 
+        let c = [...arr,...b];
 
+        console.log(c);
 
+        // 伪数组
 
+        var lis = document.getElementsByTagName("li");
 
+        console.log(lis);
 
+        console.log([...lis])
 
+     </script>
 
+</body>
 
+</html>

+ 24 - 0
js/js高阶/6.剩余参数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 剩余的 函数的参数里
 
+        */
 
+    //    function fn1(...rest) {
 
+    //     console.log(...rest)
 
+    //    }
 
+    //    fn1(1,2,3,4,5,6,7,8,9);
 
+    function fn2() {
 
+        // arguments 实参
 
+        console.log(...arguments);
 
+    }
 
+    fn2(1,2,3,4,5);
 
+    </script>
 
+</body>
 
+</html>

+ 64 - 0
js/js高阶/7.箭头函数.html
View File 

@@ -0,0 +1,64 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        #box {
 
+            width: 200px;
 
+            height: 200px;
 
+            background: aqua;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div id="box"></div>
 
+    <script>
 
+        /**
 
+         * 箭头函数
 
+         *xxx = () => {
 
+         * }
 
+         * 1.箭头函数中没有this this指向上级
 
+         * 2.箭头函数中不能使用arguments 可以使用rest
 
+         * 3.箭头函数不用return
 
+         * 4.箭头函数无法使用new
 
+        */
 
+    //    box.onclick = () =>{
 
+        
+    //    }
 
+    //    var box = document.getElementById("box");
 
+    //    box.onclick = function() {
 
+    //         console.log(this,'普通函数')
 
+    //    }
 
+    // let a ='';
 
+    //    box.onclick = function(){
 
+    //     console.log(this,'1')
 
+    //     setInterval(()=> {
 
+    //         //  a ="哈哈";
 
+    //         console.log(this,'监听函数')
 
+    //         //  return a;
 
+    //     },1000)
 
+    //    }
 
+    // function fn4() {
 
+    //    return a = '哈哈'
 
+    // }
 
+    // fn4()
 
+    //    console.log(a);
 
+        // function fn1(){
 
+        //     console.log(this,'普通函数')
 
+        // }
 
+        // fn1();
 
+        // let fn2 = ()=>{
 
+        //     console.log(this,'箭头函数')
 
+        // }
 
+        // fn2()
 
+        let fn3 = (...rest) =>{
 
+            console.log(...rest)
 
+            // console.log(arguments)
 
+        }
 
+        // new
 
+        fn3(1,2,3,4,5,7)
 
+    </script>
 
+</body>
 
+</html>