学习地址：

1. 谷粒学院——尚硅谷
2. 哔哩哔哩网站——尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通)

---

JavaScript基础、高级学习笔记汇总表【尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通)】

目   录

P88 88.尚硅谷_JS基础_正则表达式语法 23:30

量词

^表示开头；$表示结尾

检查合法手机号

P89 89.尚硅谷_JS基础_正则表达式语法 23:46

元字符.：表示任意字符

检查一个字符串中是否含有 .

检查一个字符串中是否含有 \

转义字符

其它重要元字符

1、\w：任意字母、数字、_  [A-z0-9_]   \W：除了字母、数字、_  [^A-z0-9_]

2、\d：任意的数字 [0-9]   \D：除了数字 [^0-9]

3、\s：空格   \S：除了空格

4、\b：单词边界   \B：除了单词边界

去除字符串前后空格

P90 90.尚硅谷_JS基础_邮件的正则 12:02

P91 91.尚硅谷_JS基础_DOM简介 24:01

什么是DOM？

节点

节点的属性

文档节点（document）

元素节点（Element）

文本节点（Text）

属性节点（Attr）

事件

获取元素节点

获取元素节点的子节点

获取父节点和兄弟节点

元素节点的属性

其他属性

使用CSS选择器进行查询

节点的修改

P92 92.尚硅谷_JS基础_事件的简介 13:21

事件句柄（Event Handlers）

P93 93.尚硅谷_JS基础_文档的加载 14:24

文档加载，从上到下

onload事件

P94 94.尚硅谷_JS基础_dom查询 22:31

P95 95.尚硅谷_JS基础_图片切换的练习 26:06

P88 88.尚硅谷_JS基础_正则表达式语法 23:30

量词

• 通过量词可以设置一个内容出现的次数。
• 量词只对它前边的一个内容起作用。
• {n}：正好出现n次。
• {m, n}：出现[m, n]次。
• {m,}：m次及以上。
• +：至少一个，相当于{1,}。
• *：0个或多个，相当于{0,}。
• ?：0个或1个，相当于{0,1}。

^表示开头；$表示结尾

如果在正则表达式中同时使用^ $，则要求字符串必须完全符合正则表达式。

  

检查合法手机号

创建一个正则表达式，用来检查一个字符串是否是一个合法手机号

手机号的规则：1 3 567890123 （11位）

1. 第1位：以1开头   ^1
2. 第2位：3~9任意数字   [3-9]
3. 第3位及以后：任意数字9个   [0-9]{9}$：$之后不能再有其它内容。

^1      [3-9]      [0-9]{9}$

P89 89.尚硅谷_JS基础_正则表达式语法 23:46

元字符.：表示任意字符

• . 表示任意字符
• 在正则表达式中使用\作为转义字符
• \. 来表示.
• \\  表示\

检查一个字符串中是否含有 .

检查一个字符串中是否含有 \

转义字符

注意：使用构造函数时，由于它的参数是一个字符串，而\是字符串中转义字符，如果要使用\则需要使用\\来代替。

其它重要元字符

1. \w：任意字母、数字、_  [A-z0-9_]
2. \W：除了字母、数字、_  [^A-z0-9_]
3. \d：任意的数字 [0-9]
4. \D：除了数字 [^0-9]
5. \s：空格
6. \S：除了空格
7. \b：单词边界
8. \B：除了单词边界

1、\w：任意字母、数字、_  [A-z0-9_]   \W：除了字母、数字、_  [^A-z0-9_]

2、\d：任意的数字 [0-9]   \D：除了数字 [^0-9]

3、\s：空格   \S：除了空格

4、\b：单词边界   \B：除了单词边界

创建一个正则表达式检查一个字符串中是否含有单词child。

去除字符串前后空格

P90 90.尚硅谷_JS基础_邮件的正则 12:02

• 电子邮件：hello  .nihao          @     abc  .com.cn
• 任意字母数字下划线    .任意字母数字下划线  @   任意字母数字     .任意字母（2-5位）   .任意字母（2-5位）
• \w{3,}  (\.\w+)*  @  [A-z0-9]+  (\.[A-z]{2,5}){1,2}

P91 91.尚硅谷_JS基础_DOM简介 24:01

什么是DOM？

1. DOM，全称 Document Object Model 文档对象模型。
2. JS中通过DOM来对HTML文档进行操作。只要理解了DOM就可以随心所欲的操作WEB页面。
3. 文档：文档表示的就是整个的HTML网页文档。
4. 对象：对象表示将网页中的每一个部分都转换为了一个对象。
5. 模型：使用模型来表示对象之间的关系，这样方便我们获取对象。

节点

1. 节点Node，是构成我们网页的最基本的组成部分，网页中的每一个部分都可以称为是一个节点。
2. 比如：html标签、属性、文本、注释、整个文档等都是一个节点。
3. 虽然都是节点，但是实际上他们的具体类型是不同的。
4. 比如：标签我们称为元素节点；属性称为属性节点；文本称为文本节点；文档称为文档节点。
5. 节点的类型不同，属性和方法也都不尽相同。

---

• 节点：Node——构成HTML文档最基本的单元。
• 常用节点分为四类

1. 文档节点：整个HTML文档
2. 元素节点：HTML文档中的HTML标签
3. 属性节点：元素的属性
4. 文本节点：HTML标签中的文本内容

节点的属性

浏览器已经为我们提供 文档节点 对象，这个对象是window属性，可以在页面中直接使用，文档节点代表的是整个网页。

文档节点（document）

