fengchuanyu 4 maanden geleden
bovenliggende
commit
43aff03a09

+ 1 - 0
3_js复习/10_布尔型扩展.html

@@ -18,6 +18,7 @@
         // var a = null;
         // 数组类型永远都为真
         // var a = [];
+        // 对象类型永远都为真
         var a = {};
         if(a){
             console.log("真");

+ 18 - 0
3_js复习/8_代码规范.html

@@ -0,0 +1,18 @@
+<!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 userName = "abc";
+        // 变量名命名规则
+        // 见名知意 通过变量名大概知道含义
+        // (驼峰命名-小驼峰)如果出现多个单词,第一个单词首字母小写后面单词的首字母大写
+        // (帕斯卡命名-大驼峰)如果出现多个单词,每个单词的首字母都大写
+        // 等号 左右两边加上空格
+    </script>
+</body>
+</html>

+ 2 - 0
3_js复习/综合题4_编程题4.html

@@ -8,8 +8,10 @@
 <body>
     <script>
         var sum = 0;
+        // 计算1!+2!+3!+...+10!
         for(var i=1;i<=10;i++){
             var res = 1;
+            // 计算阶乘
             for(var j=1;j<=i;j++){
                 res *= j;
             }

+ 2 - 1
3_js复习/综合题6_选择判断.html

@@ -43,7 +43,8 @@
         // var str = new String();
         var str = "hello world";
         // console.log(str[1]);
-        console.log(str.charAt(1));
+        // console.log(str.charAt(1));
+        console.log(str.indexOf("x"));
         
         
     </script>

+ 6 - 0
4_BOM/4_滚动条.html

@@ -17,6 +17,12 @@
     <script>
         // 控制滚动条滚动 两个参数 第一个横向 第二个纵向
         window.scrollTo(0,5000);
+        // 控制滚动条滚动 两个参数 第一个横向 第二个纵向
+        // scrollBy 控制滚动条滚动是相对于当前位置 
+        window.scrollBy(0,5000);
+
+        window.scrollX; // 获取横向滚动条的位置
+        window.scrollY; // 获取纵向滚动条的位置
     </script>
 </body>
 </html>

+ 6 - 1
4_BOM/5_定时器.html

@@ -23,10 +23,15 @@
             console.log("hello world");
         },1000);
         console.log(timer);
-        
+
         setTimeout(function(){
+            // 清除定时器 clearInterval
             clearInterval(timer);
         },3000);
+
+        //清除定时器 clearTimeout
+        clearTimeout();
+
         // console.log(timer2);
         
         // function fn(){

+ 1 - 0
5_DOM/10_添加属性.html

@@ -22,6 +22,7 @@
         oImg.index = 1;
         console.log(oImg.index);
 
+        
 
     </script>
 </body>

+ 1 - 1
5_DOM/11_控制类.html

@@ -32,7 +32,7 @@
         // oBox.classList.remove("box2");
         // oBox.classList.add("box2");
 
-        oBox.classList.replace("box2","box3");
+        // oBox.classList.replace("box2","box3");
 
     </script>
 </body>

+ 5 - 0
5_DOM/14_css盒模型补充.html

@@ -12,8 +12,13 @@
             padding:10px;
             margin:10px;
             background-color: red;
+            /* 修改盒模型 :怪异盒模型 */
             box-sizing: border-box;
+            /* 修改和模型:标准盒模型 */
+            /* box-sizing: content-box; */
         }
+        /* 标准盒模型 padding border 会影响当前元素大小 */
+        /* 怪异盒模型 padding border 不会影响当前元素大小*/
     </style>
 </head>
 <body>

+ 6 - 0
5_DOM/15_鼠标移入移出.html

@@ -29,6 +29,12 @@
         </div>
     </div>
     <script>
+        // onmouseover 与 onmouseenter 区别
+        // onmouseover 会出发事件冒泡
+        // onmouseenter 不会触发事件冒泡
+        // onmouseout 与 onmouseleave 区别
+        // onmouseout 会触发事件冒泡
+        // onmouseleave 不会触发事件冒泡
         var oBox = document.getElementsByClassName("box")[0];
         var oBox2 = document.getElementsByClassName("box2")[0];
         var oBox3 = document.getElementsByClassName("box3")[0];

+ 1 - 0
5_DOM/22_事件委托.html

@@ -24,6 +24,7 @@
         //         console.log(this.innerText);
         //     })
         // }
+        // 事件委托 通过给父元素绑定事件 来处理内部子元素事件
         oBox.addEventListener("click",function(e){
             console.log(e.target.innerText);
         })

+ 4 - 0
5_DOM/练习10_移动正方形.html

