Hugging Face's logo

zxy0307
/
Python_07_front_end

Model card Files
xet
 Community
zxy0307 commited on
Commit
63ca3c7
·
verified ·
1 Parent(s): efe335a

Upload 810 files

Browse files
This view is limited to 50 files because it contains too many changes.   See raw diff
Files changed (50) hide show
  1. .gitattributes +4 -0
  2. BOM/.DS_Store +0 -0
  3. BOM/01_BOM概述.html +22 -0
  4. BOM/02_script工作原理.html +18 -0
  5. BOM/03_回流和重绘.html +43 -0
  6. BOM/04_定时器1_setTimeout.html +66 -0
  7. BOM/04_定时器2_setInterval.html +55 -0
  8. BOM/04_定时器3_实操.html +34 -0
  9. BOM/04_定时器4_防抖debounce.html +82 -0
  10. BOM/04_定时器5_节流throttle.html +56 -0
  11. BOM/05_window对象1_属性.html +49 -0
  12. BOM/05_window对象2_方法.html +31 -0
  13. BOM/06_Navigator对象.html +32 -0
  14. BOM/07_Screen对象.html +28 -0
  15. BOM/08_History对象1.html +25 -0
  16. BOM/08_History对象2.html +24 -0
  17. BOM/09_封装cookie.html +53 -0
  18. BOM/10_apply_call_bind函数.html +90 -0
  19. BOM/css/tab.css +60 -0
  20. BOM/js/hello.js +1 -0
  21. BOM/js/index01.js +1 -0
  22. BOM/js/index02.js +3 -0
  23. BOM/js/tab.js +31 -0
  24. DOM/01_DOM概述.html +26 -0
  25. DOM/02_document对象_属性.html +46 -0
  26. DOM/03_document对象_方法1_获取元素.html +56 -0
  27. DOM/03_document对象_方法2_创建元素.html +45 -0
  28. DOM/04_Element对象_属性.html +37 -0
  29. DOM/05_Element对象_有关位置的属性1.html +56 -0
  30. DOM/05_Element对象_有关位置的属性2.html +35 -0
  31. DOM/05_Element对象_有关位置的属性3.html +34 -0
  32. DOM/05_Element对象_有关位置的属性4.html +47 -0
  33. DOM/06_Element对象_方法.html +44 -0
  34. DOM/07_Attribute属性.html +35 -0
  35. DOM/08_Text节点.html +34 -0
  36. DOM/09_DocumentFragment节点.html +33 -0
  37. DOM/10_Node节点属性1_nodeName.html +28 -0
  38. DOM/10_Node节点属性2_nodeValue.html +23 -0
  39. DOM/10_Node节点属性3_textContent.html +25 -0
  40. DOM/10_Node节点属性4_nextSibling.html +35 -0
  41. DOM/10_Node节点属性5_previousSibling.html +25 -0
  42. DOM/10_Node节点属性6_parentNode.html +29 -0
  43. DOM/10_Node节点属性7_firstChild_lastChild.html +35 -0
  44. DOM/10_Node节点属性8_childNodes.html +36 -0
  45. DOM/11_Node节点方法1_appendChild.html +41 -0
  46. DOM/11_Node节点方法2_hasChildNodes.html +41 -0
  47. DOM/11_Node节点方法3_cloneNode.html +29 -0
  48. DOM/11_Node节点方法4_insertBefore.html +36 -0
  49. DOM/11_Node节点方法5_removeChild.html +51 -0
  50. DOM/11_Node节点方法6_replaceChild.html +33 -0
.gitattributes CHANGED
@@ -38,3 +38,7 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
38
  03_JavaScript基本语法.ipynb filter=lfs diff=lfs merge=lfs -text
39
  04_DOM模型.ipynb filter=lfs diff=lfs merge=lfs -text
40
  08_jQuery.ipynb filter=lfs diff=lfs merge=lfs -text
 
 
 
 
 
38
  03_JavaScript基本语法.ipynb filter=lfs diff=lfs merge=lfs -text
39
  04_DOM模型.ipynb filter=lfs diff=lfs merge=lfs -text
40
  08_jQuery.ipynb filter=lfs diff=lfs merge=lfs -text
41
+ css/47_小米官网项目/13.小米官网项目.pdf filter=lfs diff=lfs merge=lfs -text
42
+ css/48_响应式项目/14.响应式项目.pdf filter=lfs diff=lfs merge=lfs -text
43
+ html/18_HTML5新增元素/data/games.mp4 filter=lfs diff=lfs merge=lfs -text
44
+ html/18_HTML5新增元素/data/returns.mp3 filter=lfs diff=lfs merge=lfs -text
BOM/.DS_Store ADDED
Binary file (8.2 kB). View file
 
