├── .gitignore ├── 01-HTML和CSS ├── 01-HTML书写规范.html ├── 01-HTML和CSS.md ├── 02-font标签.html ├── 03-特殊字符.html ├── 04-标题标签.html ├── 05-超链接标签.html ├── 06-列表.html ├── 07-img标签.html ├── 08-表格标签.html ├── 09-表格跨行跨列.html ├── 10-iframe标签.html ├── 11-表单标签.html ├── 12-表单提交.html ├── 13-其他基本的html标签.html ├── 14-CSS和HTML结合.css ├── 14-CSS和HTML结合.html ├── 15-CSS选择器.css ├── 15-CSS选择器.html ├── 16-常用样式.html └── images │ ├── 001.png │ ├── 002.png │ ├── 003.png │ ├── 004.png │ ├── 005.png │ ├── 006.png │ ├── 007.png │ ├── 008.png │ ├── 009.gif │ ├── 010.png │ ├── 011.png │ ├── 012.png │ ├── 013.png │ └── 014.png ├── 02-JavaScript ├── 01-HelloJS.html ├── 01-HelloJS.js ├── 02-JS数据类型.html ├── 02-JavaScript.md ├── 03-JS的数据类型自动转化.html ├── 04-JS的关系（比较运算）.html ├── 05-JS的逻辑运算.html ├── 06-JS的语句.html ├── 07-JS数组.html ├── 08-JS函数.html ├── 09-JS对象.html ├── 10-JS内置函数.html ├── 11-onload事件.html ├── 12-onclick单击事件.html ├── 13-onblur失去焦点.html ├── 14-onchange事件.html ├── 15-onsubmit表单提交事件.html ├── 16-document对象.html ├── 17-window对象.html ├── 18-table对象API.html ├── 19-正则表达式.html └── images │ ├── 01.png │ ├── 02.png │ ├── 03.png │ ├── 04.png │ ├── 05.png │ ├── 06.png │ ├── 07.png │ ├── 08.png │ ├── 09.png │ ├── 10.png │ ├── 11.png │ ├── 12.png │ ├── 13.png │ ├── 14.png │ ├── 15.gif │ ├── 16.gif │ ├── 17.gif │ ├── 18.gif │ ├── 19.png │ ├── 20.png │ ├── 21.gif │ ├── 22.gif │ └── 23.png └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | HELP.md 3 | target/ 4 | .mvn 5 | mvnw 6 | mvnw.cmd 7 | 8 | !**/src/main/** 9 | !**/src/test/** 10 | 11 | ### STS ### 12 | .apt_generated 13 | .classpath 14 | .factorypath 15 | .project 16 | .settings 17 | .springBeans 18 | .sts4-cache 19 | 20 | ### IntelliJ IDEA ### 21 | .idea 22 | *.iws 23 | *.iml 24 | *.ipr 25 | .DS_Store 26 | 27 | ### NetBeans ### 28 | /nbproject/private/ 29 | /nbbuild/ 30 | /dist/ 31 | /nbdist/ 32 | /.nb-gradle/ 33 | build/ 34 | 35 | ### VS Code ### 36 | .vscode/ 37 | SpringBoot-Exception/src/main/resources/rebel-remote.xml 38 | SpringBoot-Exception/src/main/resources/static/ 39 | SpringBoot-Exception/src/main/resources/templates/ 40 | src/main/resources/static/ 41 | src/main/resources/templates/ 42 | /.mvn/wrapper/maven-wrapper.properties 43 | src/main/resources/rebel-remote.xml 44 | .rebel-remote.xml.bak 45 | -------------------------------------------------------------------------------- /01-HTML和CSS/01-HTML书写规范.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 标题 8 | 9 | 10 | 11 | 12 | hello 13 | 14 | -------------------------------------------------------------------------------- /01-HTML和CSS/01-HTML和CSS.md: -------------------------------------------------------------------------------- 1 | # 一、HTML 2 | 3 | ## **互联网的三大基石:** 4 | 5 | 1. **url 统一资源定位符 定位资源** 6 | 2. **http 超文本传输协议 传输资源** 7 | 3. **html 超文本标记语言 显示资源** 8 | 9 | > ​ **HTML的结构:** 10 | > 11 | > ```html 12 | > 13 | > 14 | > 15 | > 16 | > ``` 17 | > 18 | > ​ **注意:** 19 | > 20 | > ​ **head中一般存放和页面显示无关的内容** 21 | > 22 | > ​ **body中一般存放页面显示的内容** 23 | > 24 | > ​ **html语言是不区分大小写的语言。** 25 | > 26 | > ​ **html的属性写法,写在标签中 属性名=值 ，值是可以用双引号，也可以用单引号或者不写，注意如果不写后面一定要加一个空格。** 27 | 28 | ## 1.1.HTML书写规范 29 | 30 | ```html 31 | 32 | 33 | 34 | 35 | 36 | 37 | 标题 38 | 39 | 40 | 41 | hello 42 | 43 | 44 | ``` 45 | 46 | > 表示注释，注释的内容不会再页面上显示 47 | 48 | 49 | 50 | > **head：** 51 | 52 | ​ **title 页面的标题** 53 | 54 | ​ **content-type text/html;charset=编码集 控制页面编码** 55 | 56 | ​ **refresh 刷新** 57 | 58 | ​ **秒数;url=地址 过多少秒之后跳转到指定地址** 59 | 60 | ​ **秒数 每隔多少秒刷新一次本页面** 61 | 62 | ​ **了解:** 63 | 64 | ​ **expires 页面的有效期 0表示当即失效** 65 | 66 | ​ **author 作者** 67 | 68 | ​ **description 描述** 69 | 70 | ​ **keywords 关键字** 71 | 72 | > **body:** 73 | 74 | ​ **属性:** 75 | 76 | ​ **bgcolor 背景颜色 可以写单词或者#RGB三原色** 77 | 78 | ​ **background 背景图片** 79 | 80 | ## 1.2.HTML标签介绍 81 | 82 | ### 1.2.1font字体标签 83 | 84 | ```html 85 | 86 | 87 | 88 | 89 | 90 | font标签 91 | 92 | 93 | 我是font标签 94 | 95 | 96 | ``` 97 | 98 | | color | 字体颜色 | 99 | | ----- | -------- | 100 | | face | 字体种类 | 101 | | size | 字体大小 | 102 | 103 | 104 | 105 | ### 1.2.2特殊字符 106 | 107 | 常用字符 108 | 109 | ```html 110 | 111 | 特殊字符:<表示左括号 112 | 特殊字符:>表示右括号 113 | 特殊字符: 表示空格 114 | 115 | ``` 116 | 117 | ### 1.2.3标题标签 118 | 119 | 标题标签从h1到h6，从大到小 120 | 121 | ```html 122 | 123 | 124 |

标题一

125 |

标题二

126 |

标题三

127 |

标题四

128 |
标题五
129 |
标题六
130 | 131 | ``` 132 | 133 | ![](./images/003.png) 134 | 135 | ### 1.2.4超链接标签 136 | 137 | ```html 138 | 139 | 141 | 百度1 142 | 百度2 143 | 144 | ``` 145 | 146 | 147 | 148 | > **锚点:** 149 | 150 | 1. **声明锚点 ** `` 151 | 2. 使用锚点 `` 152 | 153 | ### 1.2.5 列表 154 | 155 | ```html 156 | 157 | 159 | 无序列表 160 | 166 | 167 | 有序列表 168 |
    169 |
  1. 科比
    2. 170 |
  2. 乔丹
    3. 171 |
  3. 奥尼尔
    4. 172 |
  4. 姚明
    5. 173 |
174 | 175 | ``` 176 | 177 | ![](./images/005.png) 178 | 179 | ### 1.2.6img图片标签 180 | 181 | ```html 182 | 183 | 184 |

相对路径的图片，.表示当前目录 src="./images/005.png"

185 | 图片找不到 186 |

绝对路径的图片

187 |

正确的格式：http://ip:port/工程名/资源路径

188 |

错误的格式：盘符:/目录/文件名

189 | 网络资源图片 190 | 191 | ``` 192 | 193 | 194 | 195 | 1.2.7 表格标签 196 | 197 | ```html 198 | 199 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 |
第1列第2列第3列
1-11-21-3
2-12-22-3
3-13-23-3
224 | 225 | ``` 226 | 227 | 228 | 229 | > 表格跨行跨列 230 | 231 | ```html 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | 249 | 250 | 251 |
第1列第2列第3列
1-11-3
2-12-2
252 | 253 | ``` 254 | 255 | ![](./images/008.png) 256 | 257 | ### 1.2.8了解iframe标签 258 | 259 | iframe标签可以在html页面上打开一个小窗口在载入一个html页面 260 | 261 | ```html 262 | 263 |

这是一个单独的页面

264 |

iframe载入表格跨行跨列的html页面

265 | 267 | 268 | 271 | 272 | ``` 273 | 274 | ![](./images/009.gif) 275 | 276 | ### 1.2.9表单标签 277 | 278 | 表单是信息集合，例如登录qq的界面有用户名和密码，还有记住密码，和登录按钮这就是一个表单。 279 | 280 | ```html 281 | 282 | 283 | 296 |
297 |

用户注册

298 | 299 | 300 | 301 | 304 | 305 | 306 | 307 | 310 | 311 | 312 | 313 | 316 | 317 | 318 | 319 | 322 | 323 | 324 | 325 | 330 | 331 | 332 | 333 | 341 | 342 | 343 | 344 | 347 | 348 | 349 | 350 | 351 | 352 |
用户名： 302 |
303 |
密码： 308 |
309 |
确认密码： 314 |
315 |
性别： 320 | 男女
321 |
兴趣爱好： 326 | java 327 | python 328 | c++
329 |
国籍： 334 |
340 |
自我评价： 345 |
346 |
353 |
354 | 355 |
356 | 357 | ``` 358 | 359 | ![](./images/010.png) 360 | 361 | ### 1.2.10表单提交 362 | 363 | ```html 364 |
365 | ``` 366 | 367 | action：访问服务器的地址 368 | 369 | method：请求方式有GET和POST 370 | 371 | > http://localhost:8080/?username=user&password=123&password2=123&sex=1&hobby=java&hobby=python&nation=1&desc=desc&1111=abc 372 | 373 | 1. 表单项数据要发送给服务器需要给表单项属性加上name属性 374 | 2. 表单项属性要发送指定数据给服务器，例如单选框选中男就发送1过去就需要给每个表单项设置value值 375 | 3. 表单项不在提交的form标签中，也不会提交 376 | 377 | > 表单请求方法有get和post 378 | 379 | **GET方式** 380 | 381 | 1. **传递参数的地方 地址?参数 地址?键=值&键=值(name=value)** 382 | 2. **不安全** 383 | 3. **参数长度有限** 384 | 385 | **POST方式** 386 | 387 | 1. **传递参数的地方 请求的请求实体中** 388 | 2. **相对安全** 389 | 3. **参数长度理论无限制** 390 | 391 | > **一般带有上传文件/密码的表单使用post传递** 392 | 393 | ### 1.2.11其他html标签 394 | 395 | ```html 396 | 397 | 400 |
div标签1
401 |
div标签2
402 | span标签1 403 | span标签2 404 |

p段落标签1

405 |

p段落标签2

406 | 407 | ``` 408 | 409 | 410 | 411 | # 二、CSS 412 | 413 | ## 2.1CSS介绍 414 | 415 | css是页面的样式，决定一个网页的漂亮程度。 416 | 417 | ## 2.2CSS的语法 418 | 419 | ```css 420 | div { 421 | font-size: 100px; 422 | color: red; 423 | } 424 | ``` 425 | 426 | > 选择器：浏览器根据选择器决定哪些html元素受css样式的影响 427 | > 428 | > 属性：是你要改变的样式名，并且每个属性都有一个值。属性和值呗冒号分开，并由花括号包围，这样组成了一个完整的样式声明 429 | > 430 | > 注意：每个属性用；分开。 431 | 432 | ## 2.3CSS和HTML结合 433 | 434 | ```html 435 | 436 | 437 | 438 | 439 | 440 | Document 441 | 442 | 449 | 450 | 451 | 452 | 453 | 454 |
第一种方式在标签的style属性上设置key:value;的方式修改样式
455 |
第二种方式在head标签中style标签，使用标准的选择器样式定义样式
456 |
第三中方式在head标签引入外部css样式文件
457 | 458 | 459 | ``` 460 | 461 | > 三种方式的优先级 462 | 463 | ![](./images/012.png) 464 | 465 | > 由此可见优先级方式1 > 方式3 > 方式2 466 | 467 | ## 2.4CSS选择器 468 | 469 | ### 2.4.1标签选择器（元素选择器） 470 | 471 | **元素选择器: 选择器{属性名:属性值;属性名2:属性值2;...}** 472 | 473 | ```css 474 | div { 475 | border: 1px solid blue; 476 | font-size: 10px; 477 | color: blue; 478 | } 479 | ``` 480 | 481 | ### 2.4.2 id选择器 482 | 483 | **id选择器: 任何标签都可以添加id属性，并且一个页面的id应该保持唯一性** 484 | 485 | **\#id{属性名:属性值;属性名2:属性值2;...}** 486 | 487 | ```css 488 | #abc { 489 | border: 5px solid red; 490 | font-size: 20px; 491 | color: red; 492 | } 493 | ``` 494 | 495 | ### 2.4.3类选择器 496 | 497 | **类选择器: 任何标签都可以添加class属性，并且class属性是可以相同的** 498 | 499 | **.class值{键1:值1;键2:值2.......}** 500 | 501 | ```css 502 | .aaa { 503 | border: 10px solid green; 504 | font-size: 30px; 505 | color: green; 506 | } 507 | ``` 508 | 509 | ### 2.4.4包含选择器（组合选择器） 510 | 511 | 包含选择器: 512 | 513 | 祖先选择器 子选择器{键1:值1;键2:值2.......} 514 | 515 | ```css 516 | #abc .ccc { 517 | border: 10px solid yellow; 518 | font-size: 30px; 519 | color: yellow; 520 | } 521 | ``` 522 | 523 | > HTML代码 524 | 525 | ```html 526 | 527 | 528 | 529 | 530 | 531 | Document 532 | 533 | 534 | 535 | 536 | 537 |
元素选择器
538 |
id选择器 539 |
包含选择器
540 |
541 |
l类选择器
542 | 543 | 544 | ``` 545 | 546 | ![](./images/013.png) 547 | 548 | ## 2.5常用样式 549 | 550 | ```html 551 | 552 | 553 | 554 | Document 555 | 556 | 582 | 583 | 584 | 百度 585 | 586 | 587 | 588 | 589 | 590 |
1-11-2
591 |
常用样式
592 | 597 | 598 | 599 | ``` 600 | 601 | ![](./images/014.png) -------------------------------------------------------------------------------- /01-HTML和CSS/02-font标签.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | font标签 7 | 8 | 9 | 我是font标签 10 | 11 | -------------------------------------------------------------------------------- /01-HTML和CSS/03-特殊字符.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 特殊字符:<表示左括号 10 | 特殊字符:>表示右括号 11 | 特殊字符: 表示空格 12 | 13 | -------------------------------------------------------------------------------- /01-HTML和CSS/04-标题标签.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 |

标题一

11 |

标题二

12 |

标题三

13 |

标题四

14 |
标题五
15 |
标题六
16 | 17 | -------------------------------------------------------------------------------- /01-HTML和CSS/05-超链接标签.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 11 | 百度1 12 | 百度2 13 | 14 | -------------------------------------------------------------------------------- /01-HTML和CSS/06-列表.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 11 | 无序列表 type="none" 12 | 18 | 无序列表 默认type 19 | 25 | 26 | 有序列表 27 |
    28 |
  1. 科比
    2. 29 |
  2. 乔丹
    3. 30 |
  3. 奥尼尔
    4. 31 |
  4. 姚明
    5. 32 |
33 | 34 | -------------------------------------------------------------------------------- /01-HTML和CSS/07-img标签.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 |

相对路径的图片，.表示当前目录 src="./images/005.png"

11 | 图片找不到 12 |

绝对路径的图片

13 |

正确的格式：http://ip:port/工程名/资源路径

14 |

错误的格式：盘符:/目录/文件名

15 | 网络资源图片 16 | 17 | -------------------------------------------------------------------------------- /01-HTML和CSS/08-表格标签.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 |
第1列第2列第3列
1-11-21-3
2-12-22-3
3-13-23-3
34 | 35 | -------------------------------------------------------------------------------- /01-HTML和CSS/09-表格跨行跨列.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 |
第1列第2列第3列
1-11-3
2-12-2
28 | 29 | -------------------------------------------------------------------------------- /01-HTML和CSS/10-iframe标签.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |

这是一个单独的页面

10 |

iframe载入表格跨行跨列的html页面

11 | 13 | 14 | 17 | 18 | -------------------------------------------------------------------------------- /01-HTML和CSS/11-表单标签.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 23 | 24 |

用户注册

25 | 26 | 27 | 28 | 31 | 32 | 33 | 34 | 37 | 38 | 39 | 40 | 43 | 44 | 45 | 46 | 49 | 50 | 51 | 52 | 57 | 58 | 59 | 60 | 68 | 69 | 70 | 71 | 74 | 75 | 76 | 77 | 78 | 79 |
用户名： 29 |
30 |
密码： 35 |
36 |
确认密码： 41 |
42 |
性别： 47 | 男女
48 |
兴趣爱好： 53 | java 54 | python 55 | c++
56 |
国籍： 61 |
67 |
自我评价： 72 |
73 |
80 |
81 | 82 |
83 | 84 | -------------------------------------------------------------------------------- /01-HTML和CSS/12-表单提交.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 14 |
15 |

用户注册

16 | 17 | 18 | 19 | 22 | 23 | 24 | 25 | 28 | 29 | 30 | 31 | 34 | 35 | 36 | 37 | 41 | 42 | 43 | 44 | 49 | 50 | 51 | 52 | 60 | 61 | 62 | 63 | 66 | 67 | 68 | 69 | 70 | 71 |
用户名： 20 |
21 |
密码： 26 |
27 |
确认密码： 32 |
33 |
性别： 38 | 男 39 | 女
40 |
兴趣爱好： 45 | java 46 | python 47 | c++
48 |
国籍： 53 |
59 |
自我评价： 64 |
65 |
72 |
73 | 74 |
75 | 76 | -------------------------------------------------------------------------------- /01-HTML和CSS/13-其他基本的html标签.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 12 |
div标签1
13 |
div标签2
14 | span标签1 15 | span标签2 16 |

p段落标签1

17 |

p段落标签2

18 | 19 | -------------------------------------------------------------------------------- /01-HTML和CSS/14-CSS和HTML结合.css: -------------------------------------------------------------------------------- 1 | div { 2 | border: 5px solid blue; 3 | font-size: 20px; 4 | color: blue; 5 | } -------------------------------------------------------------------------------- /01-HTML和CSS/14-CSS和HTML结合.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 15 | 16 | 17 | 18 | 19 | 20 |
第一种方式在标签的style属性上设置key:value;的方式修改样式
21 |
第二种方式在head标签中style标签，使用标准的选择器样式定义样式
22 |
第三中方式在head标签引入外部css样式文件
23 | 24 | -------------------------------------------------------------------------------- /01-HTML和CSS/15-CSS选择器.css: -------------------------------------------------------------------------------- 1 | /* 元素选择器: 选择器{属性名:属性值;属性名2:属性值2;...} */ 2 | div { 3 | border: 1px solid blue; 4 | font-size: 10px; 5 | color: blue; 6 | } 7 | /* id选择器: 任何标签都可以添加id属性，并且一个页面的id应该保持唯一性 8 | #id{属性名:属性值;属性名2:属性值2;...} */ 9 | #abc { 10 | border: 5px solid red; 11 | font-size: 20px; 12 | color: red; 13 | } 14 | /* 类选择器: 任何标签都可以添加class属性，并且class属性是可以相同的 15 | .class值{键1:值1;键2:值2.......} */ 16 | .aaa { 17 | border: 10px solid green; 18 | font-size: 30px; 19 | color: green; 20 | } 21 | /* 包含选择器: 22 | 祖先选择器 子选择器{键1:值1;键2:值2.......} */ 23 | #abc .ccc { 24 | border: 10px solid yellow; 25 | font-size: 30px; 26 | color: yellow; 27 | } -------------------------------------------------------------------------------- /01-HTML和CSS/15-CSS选择器.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 |
元素选择器
13 |
id选择器 14 |
包含选择器
15 |
16 |
l类选择器
17 | 18 | -------------------------------------------------------------------------------- /01-HTML和CSS/16-常用样式.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 34 | 35 | 36 | 百度 37 | 38 | 39 | 40 | 41 | 42 |
1-11-2
43 |
常用样式
44 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /01-HTML和CSS/images/001.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangtianyi0110/JavaWebLearnNotes/50b5e3033d48732d36308c221dcce84c930a672e/01-HTML和CSS/images/001.png -------------------------------------------------------------------------------- /01-HTML和CSS/images/002.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangtianyi0110/JavaWebLearnNotes/50b5e3033d48732d36308c221dcce84c930a672e/01-HTML和CSS/images/002.png -------------------------------------------------------------------------------- /01-HTML和CSS/images/003.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangtianyi0110/JavaWebLearnNotes/50b5e3033d48732d36308c221dcce84c930a672e/01-HTML和CSS/images/003.png -------------------------------------------------------------------------------- /01-HTML和CSS/images/004.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangtianyi0110/JavaWebLearnNotes/50b5e3033d48732d36308c221dcce84c930a672e/01-HTML和CSS/images/004.png -------------------------------------------------------------------------------- /01-HTML和CSS/images/005.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangtianyi0110/JavaWebLearnNotes/50b5e3033d48732d36308c221dcce84c930a672e/01-HTML和CSS/images/005.png -------------------------------------------------------------------------------- /01-HTML和CSS/images/006.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangtianyi0110/JavaWebLearnNotes/50b5e3033d48732d36308c221dcce84c930a672e/01-HTML和CSS/images/006.png -------------------------------------------------------------------------------- /01-HTML和CSS/images/007.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangtianyi0110/JavaWebLearnNotes/50b5e3033d48732d36308c221dcce84c930a672e/01-HTML和CSS/images/007.png -------------------------------------------------------------------------------- /01-HTML和CSS/images/008.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangtianyi0110/JavaWebLearnNotes/50b5e3033d48732d36308c221dcce84c930a672e/01-HTML和CSS/images/008.png -------------------------------------------------------------------------------- /01-HTML和CSS/images/009.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangtianyi0110/JavaWebLearnNotes/50b5e3033d48732d36308c221dcce84c930a672e/01-HTML和CSS/images/009.gif -------------------------------------------------------------------------------- /01-HTML和CSS/images/010.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangtianyi0110/JavaWebLearnNotes/50b5e3033d48732d36308c221dcce84c930a672e/01-HTML和CSS/images/010.png -------------------------------------------------------------------------------- /01-HTML和CSS/images/011.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangtianyi0110/JavaWebLearnNotes/50b5e3033d48732d36308c221dcce84c930a672e/01-HTML和CSS/images/011.png -------------------------------------------------------------------------------- /01-HTML和CSS/images/012.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangtianyi0110/JavaWebLearnNotes/50b5e3033d48732d36308c221dcce84c930a672e/01-HTML和CSS/images/012.png -------------------------------------------------------------------------------- /01-HTML和CSS/images/013.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangtianyi0110/JavaWebLearnNotes/50b5e3033d48732d36308c221dcce84c930a672e/01-HTML和CSS/images/013.png -------------------------------------------------------------------------------- /01-HTML和CSS/images/014.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangtianyi0110/JavaWebLearnNotes/50b5e3033d48732d36308c221dcce84c930a672e/01-HTML和CSS/images/014.png -------------------------------------------------------------------------------- /02-JavaScript/01-HelloJS.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /02-JavaScript/01-HelloJS.js: -------------------------------------------------------------------------------- 1 | console.log("我是在控制台打印日志的函数，控制台在使用浏览器的时候按F12") 2 | alert("hello 我是外部引入的js文件") -------------------------------------------------------------------------------- /02-JavaScript/02-JS数据类型.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /02-JavaScript/02-JavaScript.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | ## 1.JavaScript介绍 4 | 5 | JavaScript是弱类型脚本语言，平常用来执行页面的脚本，例如点击登录。JavaScript和Java没得关系，完全是因为当时java出名，他蹭热度改名字叫JavaScript。 6 | 7 | > JS是弱类型，Java是强类型语言 8 | 9 | 1. 交互性 10 | 2. 安全性 11 | 3. 跨平台（只要有浏览器与操作系统无关） 12 | 13 | ## 2.初入JavaScript 14 | 15 | ### 2.1.HelloJavaScript 16 | 17 | > 方式一（嵌入式）：直接使用script标签 18 | 19 | ```html 20 | 21 | 22 | 23 | 24 | 25 | Document 26 | 30 | 31 | 32 | 33 | 34 | 35 | ``` 36 | 37 | > alert是javascript语言提供的一个警告框函数，可以接受任意类型的参数，将其提示出来 38 | 39 | ![](./images/01.png) 40 | 41 | > 方式二：外部引入标签 42 | 43 | 使用script标签引入单独的JavaScript代码 44 | 45 | ```html 46 | 47 | ``` 48 | 49 | ```javascript 50 | console.log("我是在控制台打印日志的函数，控制台在使用浏览器的时候按F12") 51 | alert("hello 我是外部引入的js文件") 52 | ``` 53 | 54 | ![](./images/02.png) 55 | 56 | > **常用于测试的两个方法:** 57 | > 58 | > ​ **alert(内容) 弹出警告框，显示内容** 59 | > 60 | > ​ **console.log(内容) 在浏览器的控制台记录内容** 61 | > 62 | > 在浏览器中按F12进入开发者模式的console就是控制台 63 | 64 | ![](./images/03.png) 65 | 66 | ### 2.2.JS变量和数据类型 67 | 68 | #### 2.2.1.JS数据的类型: 69 | 70 | > 六种 71 | 72 | 1. undefined 73 | 2. null 74 | 3. string （字符串） 75 | 4. number(整数，小数，NaN（非数字），infinity（正无穷），-infinity（负无穷）) 76 | 5. boolean（布尔类型） 77 | 6. object（对象） 78 | 79 | > 五种：除去null属于object 80 | 81 | ```html 82 | 95 | ``` 96 | 97 | 98 | 99 | > 查看数据类型可以使用typeof() 100 | 101 | ![](./images/04.png) 102 | 103 | #### 2.2.2.JS的数据类型自动转化 104 | 105 | > 转化成字符串String(内容) 106 | > 107 | > 传什么出来什么的字符串格式，类似于java的对象.toString(),变量+"",String.valueOf(内容) 108 | 109 | > 转化成布尔Boolean(内容) 110 | > 111 | > 只有六种情况转化成布尔是false，六种: undefined null "" 0 NaN false 112 | 113 | > 转化成数字Number(内容) 114 | 115 | 1. undefined -->NaN 116 | 2. null --> 0 117 | 3. "123" --> 123 118 | 4. "00123" --> 123 119 | 5. 123abc --> NaN 120 | 6. true --> 1 121 | 7. false -->0 122 | 123 | ```html 124 | 146 | ``` 147 | 148 | 149 | 150 | ![](./images/05.png) 151 | 152 | > 补充：类型自动转化 153 | 154 | ![](./images/07.png) 155 | 156 | #### 2.2.3.js关系（比较）运算 157 | 158 | > == 等值符,类型相同直接比较值，类型不同转化成相同类型再比较值。 159 | 160 | ```html 161 | 168 | ``` 169 | 170 | 171 | 172 | 1. 如果是数字，布尔，字符串三者进行比较，转化成数字进行比较。 173 | 2. 如果出现了null或者undefined，则不进行类型的转化，null和undefined除了和自己相等就彼此相等。 174 | 175 | > === 等同符，类型相同比较值，类型不同直接false。 176 | 177 | > 注意： 178 | > 179 | > true=="true"//如果是数字，布尔，字符串三者进行比较，转化成数字进行比较，所以是false 180 | > 181 | > NaN==NaN//NaN和所有包括自己都是不相等的** 182 | 183 | ​ ![](./images/06.png) 184 | 185 | > 补充：**document.write(内容); 往页面输出内容** 186 | 187 | #### 2.2.4.逻辑运算 188 | 189 | > &&与运算 190 | 191 | 1. 当表达式全为真。返回最后一个表达式的值 192 | 2. 当表达式有一个为真。返回第一个为假的表达式的值 193 | 194 | > ||或运算 195 | 196 | 1. 当表达式全为假时，返回最后个表达式的值 197 | 2. 当只有一个表达式为真。就返回第一个为真的表达式的值 198 | 199 | > && 和 || 运算有短路，如果第一个表达式已经得到结果。后面的表达式就不在执行了 200 | 201 | ```html 202 | 225 | ``` 226 | 227 | 228 | 229 | ![](./images/08.png) 230 | 231 | 232 | 233 | #### 2.2.5.JS的语句 234 | 235 | > if-else语句 236 | 237 | ```js 238 | var a = true 239 | //if-else分支语句 240 | if(a){ 241 | console.log("a为真") 242 | } else{ 243 | console.log("a为假") 244 | } 245 | ``` 246 | 247 | > switch语句 248 | 249 | ```js 250 | //switch语句，不写break会下穿 251 | var b = 1; 252 | switch (b) { 253 | case 0: 254 | console.log("b为0") 255 | break; 256 | case 1: 257 | console.log("b为1") 258 | break; 259 | default: 260 | console.log("b为默认值") 261 | break; 262 | } 263 | ``` 264 | 265 | > 普通for循环 266 | 267 | ```js 268 | //普通for循环 269 | var c = [0,1,2,3] 270 | var d = {"key1":"value1", "key2":"value2", "key3":"value3"} 271 | //数组 272 | for (let i = 0; i < c.length; i++) { 273 | console.log(c[i]) 274 | } 275 | ``` 276 | 277 | > 增强for循环 278 | 279 | ```js 280 | //增强for循环 281 | for(var i in c){ 282 | console.log(i) 283 | } 284 | for(var i in d){ 285 | console.log(i) 286 | } 287 | ``` 288 | 289 | ![](./images/09.png) 290 | 291 | ## 3.渐入JavaScript 292 | 293 | ### 3.1.JS数组 294 | 295 | > 第一种 296 | 297 | ```js 298 | var arr = new Array(ele1,ele2,ele3) 299 | ``` 300 | 301 | > 第二种 302 | 303 | ```js 304 | var arr = new Array(数组长度) 305 | ``` 306 | 307 | > 第三种 308 | 309 | ```js 310 | var arr = [ele1, ele2, ele3] 311 | ``` 312 | 313 | ```js 314 | var a = new Array(0, "a", null, true) 315 | console.log(a.length)//4 316 | var b = new Array(5) 317 | console.log(b.length)//5 318 | var c = [0, "a", null, false] 319 | console.log(c[3])//第四个元素是false，索引是3 320 | 321 | c.push("123")//push可以添加多个元素 ， 尾部添加 322 | console.log(c[4])//"123" 323 | var i = c.pop()//pop移除最后一个元素并返回 324 | console.log(i)//"123" 325 | var d = c.unshift("abc")//往数组的前面添加一个或多个元素，并且返回新数组的长度 326 | console.log(d)//新数组长度为5 327 | var e = c.shift()//移除数组的第一个元素并且返回该元素 328 | console.log(e)//"abc" 329 | var aa = [0, 1, 2, 3] 330 | console.log(String(aa)) 331 | aa.splice(1,1,"aaa", "bbb")//在索引为1的地方开始删除1个元素，在删除后加上2个元素 332 | console.log(String(aa))// aa = [0, "aaa", "bbb", 2, 3] 333 | ``` 334 | 335 | ![](./images/10.png) 336 | 337 | > JS数组特点 338 | 339 | 1. 可以存放任意类型数据 340 | 2. 长度可以任意改变 341 | 342 | > 常用api 343 | 344 | 1. push() 往数组的尾部添加一个或多个元素，并且返回新数组的长度 345 | 2. pop() 移除数组的最后一个元素并且返回该元素 346 | 3. unshift() 往数组的前面添加一个或多个元素，并且返回新数组的长度 347 | 4. shift() 移除数组的第一个元素并且返回该元素 348 | 5. splice(start, deleteCount, value...) 插入、删除或替换数组的元素 start 开始插入或者删除的数组元素下标 deletecount表示删除的个数 value要插入的数据，一个或者多个 349 | 350 | ### 3.2.JS函数 351 | 352 | > 第一种定义方式：function 函数名 (形参列表){函数体} 353 | 354 | ```js 355 | function fun1(p) { 356 | console.log("第一种方式定义的形参是：" + p) 357 | } 358 | fun1("函数1") 359 | ``` 360 | 361 | > 第二种定义方式：var 函数名=function(形参列表){函数体} 362 | 363 | ```js 364 | var fun2 = function(p) { 365 | console.log("第二种方式定义的形参是：" + p) 366 | } 367 | fun2("函数2") 368 | ``` 369 | 370 | > 第三种定义方式：var 函数名=new Function(形参列表，函数体); 371 | > 372 | > 注意 参数全部必须用字符串格式。 373 | 374 | ```js 375 | var fun3 = new Function("p", "console.log('第三种方式定义的形参是：' + p)") 376 | fun3("函数3") 377 | ``` 378 | 379 | > **三种方式的共同点，都可以声明一个函数。** 380 | > 381 | > **三种方式的区别在于加载的时机不同，第一种会具备优先级，第二三种是顺序加载。第一种无论代码在哪写直接就提到最前面加载了，第二种第三种是代码执行到声明时候才会加载** 382 | 383 | ```js 384 | //测试重载覆盖和加载顺序 385 | var testSame = function () { 386 | console.log("我使用第二种定义函数的方式定义在前面") 387 | } 388 | function testSame() { 389 | console.log("我使用第一种定义函数的方式定义在后面") 390 | } 391 | testSame() 392 | ``` 393 | 394 | > 隐形参数 `arguments` 395 | 396 | ```js 397 | //隐形参数 arguments 398 | function testArg() { 399 | console.log(arguments.length) 400 | for (let i = 0; i < arguments.length; i++) { 401 | console.log(arguments[i]) 402 | } 403 | } 404 | testArg(1, "aa", false) 405 | ``` 406 | 407 | > 特点 408 | 409 | 1. js的函数没有重载的概念，直接覆盖上一次的函数定义 410 | 2. 写相同的函数名会按照加载的顺序进行覆盖，如果第一种定义方式和第二种第三种混用，第一种第一方式的函数一定会被覆盖掉 411 | 3. 形参的个数和实参的个数没有关系 412 | 413 | > 补充：匿名自调用函数 414 | 415 | ```js 416 | //匿名自调用函数 417 | (function (p) { 418 | console.log("匿名自调用函数:" + p) 419 | })(1) 420 | ``` 421 | 422 | - 语法：`(function(形参列表){函数体})(实参列表)` 423 | - 特点：加载完成之后立即会自己调用自己一次，并且只能调用一次 424 | - 作用：可以用来初始化一些参数或者是配置 425 | 426 | ![](./images/11.png) 427 | 428 | ### 3.3.JS对象 429 | 430 | > object形式的自定义对象 431 | 432 | ```js 433 | //对象的定义 434 | var obj = new Object() //对象实例(空对象) 435 | obj.name = "张三" //给对象定义一个name的属性并赋值为"张三" 436 | obj.fun = function () { 437 | console.log("obj的姓名是：" + this.name) 438 | } 439 | //调用 440 | obj.fun() 441 | ``` 442 | 443 | > ​ **对象的特性:** 444 | 445 | 1. **动态的添加属性:对象.属性名=值** 446 | 2. **动态的添加函数:对象.函数名=function(){}** 447 | 3. **动态的删除属性或者函数** 448 | - **delete 对象.函数名** 449 | - **delete 对象.属性名** 450 | 451 | > json对象形式定义对象 452 | 453 | ```js 454 | // {}形式定义对象 455 | var person = {name: "李四"} 456 | person.age = 18 457 | person.fun = function () { 458 | console.log("person的姓名是：" + this.name) 459 | console.log("person的年龄是：" + this.age) 460 | } 461 | person.fun() 462 | ``` 463 | 464 | 465 | 466 | > json对象取值： 467 | 468 | 1. **通过.的方式取值 json对象.x 找json的x键所对应的值** 469 | 2. **通过中括号的方式取值 json对象[x] 注意中括号中如果没有加引号，则x代表变量，如果带上引号则代表的是键** 470 | 471 | ```js 472 | console.log(person.name)//通过.的方式取值 473 | console.log(person["age"])//**通过中括号的方式取值 474 | ``` 475 | 476 | > 添加删除值： 477 | 478 | ```js 479 | // 添加值: 480 | person.sex = "男" 481 | person['address'] = "成都" 482 | // 删除值: 483 | delete person.sex 484 | delete person['age'] 485 | ``` 486 | 487 | 1. **json对象.属性名=值** 488 | 2. **json对象[属性名]=值** 489 | 3. **delete json对象.属性名** 490 | 4. **delete json对象[属性名]** 491 | 492 | > 遍历json都对象： 493 | 494 | ​ **for(var 变量名 in json对象){}** 495 | 496 | ​ **变量名代表键** 497 | 498 | ​ **json对象[变量名] 代表值** 499 | 500 | ```js 501 | for(var i in person){ 502 | console.log("key:" + i + ", value:" + person[i]) 503 | } 504 | ``` 505 | 506 | 507 | 508 | > **对象机制**： 509 | 510 | **Object是js对象的祖先，所有定义在Object里面的方式、属性、特点其他对象都可以使用。** 511 | 512 | > **prototype原型** 513 | 514 | **可以给已经写好的模板添加自定义的属性或者是函数。** 515 | 516 | ![](./images/12.png) 517 | 518 | ### 3.4.JS的内置函数和对话框 519 | 520 | > **eval(字符串形式的js代码)：** 作用以js的方式解析字符串，可以简单的理解成去掉字符串的首尾引号。 常见用法: eval("var 变量名="+字符串格式的js对象); 521 | 522 | ```js 523 | 524 | ``` 525 | 526 | > **parseInt(字符串) ：** 作用将传入的字符串转化成整数，特殊用法: parseInt("100abc")-->100 可以用来操作像素px。 527 | 528 | ```js 529 | //eval(字符串形式的js代码)： 530 | eval("var a = {name: 'zzz', age: 18}") 531 | console.log("a的姓名：" + a.name + "a的年龄：" + a.age) 532 | //parseInt(字符串) parseInt("100px")-->100 可以用来操作像素px 533 | console.log(parseInt("123")) 534 | console.log(parseInt("123px")) 535 | ``` 536 | 537 | > **parseFloat(字符串)** 538 | 539 | ```js 540 | //parseFloat(字符串) 541 | console.log(parseFloat("10.2")) 542 | ``` 543 | 544 | > **isNaN() ：** 判断是否是NaN 545 | 546 | ```js 547 | //isNaN 548 | console.log("123是NaN:" + isNaN("123"))//false 549 | console.log("123abc是NaN:" + isNaN("123abc"))//true 550 | ``` 551 | 552 | > **isFinite ()：** 判断是否有限 553 | 554 | ```js 555 | //isFinite 556 | console.log(isFinite("123"))//true 557 | var c = 1/0; 558 | console.log(isFinite(c))//false 559 | ``` 560 | 561 | **对话框** 562 | 563 | > **alert(内容) 警告框，弹出警告框显示内容** 564 | 565 | ```js 566 | alert("这是警告框") 567 | ``` 568 | 569 | > **prompt(内容) 询问框，弹出询问框点击确定返回用户输入的内容，点击取消返回null** 570 | 571 | ```js 572 | prompt("这是询问框") 573 | ``` 574 | 575 | > **confirm(内容) 确认框，弹出确认框显示内容，点击确定返回true,点击取消返回false** 576 | 577 | ```js 578 | //confirm(内容) 579 | confirm("这是内容框") 580 | ``` 581 | 582 | ![](./images/13.png) 583 | 584 | ## 4.JavaScript的事件 585 | 586 | 事件就是用来与页面进行交互的，例如点击登录按钮进行登录就有点击事件。 587 | 588 | ### 4.1.常用事件 589 | 590 | ``` 591 | onload 页面加载完成 592 | onclick 单击事件 593 | ondblclick 双击事件 594 | onfocus 成为焦点 595 | onblur 失去焦点 596 | onchange 改变值并且失去焦点 597 | onkeydown 键盘按键 598 | onmousemove 鼠标移动 599 | onmouseover 鼠标移入 600 | onmouseout 鼠标移出 601 | onsubmit 表单提交的时候触发 602 | onmousedown 鼠标按键 603 | ``` 604 | 605 | ### 4.2.事件的注册（绑定） 606 | 607 | 就是当事件响应后要执行那些代码，叫做事件的注册或绑定。 608 | 609 | > 静态绑定事件 610 | 611 | 通过html的标签的事件属性字节赋予事件响应后的代码，这种叫静态绑定。例如onload 612 | 613 | > 动态绑定事件 614 | 615 | 先通过js代码得到标签的dom对象，然后在通过`dom对象.事件名 = function(){}`这种形式赋予事件响应后的代码，叫动态注册。动态注册基本步骤： 616 | 617 | 1. 获取标签对象 618 | 2. 标签对象.事件名 = function(){} 619 | 620 | ### 4.3.onload事件 621 | 622 | ```html 623 | 624 | 625 | 626 | 627 | 628 | Document 629 | 636 | 637 | 639 | 640 | 641 | 642 | ``` 643 | 644 | ![](./images/14.png) 645 | 646 | ### 4.4.onclick点击事件 647 | 648 | ```html 649 | 650 | 651 | 652 | 653 | 669 | 670 | 671 | 672 | 673 | 674 | 675 | 676 | ``` 677 | 678 | ![](./images/15.gif) 679 | 680 | ### 4.5.onblur失去焦点 681 | 682 | 输入框由选中状态变成未选中状态。 683 | 684 | ```html 685 | 686 | 687 | 688 | 689 | 704 | 705 | 706 | 用户名：
707 | 密码： 708 | 709 | 710 | ``` 711 | 712 | ![](./images/16.gif) 713 | 714 | ### 4.6.onchange事件改变触发 715 | 716 | ```html 717 | 718 | 719 | 720 | 721 | 736 | 737 | 738 | 请选择省份： 739 | 740 | 746 |
747 | 748 | 749 | 请选择城市： 750 | 756 | 757 | 758 | ``` 759 | 760 | ![](./images/17.gif) 761 | 762 | ### 4.7.onsubmit事件表单提交 763 | 764 | 常用于表单提交验证。 765 | 766 | ```html 767 | 768 | 769 | 770 | 771 | 792 | 793 | 794 | 795 |
796 | 797 |
798 | 799 |
800 | 801 |
802 | 803 | ``` 804 | 805 | ![](./images/18.gif) 806 | 807 | ## 5.DOM模型 808 | 809 | DOM模型全称是Document Object Model 文档对象模型。 810 | 811 | 就是把html文档的标签、属性、文本都转化成为对象。 812 | 813 | ![](./images/19.png) 814 | 815 | > **理解: window的层级结构，window下面有document,history,location,navigator。** 816 | 817 | ### 5.1.Document对象 818 | 819 | > document对象的理解 820 | 821 | 1. Document管理了所有的HTML文档内容 822 | 2. docment他是一种树结构的文档，层级关系 823 | 3. 可以将所有的标签对象化 824 | 4. 我们可以通过document访问所有的标签对象 825 | 826 | ![](./images/20.png) 827 | 828 | > 常用的方法 829 | 830 | 1. document.getElementById()根据标签id属性 831 | 2. document.getElementsByName() 根据标签name属性 832 | 3. document.getElementsByClassName() 根据标签class属性 833 | 4. document.getElementsByTagName("button") 根据标签名 834 | 835 | ```html 836 | 837 | 838 | 839 | 840 | 858 | 859 | 860 | 用户名： 861 | 862 |
863 | 用户名： 864 | 865 |
866 | 用户名： 867 | 868 |
869 | 870 | 871 | 872 | ``` 873 | 874 | ![](./images/21.gif) 875 | 876 | > 注意 877 | 878 | 1. document对象几个查询方法优先使用document.getElementById() 879 | 2. 如果没有id属性，优先使用document.getElementByName()查询或者document.getElementByClassName() 880 | 3. 如果id属性和name属性都没有最后按标签名差 881 | 882 | ### 5.2.节点常用属性和方法 883 | 884 | 节点就是标签对象，页面上的节点分为三种，元素节点，文本节点，属性节点。 885 | 886 | > 直接获取节点方式 887 | 888 | 1. **document.getElementById(id值) 通过id获取元素节点**、 889 | 2. **document.getElementsByTagName(标签名) 通过标签名获取节点** 890 | 3. **document.getElementsByName(name值) 通过name获取节点集合，注意低版本ie只认识表单及表单域元素的name,其他元素找的是id**、 891 | 4. **document.getElementsByClassName(className) ** 892 | 893 | > 间接获取方式 894 | 895 | 1. **父节点.childNodes 获取该父节点下的子节点集合** 896 | 2. **父节点.firstChild 获取父节点的第一个子节点** 897 | 3. **父节点.lastChild 获取父节点的最后一个子节点** 898 | 4. **子节点.parentNode 获取该子节点所在的父节点** 899 | 5. **元素节点.nextSibling 获取下一个兄弟节点** 900 | 6. **元素节点.previousSibling 获取上一个兄弟节点** 901 | 902 | > **注意:除了获取父节点没有浏览器差异性问题，其他获取方式火狐会将文本节点当做节点获取。** 903 | 904 | > 节点过滤： 905 | > 906 | > **通过节点.nodeType 获取节点的类型 元素节点1 文本节点3** 907 | 908 | > 操作文档对象模型 909 | 910 | 1. 创建新的元素节点：**document.createElement(标签名)** 911 | 2. 尾部追加新的子节点：**父节点.appendChild(新的子节点)** 912 | 3. 插入新的子节点：**父节点.insertBefore(新的，在谁之前)** 913 | 4. 替换子节点：**父节点.replaceChild(新的，旧的)** 914 | 5. 删除子节点：**父节点.removeChild(子节点)** 915 | 916 | > 注意：**如果追加、替换、插入的是已有的节点，则原来的节点会消失，解决方式可以使用克隆。** 917 | 918 | **克隆的语法:** 919 | 920 | **元素节点.cloneNode(布尔)** 921 | 922 | **true 深度克隆，克隆标签及其中间内容** 923 | 924 | **false 浅层克隆，只克隆标签及其属性不克隆标签中间的内容** 925 | 926 | ### 5.3.window对象 927 | 928 | > 设置轮询： 929 | > 930 | > **window.setInterval(函数|字符串,毫秒数);** 931 | > 932 | > ​ **返回该轮询唯一的id** 933 | 934 | 935 | 936 | ```js 937 | var id = setInterval(function(){ alert("Hello"); }, 3000) 938 | console.log(id) 939 | ``` 940 | 941 | 每三秒弹一次警告框。 942 | 943 | ![](./images/22.gif) 944 | 945 | 946 | 947 | > **清除轮询:** 948 | > 949 | > ​ **window.clearInterval(轮询的id)** 950 | 951 | ```js 952 | window.clearInterval(1) 953 | ``` 954 | 955 | > **设置延时:** 956 | > 957 | > ​ **window.setTimeout(函数|字符串,毫秒数);** 958 | > 959 | > ​ **返回该延时唯一的id** 960 | 961 | ```js 962 | var id2 = window.setTimeout(function(){ alert("Hello"); }, 3000) 963 | console.log(id2) 964 | ``` 965 | 966 | 3 秒（3000 毫秒）后弹出 "Hello" 967 | 968 | > **清除延时:** 969 | > 970 | > ​ **window.clearTimeout(延时的id)** 971 | 972 | ```js 973 | window.clearTimeout(1) 974 | ``` 975 | 976 | ### 5.4.其他对象 977 | 978 | > history浏览器二点历史记录(前进后退) 979 | > 980 | > **语法:** 981 | > 982 | > ​ **history.go(整数)** 983 | 984 | ```js 985 | history.go(-1)后退到上一个页面 986 | history.go(1)前进到下一个页面 987 | ``` 988 | 989 | > **location浏览器的地址栏:** 990 | > 991 | > ​ **语法:** 992 | > 993 | > ​ **window.location=新地址 控制跳转** 994 | 995 | ```js 996 | window.location = "www.baidu.com" 997 | ``` 998 | 999 | > **navigator获取浏览器的内核信息:** 1000 | > 1001 | > ​ **语法:** 1002 | > 1003 | > ​ **navigator.userAgent 可以用来解决浏览器的差异性问题** 1004 | 1005 | ```js 1006 | navigator.userAgent 1007 | ``` 1008 | 1009 | ## 6.补充table对象API 1010 | 1011 | > 属性： 1012 | 1013 | 1. **table对象.rows 获取该表格下的行集合** 1014 | 2. **tr对象.cells 获取该行下的列集合** 1015 | 3. **tr对象.rowIndex 获取该行的索引** 1016 | 1017 | > 方法： 1018 | 1019 | 1. **table对象.insertRow(索引) 往该表格插入新的一行并且返回插入的这一个行元素，如果不写索引默认是尾部追加** 1020 | 2. **table对象.deleteRow(索引) 删除该表格的对应索引的行** 1021 | 3. **tr对象.insertCell(索引) 往该行插入新的一列并且返回插入的这一个列元素，如果不写索引默认是尾部追加** 1022 | 1023 | ```html 1024 | 1025 | 1026 | 1027 | 1028 | 1047 | 1048 | 1049 | 1050 | 1051 | 1052 | 1053 | 1054 | 1055 | 1056 | 1057 | 1058 | 1059 | 1060 | 1061 | 1062 | 1063 | 1064 | 1065 | 1066 | 1067 | 1068 | 1069 | 1070 |
第1列第2列第3列
1-11-21-3
2-12-22-3
3-13-23-3
1071 |
1072 | 1073 | 1074 | 1075 | 1076 | ``` 1077 | 1078 | ![](./images/23.png) 1079 | 1080 | ## 7.其他补充 1081 | 1082 | ### 7.1正则表达式对象 1083 | 1084 | ​ **创建:** 1085 | 1086 | 1. **/正则表达式/flags** 1087 | 2. **new RegExp("正则表达式","flags")** 1088 | 1089 | ​ **flags:** 1090 | 1091 | ​ **i 忽略大小写** 1092 | 1093 | ​ **g 全局匹配** 1094 | 1095 | ​ **ig 同时使用上面两种** 1096 | 1097 | ​ **方法:** 1098 | 1099 | ​ **test 查看是否匹配 匹配则返回true 不匹配返回false** 1100 | 1101 | ```js 1102 | //表示要求字符串中是否包含字母e 1103 | var patt = new RegExp("e") 1104 | console.log(patt.test("abcde"))//true 1105 | console.log(patt.test("abcdE"))//flase 1106 | var patt2 = /e/ //等价于var patt = new RegExp("e") 1107 | 1108 | // 表示要求字母a或者b或者c 1109 | var patt3 = /[abc]/ 1110 | console.log(patt2.test("a123")) 1111 | 1112 | //表示要求字符串是否包含小写字母 1113 | var patt4 = /[a-z]/ 1114 | //表示字符串是否包含任意大写字母 1115 | var patt4 = /[A-Z]/ 1116 | //表示字符串是否包含任意数字 1117 | var patt5 = /[0-9]/ 1118 | //表示要求字符串是否包含字母数字下划线 1119 | var patt6 = /\w/ 1120 | //表示要求字符串是否包含至少一个a 1121 | var patt7 = /a+/ 1122 | //表示要求字符串是否包含0个或者多个a 1123 | var patt8 = /a*/ 1124 | //表示要求字符串是否包含一个或者0个a 1125 | var patt9 = /a?/ 1126 | //表示是否包含连续三个a 1127 | var patt10 = /a{3}/ 1128 | //表示是否包含3-5个a 1129 | var patt11 = /a{3,5}/ 1130 | //表示是否包含至少三个连续a 1131 | var patt12 = /a{3,}/ 1132 | //表示必须以a开始 1133 | var patt13 = /^a/ 1134 | //表示必须以a结束 1135 | var patt14 = /a$/ 1136 | ``` 1137 | 1138 | ### 7.2其他补充 1139 | 1140 | > 操作属性节点 1141 | 1142 | ​ **第一种:** 1143 | 1144 | ​ **元素节点.属性名=值** 1145 | 1146 | ​ **元素节点.属性名** 1147 | 1148 | ​ **第二种：** 1149 | 1150 | ​ **元素节点.setAttribute(键，值)** 1151 | 1152 | ​ **元素节点.getAttribute(键)** 1153 | 1154 | ​ **一般的属性可以通过第一种方式操作，如果发现第一种操作不能获取到属性，通过第二种方式一定可以操作。** 1155 | 1156 | > JS操作CSS 1157 | 1158 | **1)操作css的单个属性** 1159 | 1160 | ​ **元素节点.style.属性名=值** 1161 | 1162 | ​ **注意点:** 1163 | 1164 | ​ **1.属性名如果本身有-，则会将-去掉并且将后面的那个字母转为大写。 例如: font-size background-color** 1165 | 1166 | ​ **2.如果属性没有设置则属性默认的值是空字符串** 1167 | 1168 | ​ **2)操作整个style属性** 1169 | 1170 | ​ **元素节点.style.cssText="属性:值;属性:值....."** 1171 | 1172 | ​ **3)操作class属性** 1173 | 1174 | ​ **1.元素节点.className="值"** 1175 | 1176 | ​ **2.元素节点.setAttribute("class","值")** 1177 | 1178 | > 表单 1179 | 1180 | **获取表单的专用方式:** 1181 | 1182 | ​ **document.formName** 1183 | 1184 | ​ **document.forms[id]** 1185 | 1186 | ​ **document.forms[idx]** 1187 | 1188 | ​ **document.forms[name]** 1189 | 1190 | ​ **表单的属性:** 1191 | 1192 | ​ **action** 1193 | 1194 | ​ **method** 1195 | 1196 | ​ **id** 1197 | 1198 | ​ **name** 1199 | 1200 | ​ **elements 获取该表单下的表单域元素集合** 1201 | 1202 | ​ **...** 1203 | 1204 | ​ **表单的方法:** 1205 | 1206 | ​ **form对象.submit() 提交表单** 1207 | 1208 | ​ **form对象.reset() 重置表单** 1209 | 1210 | ​ **表单的事件:** 1211 | 1212 | ​ **onsubmit 在表单提交的时候触发** 1213 | 1214 | ​ **onreset 在表单重置的时候触发** 1215 | 1216 | **表单域元素:** 1217 | 1218 | ​ **获取表单域元素的专用方式:** 1219 | 1220 | ​ **form对象.表单域name** 1221 | 1222 | ​ **form对象.elements[idx]** 1223 | 1224 | ​ **form对象.elements[id]** 1225 | 1226 | ​ **form对象.elements[name]** 1227 | 1228 | ​ 1229 | 1230 | ​ **表单域的属性:** 1231 | 1232 | ​ **type** 1233 | 1234 | ​ **value** 1235 | 1236 | ​ **name** 1237 | 1238 | ​ **disabled 失效，灰掉 值不可以修改，并且提交的时候不会提交** 1239 | 1240 | ​ **readonly 只读 值不可以修改，但是提交的时候可以提交** 1241 | 1242 | ​ **form 获取该表单域元素所在的表单对象** 1243 | 1244 | ​ 1245 | 1246 | ​ **表单域的方法:** 1247 | 1248 | ​ **表单域.focus() 使之成为焦点** 1249 | 1250 | ​ **表单域.blur() 使之失去焦点** 1251 | 1252 | **文本域(text,password,textarea):** 1253 | 1254 | ​ **获取当前值:** 1255 | 1256 | ​ **value** 1257 | 1258 | ​ **获取默认值:** 1259 | 1260 | ​ **defaultValue** 1261 | 1262 | ​ **补充:** 1263 | 1264 | ​ **placeholder 文本域中灰色的默认字体** 1265 | 1266 | **单选按钮:** 1267 | 1268 | ​ **获取单选按钮的值:** 1269 | 1270 | ​ **1)遍历单选按钮集合，查看checked属性，为true则为选中。** 1271 | 1272 | ​ **2)表单对象.单选按钮name.value** 1273 | 1274 | **下拉列表:** 1275 | 1276 | ​ **获取值:** 1277 | 1278 | ​ **1)遍历option集合，查看selected属性，为true则为选中。(获取option集合，1.通过getChildNodes(select对象) 2.select对象.options)** 1279 | 1280 | ​ **2)直接通过select对象.value** -------------------------------------------------------------------------------- /02-JavaScript/03-JS的数据类型自动转化.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /02-JavaScript/04-JS的关系（比较运算）.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /02-JavaScript/05-JS的逻辑运算.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /02-JavaScript/06-JS的语句.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 43 | 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /02-JavaScript/07-JS数组.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /02-JavaScript/08-JS函数.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /02-JavaScript/09-JS对象.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /02-JavaScript/10-JS内置函数.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /02-JavaScript/11-onload事件.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 14 | 15 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /02-JavaScript/12-onclick单击事件.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /02-JavaScript/13-onblur失去焦点.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 20 | 21 | 22 | 用户名：
23 | 密码： 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /02-JavaScript/14-onchange事件.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 20 | 21 | 22 | 请选择省份： 23 | 24 | 30 |
31 | 32 | 33 | 请选择城市： 34 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /02-JavaScript/15-onsubmit表单提交事件.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 26 | 27 | 28 | 29 |
30 | 31 |
32 | 33 |
34 | 35 |
36 | 37 | 38 | 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /02-JavaScript/16-document对象.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 23 | 24 | 25 | 用户名： 26 | 27 |
28 | 用户名： 29 | 30 |
31 | 用户名： 32 | 33 |
34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /02-JavaScript/17-window对象.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /02-JavaScript/18-table对象API.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 |
第1列第2列第3列
1-11-21-3
2-12-22-3
3-13-23-3
48 |
49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /02-JavaScript/19-正则表达式.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /02-JavaScript/images/01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangtianyi0110/JavaWebLearnNotes/50b5e3033d48732d36308c221dcce84c930a672e/02-JavaScript/images/01.png -------------------------------------------------------------------------------- /02-JavaScript/images/02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangtianyi0110/JavaWebLearnNotes/50b5e3033d48732d36308c221dcce84c930a672e/02-JavaScript/images/02.png -------------------------------------------------------------------------------- /02-JavaScript/images/03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangtianyi0110/JavaWebLearnNotes/50b5e3033d48732d36308c221dcce84c930a672e/02-JavaScript/images/03.png -------------------------------------------------------------------------------- /02-JavaScript/images/04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangtianyi0110/JavaWebLearnNotes/50b5e3033d48732d36308c221dcce84c930a672e/02-JavaScript/images/04.png -------------------------------------------------------------------------------- /02-JavaScript/images/05.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangtianyi0110/JavaWebLearnNotes/50b5e3033d48732d36308c221dcce84c930a672e/02-JavaScript/images/05.png -------------------------------------------------------------------------------- /02-JavaScript/images/06.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangtianyi0110/JavaWebLearnNotes/50b5e3033d48732d36308c221dcce84c930a672e/02-JavaScript/images/06.png -------------------------------------------------------------------------------- /02-JavaScript/images/07.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangtianyi0110/JavaWebLearnNotes/50b5e3033d48732d36308c221dcce84c930a672e/02-JavaScript/images/07.png -------------------------------------------------------------------------------- /02-JavaScript/images/08.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangtianyi0110/JavaWebLearnNotes/50b5e3033d48732d36308c221dcce84c930a672e/02-JavaScript/images/08.png -------------------------------------------------------------------------------- /02-JavaScript/images/09.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangtianyi0110/JavaWebLearnNotes/50b5e3033d48732d36308c221dcce84c930a672e/02-JavaScript/images/09.png -------------------------------------------------------------------------------- /02-JavaScript/images/10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangtianyi0110/JavaWebLearnNotes/50b5e3033d48732d36308c221dcce84c930a672e/02-JavaScript/images/10.png -------------------------------------------------------------------------------- /02-JavaScript/images/11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangtianyi0110/JavaWebLearnNotes/50b5e3033d48732d36308c221dcce84c930a672e/02-JavaScript/images/11.png -------------------------------------------------------------------------------- /02-JavaScript/images/12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangtianyi0110/JavaWebLearnNotes/50b5e3033d48732d36308c221dcce84c930a672e/02-JavaScript/images/12.png -------------------------------------------------------------------------------- /02-JavaScript/images/13.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangtianyi0110/JavaWebLearnNotes/50b5e3033d48732d36308c221dcce84c930a672e/02-JavaScript/images/13.png -------------------------------------------------------------------------------- /02-JavaScript/images/14.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangtianyi0110/JavaWebLearnNotes/50b5e3033d48732d36308c221dcce84c930a672e/02-JavaScript/images/14.png -------------------------------------------------------------------------------- /02-JavaScript/images/15.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangtianyi0110/JavaWebLearnNotes/50b5e3033d48732d36308c221dcce84c930a672e/02-JavaScript/images/15.gif -------------------------------------------------------------------------------- /02-JavaScript/images/16.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangtianyi0110/JavaWebLearnNotes/50b5e3033d48732d36308c221dcce84c930a672e/02-JavaScript/images/16.gif -------------------------------------------------------------------------------- /02-JavaScript/images/17.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangtianyi0110/JavaWebLearnNotes/50b5e3033d48732d36308c221dcce84c930a672e/02-JavaScript/images/17.gif -------------------------------------------------------------------------------- /02-JavaScript/images/18.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangtianyi0110/JavaWebLearnNotes/50b5e3033d48732d36308c221dcce84c930a672e/02-JavaScript/images/18.gif -------------------------------------------------------------------------------- /02-JavaScript/images/19.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangtianyi0110/JavaWebLearnNotes/50b5e3033d48732d36308c221dcce84c930a672e/02-JavaScript/images/19.png -------------------------------------------------------------------------------- /02-JavaScript/images/20.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangtianyi0110/JavaWebLearnNotes/50b5e3033d48732d36308c221dcce84c930a672e/02-JavaScript/images/20.png -------------------------------------------------------------------------------- /02-JavaScript/images/21.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangtianyi0110/JavaWebLearnNotes/50b5e3033d48732d36308c221dcce84c930a672e/02-JavaScript/images/21.gif -------------------------------------------------------------------------------- /02-JavaScript/images/22.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangtianyi0110/JavaWebLearnNotes/50b5e3033d48732d36308c221dcce84c930a672e/02-JavaScript/images/22.gif -------------------------------------------------------------------------------- /02-JavaScript/images/23.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhangtianyi0110/JavaWebLearnNotes/50b5e3033d48732d36308c221dcce84c930a672e/02-JavaScript/images/23.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # VueLearnNotes 2 | JavaWeb学习笔记 3 | 4 | - [01-HTML和CSS](./01-HTML和CSS/01-HTML和CSS.md) 5 | - [02-JavaScript](./02-JavaScript/02-JavaScript.md) 6 | 7 | --------------------------------------------------------------------------------