@@ -22,10 +22,14 @@
         var oDom = document.documentElement;
 
         oBox.onmousedown = function (e) {
+            // 获取鼠标点击的位置
             var x = e.clientX;
             var y = e.clientY;
+            // 获取盒子距离页面顶部的距离
             var boxTop = oBox.offsetTop;
+            // 获取盒子距离页面左边的距离
             var boxLeft = oBox.offsetLeft;
+            // 获取鼠标点击位置 在盒子里的位置
             var thisTop = y - boxTop;
             var thisLeft = x - boxLeft;
             oDom.onmousemove = function (e) {

+ 2 - 1
5_DOM/练习3_右键菜单.html

@@ -78,7 +78,8 @@
             oMenu.style.top = y+"px";
             // 显示菜单及蒙版
             oContainer.style.display = "block";
-            // e.preventDefault();
+            // 阻止默认事件
+            e.preventDefault();
             // return false;
         }
         // 点击蒙版隐藏菜单

+ 1 - 1
6_ES6/10_数据循环.html

@@ -75,7 +75,7 @@
             d:4,
             e:5
         }
-        // console.log(obj.a);
+        console.log(obj.a);
         // for in 循环是对象下的方法 负责对对象进行遍历
         for(let key in obj){
             console.log(key+":"+obj[key]);

+ 3 - 3
6_ES6/11_ES新增遍历.html

@@ -44,9 +44,9 @@
         //     let value = val[1];
         //     console.log(key,value);
         // }
-        for(let [key,value] of arr.entries()){
-            console.log(key,value);
-        }
+        // for(let [key,value] of arr.entries()){
+        //     console.log(key,value);
+        // }
     </script>
 </body>
 </html>

+ 6 - 3
6_ES6/12_数组新增方法.html

@@ -31,9 +31,12 @@
         // // Array.of 将一组值转化为数组
         // let arr = Array.of(a,b,c,d,aLi[0]);
         // console.log(arr);
-        let arr = new Array(1,2,3,4,5);
-        arr.fill("a",0,3);
-        console.log(arr)
+        // let arr = new Array(1,2,3,4,5);
+        // fill() 用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。
+        // arr.fill("a",0,3);
+        // console.log(arr)
+
+        
     </script>
 </body>
 </html>

+ 4 - 3
6_ES6/14_对象扩展.html

@@ -102,9 +102,10 @@
         // Object.entries 把当前对象的所有属性名和属性值组成数组返回
         // console.log(Object.entries(obj));
 
-        let arr = [["name","张三"],["age",20]];
-        console.log(Object.fromEntries(arr));
-            
+        // let arr = [["name","张三"],["age",20]];
+        // Object.fromEntries 把数组转换成对象
+        // console.log(Object.fromEntries(arr));
+
 
         
         

+ 2 - 2
6_ES6/16_this指向.html

@@ -61,8 +61,8 @@
 
         // foo.call(obj,"hello");
         // foo.apply(obj,["hello"]);
-        var foo2 = foo.bind(obj,"hello");
-        foo2();
+        // var foo2 = foo.bind(obj,"hello");
+        // foo2();
 
         // call 可以改变this指向 参数有多个 第一个是this指向新对象 后面的参数是传入foo的参数
         // foo.call(obj,"hello");

+ 1 - 0
6_ES6/17_原型.html

@@ -0,0 +1 @@
+html

+ 1 - 0
6_ES6/1_新的声明方法.html

@@ -85,6 +85,7 @@
         // foo();
         // console.log(a);
 
+        // 块级作用域使用let定义变量时 只要有大括号{} 就会产生一个作用域名
         if(true){
             let a = 10;
         }

+ 1 - 1
6_ES6/2_块级作用域.html

@@ -17,7 +17,7 @@
     <script>
         var aLi = document.getElementsByTagName('li');
         for(let i=0;i<aLi.length;i++){
-            aLi[i].index = i;
+            // aLi[i].index = i;
             aLi[i].onclick = function(){
                 console.log(i);
             }

+ 2 - 0
6_ES6/5_栈内存&堆内存.html

@@ -34,6 +34,8 @@
         arr[5][0] = "x";
         console.log(arr2,arr);
 
+        
+
     </script>
 </body>
 </html>

+ 4 - 4
6_ES6/8_结构赋值.html

@@ -58,8 +58,8 @@
         // let {a,b} = foo();
         // console.log(a,b);
 
-        let a = 1;
-        let b = 2;
+        // let a = 1;
+        // let b = 2;
         
         // let c = a;
         // a = b;
@@ -68,9 +68,9 @@
         // a = a + b;
         // b = a - b;
         // a = a - b;
-        [a,b] = [b,a];
+        // [a,b] = [b,a];
         
-        console.log(a,b);
+        // console.log(a,b);
 
     </script>
 </body>

+ 1 - 1
6_ES6/练习题2_函数及变量解答.html

@@ -59,7 +59,7 @@
         //     function f() { console.log(2) };
         //     f();
         // })();
-
+        
         // if (!("a" in window)) {
         //     var a = 10;
         // }