2 years ago · d52c1f88c1
--- a/18_事件委托.html
+++ b/18_事件委托.html
@@ -0,0 +1,40 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+  <meta charset="UTF-8">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+  <title>Document</title>
			
 
				+</head>
			
 
				+<body>
			
 
				+  <ul id="ul1">
			
 
				+    <li>111</li>
			
 
				+    <li>222</li>
			
 
				+    <li>333</li>
			
 
				+    <li>444</li>
			
 
				+  </ul>
			
 
				+  <button id="btn1">添加</button>
			
 
				+  <script>
			
 
				+    var aLi = document.getElementsByTagName('li')
			
 
				+    var btn = document.getElementById('btn1')
			
 
				+    var ul1 = document.getElementById('ul1')
			
 
				+    // for(var i=0;i<aLi.length;i++){
			
 
				+    //   aLi[i].onclick = function(){
			
 
				+    //     console.log(this.innerHTML)
			
 
				+    //   }
			
 
				+    // }
			
 
				+
			
 
				+    ul1.onclick = function(e){
			
 
				+      if(e.target.tagName == 'LI'){
			
 
				+        console.log(e.target.innerHTML)
			
 
				+      }
			
 
				+      // console.log(e.target)
			
 
				+    }
			
 
				+    btn.onclick = function(){
			
 
				+      var xx = document.createElement('li')
			
 
				+      xx.innerHTML = Math.random()
			
 
				+      ul1.appendChild(xx)
			
 
				+    }
			
 
				+  </script>
			
 
				+</body>
			
 
				+</html>
			
--- a/19_this指向.html
+++ b/19_this指向.html
@@ -0,0 +1,52 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+  <meta charset="UTF-8">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+  <title>Document</title>
			
 
				+  <style>
			
 
				+    #div1{
			
 
				+      width: 200px;
			
 
				+      height: 200px;
			
 
				+      background: aqua
			
 
				+    }
			
 
				+  </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+  <div id="div1"></div>
			
 
				+  <script>
			
 
				+    var div1 = document.getElementById('div1')
			
 
				+    //1.当前对象引用中  谁的事件 this就指向谁
			
 
				+    // div1.onclick = function(){
			
 
				+    //   console.log(this)
			
 
				+    // } 
			
 
				+    
			
 
				+    //2.在定时器中 this->window
			
 
				+    // var timer = setInterval(function(){
			
 
				+    //   console.log(this)
			
 
				+    // },1000)
			
 
				+    // div1.onclick = function(){
			
 
				+    //   var timer = setInterval(function(){
			
 
				+    //     console.log(this)
			
 
				+    //   },1000)
			
 
				+    // }
			
 
				+    
			
 
				+    //3.对象下面 this->对象本身
			
 
				+    // var person = {
			
 
				+    //   name: 'zs',
			
 
				+    //   age: 18,
			
 
				+    //   eat: function(){
			
 
				+    //     console.log(this)
			
 
				+    //   }
			
 
				+    // }
			
 
				+    // person.eat()
			
 
				+
			
 
				+    //4.方法里面  this->window
			
 
				+    function xx(){
			
 
				+      console.log(this)
			
 
				+    }
			
 
				+    xx()
			
 
				+  </script>
			
 
				+</body>
			
 
				+</html>
			
--- a/20_改变this指向.html
+++ b/20_改变this指向.html
@@ -0,0 +1,46 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+  <meta charset="UTF-8">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+  <title>Document</title>
			
 
				+</head>
			
 
				+<body>
			
 
				+  <script>
			
 
				+    /* 
			
 
				+      区别：
			
 
				+      1.调用方式不同
			
 
				+      2.call  apply 直接调用修改后的方法  bind 不会调用方法 返回的是一个新的方法 需要重新调用
			
 
				+      修改this指向
			
 
				+      1.call(修改的this,参数1，参数2)
			
 
				+      2.apply(修改的this，【参数1，参数2】)
			
 
				+      3.bind(修改的this,参数1,参数2)()
			
 
				+    */
			
 
				+    // var person1 = {
			
 
				+    //   name: 'zs',
			
 
				+    //   age: 18,
			
 
				+    //   eat: function(){
			
 
				+    //     console.log(this)
			
 
				+    //   }
			
 
				+    // }
			
 
				+    // person1.eat()
			
 
				+
			
 
				+    var person2 = {
			
 
				+      name: 'lisi',
			
 
				+      age: 30
			
 
				+    }
			
 
				+    // person1.eat.call(person2)
			
 
				+
			
 
				+    function xx(a,b){
			
 
				+      console.log(a,b,this)
			
 
				+    }
			
 
				+    xx(1,2)
			
 
				+    xx.call(person2,4,5)
			
 
				+    xx.apply(person2,[5,6])
			
 
				+    //bind不会调用函数  返回的是一个修改this指向之后的方法
			
 
				+    xx.bind(person2,8,9)()
			
 
				+
			
 
				+  </script>
			
 
				+</body>
			
 
				+</html>
			
--- a/21_类.html
+++ b/21_类.html
@@ -0,0 +1,43 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+
			
 
				+<head>
			
 
				+  <meta charset="UTF-8">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+  <title>Document</title>
			
 
				+</head>
			
 
				+
			
 
				+<body>
			
 
				+  <script>
			
 
				+    //类 构造函数
			
 
				+    //属性  都写在构造函数里
			
 
				+    //方法  都写在原型对象下
			
 
				+    function person(name,age){
			
 
				+      this.name = name
			
 
				+      this.age = age
			
 
				+      console.log(this.name,this.age)
			
 
				+      // this.eat = function(){
			
 
				+      //   console.log(this.name + '我在吃饭')
			
 
				+      // }
			
 
				+    }
			
 
				+    //所有的构造函数 都有一个Prototype属性
			
 
				+    //这个prototype属性 指向的都是原型对象
			
 
				+    // 原型对象：  定义在原型对象下面的方法和属性  都能够被实例化对象所共享
			
 
				+    person.prototype.eat = function(){
			
 
				+      console.log(this.name + '在吃饭')
			
 
				+    }
			
 
				+
			
 
				+    //实例化对象
			
 
				+    var p1 = new person('zs',18)
			
 
				+    var p2 = new person('lisi',30)
			
 
				+    console.log(p1)
			
 
				+    console.log(p2)
			
 
				+    p1.eat()
			
 
				+    p2.eat()
			
 
				+
			
 
				+
			
 
				+  </script>
			
 
				+</body>
			
 
				+
			
 
				+</html>