Hugging Face's logo

zxy0307
/
Python_07_front_end

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

Upload 90 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. JS正则表达式/01_正则表达式初步使用.html +40 -0
  2. JS正则表达式/02_字符串方法.html +30 -0
  3. JS正则表达式/03_匹配规则1_字面量字符.html +25 -0
  4. JS正则表达式/03_匹配规则2_元字符.html +39 -0
  5. JS正则表达式/03_匹配规则3_转义符.html +27 -0
  6. JS正则表达式/03_匹配规则4_字符类.html +43 -0
  7. JS正则表达式/03_匹配规则5_预定义模式和重复类.html +41 -0
  8. JS正则表达式/03_匹配规则6_量词符和贪婪模式.html +46 -0
  9. JS正则表达式/03_匹配规则7_修饰符和组匹配.html +41 -0
  10. JS正则表达式/04_正则表达式的应用.html +73 -0
  11. JS面向对象/01_生成对象.html +27 -0
  12. JS面向对象/02_new命令.html +51 -0
  13. JS面向对象/03_prototype原型1_构造函数的缺陷.html +46 -0
  14. JS面向对象/03_prototype原型2_原型属性与方法.html +42 -0
  15. JS面向对象/03_prototype原型3_原型属性的覆盖.html +32 -0
  16. JS面向对象/03_prototype原型4_Array实例.html +30 -0
  17. JS面向对象/04_实例方法与静态方法.html +60 -0
  18. JS面向对象/05_实例属性与静态属性.html +37 -0
  19. JS面向对象/06__proto__属性.html +27 -0
  20. JS面向对象/07_constructor属性.html +55 -0
  21. JS面向对象/08_原型链.html +46 -0
  22. JS面向对象/09_instanceof运算符.html +42 -0
  23. JS面向对象/10_Object对象的方法1_getPrototypeOf.html +31 -0
  24. JS面向对象/10_Object对象的方法2_setPrototypeOf.html +30 -0
  25. JS面向对象/10_Object对象的方法3_create.html +31 -0
  26. JS面向对象/10_Object对象的方法4_create进阶.html +38 -0
  27. JS面向对象/10_Object对象的方法5_getOwnPropertyNames.html +21 -0
  28. JS面向对象/10_Object对象的方法6_hasOwnProperty.html +17 -0
  29. JS面向对象/11_对象的继承.html +57 -0
  30. JS面向对象/12_多重继承.html +58 -0
  31. JS面向对象/13_严格模式.html +56 -0
  32. JS面向对象/14_实操1_选项卡.html +66 -0
  33. JS面向对象/14_实操2_选项卡_面向对象.html +124 -0
  34. JS面向对象/14_实操3_选项卡_面向对象_继承.html +120 -0
  35. PyEcharts.ipynb +0 -0
  36. Vue2/01_Vue快速上手.html +34 -0
  37. Vue2/02_Vue模板语法.html +40 -0
  38. Vue2/03_数据绑定.html +35 -0
  39. Vue2/04_MVVM模型.html +46 -0
  40. Vue2/05_数据代理1_回顾defineProperty.html +38 -0
  41. Vue2/05_数据代理2_概念.html +24 -0
  42. Vue2/05_数据代理3_Vue中的数据代理.html +28 -0
  43. Vue2/06_事件处理1_基本使用.html +43 -0
  44. Vue2/06_事件处理2_事件修饰符.html +100 -0
  45. Vue2/06_事件处理3_键盘事件.html +37 -0
  46. Vue2/07_计算属性1_姓名案例_插值语法实现.html +31 -0
  47. Vue2/07_计算属性2_姓名案例_methods实现.html +36 -0
  48. Vue2/07_计算属性3_姓名案例_计算属性实现.html +49 -0
  49. Vue2/07_计算属性4_姓名案例_计算属性简写.html +37 -0
  50. Vue2/08_监视属性1_天气案例.html +36 -0
