Эхлэл Бүгдийг харах Тусламж
Нэвтрэх
lovecoding
/
VIP20
6
0
Салаа 0
Файлууд Асуудлууд 0 Хуулах хүсэлтүүд 0 Мэдлэгийн сан
Эх сурвалжийг харах

new

zsydgithub 3 жил өмнө
parent
b4661b99ab
commit
d52c1f88c1
4 өөрчлөгдсөн 181 нэмэгдсэн , 0 устгасан
Өөрчлөллтийг нэгтгэж харах Өөрчлөлтийн статистик харах
  1. 40 0
      18_事件委托.html
  2. 52 0
      19_this指向.html
  3. 46 0
      20_改变this指向.html
  4. 43 0
      21_类.html

+ 40 - 0
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>

+ 52 - 0
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>

+ 46 - 0
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>

+ 43 - 0
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>