学习地址：
JavaScript基础、高级学习笔记汇总表【尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通)】
目 录
1、\w：任意字母、数字、_ [A-z0-9_] \W：除了字母、数字、_ [^A-z0-9_]
2、\d：任意的数字 [0-9] \D：除了数字 [^0-9]
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
- 第2位：3~9任意数字 [3-9]
- 第3位及以后：任意数字9个 [0-9]{9}$：$之后不能再有其它内容。
^1 [3-9] [0-9]{9}$
P89 89.尚硅谷_JS基础_正则表达式语法 23:46
元字符.：表示任意字符
- . 表示任意字符
- 在正则表达式中使用\作为转义字符
- \. 来表示.
- \\ 表示\
检查一个字符串中是否含有 .
检查一个字符串中是否含有 \
转义字符
注意：使用构造函数时，由于它的参数是一个字符串，而\是字符串中转义字符，如果要使用\则需要使用\\来代替。
其它重要元字符
- \w：任意字母、数字、_ [A-z0-9_]
- \W：除了字母、数字、_ [^A-z0-9_]
- \d：任意的数字 [0-9]
- \D：除了数字 [^0-9]
- \s：空格
- \S：除了空格
- \b：单词边界
- \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？
- DOM，全称 Document Object Model 文档对象模型。
- JS中通过DOM来对HTML文档进行操作。只要理解了DOM就可以随心所欲的操作WEB页面。
- 文档：文档表示的就是整个的HTML网页文档。
- 对象：对象表示将网页中的每一个部分都转换为了一个对象。
- 模型：使用模型来表示对象之间的关系，这样方便我们获取对象。
节点
- 节点Node，是构成我们网页的最基本的组成部分，网页中的每一个部分都可以称为是一个节点。
- 比如：html标签、属性、文本、注释、整个文档等都是一个节点。
- 虽然都是节点，但是实际上他们的具体类型是不同的。
- 比如：标签我们称为元素节点；属性称为属性节点；文本称为文本节点；文档称为文档节点。
- 节点的类型不同，属性和方法也都不尽相同。
- 节点：Node——构成HTML文档最基本的单元。
- 常用节点分为四类
- 文档节点：整个HTML文档
- 元素节点：HTML文档中的HTML标签
- 属性节点：元素的属性
- 文本节点：HTML标签中的文本内容
节点的属性
浏览器已经为我们提供 文档节点 对象，这个对象是window属性，可以在页面中直接使用，文档节点代表的是整个网页。
文档节点（document）
- 文档节点document，代表的是整个HTML文档，网页中的所有节点都是它的子节点。
- document对象作为window对象的属性存在的，我们不用获取可以直接使用。
- 通过该对象我们可以在整个文档访问内查找节点对象，并可以通过该对象创建各种节点对象。
元素节点（Element）
- HTML中的各种标签都是元素节点，这也是我们最常用的一个节点。
- 浏览器会将页面中所有的标签都转换为一个元素节点，我们可以通过document的方法来获取元素节点。
- 比如：document.getElementById() // 根据id属性值获取一个元素节点对象
文本节点（Text）
- 文本节点表示的是HTML标签以外的文本内容，任意非HTML的文本都是文本节点。
- 它包括可以字面解释的纯文本内容。
- 文本节点一般是作为元素节点的子节点存在的。
- 获取文本节点时，一般先要获取元素节点。在通过元素节点获取文本节点。
- 例如：元素节点.firstChild; // 获取元素节点的第一个子节点，一般为文本节点。
属性节点（Attr）
- 属性节点表示的是标签中的一个一个的属性，这里要注意的是属性节点并非是元素节点的子节点，而是元素节点的一部分。
- 可以通过元素节点来获取指定的属性节点。
- 例如：元素节点.getAttributeNode("属性名");
- 注意：我们一般不使用属性节点。
事件
- 事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。
- JavaScript 与 HTML 之间的交互是通过事件实现的。
- 对于 Web 应用来说，有下面这些代表性的事件：点击某个元素、将鼠标移动至某个元素上方、按下键盘上某个键，等等。
获取元素节点
- 通过document对象调用
- getElementById()：通过id属性获取一个元素节点对象
- getElementsByTagName()：通过标签名获取一组元素节点对象
- getElementsByName()：通过name属性获取一组元素节点对象
获取元素节点的子节点
通过具体的元素节点调用
- getElementsByTagName()：方法，返回当前节点的指定标签名后代节点
- childNodes：属性，表示当前节点的所有子节点
- firstChild：属性，表示当前节点的第一个子节点
- lastChild：属性，表示当前节点的最后一个子节点
获取父节点和兄弟节点
通过具体的节点调用
- parentNode：属性，表示当前节点的父节点
- previousSibling：属性，表示当前节点的前一个兄弟节点
- nextSibling：属性，表示当前节点的后一个兄弟节点
元素节点的属性
- 获取，元素对象.属性名。例：element.value、element.id、element.className
- 设置，元素对象.属性名=新的值。例：element.value = "hello"、element.id = "id01"、element.className = "newClass"
其他属性
- nodeValue：文本节点可以通过nodeValue属性获取和设置 文本节点的内容
- innerHTML：元素节点通过该属性获取和设置标签内部的 html代码
使用CSS选择器进行查询
- querySelector()
- querySelectorAll()
- 这两个方法都是用document对象来调用，两个方法使用相同， 都是传递一个选择器字符串作为参数，方法会自动根据选择器字符串去网页中查找元素。
- 不同的地方是querySelector()只会返回找到的第一个元素，而querySelectorAll()会返回所有符合条件的元素。
节点的修改
这里的修改我们主要指对元素节点的操作。
- 创建节点：document.createElement(标签名)
- 删除节点：父节点.removeChild(子节点)
- 替换节点：父节点.replaceChild(新节点 , 旧节点)
- 插入节点：父节点.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
获取元素节点
- 通过document对象调用
- getElementById()：通过id属性获取一个元素节点对象
- getElementsByTagName()：通过标签名获取一组元素节点对象
- getElementsByName()：通过name属性获取一组元素节点对象
dom查询练习【1~3】
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<!-- <link rel="stylesheet" type="text/css" href="style/css.css" /> -->
<style type="text/css">
@CHARSET "UTF-8";
body {
width: 800px;
margin-left: auto;
margin-right: auto;
}
button {
width: 300px;
margin-bottom: 10px;
}
#btnList {
float: left;
}
#total {
width: 450px;
float: left;
}
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
.inner li {
border-style: solid;
border-width: 1px;
padding: 5px;
margin: 5px;
background-color: #99ff99;
float: left;
}
.inner {
width: 400px;
border-style: solid;
border-width: 1px;
margin-bottom: 10px;
padding: 10px;
float: left;
}
</style>
<script type="text/javascript">
window.onload = function() {
//为id为btn01的按钮绑定一个单击响应函数
var btn01 = document.getElementById("btn01");
btn01.onclick = function() {
//查找#bj节点
var bj = document.getElementById("bj");
//打印bj
//innerHTML 通过这个属性可以获取到元素内部的html代码
alert(bj.innerHTML);
};
//为id为btn02的按钮绑定一个单击响应函数
var btn02 = document.getElementById("btn02");
btn02.onclick = function() {
//查找所有li节点
//getElementsByTagName()可以根据标签名来获取一组元素节点对象
//这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中
//即使查询到的元素只有一个，也会封装到数组中返回
var lis = document.getElementsByTagName("li");
//打印lis
//alert(lis.length);
//变量lis
for (var i = 0; i < lis.length; i++) {
alert(lis[i].innerHTML);
}
};
//为id为btn03的按钮绑定一个单击响应函数
var btn03 = document.getElementById("btn03");
btn03.onclick = function() {
//查找name=gender的所有节点
var inputs = document.getElementsByName("gender");
// alert(inputs.length); // 2
for (var i = 0; i < inputs.length; i++) {
/*
* innerHTML用于获取元素内部的HTML代码的。
* 对于自结束标签<input/>，这个属性没有意义
*/
// alert(inputs[i].innerHTML);
/*
* 如果需要读取元素节点属性，
* 直接使用 元素.属性名
* 例子：元素.id、元素.name、元素.value
* 注意：class属性不能采用这种方式，【class保留字】
* 读取class属性时需要使用 元素.className
*/
alert(inputs[i].className);
alert(inputs[i].type);
alert(inputs[i].name);
alert(inputs[i].value);
}
};
//查找#city下所有li节点
//返回#city的所有子节点
//返回#phone的第一个子节点
//返回#bj的父节点
//返回#android的前一个兄弟节点
//读取#username的value属性值
//设置#username的value属性值
//返回#bj的文本值
};
</script>
</head>
<body>
<div id="total">
<div class="inner">
<p>
你喜欢哪个城市?
</p>
<ul id="city">
<li id="bj">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>
<br>
<br>
<p>
你喜欢哪款单机游戏?
</p>
<ul id="game">
<li id="rl">红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>魔兽</li>
</ul>
<br />
<br />
<p>
你手机的操作系统是?
</p>
<ul id="phone">
<li>IOS</li>
<li id="android">Android</li>
<li>Windows Phone</li>
</ul>
</div>
<div class="inner">
gender:
<input class="hello" type="radio" name="gender" value="male" />
Male
<input class="hello" type="radio" name="gender" value="female" />
Female
<br>
<br>
name:
<input type="text" name="name" id="username" value="abcde" />
</div>
</div>
<div id="btnList">
<div><button id="btn01">查找#bj节点</button></div>
<div><button id="btn02">查找所有li节点</button></div>
<div><button id="btn03">查找name=gender的所有节点</button></div>
<div><button id="btn04">查找#city下所有li节点</button></div>
<div><button id="btn05">返回#city的所有子节点</button></div>
<div><button id="btn06">返回#phone的第一个子节点</button></div>
<div><button id="btn07">返回#bj的父节点</button></div>
<div><button id="btn08">返回#android的前一个兄弟节点</button></div>
<div><button id="btn09">返回#username的value属性值</button></div>
<div><button id="btn10">设置#username的value属性值</button></div>
<div><button id="btn11">返回#bj的文本值</button></div>
</div>
</body>
</html>P95 95.尚硅谷_JS基础_图片切换的练习 26:06
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#outer {
width: 500px;
margin: 50px auto;
padding: 10px;
background-color: greenyellow;
text-align: center; /* 设置文本居中 */
}
</style>
<script type="text/javascript">
window.onload = function() {
/*
* 点击按钮切换图片
*/
//获取两个按钮
var prev = document.getElementById("prev");
var next = document.getElementById("next");
/*
* 要切换图片就是要修改img标签的src属性
*/
//获取img标签
var img = document.getElementsByTagName("img"); // 获取集合
var img = document.getElementsByTagName("img")[0]; // 取出集合的第1个元素
//创建一个数组，用来保存图片的路径
var imgArr = ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg"];
//创建一个变量，来保存当前正在显示的图片的索引
var index = 0;
//获取id为info的p元素
var info = document.getElementById("info");
//设置提示文字
info.innerHTML = "一共 " + imgArr.length + " 张图片，当前第 " + (index + 1) + " 张";
//分别为两个按钮绑定单击响应函数
prev.onclick = function() {
index--; // 切换到上一张时，索引index自减
if (index < 0) { // 判断index是否小于0
index = imgArr.length - 1;
}
img.src = imgArr[index];
//当点击按钮以后，重新设置信息
info.innerHTML = "一共 " + imgArr.length + " 张图片，当前第 " + (index + 1) + " 张";
};
next.onclick = function() {
index++; // 切换到下一张时，索引index自增
if (index > imgArr.length - 1) {
index = 0;
}
//切换图片就是修改img的src属性
//要修改一个元素的属性 元素.属性 = 属性值
img.src = imgArr[index];
//当点击按钮以后，重新设置信息
info.innerHTML = "一共 " + imgArr.length + " 张图片，当前第 " + (index + 1) + " 张";
};
};
</script>
</head>
<body>
<div id="outer">
<p id="info"></p>
<img src="img/1.jpg" alt="冰棍" />
<button id="prev">上一张</button>
<button id="next">下一张</button>
</div>
</body>
</html>2021年1月18日、2021年1月19日，这两天又没学习（看小说）。得赶紧学习。希望能好好学习~
2021年1月20日晚，看完了正则表达式，该看dom了，21号再看dom。早睡早起~
终于看完了，冲冲冲~
扫一扫
1792
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