JS正则表达式/01_正则表达式初步使用.html ADDED
@@ -0,0 +1,40 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
+ /*
14
+ 创建正则：
15
+ 1. 字面量：开始和结尾是斜杠 //
16
+ 2. 构造函数：new关键字
17
+ 执行正则：
18
+ 1. test();
19
+ 2. exec();
20
+ 0:"it" : 正则的匹配规则
21
+ index:代表从那个位置开始匹配
22
+ input:代表匹配的原字符串
23
+ */
24
+
25
+ var reg1 = /bai/;
26
+ var reg2 = new RegExp("xyz");
27
+
28
+ var name = "itbaizhan";
29
+
30
+ var result1 = reg1.test(name);
31
+
32
+ var result2 = reg1.exec(name);
33
+ console.log(result2); // ['it', index: 0, input: 'itbaizhan']
34
+
35
+
36
+
37
+ </script>
38
+
39
+ </body>
40
+ </html>
JS正则表达式/02_字符串方法.html ADDED
@@ -0,0 +1,30 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
+
14
+ var name = "itbaizhan";
15
+ var reg = /baizhan/;
16
+
17
+ var longName = "sxt,it,baizhan,learn";
18
+
19
+
20
+ console.log(name.search(reg));
21
+ console.log(name.match(reg));
22
+ console.log(name.replace(reg,"sxt"));
23
+ console.log(longName.split(/,/,2)); // ['sxt', 'it']
24
+
25
+
26
+
27
+ </script>
28
+
29
+ </body>
30
+ </html>
JS正则表达式/03_匹配规则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
+ <script>
12
+
13
+ var name = "itbaizhan"
14
+ var str = "it"
15
+
16
+ console.log(name.indexOf("it")); // 匹配成功返回位置，匹配失败返回-1
17
+
18
+ var reg = /it/;
19
+ console.log(reg.test(name)); // true false
20
+
21
+
22
+ </script>
23
+
24
+ </body>
25
+ </html>
JS正则表达式/03_匹配规则2_元字符.html ADDED
@@ -0,0 +1,39 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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 reg = /s.t/;
14
+ console.log(reg.test("sxt"));
15
+ console.log(reg.test("s-t"));
16
+ console.log(reg.test("s.t"));
17
+ console.log(reg.test("sxxt")); // 做不到 false
18
+
19
+
20
+ var reg1 = /^it/;
21
+ console.log(reg1.test("itbaizhan"));
22
+
23
+ var reg2 = /it$/;
24
+ console.log(reg2.test("sxtit"));
25
+
26
+ var reg3 = /^it$/;
27
+ console.log(reg3.test("itbaizhanit")); // 不能的
28
+ console.log(reg3.test("it")); // 特别注意
29
+
30
+ var reg4 = /cat|dog/;
31
+ console.log(reg4.test("doghello"));
32
+
33
+ console.log(/^it.sxt$/.test("it-sxt"));
34
+
35
+
36
+ </script>
37
+
38
+ </body>
39
+ </html>
JS正则表达式/03_匹配规则3_转义符.html ADDED
@@ -0,0 +1,27 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
+ // 我的需求是匹配字符串"^it"
14
+ var reg = /\^it/;
15
+ console.log(reg.test("^it"));
16
+
17
+ var reg1 = /1\+1/;
18
+ console.log(reg1.test("1+1"));
19
+
20
+ var reg2 = new RegExp("1\\+1");
21
+ console.log(reg2.test("1+1"));
22
+
23
+
24
+ </script>
25
+
26
+ </body>
27
+ </html>
JS正则表达式/03_匹配规则4_字符类.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
+ </head>
9
+ <body>
10
+
11
+ <script>
12
+
13
+ var reg = /[abc]/;
14
+ console.log(reg.test("itbaizhan"));
15
+ console.log(reg.test("sxt"));
16
+
17
+ var reg1 = /[^abc]/;
18
+ console.log(reg1.test("sxt"));
19
+ console.log(reg1.test("apple"));
20
+ console.log(reg1.test("abcapple"));
21
+ console.log(reg1.test("aabbcc")); // false
22
+
23
+ var reg2 = /[a-f]/;
24
+ console.log(reg2.test("gtyu"));
25
+
26
+ var reg3 = /[a-z]/
27
+ var reg4 = /[0-9]/
28
+ var reg5 = /[A-Z]/
29
+
30
+ console.log(reg4.test("199"));
31
+ console.log(reg4.test("1zbc"));
32
+
33
+ var reg6 = /[0-9a-zA-Z]/;
34
+ console.log(reg6.test("0123abcdABCVD"));
35
+
36
+ var reg7 = /[1-31]/; // 1,2,3
37
+ console.log(reg7.test("123456"));
38
+
39
+
40
+ </script>
41
+
42
+ </body>
43
+ </html>
JS正则表达式/03_匹配规则5_预定义模式和重复类.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
+ <script>
12
+
13
+ console.log(/\d/.test(100));
14
+ console.log(/\d/.test("100"));
15
+ console.log(/\d/.test("100hello"));
16
+ console.log(/\d/.test("hello")); // false
17
+
18
+ console.log(/\D/.test("100"));
19
+ console.log(/\D/.test("100hello"));
20
+ console.log(/\D/.test("hello"));
21
+
22
+
23
+ console.log(/\w/.test("$%^*_"));
24
+
25
+ console.log(/\W/.test("100helo_^&*"));
26
+
27
+ console.log(/\s/.test("asdf23fd\t"));
28
+ console.log(/\S/.test("\t\n"));
29
+
30
+ console.log(/\bhello/.test("asdfhello,test-hello"));
31
+ console.log(/\Bhello/.test("shelloshello"));
32
+
33
+ console.log(/lo{2}k/.test("look"));
34
+ console.log(/lo{2,}k/.test("loook"));
35
+ console.log(/lo{2,4}k/.test("loooook"));
36
+
37
+
38
+ </script>
39
+
40
+ </body>
41
+ </html>
JS正则表达式/03_匹配规则6_量词符和贪婪模式.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
+ <script>
12
+
13
+ /*
14
+ ?:出现{0,1}
15
+ *:出现{0,}
16
+ +:出现{1,}
17
+ */
18
+
19
+ console.log(/t?est/.test("test"));
20
+ console.log(/t?est/.test("est"));
21
+ console.log(/t?est/.test("tttest"));
22
+ console.log(/^t?est/.test("tttest")); // false
23
+
24
+ console.log(/t*est/.test("est"));
25
+ console.log(/t*est/.test("test"));
26
+ console.log(/t*est/.test("ttest"));
27
+
28
+ console.log(/t+est/.test("est")); // false
29
+ console.log(/t+est/.test("test"));
30
+ console.log(/t+est/.test("ttest"));
31
+
32
+ console.log(/a+/.exec("aaa")); // ["aaa"]
33
+ console.log(/a*/.exec("aaa")); // ["aaa"]
34
+
35
+ console.log(/a+?/.exec("aaa")); // ["a"]
36
+ console.log(/a*?/.exec("aaa")); // [""]
37
+
38
+
39
+ // 标识符匹配规则：数字 字母 下划线 美元符号
40
+ /^[a-zA-Z\d_\$]{1,}$/.test("hello")
41
+
42
+
43
+ </script>
44
+
45
+ </body>
46
+ </html>
JS正则表达式/03_匹配规则7_修饰符和组匹配.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
+ <script>
12
+
13
+ console.log("abba".replace(/b/,"m")); // amba
14
+ console.log("abba".replace(/b/g,"m")); // amma
15
+
16
+ var name = "abba";
17
+ var reg = /b/g;
18
+ console.log(reg.test(name)); // true
19
+ console.log(reg.test(name)); // true
20
+ console.log(reg.test(name)); // false
21
+
22
+ var names = "SXT";
23
+ var reg1 = /sxt/i; // 忽略大小写
24
+
25
+ console.log(reg1.test(names)); // false
26
+
27
+ console.log(/world$/.test("world\n"));
28
+ console.log(/world$/m.test("world\n"));
29
+
30
+ var name2 = "ABBA";
31
+ var reg2 = /b/ig;
32
+ console.log(name2.replace(reg2,"m")); // AmmA
33
+
34
+ var name3 = "freefree";
35
+ var reg3 = /(free)+/g;
36
+ console.log(reg3.exec(name3));
37
+
38
+ </script>
39
+
40
+ </body>
41
+ </html>
JS正则表达式/04_正则表达式的应用.html ADDED
@@ -0,0 +1,73 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
+ .success{
11
+ color: green;
12
+ display: none;
13
+ }
14
+
15
+ .error{
16
+ color: red;
17
+ display: none;
18
+ }
19
+
20
+ </style>
21
+ </head>
22
+ <body>
23
+
24
+
25
+ <input type="text" placeholder="请输入身份证" id="sfz">
26
+ <p class="success" id="success">验证通过</p>
27
+ <p class="error" id="error">验证不通过</p>
28
+
29
+ <input type="text" placeholder="请输入手机号" id="phone">
30
+
31
+ <script>
32
+
33
+ /*
34
+ 身份证规则：
35
+ 1. 老身份证：15位全数字
36
+ 2. 新身份证：18位全数字 17位数字+x
37
+
38
+
39
+ 手机号规则：
40
+ 1. 第一个数字一定是1
41
+ 2. 第二个数字：3，4，5，6，7，8，9
42
+
43
+ */
44
+
45
+ var sfz = document.getElementById("sfz");
46
+ var success = document.getElementById("success");
47
+ var error = document.getElementById("error")
48
+ var phone = document.getElementById("phone");
49
+ var sfzReg = /^[0-9]{15}$|^[0-9]{18}$|^[0-9]{17}x$/i;
50
+ var phoneReg = /^1(3|4|5|6|7|8|9)[0-9]{9}$/;
51
+
52
+ sfz.oninput = function(){
53
+ if(sfzReg.test(sfz.value)){
54
+ success.style.display = "block"
55
+ error.style.display = "none"
56
+ }else{
57
+ error.style.display = "block"
58
+ success.style.display = "none"
59
+ }
60
+ }
61
+
62
+ phone.oninput = function(){
63
+ if(phoneReg.test(phone.value)){
64
+ console.log("success");
65
+ }else{
66
+ console.log("error");
67
+ }
68
+ }
69
+
70
+ </script>
71
+
72
+ </body>
73
+ </html>
JS面向对象/01_生成对象.html ADDED
@@ -0,0 +1,27 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
+ // 构造函数
14
+ function Person(){
15
+ this.name = "张三";
16
+ this.age = 30;
17
+ }
18
+
19
+ var person = new Person();
20
+ console.log(person.name);
21
+ console.log(person.age);
22
+
23
+
24
+ </script>
25
+
26
+ </body>
27
+ </html>
JS面向对象/02_new命令.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
+ <script>
12
+ /*
13
+ 理解面向对象
14
+ 1. 为什么要使用面向对象
15
+ 1. 易维护
16
+ 2. 可复用
17
+ 3. 可扩展
18
+ 4. 灵活性
19
+
20
+ 2. 面向对象的代码编写
21
+ 1. 理解面向对象的模板(构造函数)
22
+ 2. 通过模板生成一个实例对象(new关键字)
23
+
24
+ */
25
+
26
+ /*
27
+ this关键字：
28
+ 1. 事件中this指向DOM元素
29
+ 2. 闭包中的this指向window
30
+ 3. 定时器中的this指向window
31
+ 4. 对象中的this指向调用者
32
+ 5. 改变this指向：call\apply\bind
33
+ 6. 构造函数中的this，指向当前实例对象
34
+ */
35
+
36
+
37
+ function Person(name,age){
38
+ this.name = name;
39
+ this.age = age;
40
+ }
41
+
42
+ var zhangsan = new Person("张三",20);
43
+ var lisi = new Person("李四",22);
44
+
45
+ console.log(zhangsan);
46
+ console.log(lisi);
47
+
48
+ </script>
49
+
50
+ </body>
51
+ </html>
JS面向对象/03_prototype原型1_构造函数的缺陷.html ADDED
@@ -0,0 +1,46 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
+ function Person(name, age) {
16
+ // 属性
17
+ this.name = name;
18
+ this.age = age;
19
+
20
+ // 方法
21
+ this.sayHello = function () {
22
+ console.log("hello");
23
+ }
24
+ }
25
+
26
+ var zhangsan = new Person("张三", 20);
27
+ var lisi = new Person("李四", 30)
28
+
29
+ zhangsan.sayHello(); // hello
30
+ lisi.sayHello(); // hello
31
+
32
+ // 两个实例对象调用同一个sayHello,两个sayHello是不是一样的
33
+ console.log(zhangsan.sayHello === lisi.sayHello); // false
34
+
35
+
36
+ // prototype原型
37
+ console.log(Person.prototype);
38
+
39
+
40
+
41
+
42
+ </script>
43
+
44
+ </body>
45
+
46
+ </html>
JS面向对象/03_prototype原型2_原型属性与方法.html ADDED
@@ -0,0 +1,42 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
+ function Person(name,age){
14
+ this.name = name;
15
+ this.age = age;
16
+ }
17
+
18
+ // 放在原型上
19
+ Person.prototype.sayHello = function(){
20
+ console.log("hello");
21
+ }
22
+ Person.prototype.job = "it"
23
+
24
+
25
+ var zhangsan = new Person("zhangsan",30)
26
+ var lisi = new Person("lisi",20)
27
+
28
+ zhangsan.sayHello()
29
+ lisi.sayHello()
30
+
31
+ console.log(zhangsan.sayHello === lisi.sayHello); // true
32
+
33
+ Person.prototype.job = "销售"
34
+
35
+ console.log(zhangsan.job);
36
+ console.log(lisi.job);
37
+ // console.log(zhangsan.job === lisi.job); // true
38
+
39
+ </script>
40
+
41
+ </body>
42
+ </html>
JS面向对象/03_prototype原型3_原型属性的覆盖.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
+ function Person(){
14
+ // this.job = "it"
15
+ }
16
+
17
+ Person.prototype.job = "销售";
18
+
19
+ var p1 = new Person();
20
+ p1.job = "it";
21
+
22
+ var p2 = new Person();
23
+
24
+ console.log(p1.job);
25
+ console.log(p2.job);
26
+
27
+
28
+
29
+ </script>
30
+
31
+ </body>
32
+ </html>
JS面向对象/03_prototype原型4_Array实例.html ADDED
@@ -0,0 +1,30 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
+ // 数组:push方法挂在到原型上的
14
+
15
+ // Array.prototype.push = function(){
16
+
17
+ // }
18
+
19
+ // var arr1 = [];
20
+ // var arr2 = [];
21
+
22
+ // arr1.push();
23
+ // arr2.push();
24
+
25
+ // console.log(arr1.push === arr2.push);
26
+
27
+ </script>
28
+
29
+ </body>
30
+ </html>
JS面向对象/04_实例方法与静态方法.html ADDED
@@ -0,0 +1,60 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
+ /*
14
+ 实例：
15
+ 实例方法
16
+ 实例属性
17
+ 静态：
18
+ 静态方法
19
+ 静态属性
20
+
21
+ */
22
+
23
+ function Person(name,age){
24
+ this.name = name;
25
+ this.age = age;
26
+ }
27
+
28
+ // 实例方法
29
+ Person.prototype.sayHello = function(){
30
+ console.log("hello");
31
+ }
32
+
33
+ // 静态方法
34
+ Person.sayBey = function(){
35
+ console.log("bey");
36
+ }
37
+
38
+ // 静态方法的调用
39
+ Person.sayBey()
40
+
41
+ // 实例方法的调用
42
+ var p = new Person("zhangsan",30);
43
+ p.sayHello();
44
+
45
+ // Math静态方法
46
+ Math.abs();
47
+
48
+
49
+ // 数组实例方法
50
+ var arr = [];
51
+ arr.push();
52
+
53
+
54
+
55
+
56
+
57
+ </script>
58
+
59
+ </body>
60
+ </html>
JS面向对象/05_实例属性与静态属性.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
+ <script>
12
+
13
+ function Person(name){
14
+ this.name = name
15
+ }
16
+
17
+
18
+ // 实例属性
19
+ Person.prototype.hello = "hello";
20
+
21
+ // 静态属性
22
+ Person.bey = "bey";
23
+
24
+
25
+ // 实例属性调用
26
+ var p = new Person("张撒旦");
27
+ console.log(p.hello);
28
+
29
+
30
+ // 静态属性调用
31
+ console.log(Person.bey);
32
+
33
+
34
+ </script>
35
+
36
+ </body>
37
+ </html>
JS面向对象/06__proto__属性.html ADDED
@@ -0,0 +1,27 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
+ function Person(){}
14
+
15
+ var p = new Person();
16
+
17
+ console.log(Person.prototype);
18
+
19
+ console.log(p.__proto__); // 对象的原型
20
+
21
+ console.log(Person.prototype === p.__proto__); // true
22
+
23
+
24
+ </script>
25
+
26
+ </body>
27
+ </html>
JS面向对象/07_constructor属性.html ADDED
@@ -0,0 +1,55 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
+ // function Person(name){
14
+ // this.name = name
15
+ // }
16
+
17
+
18
+ // // 获得到原型
19
+ // console.log(Person.prototype.constructor);
20
+
21
+ var person;
22
+ (function(){
23
+
24
+ function Person(){
25
+ this.name = "张三";
26
+ this.age = 20;
27
+ }
28
+
29
+ Person.prototype.getName = function(){
30
+ console.log(this.name);
31
+ }
32
+
33
+ person = new Person();
34
+
35
+ })();
36
+
37
+
38
+ person.getName()
39
+ // 问题：现在这个库缺少了一个方法，getAge的方法
40
+
41
+ // Person.prototype.getAge = function(){
42
+
43
+ // }
44
+
45
+ person.constructor.prototype.getAge = function(){
46
+ console.log(this.age);
47
+ }
48
+
49
+ person.getAge();
50
+
51
+ </script>
52
+
53
+
54
+ </body>
55
+ </html>
JS面向对象/08_原型链.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
+ <script>
12
+
13
+ // 在JS中，一切皆对象
14
+
15
+ // function Person(){}
16
+
17
+ // console.log(Person.prototype);
18
+ // console.log(Person.prototype.__proto__.__proto__);
19
+
20
+ // console.log(Object.prototype);
21
+
22
+
23
+
24
+ // var arr = [];
25
+ // console.log(arr.toString);
26
+ // console.log("".toString);
27
+ // console.log({}.toString);
28
+ // console.log(Math.toString);
29
+ // console.log(Date.toString);
30
+
31
+ // console.log(Object.prototype);
32
+
33
+ function Person(){}
34
+
35
+ // Person.prototype.toString = function(){
36
+ // console.log("哈哈哈");
37
+ // }
38
+
39
+
40
+ var p = new Person();
41
+ console.log(p.toString);
42
+
43
+ </script>
44
+
45
+ </body>
46
+ </html>
JS面向对象/09_instanceof运算符.html ADDED
@@ -0,0 +1,42 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
+ function Person(){}
14
+
15
+ var p = new Person();
16
+
17
+ var p1 = [];
18
+
19
+ console.log(p instanceof Person); // true:当前p是Person的实例对象
20
+ console.log(p1 instanceof Person); // false:p1不是Person的实例对象
21
+
22
+ /*
23
+ typeof:检测基本数据类型：number、string、boolean
24
+ isArray:检测数组:true，false
25
+ instanceof:检测对象:true,false
26
+ */
27
+
28
+ // intanceof会检测整个原型链
29
+ console.log(p instanceof Object); // true
30
+ console.log(p1 instanceof Object); // true
31
+
32
+ // var num = 10;// instanceof:只能检测对象
33
+ // console.log(num instanceof Number);
34
+
35
+ var arr = [];
36
+ console.log(arr instanceof Array);
37
+
38
+
39
+ </script>
40
+
41
+ </body>
42
+ </html>
JS面向对象/10_Object对象的方法1_getPrototypeOf.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
+ function Person(){}
14
+
15
+ Person.prototype.getName = function(){}
16
+
17
+ var p = new Person()
18
+
19
+ // 获取实例对象的原型对象
20
+ console.log(Object.getPrototypeOf(p));
21
+
22
+ console.log(Person.prototype);
23
+
24
+ // 不推荐使用
25
+ console.log(p.__proto__);
26
+
27
+
28
+ </script>
29
+
30
+ </body>
31
+ </html>
JS面向对象/10_Object对象的方法2_setPrototypeOf.html ADDED
@@ -0,0 +1,30 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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 sxt = {};
14
+ var itbaizhan = {
15
+ teacher:"老师",
16
+ getAge:function(){
17
+ console.log(13);
18
+ }
19
+ }
20
+
21
+ Object.setPrototypeOf(sxt,itbaizhan);
22
+
23
+ sxt.getAge()
24
+ console.log(sxt.teacher);
25
+
26
+
27
+ </script>
28
+
29
+ </body>
30
+ </html>
JS面向对象/10_Object对象的方法3_create.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
+ var sxt = {
14
+ age:13,
15
+ teacher:function(){
16
+ console.log("很多老师");
17
+ }
18
+ }
19
+
20
+ var itbaizhan = Object.create(sxt);
21
+
22
+ sxt.age = 20;
23
+
24
+ console.log(itbaizhan.age);
25
+ itbaizhan.teacher()
26
+
27
+
28
+ </script>
29
+
30
+ </body>
31
+ </html>
JS面向对象/10_Object对象的方法4_create进阶.html ADDED
@@ -0,0 +1,38 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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 sxt = {
16
+ java: {
17
+ value: "全体系"
18
+ },
19
+ web: {
20
+ value: '大前端'
21
+ }
22
+ }
23
+
24
+ var itbaizhan = Object.create(sxt,{
25
+ python:{
26
+ value:"全方向"
27
+ }
28
+ });
29
+
30
+ console.log(itbaizhan.java.value);
31
+ console.log(itbaizhan.python);
32
+
33
+
34
+ </script>
35
+
36
+ </body>
37
+
38
+ </html>
JS面向对象/10_Object对象的方法5_getOwnPropertyNames.html ADDED
@@ -0,0 +1,21 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
+ console.log(Object.getOwnPropertyNames(Array));
16
+
17
+ </script>
18
+
19
+ </body>
20
+
21
+ </html>
JS面向对象/10_Object对象的方法6_hasOwnProperty.html ADDED
@@ -0,0 +1,17 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Document</title>
7
+ </head>
8
+ <body>
9
+
10
+ <script>
11
+
12
+ console.log(Array.hasOwnProperty("length")); // true
13
+ console.log(Array.hasOwnProperty("toString")); // false
14
+
15
+ </script>
16
+ </body>
17
+ </html>
JS面向对象/11_对象的继承.html ADDED
@@ -0,0 +1,57 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
+ function Person(name,age){
14
+ this.name = name;
15
+ this.age = age;
16
+ }
17
+
18
+ Person.prototype.getName = function(){
19
+ console.log(this.name);
20
+ }
21
+
22
+ Person.prototype.getAge = function(){
23
+ console.log(this.age);
24
+ }
25
+
26
+
27
+
28
+
29
+ function Student(name,age,learn){
30
+ // 基础属性：调用父类的构造函数
31
+ Person.call(this,name,age);
32
+ this.learn = learn;
33
+ }
34
+ // 继承父类的方法
35
+ for(var p in Person.prototype){
36
+ Student.prototype[p] = Person.prototype[p];
37
+ }
38
+
39
+ Student.prototype.getLearn = function(){
40
+ console.log(this.learn);
41
+ }
42
+
43
+ // 就近原则
44
+ Student.prototype.getName = function(){
45
+ console.log("姓名："+this.name);
46
+ }
47
+
48
+ var student = new Student("张三",19,"it");
49
+ student.getAge()
50
+ student.getName()
51
+ student.getLearn()
52
+
53
+
54
+ </script>
55
+
56
+ </body>
57
+ </html>
JS面向对象/12_多重继承.html ADDED
@@ -0,0 +1,58 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
+
14
+ function Sxt(){
15
+ this.hello = "hello"
16
+ }
17
+
18
+ Sxt.prototype.getHello = function(){
19
+ console.log("Hello");
20
+ }
21
+
22
+
23
+ function Itbaizhan(){
24
+ this.world = "world"
25
+ }
26
+
27
+ Itbaizhan.prototype.getWorld = function(){
28
+ console.log("World");
29
+ }
30
+
31
+
32
+ function Sum(){
33
+ Sxt.call(this);
34
+ Itbaizhan.call(this);
35
+ }
36
+ // 继承Sxt
37
+ // Sum.prototype = Object.create(Sxt.prototype);
38
+ for(var p in Sxt.prototype){
39
+ Sum.prototype[p] = Sxt.prototype[p];
40
+ }
41
+ // 继承Itbaizhan
42
+ Object.assign(Sum.prototype,Itbaizhan.prototype);
43
+
44
+ // 指定constructor
45
+ Sum.prototype.constructor = Sum;
46
+
47
+ console.log(Sum.prototype);
48
+
49
+ var s = new Sum();
50
+ console.log(s.hello);
51
+ console.log(s.world);
52
+ s.getHello();
53
+ s.getWorld();
54
+
55
+ </script>
56
+
57
+ </body>
58
+ </html>
JS面向对象/13_严格模式.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
+ <script>
12
+ "use strict"
13
+ // 所有的代码都是严格模式
14
+ console.log("hello");
15
+
16
+ </script>
17
+
18
+ <script>
19
+ function add(a,b){
20
+ "use strict"
21
+ // 函数体内部是严格模式
22
+ return a + b
23
+ }
24
+
25
+ add(10,20)
26
+ </script>
27
+
28
+ <script>
29
+ "use strict"
30
+ var eval = "20";
31
+ console.log(eval);
32
+
33
+ </script>
34
+
35
+ <script>
36
+
37
+ function add(){
38
+ "use strict"
39
+ num = 10;
40
+ console.log(num);
41
+ }
42
+
43
+ console.log(num);
44
+ add();
45
+ </script>
46
+
47
+ <script>
48
+
49
+ // Math.min.apply(null,arr);
50
+
51
+ </script>
52
+
53
+
54
+
55
+ </body>
56
+ </html>
JS面向对象/14_实操1_选项卡.html ADDED
@@ -0,0 +1,66 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
+ #tabBox input{
11
+ background: #f1f1f1;
12
+ border: 1ps solid #ff0000;
13
+ }
14
+
15
+ #tabBox .active{
16
+ background: #e9f212;
17
+ }
18
+
19
+ #tabBox div{
20
+ display: none;
21
+ width: 300px;
22
+ height: 250px;
23
+ padding: 10px;
24
+ background: #e9f212;
25
+ border: 1px solid #ff0000;
26
+ }
27
+
28
+ </style>
29
+ <script>
30
+
31
+ window.onload = function(){
32
+ var tabBox = document.getElementById("tabBox");
33
+ var tabBtn = tabBox.getElementsByTagName("input");
34
+ var tabDiv = tabBox.getElementsByTagName("div");
35
+
36
+ for(var i = 0;i<tabBtn.length;i++){
37
+ tabBtn[i].index = i;
38
+ tabBtn[i].onclick = function(){
39
+ for(var j = 0;j<tabBtn.length;j++){
40
+ tabBtn[j].className = "";
41
+ tabDiv[j].style.display = "none";
42
+ }
43
+ this.className = "active";
44
+ tabDiv[this.index].style.display = "block"
45
+ }
46
+ }
47
+
48
+ }
49
+
50
+ </script>
51
+ </head>
52
+ <body>
53
+
54
+
55
+ <div id="tabBox">
56
+ <input type="button" value="web" class="active">
57
+ <input type="button" value="Java">
58
+ <input type="button" value="Python">
59
+ <div style="display: block;">React、Vue</div>
60
+ <div>SpringBoot、SpringMVC</div>
61
+ <div>flask</div>
62
+ </div>
63
+
64
+
65
+ </body>
66
+ </html>
JS面向对象/14_实操2_选项卡_面向对象.html ADDED
@@ -0,0 +1,124 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
+ .tab input {
11
+ background: #f1f1f1;
12
+ border: 1ps solid #ff0000;
13
+ }
14
+
15
+ .tab .active {
16
+ background: #e9f212;
17
+ }
18
+
19
+ .tab div {
20
+ display: none;
21
+ width: 300px;
22
+ height: 250px;
23
+ padding: 10px;
24
+ background: #e9f212;
25
+ border: 1px solid #ff0000;
26
+ }
27
+ </style>
28
+
29
+ <script>
30
+
31
+ function Tab(id) {
32
+ var tabBox = document.getElementById(id);
33
+ // 属性
34
+ this.tabBtn = tabBox.getElementsByTagName("input");
35
+ this.tabDiv = tabBox.getElementsByTagName("div");
36
+
37
+ for (var i = 0; i < this.tabBtn.length; i++) {
38
+ this.tabBtn[i].index = i;
39
+ var _this = this;
40
+ this.tabBtn[i].onclick = function () {
41
+ _this.clickBtn(this);
42
+ }
43
+ }
44
+ }
45
+
46
+ Tab.prototype.clickBtn = function (btn) {
47
+ for (var j = 0; j < this.tabBtn.length; j++) {
48
+ this.tabBtn[j].className = "";
49
+ this.tabDiv[j].style.display = "none";
50
+ }
51
+ this.className = "active";
52
+ this.tabDiv[btn.index].style.display = "block"
53
+ }
54
+
55
+
56
+ window.onload = function () {
57
+ new Tab("tabBox1")
58
+ new Tab("tabBox2")
59
+ new Tab("tabBox3")
60
+ }
61
+
62
+
63
+ </script>
64
+
65
+ <script>
66
+
67
+ // window.onload = function(){
68
+ // var tabBox = document.getElementById("tabBox");
69
+ // var tabBtn = tabBox.getElementsByTagName("input");
70
+ // var tabDiv = tabBox.getElementsByTagName("div");
71
+
72
+ // for(var i = 0;i<tabBtn.length;i++){
73
+ // tabBtn[i].index = i;
74
+ // tabBtn[i].onclick = function(){
75
+ // for(var j = 0;j<tabBtn.length;j++){
76
+ // tabBtn[j].className = "";
77
+ // tabDiv[j].style.display = "none";
78
+ // }
79
+ // this.className = "active";
80
+ // tabDiv[this.index].style.display = "block"
81
+ // }
82
+ // }
83
+
84
+ // }
85
+
86
+ </script>
87
+ </head>
88
+
89
+ <body>
90
+
91
+
92
+ <div id="tabBox1" class="tab">
93
+ <input type="button" value="web" class="active">
94
+ <input type="button" value="Java">
95
+ <input type="button" value="Python">
96
+ <div style="display: block;">React、Vue</div>
97
+ <div>SpringBoot、SpringMVC</div>
98
+ <div>flask</div>
99
+ </div>
100
+
101
+ <div id="tabBox2" class="tab">
102
+ <input type="button" value="web1" class="active">
103
+ <input type="button" value="Java1">
104
+ <input type="button" value="Python1">
105
+ <div style="display: block;">React1、Vue1</div>
106
+ <div>SpringBoot1、SpringMVC1</div>
107
+ <div>flask1</div>
108
+ </div>
109
+
110
+
111
+
112
+ <div id="tabBox3" class="tab">
113
+ <input type="button" value="web2" class="active">
114
+ <input type="button" value="Java2">
115
+ <input type="button" value="Python2">
116
+ <div style="display: block;">React1、Vue1</div>
117
+ <div>SpringBoot1、SpringMVC1</div>
118
+ <div>flask1</div>
119
+ </div>
120
+
121
+
122
+ </body>
123
+
124
+ </html>
JS面向对象/14_实操3_选项卡_面向对象_继承.html ADDED
@@ -0,0 +1,120 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
+ .tab input {
11
+ background: #f1f1f1;
12
+ border: 1ps solid #ff0000;
13
+ }
14
+
15
+ .tab .active {
16
+ background: #e9f212;
17
+ }
18
+
19
+ .tab div {
20
+ display: none;
21
+ width: 300px;
22
+ height: 250px;
23
+ padding: 10px;
24
+ background: #e9f212;
25
+ border: 1px solid #ff0000;
26
+ }
27
+ </style>
28
+
29
+ <script>
30
+
31
+ function Tab(id) {
32
+ var tabBox = document.getElementById(id);
33
+ // 属性
34
+ this.tabBtn = tabBox.getElementsByTagName("input");
35
+ this.tabDiv = tabBox.getElementsByTagName("div");
36
+
37
+ for (var i = 0; i < this.tabBtn.length; i++) {
38
+ this.tabBtn[i].index = i;
39
+ var _this = this;
40
+ this.tabBtn[i].onclick = function () {
41
+ _this.clickBtn(this);
42
+ }
43
+ }
44
+ }
45
+
46
+ Tab.prototype.clickBtn = function (btn) {
47
+ for (var j = 0; j < this.tabBtn.length; j++) {
48
+ this.tabBtn[j].className = "";
49
+ this.tabDiv[j].style.display = "none";
50
+ }
51
+ this.className = "active";
52
+ this.tabDiv[btn.index].style.display = "block"
53
+ }
54
+
55
+
56
+ // window.onload = function () {
57
+ // new Tab("tabBox1")
58
+ // new Tab("tabBox2")
59
+ // }
60
+
61
+
62
+ </script>
63
+
64
+ <script>
65
+
66
+ // 每一个选项卡在加载之后，都知道这个选共享卡是干嘛，或者是输出专业
67
+ function ItbaizhanTab(id,effect){
68
+ Tab.call(this,id);
69
+ this.effect = effect;
70
+ }
71
+
72
+ for(var t in Tab.prototype){
73
+ ItbaizhanTab.prototype[t] = Tab.prototype[t]
74
+ }
75
+
76
+ ItbaizhanTab.prototype.getEffect = function(){
77
+ console.log(this.effect);
78
+ }
79
+
80
+
81
+ window.onload = function(){
82
+ var t1 = new ItbaizhanTab("tabBox1","百战程序员主流专业");
83
+ var t2 = new ItbaizhanTab("tabBox2","百战程序员参考");
84
+
85
+ t1.getEffect();
86
+ t2.getEffect();
87
+ }
88
+
89
+
90
+
91
+
92
+ </script>
93
+ </head>
94
+
95
+ <body>
96
+
97
+
98
+ <div id="tabBox1" class="tab">
99
+ <input type="button" value="web" class="active">
100
+ <input type="button" value="Java">
101
+ <input type="button" value="Python">
102
+ <div style="display: block;">React、Vue</div>
103
+ <div>SpringBoot、SpringMVC</div>
104
+ <div>flask</div>
105
+ </div>
106
+
107
+ <div id="tabBox2" class="tab">
108
+ <input type="button" value="书籍" class="active">
109
+ <input type="button" value="视频">
110
+ <input type="button" value="文档">
111
+ <div style="display: block;">尚学堂出品java</div>
112
+ <div>尚学堂视频，百战视频</div>
113
+ <div>课堂笔记文档</div>
114
+ </div>
115
+
116
+
117
+
118
+ </body>
119
+
120
+ </html>
PyEcharts.ipynb ADDED
The diff for this file is too large to render. See raw diff
 