BOM/01_BOM概述.html ADDED
@@ -0,0 +1,22 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Document</title>
8
+ </head>
9
+ <body>
10
+
11
+ <!-- <script>
12
+
13
+ console.log("Hello");
14
+
15
+ </script> -->
16
+
17
+ <!-- <script src="./js/index01.js"></script> -->
18
+
19
+ <script src="//unpkg.com/swiper/swiper-bundle.min.js"></script>
20
+
21
+ </body>
22
+ </html>
BOM/02_script工作原理.html ADDED
@@ -0,0 +1,18 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Document</title>
8
+ <!-- <script src="./js/index.js" defer></script> -->
9
+ <script src="./js/hello.js" async></script>
10
+ <script src="./js/index02.js" async></script>
11
+
12
+ </head>
13
+ <body>
14
+
15
+ <div id="box">盒子</div>
16
+
17
+ </body>
18
+ </html>
BOM/03_回流和重绘.html ADDED
@@ -0,0 +1,43 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Document</title>
8
+ <style>
9
+
10
+ #box{
11
+ width: 100px;
12
+ height: 100px;
13
+ background-color: red;
14
+ }
15
+
16
+ #box.current-box{
17
+ background-color: green;
18
+ width: 200px;
19
+ }
20
+
21
+ </style>
22
+ </head>
23
+ <body>
24
+
25
+ <div id="box"></div>
26
+ <button id="btn">按钮</button>
27
+
28
+ <script>
29
+
30
+
31
+ var btn = document.getElementById("btn");
32
+ var box = document.getElementById("box");
33
+
34
+ btn.onclick = function(){
35
+ // box.style.width = "200px" // 回流:开支更高
36
+ // box.style.background = "green"; // 重绘:开支相对比低一些
37
+ box.className = "current-box"
38
+ }
39
+
40
+ </script>
41
+
42
+ </body>
43
+ </html>
BOM/04_定时器1_setTimeout.html ADDED
@@ -0,0 +1,66 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
7
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
8
+ <title>Document</title>
9
+ </head>
10
+
11
+ <body>
12
+
13
+ <script>
14
+
15
+ // var timer = setTimeout(function(){
16
+ // console.log("hello");
17
+ // },5000)
18
+
19
+ // // this在不被改变的情况下，在定时器中指向window
20
+
21
+ // var username = "sxt";
22
+ // var user = {
23
+ // username:"itbaizhan",
24
+ // getName:function(){
25
+ // setTimeout(function(){
26
+ // // this指向window
27
+ // console.log(this.username);
28
+ // },1000)
29
+ // }
30
+ // }
31
+
32
+ // user.getName(); // sxt
33
+
34
+
35
+ // function logHello(){
36
+ // console.log("hello");
37
+ // }
38
+ // var timer = setTimeout(logHello,3000)
39
+
40
+
41
+ // var username = "sxt";
42
+ // var user = {
43
+ // username: "itbaizhan",
44
+ // getName: function () {
45
+ // var that = this;
46
+ // setTimeout(function () {
47
+ // // this指向window
48
+ // console.log(that.username);
49
+ // }, 1000)
50
+ // }
51
+ // }
52
+
53
+ // user.getName(); // itbaizhan
54
+
55
+
56
+ // var timer = setTimeout(function(){
57
+ // console.log("hello");
58
+ // },3000)
59
+
60
+ // clearTimeout(timer);
61
+
62
+ </script>
63
+
64
+ </body>
65
+
66
+ </html>
BOM/04_定时器2_setInterval.html ADDED
@@ -0,0 +1,55 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
7
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
8
+ <title>Document</title>
9
+ <style>
10
+ #box {
11
+ width: 100px;
12
+ height: 100px;
13
+ background: red;
14
+ }
15
+ </style>
16
+ </head>
17
+
18
+ <body>
19
+
20
+ <div id="box"></div>
21
+
22
+ <script>
23
+
24
+ setInterval(function () {
25
+ console.log("hello");
26
+ }, 1000)
27
+
28
+ </script>
29
+
30
+ <script>
31
+
32
+ var box = document.getElementById('box');
33
+ var opacity = 1;
34
+ var timer = setInterval(function () {
35
+ opacity -= 0.05;
36
+ if (opacity <= 0) {
37
+ // 清除定时器
38
+ clearInterval(timer)
39
+ } else {
40
+ box.style.opacity = opacity
41
+ }
42
+ }, 30)
43
+
44
+
45
+
46
+ setInterval(function () {
47
+ console.log(new Date().toLocaleTimeString());
48
+ }, 1000)
49
+
50
+
51
+ </script>
52
+
53
+ </body>
54
+
55
+ </html>
BOM/04_定时器3_实操.html ADDED
@@ -0,0 +1,34 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Document</title>
8
+ <link rel="stylesheet" href="./css/tab.css">
9
+ </head>
10
+ <body>
11
+
12
+ <div class="container">
13
+ <div class="up">
14
+ <ul>
15
+ <li class="select"><a href="#">百度</a></li>
16
+ <li><a href="#">新浪</a></li>
17
+ <li><a href="#">淘宝</a></li>
18
+ <li><a href="#">京东</a></li>
19
+ <li><a href="#">网易</a></li>
20
+ </ul>
21
+ </div>
22
+ <div class="down">
23
+ <div class="div-select">百度内容</div>
24
+ <div>新浪内容</div>
25
+ <div>淘宝内容</div>
26
+ <div>京东内容</div>
27
+ <div>网易内容</div>
28
+ </div>
29
+ </div>
30
+
31
+ <script src="./js/tab.js"></script>
32
+
33
+ </body>
34
+ </html>
BOM/04_定时器4_防抖debounce.html ADDED
@@ -0,0 +1,82 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
7
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
8
+ <title>Document</title>
9
+ <style>
10
+ .box {
11
+ height: 300px;
12
+ }
13
+ </style>
14
+ </head>
15
+
16
+ <body>
17
+
18
+ <div class="box"></div>
19
+ <div class="box"></div>
20
+ <div class="box"></div>
21
+ <div class="box"></div>
22
+ <div class="box"></div>
23
+ <div class="box"></div>
24
+
25
+ <script>
26
+
27
+ // var timer = null;
28
+ // function debounce() {
29
+ // if (timer) {
30
+ // clearTimeout(timer)
31
+ // }
32
+ // timer = setTimeout(function () {
33
+ // var scollTop = document.documentElement.scrollTop;
34
+ // console.log(scollTop);
35
+ // },300)
36
+ // }
37
+
38
+ // window.onscroll = function () {
39
+ // debounce();
40
+ // }
41
+
42
+ /**
43
+ * 1. 定时器
44
+ * 2. 闭包
45
+ * 3. 事件机制
46
+ * 事件在注册的时候，只执行一次，后续的不间断的触发事件，是在执行事件里面的内容
47
+ * 不是在一直触发事件函数
48
+ */
49
+
50
+
51
+ function debounce(fn, delay) {
52
+ var timer = null; // 局部作用域，不污染全局命名空间
53
+ return function () {
54
+ if (timer) {
55
+ clearTimeout(timer)
56
+ }
57
+ timer = setTimeout(fn, delay)
58
+ }
59
+ }
60
+
61
+ function backTop() {
62
+ var scollTop = document.documentElement.scrollTop;
63
+ console.log(scollTop);
64
+ }
65
+
66
+ window.onscroll = debounce(backTop, 300)
67
+
68
+ // window.onscroll = function () {
69
+ // var result = debounce(backTop, 300);
70
+ // result();
71
+ // }
72
+
73
+ // // 只有第一次注册的时候执行一次，不间断执行的是里面的函数体
74
+ // div.onclick = function(){
75
+ // console.log("111");
76
+ // }
77
+
78
+ </script>
79
+
80
+ </body>
81
+
82
+ </html>
BOM/04_定时器5_节流throttle.html ADDED
@@ -0,0 +1,56 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
7
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
8
+ <title>Document</title>
9
+ <style>
10
+ .box {
11
+ height: 300px;
12
+ }
13
+ </style>
14
+ </head>
15
+
16
+ <body>
17
+
18
+ <div class="box">内哦给你</div>
19
+ <div class="box">内哦给你</div>
20
+ <div class="box">内哦给你</div>
21
+ <div class="box">内哦给你</div>
22
+ <div class="box">内哦给你</div>
23
+ <div class="box">内哦给你</div>
24
+
25
+
26
+ <script>
27
+
28
+ function throttle(fn, delay) {
29
+ var valid = true;
30
+
31
+ return function () {
32
+ if(!valid){
33
+ // 暂不接客
34
+ return false; // 后面的代码不在执行
35
+ }
36
+ valid = false;
37
+ setTimeout(function () {
38
+ fn();
39
+ valid = true;
40
+ },delay)
41
+ }
42
+ }
43
+
44
+ function backTop() {
45
+ var scollHeight = document.documentElement.scrollTop;
46
+ console.log(scollHeight);
47
+ }
48
+
49
+ window.onscroll = throttle(backTop,1000);
50
+
51
+
52
+ </script>
53
+
54
+ </body>
55
+
56
+ </html>
BOM/05_window对象1_属性.html ADDED
@@ -0,0 +1,49 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Document</title>
8
+ <style>
9
+
10
+ .box{
11
+ height: 300px;
12
+ }
13
+
14
+ </style>
15
+ </head>
16
+ <body>
17
+
18
+ <div class="box"></div>
19
+ <div class="box"></div>
20
+ <div class="box"></div>
21
+ <div class="box"></div>
22
+ <div class="box"></div>
23
+ <div class="box"></div>
24
+
25
+ <script>
26
+
27
+ (function(){
28
+ var username = "itbaizhan";
29
+ })();
30
+
31
+ console.log(window);
32
+
33
+ console.log(window.screenX);
34
+ console.log(window.screenY);
35
+
36
+ console.log(window.innerHeight);
37
+ console.log(window.innerWidth);
38
+
39
+ console.log(window.outerHeight);
40
+ console.log(window.outerWidth);
41
+
42
+ console.log(window.scrollX);
43
+ console.log(window.scrollY);
44
+
45
+
46
+ </script>
47
+
48
+ </body>
49
+ </html>
BOM/05_window对象2_方法.html ADDED
@@ -0,0 +1,31 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Document</title>
8
+ </head>
9
+ <body>
10
+
11
+ <script>
12
+
13
+ alert("我是对话框");
14
+
15
+ var result = prompt("您的年龄",19);
16
+ console.log(result);
17
+
18
+
19
+ var ok = confirm("最近还好么?");
20
+ if(ok){
21
+ console.log("挺好的，但不如我好");
22
+ }else{
23
+ console.log("过的不好");
24
+ }
25
+
26
+ window.open("https://itbaizhan.com")
27
+
28
+ </script>
29
+
30
+ </body>
31
+ </html>
BOM/06_Navigator对象.html ADDED
@@ -0,0 +1,32 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Document</title>
8
+ </head>
9
+ <body>
10
+
11
+ <script>
12
+
13
+ var ua = navigator.userAgent.toLocaleLowerCase();
14
+ if(ua.indexOf("mobi") > -1){
15
+ console.log("手机浏览器");
16
+ }else{
17
+ console.log("电脑浏览器");
18
+ }
19
+
20
+ for(var i = 0;i<navigator.plugins.length;i++){
21
+ console.log(navigator.plugins[i].name);
22
+ console.log(navigator.plugins[i].description);
23
+ }
24
+
25
+ console.log(navigator.platform);
26
+ console.log(navigator.language);
27
+ console.log(navigator.languages);
28
+
29
+ </script>
30
+
31
+ </body>
32
+ </html>
BOM/07_Screen对象.html ADDED
@@ -0,0 +1,28 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Document</title>
8
+ </head>
9
+ <body>
10
+
11
+ <script>
12
+
13
+ console.log(window.screen);
14
+ // 1920 * 1080
15
+ console.log(window.screen.height);
16
+ console.log(window.screen.width);
17
+
18
+ console.log(window.screen.availHeight);
19
+ console.log(window.screen.availWidth);
20
+
21
+ console.log(window.screen.pixelDepth);
22
+
23
+ console.log(window.screen.orientation.type);
24
+
25
+ </script>
26
+
27
+ </body>
28
+ </html>
BOM/08_History对象1.html ADDED
@@ -0,0 +1,25 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Document</title>
8
+ </head>
9
+ <body>
10
+
11
+ <h3>Hello</h3>
12
+ <button id="btn">回退</button>
13
+
14
+ <script>
15
+
16
+ var btn = document.getElementById("btn");
17
+ btn.onclick = function(){
18
+ // history.back();
19
+ history.go(-1)
20
+ }
21
+
22
+ </script>
23
+
24
+ </body>
25
+ </html>
BOM/08_History对象2.html ADDED
@@ -0,0 +1,24 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Document</title>
8
+ </head>
9
+ <body>
10
+
11
+ <a href="./hello.html">百战</a>
12
+ <button id="btn">前进</button>
13
+ <script>
14
+
15
+ var btn = document.getElementById("btn");
16
+ btn.onclick = function(){
17
+ // history.forward();
18
+ history.go(1)
19
+ }
20
+
21
+ </script>
22
+
23
+ </body>
24
+ </html>
BOM/09_封装cookie.html ADDED
@@ -0,0 +1,53 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Document</title>
8
+ </head>
9
+ <body>
10
+
11
+ <h3>学习Cookie</h3>
12
+
13
+ <script>
14
+
15
+
16
+ /*
17
+ 1. 设置
18
+ 2. 获取
19
+ 3. 删除
20
+ */
21
+
22
+ var cookie = {
23
+ // name value 过期时间
24
+ set:function(name,value,days){
25
+ var d = new Date();
26
+ d.setDate(d.getDate() + days); // 设置过期时间 name=itbaizhan;
27
+ document.cookie = name + "=" + value +";expires=" + d+";";
28
+ },
29
+ // 读取cookie，知道你要读取的是那个cookie
30
+ get:function(name){
31
+ var cookiesArr = document.cookie.split("; ")
32
+ for(var i = 0;i< cookiesArr.length;i++){
33
+ var newArr = cookiesArr[i].split("=");
34
+ if(name === newArr[0]){
35
+ return newArr[1]
36
+ }
37
+ }
38
+ },
39
+ // 干掉哪一个cookie
40
+ unset:function(name){
41
+ this.set(name,"",-1)
42
+ }
43
+ }
44
+
45
+ // cookie.set("sxt","iwen",30);
46
+ // console.log(cookie.get("name"));;
47
+ cookie.unset("name");
48
+
49
+
50
+ </script>
51
+
52
+ </body>
53
+ </html>
BOM/10_apply_call_bind函数.html ADDED
@@ -0,0 +1,90 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
7
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
8
+ <title>Document</title>
9
+ </head>
10
+
11
+ <body>
12
+
13
+ <script>
14
+
15
+ /*
16
+ 回顾this指向
17
+ 1. 事件中的this，指向当前DOM元素
18
+ 2. 对象中的this，指向当前调用者
19
+ 3. 闭包中的this，指向window
20
+ 4. 定时器中的this，指向window
21
+ 5. call、apply和bind改变this指向
22
+ */
23
+
24
+ // var user = {
25
+ // name:"itbaizhan",
26
+ // getName:function(){
27
+ // console.log(this.name);
28
+ // }
29
+ // }
30
+
31
+
32
+ // var username = "sxt"
33
+ // function getFn(){
34
+ // var username = "itbaizhan"
35
+ // return function(){
36
+ // console.log(this.username);
37
+ // }
38
+ // }
39
+
40
+ // var name = "sxt"
41
+ // var user = {
42
+ // name:"itbaizhan",
43
+ // getName:function(){
44
+ // setTimeout(function(){
45
+ // console.log(this.name);
46
+ // })
47
+ // }
48
+ // }
49
+
50
+ // user.getName()
51
+ </script>
52
+
53
+ <script>
54
+
55
+ var user = {
56
+ name: "itbaizhan",
57
+ getName: function (city) {
58
+ console.log(this.name,city);
59
+ }
60
+ }
61
+
62
+ var people = {
63
+ name: "sxt"
64
+ }
65
+
66
+ // user.getName(); // 指向user
67
+ // this指向，传递的额外参数
68
+ // user.getName.call(people); // sxt
69
+ // user.getName.apply(people); // sxt
70
+ // user.getName.bind(people)(); // sxt
71
+ // 由此得出结论，bind 返回的是一个新的函数，你必须调用它才会被执行
72
+
73
+ // call和apply的区别
74
+ // call和apply接受的参数是不同的
75
+ // user.getName.call(people,"北京"); // sxt 北京
76
+ // user.getName.apply(people, ["北京"]); // sxt 北京
77
+
78
+
79
+ var arr = [10,20,30];
80
+ console.log(Math.max.apply(window,arr)); // null === window
81
+
82
+ console.log(Math.max.call(window,10,20,30));
83
+ console.log(Math.max(10,20,30));
84
+
85
+
86
+ </script>
87
+
88
+ </body>
89
+
90
+ </html>
BOM/css/tab.css ADDED
@@ -0,0 +1,60 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ *{
2
+ margin: 0;
3
+ padding: 0;
4
+ }
5
+
6
+ body{
7
+ background-color: gray;
8
+ }
9
+
10
+ .container{
11
+ width: 300px;
12
+ height: 200px;
13
+ background-color: #fff;
14
+ margin: 100px auto;
15
+ }
16
+
17
+ .container .up{
18
+ height: 50px;
19
+ width: 100%;
20
+ }
21
+
22
+ .container .up ul{
23
+ list-style-type: none;
24
+ text-align: center;
25
+ }
26
+
27
+ .container .up ul li{
28
+ float: left;
29
+ width: 60px;
30
+ height: 50px;
31
+ line-height: 50px;
32
+ }
33
+
34
+ .container .up ul li a{
35
+ text-decoration: none;
36
+ font-size: 20px;
37
+ }
38
+
39
+ .select{
40
+ border-bottom: 2px solid orange;
41
+ }
42
+
43
+ .container .down{
44
+ height: 100px;
45
+ width: 100%;
46
+ position: relative;
47
+ text-align: center;
48
+ }
49
+
50
+ .container .down div{
51
+ position:absolute;
52
+ line-height: 100px;
53
+ height: 100%;
54
+ width: 100%;
55
+ display: none;
56
+ }
57
+
58
+ .container .down div.div-select{
59
+ display: block;
60
+ }
BOM/js/hello.js ADDED
@@ -0,0 +1 @@
 
 
1
+ var hello = "hello"
BOM/js/index01.js ADDED
@@ -0,0 +1 @@
 
 
1
+ console.log("hello");
BOM/js/index02.js ADDED
@@ -0,0 +1,3 @@
 
 
 
 
1
+ var box = document.getElementById("box");
2
+ console.log(box);
3
+ console.log(hello);
BOM/js/tab.js ADDED
@@ -0,0 +1,31 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ // 1. 获取到页面所有的元素
2
+ var lis = document.querySelector(".up").querySelectorAll("li");
3
+ var divs = document.querySelector(".down").querySelectorAll("div");
4
+ var timer = null;
5
+ var delay = 300;
6
+
7
+
8
+ // 闭包帮我们保存变量到内存中
9
+ for (var i = 0; i < lis.length; i++) {
10
+ (function (i) {
11
+ lis[i].onmouseenter = function () {
12
+ timer = setTimeout(function () {
13
+ for (var j = 0; j < lis.length; j++) {
14
+ lis[j].removeAttribute("class");
15
+ divs[j].removeAttribute("class")
16
+ }
17
+ lis[i].setAttribute("class", "select")
18
+ divs[i].setAttribute("class", "div-select")
19
+ },delay)
20
+ }
21
+ }(i))
22
+ lis[i].onmouseleave = function(){
23
+ clearTimeout(timer)
24
+ }
25
+ }
26
+ /**
27
+ * 1. 获取元素
28
+ * 2. 闭包
29
+ * 3. 事件：鼠标滑动事件
30
+ * 4. 属性的操作：添加、删除
31
+ */
DOM/01_DOM概述.html ADDED
@@ -0,0 +1,26 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Document</title>
8
+ </head>
9
+ <body>
10
+
11
+ <!-- 注释 -->
12
+
13
+ <div>
14
+ <p class="ptext">文档</p>
15
+ </div>
16
+
17
+ <script>
18
+
19
+ console.log(document);
20
+ console.log(document.nodeType); // 9
21
+ console.log(Node.DOCUMENT_NODE);
22
+
23
+ </script>
24
+
25
+ </body>
26
+ </html>
DOM/02_document对象_属性.html ADDED
@@ -0,0 +1,46 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Document</title>
8
+ </head>
9
+ <body>
10
+
11
+ <form></form>
12
+ <form></form>
13
+ <form></form>
14
+
15
+ <img src="./images/banner.png" alt="">
16
+ <img src="./images/girl.png" alt="">
17
+
18
+
19
+ <script src="./js/index.js"></script>
20
+ <script>
21
+
22
+ // console.log(document.doctype);
23
+ // console.log(document.documentElement); // 根节点：html
24
+ // console.log(document.head);
25
+ // console.log(document.body);
26
+
27
+ // console.log(document.forms);
28
+
29
+ // console.log(document.images);
30
+
31
+ // var images = document.images;
32
+ // for(var i = 0;i<images.length;i++){
33
+ // if(images[i].src === "file:///E:/itbaizhan/WEBCode/02.%E7%AC%AC%E4%BA%8C%E9%98%B6%E6%AE%B5%EF%BC%9AJavaScript/6.%E7%AC%AC%E5%85%AD%E7%AB%A0%EF%BC%9ADOM%E6%A8%A1%E5%9E%8B/02_document%E5%AF%B9%E8%B1%A1_%E5%B1%9E%E6%80%A7/images/banner.png"){
34
+ // console.log("页面存在banner");
35
+ // }
36
+ // }
37
+
38
+ // console.log(document.scripts);
39
+ console.log(document.domain);
40
+
41
+ </script>
42
+
43
+
44
+
45
+ </body>
46
+ </html>
DOM/03_document对象_方法1_获取元素.html ADDED
@@ -0,0 +1,56 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Document</title>
8
+ </head>
9
+ <body>
10
+
11
+ <div class="box1 box">box1</div>
12
+ <div class="box2 box">box2</div>
13
+ <div class="box3 box">box3</div>
14
+
15
+ <div name="container"></div>
16
+ <div name="container"></div>
17
+ <p name="container"></p>
18
+
19
+ <div id="root"></div>
20
+
21
+ <script>
22
+
23
+ // var divs = document.getElementsByTagName("div");
24
+ // // 给元素设置内容:innerHTML
25
+ // console.log(divs[1]);
26
+ // divs[1].innerHTML = "new box2"
27
+
28
+ // var allElements = document.getElementsByTagName('*');
29
+ // console.log(allElements);
30
+
31
+
32
+ // 使用率及广泛
33
+ // var divs = document.getElementsByClassName("box");
34
+ // console.log(divs);
35
+ // divs[0].innerHTML = "new box1"
36
+
37
+ // var divs = document.getElementsByName("container");
38
+ // console.log(divs);
39
+
40
+ // var root = document.getElementById("root")
41
+ // console.log(root); // 单一的元素，不再是集合
42
+ // root.innerHTML = "根元素"
43
+
44
+ // var box = document.querySelector(".box"); // css选择器
45
+ // console.log(box);
46
+
47
+ // var box = document.querySelectorAll(".box"); // css选择器
48
+ // console.log(box);
49
+
50
+ // var root = document.querySelector("#root"); // css选择器
51
+ // console.log(root);
52
+
53
+ </script>
54
+
55
+ </body>
56
+ </html>
DOM/03_document对象_方法2_创建元素.html ADDED
@@ -0,0 +1,45 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Document</title>
8
+ <style>
9
+
10
+ .container{
11
+ color:red;
12
+ }
13
+
14
+ </style>
15
+ </head>
16
+ <body>
17
+
18
+ <script>
19
+
20
+ var body = document.getElementsByTagName("body"); // 集合
21
+
22
+ var div = document.createElement("div");
23
+ var text = document.createTextNode("动态创建标签")
24
+ var className = document.createAttribute("class");
25
+
26
+ className.value = "container"
27
+
28
+ div.appendChild(text);
29
+ div.setAttributeNode(className);
30
+
31
+ // appendChild向父元素添加内容
32
+ body[0].appendChild(div);
33
+
34
+
35
+ var img = document.createElement("img");
36
+ // img.src = "images/girl.png"
37
+ var imageSrc = document.createAttribute("src");
38
+ imageSrc.value = "images/girl.png";
39
+ img.setAttributeNode(imageSrc);
40
+
41
+ body[0].appendChild(img)
42
+ </script>
43
+
44
+ </body>
45
+ </html>
DOM/04_Element对象_属性.html ADDED
@@ -0,0 +1,37 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Document</title>
8
+ </head>
9
+ <body>
10
+
11
+ <div id="root" class="c1 container">容器</div>
12
+
13
+ <script>
14
+
15
+ var root = document.getElementById("root");
16
+ // console.log(root.id); // root
17
+ // root.id = "container";
18
+ // console.log(root.id); // container
19
+
20
+ // console.log(root.className); // c1
21
+ // root.classList.add("active","error");
22
+ // root.classList.remove("error");
23
+ // console.log(root.classList.contains("containers"));;
24
+ // root.classList.toggle("c1");
25
+
26
+ // console.log(root.innerHTML);
27
+ // root.innerHTML = "<a href='http://itbaizhan.com'>百战程序员</a>";
28
+
29
+ // console.log(root.innerText);
30
+ // root.innerText = "新的容器";
31
+
32
+ root.innerText = "<a href='http://itbaizhan.com'>百战程序员</a>";
33
+
34
+ </script>
35
+
36
+ </body>
37
+ </html>
DOM/05_Element对象_有关位置的属性1.html ADDED
@@ -0,0 +1,56 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
7
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
8
+ <title>Document</title>
9
+ <style>
10
+ * {
11
+ padding: 0;
12
+ margin: 0;
13
+ }
14
+
15
+ .box {
16
+ width: 100px;
17
+ height: 100px;
18
+ background: red;
19
+ border: 20px solid yellow;
20
+ padding: 10px;
21
+ margin: 10px;
22
+ }
23
+ </style>
24
+ </head>
25
+
26
+ <body>
27
+
28
+ <div class="box" id="box"></div>
29
+
30
+ <script>
31
+
32
+ var box = document.getElementById("box");
33
+
34
+ // console.log(box.clientHeight);
35
+ // console.log(box.clientWidth);
36
+
37
+ // 获取到视口的高度(可视区域，浏览器的窗口)
38
+ // documentElement整个浏览器的可视窗口对象
39
+ // console.log(document.documentElement.clientHeight);
40
+ // console.log(document.documentElement.clientWidth);
41
+
42
+ // // 网页的高度
43
+ // console.log(document.body.clientHeight);
44
+ // console.log(document.body.clientWidth)
45
+
46
+ // console.log(box.clientLeft); // 10
47
+ // console.log(box.clientTop); // 10
48
+
49
+ // console.log(box.scrollHeight);
50
+ // console.log(box.scrollWidth);
51
+
52
+ </script>
53
+
54
+ </body>
55
+
56
+ </html>
DOM/05_Element对象_有关位置的属性2.html ADDED
@@ -0,0 +1,35 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Document</title>
8
+ <style>
9
+
10
+ .box{
11
+ height: 500px;
12
+ width: 4000px;
13
+ }
14
+
15
+ </style>
16
+ </head>
17
+ <body>
18
+
19
+ <div class="box">第一部分内容</div>
20
+ <div class="box">第二部分内容</div>
21
+ <div class="box">第三部分内容</div>
22
+ <div class="box">第四部分内容</div>
23
+
24
+ <script>
25
+ // 用户行为介入，咱们称他为事件
26
+ window.addEventListener("scroll",function(){
27
+ // console.log(document.documentElement.scrollTop);// 上下滚动
28
+ console.log(document.documentElement.scrollLeft);// 左右滚动
29
+ })
30
+
31
+
32
+ </script>
33
+
34
+ </body>
35
+ </html>
DOM/05_Element对象_有关位置的属性3.html ADDED
@@ -0,0 +1,34 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Document</title>
8
+ <style>
9
+
10
+ .box{
11
+ width: 100px;
12
+ height: 100px;
13
+ background: red;
14
+ border: 10px solid yellow;
15
+ padding: 10px;
16
+ margin: 10px;
17
+ }
18
+
19
+ </style>
20
+ </head>
21
+ <body>
22
+
23
+ <div class="box" id="box"></div>
24
+
25
+ <script>
26
+
27
+ var box = document.getElementById("box");
28
+ console.log(box.offsetHeight); // 140
29
+ console.log(box.offsetWidth); // 140
30
+
31
+ </script>
32
+
33
+ </body>
34
+ </html>
DOM/05_Element对象_有关位置的属性4.html ADDED
@@ -0,0 +1,47 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Document</title>
8
+ <style>
9
+ /* *{
10
+ padding: 0;
11
+ margin: 0;
12
+ } */
13
+
14
+ .parent{
15
+ width: 200px;
16
+ height: 200px;
17
+ background: yellow;
18
+ /* position: relative; */
19
+ }
20
+
21
+ .box{
22
+ width: 100px;
23
+ height: 100px;
24
+ background: red;
25
+ position: relative;
26
+ left: 50px;
27
+ top: 50px;
28
+ }
29
+
30
+ </style>
31
+ </head>
32
+ <body>
33
+
34
+ <div class="parent">
35
+ <div class="box" id="box"></div>
36
+ </div>
37
+
38
+ <script>
39
+
40
+ var box = document.getElementById("box");
41
+ console.log(box.offsetLeft); // 0
42
+ console.log(box.offsetTop); // 0
43
+
44
+ </script>
45
+
46
+ </body>
47
+ </html>
DOM/06_Element对象_方法.html ADDED
@@ -0,0 +1,44 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Document</title>
8
+ <style>
9
+
10
+ .root{
11
+ width: 100px;
12
+ height: 100px;
13
+ background: red;
14
+ position: relative;
15
+ left: 100px;
16
+ top: 100px;
17
+ }
18
+
19
+ </style>
20
+ </head>
21
+ <body>
22
+
23
+ <input type="text" id="search">
24
+
25
+ <div id="box">我是子元素</div>
26
+
27
+ <div class="root" id="root"></div>
28
+
29
+ <script>
30
+
31
+ var search = document.getElementById("search");
32
+ search.focus(); // 获得焦点
33
+ search.blur(); // 失去焦点了
34
+
35
+ var box = document.getElementById("box");
36
+ box.remove();
37
+
38
+ var root = document.getElementById("root");
39
+ console.log(root.getBoundingClientRect().top);
40
+
41
+ </script>
42
+
43
+ </body>
44
+ </html>
DOM/07_Attribute属性.html ADDED
@@ -0,0 +1,35 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
7
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
8
+ <title>Document</title>
9
+ </head>
10
+
11
+ <body>
12
+
13
+ <a href="http://itbaizhan.com" data-itbaizhan="itbaizhan" id="it">百战程序员</a>
14
+
15
+ <script>
16
+
17
+ var it = document.getElementById("it");
18
+ // console.log(it.getAttribute("href")); // http://itbaizhan.com
19
+ // console.log(it.setAttribute("title","百战程序员"));
20
+ // console.log(it.hasAttribute("class")); // true // false
21
+ // if(!it.hasAttribute("class")){
22
+ // it.setAttribute("class","itbaizhan")
23
+ // }
24
+
25
+ // it.removeAttribute("title")
26
+
27
+ console.log(it.dataset.itbaizhan); // itbaizhan
28
+ it.dataset.itbaizhan = "bjsxt"
29
+
30
+
31
+ </script>
32
+
33
+ </body>
34
+
35
+ </html>
DOM/08_Text节点.html ADDED
@@ -0,0 +1,34 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Document</title>
8
+ </head>
9
+ <body>
10
+
11
+ <p>Hello World</p>
12
+
13
+ <script>
14
+
15
+ var p1 = document.querySelector("p").firstChild;
16
+ // p.data = "Hello World!"
17
+ // console.log(p.length); // 12
18
+ // p.appendData("!!!"); // appendChild -> Node
19
+
20
+ // p.deleteData(5,7); // Hello
21
+ // p.insertData(6,"iwen ");
22
+ // p.replaceData(6,6,"itbaizhan")
23
+ // console.log(p.substringData(6,5));; // World
24
+ // p.remove(); // 清空子节点，删除子节点
25
+
26
+
27
+ // var p2 = document.querySelector("p");
28
+ // console.log(p2.innerHTML = "");
29
+
30
+
31
+ </script>
32
+
33
+ </body>
34
+ </html>
DOM/09_DocumentFragment节点.html ADDED
@@ -0,0 +1,33 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Document</title>
8
+ </head>
9
+ <body>
10
+
11
+ <ul></ul>
12
+
13
+ <script>
14
+
15
+ var docFrag = document.createDocumentFragment();
16
+
17
+ var li = document.createElement("li");
18
+ li.innerHTML = "测试列表";
19
+
20
+ var li2 = document.createElement("li");
21
+ li2.innerHTML = "测试列表2"
22
+
23
+ docFrag.appendChild(li);
24
+ docFrag.appendChild(li2);
25
+
26
+
27
+ var ul = document.querySelector("ul");
28
+ ul.appendChild(docFrag);
29
+
30
+ </script>
31
+
32
+ </body>
33
+ </html>
DOM/10_Node节点属性1_nodeName.html ADDED
@@ -0,0 +1,28 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Document</title>
8
+ </head>
9
+ <body>
10
+
11
+ <div id="box">盒子</div>
12
+
13
+ <script>
14
+
15
+ console.log(document.nodeName); // #document
16
+
17
+ var box = document.getElementById("box");
18
+ console.log(box.nodeName); // DIV
19
+ console.log(box.getAttributeNode("id").nodeName); // id
20
+ console.log(box.firstChild.nodeName); // #text
21
+
22
+ var docFrag = document.createDocumentFragment();
23
+ console.log(docFrag.nodeName); // #document-fragment
24
+
25
+ </script>
26
+
27
+ </body>
28
+ </html>
DOM/10_Node节点属性2_nodeValue.html ADDED
@@ -0,0 +1,23 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Document</title>
8
+ </head>
9
+ <body>
10
+
11
+ <div id="box">我是一个盒子</div>
12
+
13
+ <script>
14
+
15
+ var box = document.getElementById("box");
16
+ console.log(box.nodeValue); // null
17
+ console.log(box.firstChild.nodeValue); // 我是一个盒子
18
+ box.firstChild.nodeValue = "欢迎来到百战程序员";
19
+
20
+ </script>
21
+
22
+ </body>
23
+ </html>
DOM/10_Node节点属性3_textContent.html ADDED
@@ -0,0 +1,25 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Document</title>
8
+ </head>
9
+ <body>
10
+
11
+ <div id="box">WelCome:<span>iwen</span>,百战平台</div>
12
+ <div id="root"></div>
13
+ <script>
14
+
15
+ var box = document.querySelector("#box");
16
+ console.log(box.textContent); // WelCome:iwen,百战平台
17
+ console.log(box.innerHTML); // WelCome:<span>iwen</span>,百战平台
18
+
19
+ var root = document.querySelector("#root");
20
+ root.textContent = "新的数据";
21
+
22
+ </script>
23
+
24
+ </body>
25
+ </html>
DOM/10_Node节点属性4_nextSibling.html ADDED
@@ -0,0 +1,35 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Document</title>
8
+ </head>
9
+ <body>
10
+
11
+ <div id="box1">box1</div><div id="box2">box2</div>
12
+
13
+ <div id="root">
14
+ <p>内容1</p>
15
+ <p>内容2</p>
16
+ <p>内容3</p>
17
+ </div>
18
+
19
+ <script>
20
+
21
+ // var box1 = document.getElementById("box1");
22
+ // console.log(box1.nextSibling); // <div id="box2">box2</div>
23
+
24
+ var rootP = document.getElementById("root").firstChild;
25
+ while(rootP !== null){
26
+ if(rootP.nodeName !== "#text"){
27
+ console.log(rootP.nodeName); // P
28
+ }
29
+ rootP = rootP.nextSibling;
30
+ }
31
+
32
+ </script>
33
+
34
+ </body>
35
+ </html>
DOM/10_Node节点属性5_previousSibling.html ADDED
@@ -0,0 +1,25 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Document</title>
8
+ </head>
9
+ <body>
10
+
11
+ <div id="box1">box1</div><div id="box2">box2</div>
12
+
13
+ <script>
14
+
15
+ var box2 = document.getElementById("box2");
16
+ var box1 = document.getElementById("box1")
17
+ console.log(box2.previousSibling); // <div id="box1">box1</div>
18
+ console.log(box1); // <div id="box1">box1</div>
19
+ console.log(box1 === box2.previousSibling); // true
20
+
21
+
22
+ </script>
23
+
24
+ </body>
25
+ </html>
DOM/10_Node节点属性6_parentNode.html ADDED
@@ -0,0 +1,29 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Document</title>
8
+ </head>
9
+ <body>
10
+
11
+ <div id="parent">
12
+ <p id="content">我是内容</p>
13
+ </div>
14
+
15
+ <script>
16
+
17
+ var content = document.getElementById("content");
18
+ // console.log(content.parentNode);
19
+
20
+ // 自己删除自己的行为
21
+ if(content.parentNode){
22
+ content.parentNode.removeChild(content);
23
+ }
24
+
25
+
26
+ </script>
27
+
28
+ </body>
29
+ </html>
DOM/10_Node节点属性7_firstChild_lastChild.html ADDED
@@ -0,0 +1,35 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Document</title>
8
+ </head>
9
+ <body>
10
+
11
+ <div id="root"><p>内容1</p><p>内容2</p><p>内容3</p></div>
12
+
13
+ <p id="text">
14
+ <span>last span</span>
15
+ </p>
16
+
17
+
18
+ <script>
19
+
20
+ var root = document.getElementById("root");
21
+ console.log(root.firstChild); // <p>内容1</p>
22
+ console.log(root.lastChild); // <p>内容3</p>
23
+
24
+ if(root.firstChild != null){
25
+ console.log("额外操作");
26
+ }else{
27
+ console.log("空的容器");
28
+ }
29
+
30
+ var text = document.getElementById("text");
31
+ console.log(text.lastChild.nodeName);
32
+ </script>
33
+
34
+ </body>
35
+ </html>
DOM/10_Node节点属性8_childNodes.html ADDED
@@ -0,0 +1,36 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Document</title>
8
+ </head>
9
+ <body>
10
+
11
+ <div id="root">
12
+ <ul>
13
+ <li>列表1</li>
14
+ <li>列表2</li>
15
+ <li>列表3</li>
16
+ </ul>
17
+ <p>文本信息1</p>
18
+ <p>文本信息2</p>
19
+ </div>
20
+
21
+ <script>
22
+
23
+ var root = document.getElementById("root");
24
+ console.log(root.childNodes[3]); // 第一个p标签
25
+
26
+ for(var i = 0;i<root.childNodes.length;i++){
27
+ if(root.childNodes[i].nodeName === "P"){
28
+ console.log(root.childNodes[i]); // 所有的P标签
29
+ root.childNodes[i].innerHTML = "新的数据" + i
30
+ }
31
+ }
32
+
33
+ </script>
34
+
35
+ </body>
36
+ </html>
DOM/11_Node节点方法1_appendChild.html ADDED
@@ -0,0 +1,41 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Document</title>
8
+ </head>
9
+ <body>
10
+
11
+ <div class="box"></div>
12
+
13
+ <p id="text">hello</p>
14
+
15
+ <ul id="list"></ul>
16
+
17
+ <script>
18
+
19
+ var box = document.querySelector(".box");
20
+ var text = document.getElementById("text");
21
+
22
+ box.appendChild(text);
23
+
24
+ var span = document.createElement("span");
25
+ span.innerHTML = "hello span";
26
+ text.appendChild(span);
27
+
28
+
29
+ var list = document.getElementById("list");
30
+ for(var i = 0;i<10;i++){
31
+ var li = document.createElement("li");
32
+ li.innerHTML = "列表" + (i+1);
33
+ list.appendChild(li)
34
+ }
35
+
36
+
37
+
38
+ </script>
39
+
40
+ </body>
41
+ </html>
DOM/11_Node节点方法2_hasChildNodes.html ADDED
@@ -0,0 +1,41 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Document</title>
8
+ </head>
9
+ <body>
10
+
11
+ <div id="root">
12
+ <p>Hello</p>
13
+ <h3>标题</h3>
14
+ </div>
15
+
16
+ <script>
17
+
18
+ var root = document.getElementById("root");
19
+ // console.log(root.hasChildNodes());
20
+ // if(root.hasChildNodes()){
21
+ // console.log("存在子元素");
22
+ // }else{
23
+ // console.log("不存在子元素");
24
+ // }
25
+
26
+ if(root.hasChildNodes()){
27
+ for(var i = 0;i<root.childNodes.length;i++){
28
+ if(root.childNodes[i].nodeName !== "#text"){
29
+ console.log(root.childNodes[i]);
30
+ }
31
+ }
32
+ }else{
33
+ var p = document.createElement("p");
34
+ p.innerHTML = "文本数据";
35
+ root.appendChild(p);
36
+ }
37
+
38
+ </script>
39
+
40
+ </body>
41
+ </html>
DOM/11_Node节点方法3_cloneNode.html ADDED
@@ -0,0 +1,29 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Document</title>
8
+ </head>
9
+ <body>
10
+
11
+ <div id="root"></div>
12
+
13
+ <ul id="list">
14
+ <li>列表1</li>
15
+ <li>列表2</li>
16
+ <li>列表3</li>
17
+ </ul>
18
+
19
+ <script>
20
+
21
+ var root = document.getElementById("root");
22
+ var list = document.getElementById("list");
23
+ var result = list.cloneNode(true);
24
+ root.appendChild(result)
25
+
26
+ </script>
27
+
28
+ </body>
29
+ </html>
DOM/11_Node节点方法4_insertBefore.html ADDED
@@ -0,0 +1,36 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Document</title>
8
+ </head>
9
+ <body>
10
+
11
+ <div id="root">
12
+ <p id="text1">我是文本</p>
13
+ </div>
14
+
15
+ <p id="text3">clone文本</p>
16
+
17
+ <script>
18
+
19
+ var root = document.getElementById("root");
20
+ var text1 = document.getElementById("text1");
21
+
22
+ var text2 = document.createElement("p");
23
+ text2.innerHTML = "新的插入内容";
24
+
25
+ root.insertBefore(text2,text1);// 将text2插入到text1的前面
26
+
27
+ var text3 = document.getElementById("text3");
28
+
29
+ var result = text3.cloneNode(true);
30
+ root.insertBefore(result,text1);
31
+
32
+ </script>
33
+
34
+
35
+ </body>
36
+ </html>
DOM/11_Node节点方法5_removeChild.html ADDED
@@ -0,0 +1,51 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Document</title>
8
+ </head>
9
+ <body>
10
+
11
+ <div id="root">
12
+ <p>Hello</p>
13
+ </div>
14
+
15
+ <ul id="list">
16
+ <li>内容1</li>
17
+ <li>内容2</li>
18
+ <li>内容3</li>
19
+ <li>内容4</li>
20
+ </ul>
21
+
22
+ <script>
23
+
24
+ // var root = document.getElementById("root");
25
+ // // var p = document.getElementsByTagName("p")[0];
26
+ // var p = document.querySelector("p");
27
+
28
+ // // root.removeChild(p);
29
+ // // console.log(p.parentNode);
30
+ // p.parentNode.removeChild(p);
31
+
32
+ var list = document.getElementById("list");
33
+
34
+ console.log(list.childNodes);
35
+
36
+ // 1. 总节点是9个:#text 和 li节点
37
+ // 2. 我们的在循环的时候，在做删除操作,每次删除，你的list.childNodes.length在减少
38
+ // 3. 每次都是删除第一个元素：list.childNodes[0]
39
+
40
+ var len = list.childNodes.length;
41
+
42
+ for(var i = 0;i<len;i++){
43
+ list.removeChild(list.childNodes[0])
44
+ }
45
+
46
+
47
+
48
+ </script>
49
+
50
+ </body>
51
+ </html>
DOM/11_Node节点方法6_replaceChild.html ADDED
@@ -0,0 +1,33 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Document</title>
8
+ </head>
9
+ <body>
10
+
11
+ <div id="root">
12
+ <h3 id="title">标题</h3>
13
+ <h3 id="content">文本信息</h3>
14
+ </div>
15
+
16
+ <script>
17
+
18
+ var root = document.getElementById("root");
19
+ var content = document.getElementById("content");
20
+
21
+ // 创建新节点
22
+ var newContent = document.createElement("p");
23
+ newContent.textContent = "新的内容";
24
+
25
+ // var reuslt = root.replaceChild(newContent,content);
26
+ // console.log(reuslt); // <h3 id="content">文本信息</h3>
27
+
28
+ content.parentNode.replaceChild(newContent,content)
29
+
30
+ </script>
31
+
32
+ </body>
33
+ </html>