1. 文档节点document，代表的是整个HTML文档，网页中的所有节点都是它的子节点。
2. document对象作为window对象的属性存在的，我们不用获取可以直接使用。
3. 通过该对象我们可以在整个文档访问内查找节点对象，并可以通过该对象创建各种节点对象。

元素节点（Element）

1. HTML中的各种标签都是元素节点，这也是我们最常用的一个节点。
2. 浏览器会将页面中所有的标签都转换为一个元素节点，我们可以通过document的方法来获取元素节点。
3. 比如：document.getElementById() // 根据id属性值获取一个元素节点对象

文本节点（Text）

1. 文本节点表示的是HTML标签以外的文本内容，任意非HTML的文本都是文本节点。
2. 它包括可以字面解释的纯文本内容。
3. 文本节点一般是作为元素节点的子节点存在的。
4. 获取文本节点时，一般先要获取元素节点。在通过元素节点获取文本节点。
5. 例如：元素节点.firstChild; // 获取元素节点的第一个子节点，一般为文本节点。

属性节点（Attr）

1. 属性节点表示的是标签中的一个一个的属性，这里要注意的是属性节点并非是元素节点的子节点，而是元素节点的一部分。
2. 可以通过元素节点来获取指定的属性节点。
3. 例如：元素节点.getAttributeNode("属性名");
4. 注意：我们一般不使用属性节点。

事件

1. 事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。
2. JavaScript 与 HTML 之间的交互是通过事件实现的。
3. 对于 Web 应用来说，有下面这些代表性的事件：点击某个元素、将鼠标移动至某个元素上方、按下键盘上某个键，等等。

获取元素节点

• 通过document对象调用

1. getElementById()：通过id属性获取一个元素节点对象
2. getElementsByTagName()：通过标签名获取一组元素节点对象
3. getElementsByName()：通过name属性获取一组元素节点对象

获取元素节点的子节点

通过具体的元素节点调用

1. getElementsByTagName()：方法，返回当前节点的指定标签名后代节点
2. childNodes：属性，表示当前节点的所有子节点
3. firstChild：属性，表示当前节点的第一个子节点
4. lastChild：属性，表示当前节点的最后一个子节点

获取父节点和兄弟节点

通过具体的节点调用

1. parentNode：属性，表示当前节点的父节点
2. previousSibling：属性，表示当前节点的前一个兄弟节点
3. nextSibling：属性，表示当前节点的后一个兄弟节点

元素节点的属性

1. 获取，元素对象.属性名。例：element.value、element.id、element.className
2. 设置，元素对象.属性名=新的值。例：element.value = "hello"、element.id = "id01"、element.className = "newClass"

其他属性

1. nodeValue：文本节点可以通过nodeValue属性获取和设置 文本节点的内容
2. innerHTML：元素节点通过该属性获取和设置标签内部的 html代码

使用CSS选择器进行查询

1. querySelector()
2. querySelectorAll()
3. 这两个方法都是用document对象来调用，两个方法使用相同， 都是传递一个选择器字符串作为参数，方法会自动根据选择器字符串去网页中查找元素。
4. 不同的地方是querySelector()只会返回找到的第一个元素，而querySelectorAll()会返回所有符合条件的元素。

节点的修改

这里的修改我们主要指对元素节点的操作。

1. 创建节点：document.createElement(标签名)
2. 删除节点：父节点.removeChild(子节点)
3. 替换节点：父节点.replaceChild(新节点 , 旧节点)
4. 插入节点：父节点.appendChild(子节点)、父节点.insertBefore(新节点 , 旧节点)

P92 92.尚硅谷_JS基础_事件的简介 13:21

事件句柄（Event Handlers）

事件，就是用户和浏览器之间的交互行为，比如：点击按钮，鼠标移动、关闭窗口...

我们可以在事件对应的属性中设置一些js代码，这样当事件被触发时，这些代码将会执行。

这种写法我们称为结构和行为耦合，不方便维护，不推荐使用。

P93 93.尚硅谷_JS基础_文档的加载 14:24

文档加载，从上到下

浏览器在加载一个页面时，是按照自上向下的顺序加载的，读取到一行就运行一行。

如果将script标签写到页面的上边，在代码执行时，页面还没有加载，页面没有加载 DOM对象也没有加载，会导致无法获取到DOM对象。

  

onload事件

js代码，写下面比较好一些。

先加载页面，再加载代码。页面先出来，再执行代码。

P94 94.尚硅谷_JS基础_dom查询 22:31

获取元素节点

1. 通过document对象调用
2. getElementById()：通过id属性获取一个元素节点对象
3. getElementsByTagName()：通过标签名获取一组元素节点对象
4. getElementsByName()：通过name属性获取一组元素节点对象

dom查询练习【1~3】

你喜欢哪个城市?
北京
上海
东京
首尔


你喜欢哪款单机游戏?
红警
实况
极品飞车
魔兽


你手机的操作系统是?
IOS
Android
Windows Phone
gender:MaleFemale

name:查找#bj节点查找所有li节点查找name=gender的所有节点查找#city下所有li节点返回#city的所有子节点返回#phone的第一个子节点返回#bj的父节点返回#android的前一个兄弟节点返回#username的value属性值设置#username的value属性值返回#bj的文本值

P95 95.尚硅谷_JS基础_图片切换的练习 26:06

上一张下一张

2021年1月18日、2021年1月19日，这两天又没学习（看小说）。得赶紧学习。希望能好好学习~

2021年1月20日晚，看完了正则表达式，该看dom了，21号再看dom。早睡早起~

---

   终于看完了，冲冲冲~

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！