Vue2/01_Vue快速上手.html ADDED
@@ -0,0 +1,34 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <title>初识Vue</title>
6
+
7
+ <!-- 引入Vue -->
8
+ <script type="text/javascript" src="./js/vue.min.js"></script>
9
+ </head>
10
+ <body>
11
+ <!-- 准备好一个容器(Vue模版) -->
12
+ <div id="demo">
13
+ <h1>Hello, {{name.toUpperCase()}}, {{address}}</h1>
14
+ </div>
15
+
16
+ <script type="text/javascript" >
17
+ Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
18
+
19
+ // 创建Vue实例
20
+ new Vue({
21
+
22
+ // el 用于指定当前 Vue实例 所服务的容器，值通常为css选择器
23
+ el:'#demo',
24
+
25
+ // data中用于存储数据，数据供el所指定的容器去使用
26
+ data:{
27
+ name:'atguigu',
28
+ address:'北京'
29
+ }
30
+ })
31
+
32
+ </script>
33
+ </body>
34
+ </html>
Vue2/02_Vue模板语法.html ADDED
@@ -0,0 +1,40 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <title>模板语法</title>
6
+ <!-- 引入Vue -->
7
+ <script type="text/javascript" src="./js/vue.min.js"></script>
8
+ </head>
9
+ <body>
10
+
11
+ <!-- 准备一个Vue模版 -->
12
+ <div id="root">
13
+ <h1>插值语法</h1>
14
+ <h3>你好，{{name}}</h3>
15
+
16
+ <hr/>
17
+ <h1>指令语法</h1>
18
+ <a v-bind:href="school.url.toUpperCase()" x="hello">点我去{{school.name}}学习1</a>
19
+ <a :href="school.url" x="hello">点我去{{school.name}}学习2</a>
20
+ </div>
21
+
22
+ </body>
23
+
24
+ <script type="text/javascript">
25
+
26
+ // 阻止 vue 在启动时生成生产提示
27
+ Vue.config.productionTip = false
28
+
29
+ new Vue({
30
+ el:'#root',
31
+ data:{
32
+ name:'jack',
33
+ school:{
34
+ name:'尚硅谷',
35
+ url:'http://www.atguigu.com',
36
+ }
37
+ }
38
+ })
39
+ </script>
40
+ </html>
Vue2/03_数据绑定.html ADDED
@@ -0,0 +1,35 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <title>数据绑定</title>
6
+ <!-- 引入Vue -->
7
+ <script type="text/javascript" src="./js/vue.min.js"></script>
8
+ </head>
9
+ <body>
10
+ <div id="root">
11
+ <!-- 普通写法 -->
12
+ 单向数据绑定：<input type="text" v-bind:value="name"><br/>
13
+ 双向数据绑定：<input type="text" v-model:value="name"><br/>
14
+
15
+ <!-- 简写 -->
16
+ 单向数据绑定：<input type="text" :value="name"><br/>
17
+ 双向数据绑定：<input type="text" v-model="name"><br/>
18
+
19
+ <!-- 如下代码是错误的，因为v-model只能应用在表单类元素（输入类元素）上 -->
20
+ <!-- <h2 v-model:x="name">你好啊</h2> -->
21
+ </div>
22
+ </body>
23
+
24
+ <script type="text/javascript">
25
+ // 阻止 vue 在启动时生成生产提示
26
+ Vue.config.productionTip = false
27
+
28
+ new Vue({
29
+ el:'#root',
30
+ data:{
31
+ name:'尚硅谷'
32
+ }
33
+ })
34
+ </script>
35
+ </html>
Vue2/04_MVVM模型.html ADDED
@@ -0,0 +1,46 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <title>理解MVVM</title>
6
+ <!-- 引入Vue -->
7
+ <script type="text/javascript" src="./js/vue.js"></script>
8
+ </head>
9
+ <body>
10
+ <!--
11
+ MVVM 模型
12
+ 1. M：模型(Model) ：data中的数据
13
+ 2. V：视图(View) ：模板代码
14
+ 3. VM：视图模型(ViewModel)：Vue实例
15
+
16
+ 观察发现：
17
+ 1. data 中所有的属性，最后都出现在了vm身上。
18
+ 2. vm 身上所有的属性 及 Vue原型上所有属性，在Vue模板中都可以直接使用。
19
+ -->
20
+
21
+ <!-- 准备好一个容器-->
22
+ <div id="root">
23
+ <h1>学校名称：{{name}}</h1>
24
+ <h1>学校地址：{{address}}</h1>
25
+ <h1>测试一下1： {{1+1}}</h1>
26
+ <h1>测试一下2： {{$options}}</h1>
27
+ <h1>测试一下3： {{$emit}}</h1>
28
+ <h1>测试一下4： {{_c}}</h1>
29
+ </div>
30
+ </body>
31
+
32
+ <script type="text/javascript">
33
+
34
+ // 阻止 vue 在启动时生成生产提示
35
+ Vue.config.productionTip = false
36
+
37
+ const vm = new Vue({
38
+ el:'#root',
39
+ data:{
40
+ name:'尚硅谷',
41
+ address:'北京',
42
+ }
43
+ })
44
+ console.log(vm)
45
+ </script>
46
+ </html>
Vue2/05_数据代理1_回顾defineProperty.html ADDED
@@ -0,0 +1,38 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <title>回顾Object.defineproperty方法</title>
6
+ </head>
7
+ <body>
8
+ <script type="text/javascript" >
9
+ let number = 18
10
+ let person = {
11
+ name:'张三',
12
+ sex:'男',
13
+ }
14
+
15
+ Object.defineProperty(person,'age',{
16
+ // 如已设置 set 或 get, 就不能设置 writable 和 value
17
+ // value:18,
18
+ enumerable:true, // 控制属性是否可以枚举，默认值是false
19
+ // writable:true, // 控制属性是否可以被修改，默认值是false
20
+ configurable:true, // 控制属性是否可以被删除，默认值是false
21
+
22
+ // 当有人读取person的age属性时，get函数(getter)就会被调用
23
+ get(){
24
+ console.log('有人读取age属性了')
25
+ return number // 返回 我们想让别人读取到的值
26
+ },
27
+
28
+ // 当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
29
+ set(value){
30
+ console.log('有人修改了age属性，且值是', value)
31
+ number = value
32
+ }
33
+ })
34
+
35
+ console.log(person)
36
+ </script>
37
+ </body>
38
+ </html>
Vue2/05_数据代理2_概念.html ADDED
@@ -0,0 +1,24 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <title>何为数据代理</title>
6
+ </head>
7
+ <body>
8
+ <!-- 数据代理：通过 对象A(代理) 对 对象B中属性 进行操作（读/写）-->
9
+ <script type="text/javascript" >
10
+ let obj = {x:100}
11
+ let obj2 = {y:200}
12
+
13
+ // 通过 obj2 对 obj内的x属性 进行操作
14
+ Object.defineProperty(obj2,'x',{
15
+ get(){
16
+ return obj.x
17
+ },
18
+ set(value){
19
+ obj.x = value
20
+ }
21
+ })
22
+ </script>
23
+ </body>
24
+ </html>
Vue2/05_数据代理3_Vue中的数据代理.html ADDED
@@ -0,0 +1,28 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <title>Vue中的数据代理</title>
6
+ <!-- 引入Vue -->
7
+ <script type="text/javascript" src="../js/vue.js"></script>
8
+ </head>
9
+ <body>
10
+ <!-- 准备好一个容器-->
11
+ <div id="root">
12
+ <h2>学校名称：{{name}}</h2>
13
+ <h2>学校地址：{{address}}</h2>
14
+ </div>
15
+ </body>
16
+
17
+ <script type="text/javascript">
18
+ Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
19
+
20
+ const vm = new Vue({
21
+ el:'#root',
22
+ data:{
23
+ name:'尚硅谷',
24
+ address:'宏福科技园'
25
+ }
26
+ })
27
+ </script>
28
+ </html>
Vue2/06_事件处理1_基本使用.html ADDED
@@ -0,0 +1,43 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <title>事件的基本使用</title>
6
+ <!-- 引入Vue -->
7
+ <script type="text/javascript" src="./js/vue.js"></script>
8
+ </head>
9
+ <body>
10
+ <!-- 准备好一个容器-->
11
+ <div id="root">
12
+ <h2>欢迎来到{{name}}学习</h2>
13
+ <button @click="showInfo1">点我提示信息1（不传参）</button>
14
+ <button @click="showInfo2($event, 66)">点我提示信息2（传参）</button>
15
+ </div>
16
+ </body>
17
+
18
+ <script type="text/javascript">
19
+ // 阻止 vue 在启动时生成生产提示
20
+ Vue.config.productionTip = false
21
+
22
+ const vm = new Vue({
23
+ el:'#root',
24
+ data:{
25
+ name:'尚硅谷',
26
+ },
27
+ methods:{
28
+ showInfo1(event){
29
+ console.log(event.target.innerText)
30
+ console.log(this) // 此处的this是vm
31
+ alert('同学你好！')
32
+ },
33
+
34
+ showInfo2(event, number){
35
+ console.log(event, number)
36
+ console.log(event.target.innerText)
37
+ console.log(this) // 此处的this是vm
38
+ alert('同学你好！！')
39
+ }
40
+ }
41
+ })
42
+ </script>
43
+ </html>
Vue2/06_事件处理2_事件修饰符.html ADDED
@@ -0,0 +1,100 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <title>事件修饰符</title>
6
+ <!-- 引入Vue -->
7
+ <script type="text/javascript" src="./js/vue.js"></script>
8
+ <style>
9
+ *{
10
+ margin-top: 20px;
11
+ }
12
+ .demo1{
13
+ height: 50px;
14
+ background-color: skyblue;
15
+ }
16
+ .box1{
17
+ padding: 5px;
18
+ background-color: skyblue;
19
+ }
20
+ .box2{
21
+ padding: 5px;
22
+ background-color: orange;
23
+ }
24
+ .list{
25
+ width: 200px;
26
+ height: 200px;
27
+ background-color: peru;
28
+ overflow: auto;
29
+ }
30
+ li{
31
+ height: 100px;
32
+ }
33
+ </style>
34
+ </head>
35
+ <body>
36
+ <!-- 准备好一个容器 -->
37
+ <div id="root">
38
+ <h2>欢迎来到{{name}}学习</h2>
39
+ <!-- 阻止默认事件（常用） -->
40
+ <a href="http://www.atguigu.com" @click.prevent="showInfo">点我提示信息</a>
41
+
42
+ <!-- 阻止事件冒泡（常用） -->
43
+ <div class="demo1" @click="showInfo">
44
+ <button @click.stop="showInfo">点我提示信息</button>
45
+ <!-- 修饰符可以连续写 -->
46
+ <a href="http://www.atguigu.com" @click.prevent.stop="showInfo">点我提示信息</a>
47
+ </div>
48
+
49
+ <!-- 事件只触发一次（常用） -->
50
+ <button @click.once="showInfo">点我提示信息</button>
51
+
52
+ <!-- 使用事件的捕获模式 -->
53
+ <div class="box1" @click.capture="showMsg(1)">
54
+ div1
55
+ <div class="box2" @click="showMsg(2)">div2</div>
56
+ </div>
57
+
58
+ <!-- 只有 event.target 是当前操作的元素时才触发事件； -->
59
+ <div class="demo1" @click.self="showInfo">
60
+ <button @click="showInfo">点我提示信息</button>
61
+ </div>
62
+
63
+ <!-- 事件的默认行为立即执行，无需等待事件回调执行完毕； -->
64
+ <ul @wheel.passive="demo" class="list">
65
+ <li>1</li>
66
+ <li>2</li>
67
+ <li>3</li>
68
+ <li>4</li>
69
+ </ul>
70
+
71
+ </div>
72
+ </body>
73
+
74
+ <script type="text/javascript">
75
+ // 阻止 vue 在启动时生成生产提示
76
+ Vue.config.productionTip = false
77
+
78
+ new Vue({
79
+ el:'#root',
80
+ data:{
81
+ name:'尚硅谷'
82
+ },
83
+ methods:{
84
+ showInfo(e){
85
+ alert('同学你好！')
86
+ console.log(e.target)
87
+ },
88
+ showMsg(msg){
89
+ console.log(msg)
90
+ },
91
+ demo(){
92
+ for (let i = 0; i < 100000; i++) {
93
+ console.log('#')
94
+ }
95
+ console.log('累坏了')
96
+ }
97
+ }
98
+ })
99
+ </script>
100
+ </html>
Vue2/06_事件处理3_键盘事件.html ADDED
@@ -0,0 +1,37 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <title>键盘事件</title>
6
+ <!-- 引入Vue -->
7
+ <script type="text/javascript" src="./js/vue.js"></script>
8
+ </head>
9
+ <body>
10
+ <!-- 准备好一个容器-->
11
+ <div id="root">
12
+ <h2>欢迎来到{{name}}学习</h2>
13
+ <input type="text" placeholder="按下回车提示输入" @keydown.huiche="showInfo">
14
+ </div>
15
+ </body>
16
+
17
+ <script type="text/javascript">
18
+ // 阻止 vue 在启动时生成生产提示
19
+ Vue.config.productionTip = false
20
+
21
+ // 定义了一个别名按键
22
+ Vue.config.keyCodes.huiche = 13
23
+
24
+ new Vue({
25
+ el:'#root',
26
+ data:{
27
+ name:'尚硅谷'
28
+ },
29
+ methods: {
30
+ showInfo(e){
31
+ console.log(e.key, e.keyCode)
32
+ console.log(e.target.value)
33
+ }
34
+ },
35
+ })
36
+ </script>
37
+ </html>
Vue2/07_计算属性1_姓名案例_插值语法实现.html ADDED
@@ -0,0 +1,31 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <title>姓名案例_插值语法实现</title>
6
+ <!-- 引入Vue -->
7
+ <script type="text/javascript" src="./js/vue.js"></script>
8
+ </head>
9
+ <body>
10
+ <!-- 准备好一个容器-->
11
+ <div id="root">
12
+ 姓：<input type="text" v-model="firstName"> <br/><br/>
13
+ 名：<input type="text" v-model="lastName"> <br/><br/>
14
+ 全名：<span>{{firstName}}-{{lastName}}</span>
15
+ </div>
16
+ </body>
17
+
18
+ <script type="text/javascript">
19
+
20
+ // 阻止 vue 在启动时生成生产提示
21
+ Vue.config.productionTip = false
22
+
23
+ new Vue({
24
+ el:'#root',
25
+ data:{
26
+ firstName:'张',
27
+ lastName:'三'
28
+ }
29
+ })
30
+ </script>
31
+ </html>
Vue2/07_计算属性2_姓名案例_methods实现.html ADDED
@@ -0,0 +1,36 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <title>姓名案例_methods实现</title>
6
+ <!-- 引入Vue -->
7
+ <script type="text/javascript" src="./js/vue.js"></script>
8
+ </head>
9
+ <body>
10
+ <!-- 准备好一个容器-->
11
+ <div id="root">
12
+ 姓：<input type="text" v-model="firstName"> <br/><br/>
13
+ 名：<input type="text" v-model="lastName"> <br/><br/>
14
+ 全名：<span>{{fullName()}}</span>
15
+ </div>
16
+ </body>
17
+
18
+ <script type="text/javascript">
19
+ // 阻止 vue 在启动时生成生产提示
20
+ Vue.config.productionTip = false
21
+
22
+ new Vue({
23
+ el:'#root',
24
+ data:{
25
+ firstName:'张',
26
+ lastName:'三'
27
+ },
28
+ methods: {
29
+ fullName(){
30
+ console.log('@---fullName')
31
+ return this.firstName + '-' + this.lastName
32
+ }
33
+ },
34
+ })
35
+ </script>
36
+ </html>
Vue2/07_计算属性3_姓名案例_计算属性实现.html ADDED
@@ -0,0 +1,49 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <title>姓名案例_计算属性实现</title>
6
+ <!-- 引入Vue -->
7
+ <script type="text/javascript" src="./js/vue.js"></script>
8
+ </head>
9
+ <body>
10
+ <!-- 准备好一个容器 -->
11
+ <div id="root">
12
+ 姓：<input type="text" v-model="firstName"> <br/><br/>
13
+ 名：<input type="text" v-model="lastName"> <br/><br/>
14
+ 全名：<span>{{fullName}}</span><br/><br/>
15
+ </div>
16
+ </body>
17
+
18
+ <script type="text/javascript">
19
+ // 阻止 vue 在启动时生成生产提示
20
+ Vue.config.productionTip = false
21
+
22
+ const vm = new Vue({
23
+ el:'#root',
24
+ data:{
25
+ firstName:'张',
26
+ lastName:'三',
27
+ },
28
+ computed:{
29
+ fullName:{
30
+
31
+ // get什么时候调用？1.初次读取fullName时。2.所依赖的数据发生变化时。
32
+ get(){
33
+ console.log('get被调用了')
34
+ console.log(this) // 此处的this是vm
35
+ return this.firstName + '-' + this.lastName
36
+ },
37
+
38
+ // set什么时候调用? 当fullName被修改时
39
+ set(value){
40
+ console.log('set',value)
41
+ const arr = value.split('-')
42
+ this.firstName = arr[0]
43
+ this.lastName = arr[1]
44
+ }
45
+ }
46
+ }
47
+ })
48
+ </script>
49
+ </html>
Vue2/07_计算属性4_姓名案例_计算属性简写.html ADDED
@@ -0,0 +1,37 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <title>姓名案例_计算属性实现</title>
6
+ <!-- 引入Vue -->
7
+ <script type="text/javascript" src="./js/vue.js"></script>
8
+ </head>
9
+ <body>
10
+ <!-- 准备好一个容器-->
11
+ <div id="root">
12
+ 姓：<input type="text" v-model="firstName"> <br/><br/>
13
+ 名：<input type="text" v-model="lastName"> <br/><br/>
14
+ 全名：<span>{{fullName}}</span> <br/><br/>
15
+ </div>
16
+ </body>
17
+
18
+ <script type="text/javascript">
19
+ // 阻止 vue 在启动时生成生产提示
20
+ Vue.config.productionTip = false
21
+
22
+ const vm = new Vue({
23
+ el:'#root',
24
+ data:{
25
+ firstName:'张',
26
+ lastName:'三',
27
+ },
28
+ computed:{
29
+ // 简写
30
+ fullName(){
31
+ console.log('get被调用了')
32
+ return this.firstName + '-' + this.lastName
33
+ }
34
+ }
35
+ })
36
+ </script>
37
+ </html>
Vue2/08_监视属性1_天气案例.html ADDED
@@ -0,0 +1,36 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <title>天气案例</title>
6
+ <!-- 引入Vue -->
7
+ <script type="text/javascript" src="./js/vue.js"></script>
8
+ </head>
9
+ <body>
10
+ <!-- 准备好一个容器-->
11
+ <div id="root">
12
+ <h2>今天天气很{{info}}</h2>
13
+
14
+ <!-- 绑定事件的时候：@xxx="yyy", yyy可以写一些简单的语句 -->
15
+ <button @click="isHot = !isHot">切换天气</button>
16
+ </div>
17
+ </body>
18
+
19
+ <script type="text/javascript">
20
+
21
+ // 阻止 vue 在启动时生成生产提示
22
+ Vue.config.productionTip = false
23
+
24
+ const vm = new Vue({
25
+ el:'#root',
26
+ data:{
27
+ isHot:true,
28
+ },
29
+ computed:{
30
+ info(){
31
+ return this.isHot ? '炎热' : '凉爽'
32
+ }
33
+ }
34
+ })
35
+ </script>
36
+ </html>