1 年之前 · 5e7b9b3c02
--- a/8_html5/5_选择器.html
+++ b/8_html5/5_选择器.html
@@ -0,0 +1,54 @@
 
				+<!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>
			
 
				+  <div id="div1" class="content">hello</div>
			
 
				+  <div class="content">word</div>
			
 
				+  <ul id="ul1">
			
 
				+    <li>1</li>
			
 
				+    <li>2</li>
			
 
				+    <li>3</li>
			
 
				+  </ul>
			
 
				+  <ul id="ul2">
			
 
				+    <li>4</li>
			
 
				+    <li>5</li>
			
 
				+    <li>6</li>
			
 
				+  </ul>
			
 
				+  <script>
			
 
				+    // var div1 = document.getElementById('div1')
			
 
				+    // var content = document.getElementsByClassName('content')
			
 
				+    // var div2 = document.getElementsByTagName('div')
			
 
				+
			
 
				+    /* querySelector 获取元素  只获取第一个元素 */
			
 
				+
			
 
				+    var div1 = document.querySelector('#div1')
			
 
				+    console.log(div1)
			
 
				+    var content = document.querySelector('.content')
			
 
				+    console.log(content)
			
 
				+    var div2 = document.querySelector('div')
			
 
				+    console.log(div2)
			
 
				+
			
 
				+    /* querySelectorAll 查找所有满足条件的元素 */
			
 
				+    /* nodeList 类数组 不是真正的数组  不太具备数组当中的方法 */
			
 
				+    var aLi = document.querySelectorAll('li')
			
 
				+    console.log(aLi)
			
 
				+    var a = []
			
 
				+    console.log(a)
			
 
				+
			
 
				+    for(var i=0;i<aLi.length;i++){
			
 
				+      aLi[i].onclick = function(){
			
 
				+        console.log(this.innerHTML)
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    var newUl = document.querySelector('#ul2')
			
 
				+    var newLi = newUl.querySelectorAll('li')
			
 
				+    console.log(newLi)
			
 
				+  </script>
			
 
				+</body>
			
 
				+</html>
			
--- a/8_html5/6_属性.html
+++ b/8_html5/6_属性.html
@@ -0,0 +1,34 @@
 
				+<!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>
			
 
				+  <div data-name="coole" data-first-name="hahaha">123</div>
			
 
				+  <script>
			
 
				+    var div1 = document.querySelector('div')
			
 
				+
			
 
				+    /* 
			
 
				+    给元素设定自定义属性
			
 
				+    1.div1.属性名 = 属性值
			
 
				+    2.div1.setAttribute('属性名'，'属性值')  
			
 
				+    3.div1.dataset.属性名 = 属性值
			
 
				+
			
 
				+
			
 
				+
			
 
				+    */
			
 
				+    div1.index = 1
			
 
				+    div1.setAttribute('name','x')
			
 
				+    div1.dataset.age = 18
			
 
				+    console.log(div1.index)
			
 
				+    console.log(div1.getAttribute('name'))
			
 
				+    console.log(div1.dataset.age)
			
 
				+    console.log(div1.dataset.name)
			
 
				+    console.log(div1.dataset.firstName)
			
 
				+    /* 获取元素属性 设置在标签里面的 要用驼峰的方式来获取 */
			
 
				+  </script>
			
 
				+</body>
			
 
				+</html>
			
--- a/8_html5/7_json.html
+++ b/8_html5/7_json.html
@@ -0,0 +1,58 @@
 
				+<!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>
			
 
				+    var person = {
			
 
				+      name: 'zs',
			
 
				+      age: 18
			
 
				+    }
			
 
				+    console.log(person)
			
 
				+
			
 
				+    /* 将对象转化成字符串类型 */
			
 
				+    // var str = JSON.stringify(person)
			
 
				+    // console.log(str)
			
 
				+    /* 将字符串转化为对象 */
			
 
				+    // var obj = JSON.parse(str)
			
 
				+    // console.log(obj)
			
 
				+
			
 
				+    // var a = 4
			
 
				+    // b = a 
			
 
				+    // b = 5
			
 
				+    // console.log(a,b)
			
 
				+
			
 
				+    var a = {
			
 
				+      age: 30
			
 
				+    }
			
 
				+    // b = a
			
 
				+    // b.age = 40
			
 
				+    // console.log(a)
			
 
				+    // console.log(b)
			
 
				+
			
 
				+
			
 
				+    var str = JSON.stringify(a)
			
 
				+    var obj = JSON.parse(str)
			
 
				+  
			
 
				+    obj.age = 40
			
 
				+    console.log(a,obj)
			
 
				+
			
 
				+    /* 
			
 
				+    浅克隆、浅拷贝： 将一个变量赋值给另一个变量  修改其中一个变量  原有的变量也随之修改(引用数据类型)
			
 
				+    深克隆、深拷贝： 将一个变量赋值给另一个变量  修改其中一个变量  原有的变量不随之改变(基本数据类型)
			
 
				+    */
			
 
				+
			
 
				+    /* 
			
 
				+      实现深拷贝  可以通过JSON.stringfy()先转为成字符串
			
 
				+      然后对字符串进行赋值 然后在转化成对象  JSON.parse()
			
 
				+    */
			
 
				+  </script>
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/8_html5/8_深拷贝.html
+++ b/8_html5/8_深拷贝.html
@@ -0,0 +1,66 @@
 
				+<!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>
			
 
				+    /* var person = {
			
 
				+      name: 'zs',  
			
 
				+      age: 18
			
 
				+    }
			
 
				+
			
 
				+    function deepClone(obj){
			
 
				+      var tmp = {}
			
 
				+      for(key in obj){
			
 
				+        tmp[key] = obj[key]
			
 
				+      }
			
 
				+      return tmp
			
 
				+    }
			
 
				+    // console.log(deepClone(person))
			
 
				+
			
 
				+    var a = deepClone(person)
			
 
				+    a.name = 'lisi'
			
 
				+    console.log(a)
			
 
				+    console.log(person) */
			
 
				+
			
 
				+
			
 
				+    var person = {
			
 
				+      name: 'zs',
			
 
				+      age: 18,
			
 
				+      school: {
			
 
				+        address: 'harbin',
			
 
				+        num: 10000
			
 
				+      }
			
 
				+    }
			
 
				+    /* 封装深克隆方法 */
			
 
				+    function deepClone(obj){
			
 
				+      /* 定义一个空的对象 接收深克隆之后的结果 */
			
 
				+      var tmp = {}
			
 
				+      /* 循环对象里面的每一项 循环对象下面的属性 */
			
 
				+      for(key in obj){
			
 
				+        /* 判断当前对象是基本数据类型  还是  引用数据类型 */
			
 
				+        if(typeof (obj[key]) == 'object'){
			
 
				+          /* 如果是引用数据类型  再次调用函数本身 实现深克隆 */
			
 
				+          tmp[key] = deepClone(obj[key])
			
 
				+        } else {
			
 
				+          /* 如果是基本数据类型  可以直接赋值 */
			
 
				+          tmp[key] = obj[key]
			
 
				+        }
			
 
				+      }
			
 
				+      return tmp
			
 
				+    }
			
 
				+
			
 
				+    var a = deepClone(person)
			
 
				+    a.school.address = 'shenyang'
			
 
				+    console.log(a)
			
 
				+    console.log(person)
			
 
				+  </script>
			
 
				+</body>
			
 
				+
			
 
				+</html>