1 жил өмнө · e3d12d675f
--- a/HTML5/222.mp4
+++ b/HTML5/222.mp4
--- a/HTML5/4_音频控件.html
+++ b/HTML5/4_音频控件.html
@@ -0,0 +1,15 @@
 
				+<!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>
			
 
				+  <!-- controls 是否显示控件 -->
			
 
				+  <audio src="./周杰伦-花海.mp3" controls></audio>
			
 
				+  <!-- loop 循环播放 autoplay 自动播放  -->
			
 
				+  <video src="./222.mp4" controls loop autoplay></video>
			
 
				+</body>
			
 
				+</html>
			
--- a/HTML5/5_选择器.html
+++ b/HTML5/5_选择器.html
@@ -0,0 +1,39 @@
 
				+<!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"></div>
			
 
				+  <div class="div2">1</div>
			
 
				+  <div class="div2">2</div>
			
 
				+  <script>
			
 
				+    // var div1 = document.getElementById('div1')
			
 
				+    // var div2 = document.getElementsByClassName('div2')
			
 
				+
			
 
				+    //querySelector 获取元素  但是只获取目标元素的第一个
			
 
				+    // var div1 = document.querySelector('#div1')
			
 
				+    // console.log(div1)
			
 
				+    // var div2 = document.querySelector('.div2')
			
 
				+    // console.log(div2)
			
 
				+    // var aDiv = document.querySelector('div')
			
 
				+    // console.log(aDiv)
			
 
				+
			
 
				+    //querySelectorAll  查找所有满足条件的元素
			
 
				+    //NodeList  类数组  不是一个真正的数组  只具备数组当中的部分方法 
			
 
				+    var div2 = document.querySelectorAll('.div2')
			
 
				+    console.log(div2)
			
 
				+    var aDiv = document.querySelectorAll('div')
			
 
				+    console.log(aDiv)
			
 
				+
			
 
				+    var a = []
			
 
				+    console.log(a)
			
 
				+  </script>
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/HTML5/6_属性.html
+++ b/HTML5/6_属性.html
@@ -0,0 +1,33 @@
 
				+<!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="google" data-first-name='baidu'>123</div>
			
 
				+  <script>
			
 
				+    var div1 = document.querySelector('div')
			
 
				+    /* 
			
 
				+      给元素设置自定义属性
			
 
				+      1.div1.属性名 = 属性值
			
 
				+      2.div1.setAttribute('属性名','属性值')
			
 
				+      3.div1.dataset.属性名 = 属性值
			
 
				+    */
			
 
				+    div1.index = 1
			
 
				+    div1.setAttribute('name', 'zs')
			
 
				+    div1.dataset.age = 19
			
 
				+    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/HTML5/7_json.html
+++ b/HTML5/7_json.html
@@ -0,0 +1,51 @@
 
				+<!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
			
 
				+    }
			
 
				+
			
 
				+    /* 将对象转化为字符串 */
			
 
				+    var str = JSON.stringify(person)
			
 
				+    console.log(str)
			
 
				+    /* 将字符串转化为对象 */
			
 
				+    var obj = JSON.parse(str)
			
 
				+    console.log(obj)
			
 
				+    obj.name = 'lisi'
			
 
				+    console.log(person)
			
 
				+    console.log(obj)
			
 
				+
			
 
				+
			
 
				+
			
 
				+    // var a = 4
			
 
				+    // b = a
			
 
				+    // b = 6
			
 
				+    // console.log(a)
			
 
				+    // console.log(b)
			
 
				+
			
 
				+
			
 
				+    var a = {
			
 
				+      age: 30
			
 
				+    }
			
 
				+    b = a
			
 
				+    b.age = 100
			
 
				+    console.log(a)
			
 
				+    console.log(b)
			
 
				+    /* 
			
 
				+    浅克隆、浅拷贝： 将一个变量赋值给另一个变量，原有的变量随之改变 (引用数据类型)
			
 
				+    深克隆、深拷贝： 将一个变量赋值给另一个变量，修改新的变量，原有的变量不变  (基本数据类型)
			
 
				+    */
			
 
				+  </script>
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/HTML5/8_深克隆3.html
+++ b/HTML5/8_深克隆3.html
@@ -0,0 +1,48 @@
 
				+<!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,
			
 
				+      friend: {
			
 
				+        name: 'lisi'
			
 
				+      }
			
 
				+    }
			
 
				+    /* 封装深克隆的方法  */
			
 
				+    function deepClone(data) {
			
 
				+      /* 定义一个空对象 用于接收深克隆后的结果 */
			
 
				+      var tmp = {}
			
 
				+      // if(Array.isArray(data)){
			
 
				+      //   tmp = []
			
 
				+      // } else {
			
 
				+      //   tmp = {}
			
 
				+      // }
			
 
				+
			
 
				+      tmp = Array.isArray(data) ? [] : {}
			
 
				+      /* 循环对象里面的每一项 遍历对象下面的属性 */
			
 
				+      for(key in data){
			
 
				+        /* 判断当前对象下面的属性是基本数据类型  还是 引用数据类型 */
			
 
				+        if(typeof (data[key]) == 'object'){
			
 
				+          /* 如果是引用数据类型  再次调用函数本身 */
			
 
				+          tmp[key] = deepClone(data[key])
			
 
				+        } else {
			
 
				+          /* 如果是基本数据类型  可以直接赋值 */
			
 
				+          tmp[key] = data[key]
			
 
				+        }
			
 
				+      }
			
 
				+      return tmp
			
 
				+    }
			
 
				+    var a = deepClone(person)
			
 
				+    a.friend.name = 'xiaohong'
			
 
				+    console.log(person)
			
 
				+    console.log(a)
			
 
				+  </script>
			
 
				+</body>
			
 
				+</html>
			
--- a/HTML5/8_深拷贝.html
+++ b/HTML5/8_深拷贝.html
@@ -0,0 +1,30 @@
 
				+<!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
			
 
				+    }
			
 
				+    var a  = deepClone(person)
			
 
				+    a.age = 30
			
 
				+    console.log(person)
			
 
				+    console.log(a)
			
 
				+  </script>
			
 
				+</body>
			
 
				+</html>
			
--- a/HTML5/8_深拷贝2.html
+++ b/HTML5/8_深拷贝2.html
@@ -0,0 +1,44 @@
 
				+<!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,
			
 
				+      friend: {
			
 
				+        name: 'lisi'
			
 
				+      }
			
 
				+    }
			
 
				+    /* 封装深克隆的方法  */
			
 
				+    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.friend.name = 'xiaohong'
			
 
				+    console.log(person)
			
 
				+    console.log(a)
			
 
				+  </script>
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/HTML5/周杰伦-花海.mp3
+++ b/HTML5/周杰伦-花海.mp3