《JavaScript-笔记》

CSS的基本选择器

选择器分类	语法
标签选择器	标签名
类选择器	.类名
ID选择器	#ID
通用选择器	*

CSS的扩展选择器选择元素

扩展选择器	作用	语法符号
层级选择器	通过父选择器和子孙选择器来选择元素	空格
属性选择器	通过属性去选择元素	[]
伪类选择器	不同的操作状态下显示不同的样式	:
并集选择器	两种以上选择器的和	,
交集选择器	同时满足2个选择条件	标签名#ID 标签名.类名

能够说出盒子模型的属性

属性	作用
width	宽度
height	高度
margin	外边距
padding	内边距
border	边框：粗细线型颜色

五种数据类型

关键字	说明
number	数值
boolean	布尔
string	字符串
object	对象
undefined	未定义类型

学习目标

能够使用JS中的流程控制语句(if, switch,for, while)
能够在 JS 中定义命名函数和匿名函数(方法)
能够使用 JS 中常用的事件
能够使用 JavaScript 对 CSS 样式进行操作
能够使用数组中常用的方法
能够使用日期对象常用的方法

学习内容

流程控制：if 语句

目标

JS中if语句使用非boolean类型的条件

if 语句：

在一个指定的条件成立时执行代码。

if(条件表达式) {//代码块;
}

if…else 语句

在指定的条件成立时执行代码，当条件不成立时执行另外的代码。

if(条件表达式) {//代码块;}else {//代码块;}

if…else if…else 语句

使用这个语句可以选择执行若干块代码中的一个。

if (条件表达式) {//代码块;}else if(条件表达式) {//代码块;}else {//代码块;}

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>if语句</title>
</head>
<body>
<script type="text/javascript">/*1. Java中判断条件必须是布尔类型的值2. 在JS中可以使用非布尔类型的表达式真       假number      非0      0string      非空串   空串 ""object      非空     nullundefined            永远为假NaN (Not a Number)   永远为假3. 建议判断条件还是使用boolean类型比较好*//*if(0) {document.write("真" + "<br/>");}else {document.write("假" + "<br/>");}*//*if("") {document.write("真" + "<br/>");}else {document.write("假" + "<br/>");}*//*var person = {};  //创建一个对象if(null) {document.write("真" + "<br/>");}else {document.write("假" + "<br/>");}*/let u;   //undefinedif(u) {document.write("真" + "<br/>");}else {document.write("假" + "<br/>");}
</script>
</body>
</html>

小结：非布尔类型的表达式

数据类型	为真	为假
number	非0	0
string	非空串	“”
undefined		为假
NaN(Not a Number)		为假
object	非空	null

流程控制：switch语句

目标

switch语句与Java的区别
window对象的方法

语法一：case后使用常量，与Java相同

如果变量名等于某个分支的常量值，就执行这个代码段。如果所有的条件都不满足就执行default代码。

switch(变量名) {case 常量值:break;case 常量值：break;default:break;}

语法二：case后使用表达式

switch后面一定要是真
每个条件都可以使用表达式
如果上面所有的表达式都不匹配，就执行default

switch(true) {  //这里的变量名写成truecase 表达式:     //如：n > 5break;case 表达式:break;default:break;}

window对象的方法名	作用
string prompt(“提示信息”,"默认值”)	输入框，参数： 1. 输入的提示信息 2. 一开始出现在输入框中值返回值：就是用户输入的信息，字符串类型
alert(“提示信息”)	输出信息框

案例：判断一个学生的等级

通过prompt输入的分数，如果90_{100之间，输出优秀。80}90之间输出良好。60~80输出及格。60以下输出不及格。其它分数输出:分数有误。

分析

使用prompt得到输入的分数
使用switch对分数进行判断
如果在90到100之间，则输出优秀，其它依次类推。

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>switch语句的使用</title>
</head>
<body>
<script type="text/javascript">/*通过prompt输入的分数，如果90~100之间，输出优秀。80~90之间输出良好。60~80输出及格。60以下输出不及格。其它分数输出:分数有误。*///1. 让用户输入分数let score = window.prompt("请输入您的分数：","60");  //score是一个字符串类型//document.write(typeof(score) + "<br/>");//2. 通过分数判断用户的等级switch (true) {//3. 输出用户的等级(比较运算符，会自动将字符串转成数值类型进行比较)case score >=90 && score <=100 :document.write("优秀" + "<br/>");break;case score >=80 && score <90 :document.write("良好" + "<br/>");break;case score >=60 && score <80 :document.write("及格" + "<br/>");break;case score >=0 && score <60 :document.write("不及格" + "<br/>");break;default:document.write("分数有误" + "<br/>");}</script>
</body>
</html>

小结

如果switch的case后面要使用表达式，switch后面值要写成什么？ true

流程控制：循环语句

目标

使用循环实现9x9乘法表

while语句：

当指定的条件为 true 时循环执行代码，也支持非boolean类型的条件

while (条件表达式) {需要执行的代码;
}

do-while语句：

最少执行1次循环

do {需要执行的代码;}while (条件表达式)

for 语句

循环指定次数

for (var i=0; i<10; i++) {需要执行的代码;}

break和continue

break: 结束整个循环
continue：跳过本次循环，执行下一次循环

案例：乘法表

需求

以表格的方式输出乘法表，其中行数通过用户输入

分析

先制作一个没有表格，无需用户输入的9x9乘法表
由用户输入乘法表的行数
使用循环嵌套的方式，每个外循环是一行tr，每个内循环是一个td
输出每个单元格中的计算公式
给表格添加样式，设置内间距

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>乘法表</title><style>table {/*使用细边框样式*/border-collapse: collapse;}td {/*设置每个单元格的内间距*/padding: 3px;}</style>
</head>
<body>
<script type="text/javascript">let num = prompt("请输入乘法表的数：","9");  //字符串类型//放在表格中document.write("<table border='1'>");   //如果字符串中有双引号，必须使用\"进行转义//固定的行和列：9for (let i = 1; i <= num; i++) {  //外循环控制多少行document.write("<tr>");  //表示一行for (let j = 1; j <= i; j++) {  //内循环控制多少列document.write("<td>");document.write(j + "&times;" + i + "=" + (i * j));     //&times;表示乘法符号document.write("</td>");}//每输出一行就换行document.write("</tr>");}document.write("</table>");
</script>
</body>
</html>

命名函数和匿名函数

目标

命名函数和匿名函数的使用

函数的概述

什么是函数

一个代码块，给代码块起个名字，以后可以通过名字来调用它，实现重用的功能。类似于Java中方法
两种函数：
- 命名函数：有名字的函数，可以通过名字来多次调用
- 匿名函数：没有名字的函数，不可重用，只能使用一次。但可以通过一个变量来指向它，实现重用。

命名函数的格式

function 函数名(参数列表) {//代码块return 返回值;  //可选：如果这个函数有返回值，使用return，没有就不使用
}

自定义函数

需求

定义一个函数实现加法功能

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>函数的使用</title>
</head>
<body>
<script type="text/javascript">/*定义一个函数实现加法功能，参数列表不需要写var或let关键字*/function sum(a,b) {return a + b;}//函数不调用不执行let c = sum(3, 5);document.write("计算结果是：" + c + "<br/>");
</script>
</body>
</html>

注意事项

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>关于函数的重载</title>
</head>
<body>
<script type="text/javascript">/*1. 在JS中没有函数的重载，后面出现的同名函数会覆盖前面的同名函数2. 实参个数与形参的个数无关，只会按函数名字去调用3. 在每个函数的内部都有一个隐藏的数组，名字叫arguments*///定义了一个函数function sum(a,b) {alert(2);}function sum(a) {alert(1);}function sum(a,b,c) {  //形参alert(3);}//调用sum(3, 5);  //实参
</script>
</body>
</html>

案例：在函数内部输出隐藏数组的长度和元素

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>隐藏的数组</title>
</head>
<body>
<script type="text/javascript">/*在函数内部输出隐藏数组的长度和元素*/function sum(a,b) {//输出隐藏数组的长度let length = arguments.length;document.write("隐藏数组的长度是：" + length + "<hr/>");//输出数组中每个元素，模板代码：itarfor (let i = 0; i < arguments.length; i++) {document.write("i=" + i + "元素的值：" + arguments[i] + "<br/>");}document.write("<hr/>");//输出形参的值document.write("a=" + a + "<br/>");document.write("b=" + b + "<br/>");}//调用函数//sum(3, 7, 1);  //实参 > 形参sum(3);   //实参 < 形参
</script>
</body>
</html>

匿名函数

应用场景

后期很多的事件处理函数都使用匿名函数，一般不重用。
也可以定义一个变量让匿名函数可以重用，这种情况使用比较少。

语法

var 变量名 = function(参数列表) {//函数体return 返回值;  //可选
}后期可以通过变量名来调用函数

函数调用代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>匿名函数</title>
</head>
<body>
<script type="text/javascript">//定义匿名函数，赋值给一个变量var sum  = function(a,b) {return a + b;}//通过变量名来调用let c = sum(2, 7);document.write("计算结果：" + c + "<br/>");
</script>
</body>
</html>

小结

定义函数的关键字是什么？函数参数和返回值需要指定数据类型吗？
函数是否有重载？后面的同名函数会覆盖前面的
每个函数内部都有一个隐藏数组名是：arguments

案例：轮播图

目标

函数的应用
定时函数的使用

方法说明

方法	描述
document.getElementById(“id”)	作用：通过id获取网页上唯一的元素(标签) 参数：ID的值
window.setInterval(“函数名()”,时间) window.setInterval(函数名,时间)	作用：每隔一段时间调用一次指定的函数参数1：要调用的函数名参数2：隔多久调用，单位是毫秒

需求

每过3秒中切换一张图片的效果，一共5张图片，当显示到最后1张的时候，再次显示第1张。

步骤

创建HTML页面，页面有一个img标签，id为pic，宽度600。
body的背景色为黑色，内容居中。
五张图片的名字依次是0~4.jpg，放在项目的img文件夹下，图片一开始的src为第0张图片。
编写函数：changePicture()，使用setInterval()函数，每过3秒调用一次。
定义全局变量：num=1。
在changePicture()方法中，设置图片的src属性为img/num.jpg。
判断num是否等于5，如果等于5，则num=0；否则num++。

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>轮播图案例</title><style>body {background-color: black;text-align: center;}</style>
</head>
<body><img src="img/0.jpg" width="800" id="game">
</body>
<script type="text/javascript">//过2秒调用一次下面的图片window.setInterval("changePic()", 2000);let num = 1;/*创建一个函数：换图片技术点：修改img元素的src属性即可*/function changePic() {//通过id得到一个元素，注：这个方法必须在网页已经加载完元素之后执行。要注意这个代码出现的位置let imgObj = document.getElementById("game");//alert(imgObj);//修改图片元素的src属性：对象名.属性名imgObj.src = "img/" + num + ".jpg";//文件名数字加1num++;//如果等于5，设置为0if (num == 5) {num = 0;}}</script></html>

小结

方法	描述
document.getElementById(“id”)	通过id得到唯一的元素注：这个代码必须要在元素加载完毕以后执行
window.setInterval(“函数名()”,时间) window.setInterval(函数名,时间)	每隔一段时间调用一次指定的函数，单位是毫秒

设置事件的两种方式

目标

使用命名函数和匿名函数设置事件

什么是事件

用户在操作网页的过程中，会有各种操作，每种操作都会产生事件。我们可以通过JS来监听这些事件，对这些事件编写函数进行处理，来实现与用户的交互。

设置事件的两种方式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>事件的处理方式</title>
</head>
<body><!--onclick表示点击事件-->
<input type="button" value="命名函数" id="b1" onclick="clickMe()">
<input type="button" value="匿名函数" id="b2"><script type="text/javascript">/*有两个按钮，点第1个弹出一个信息框，点第2个弹出另一个信息框。分别使用两种不同的方式激活事件1. 使用命名函数的处理方式：在标签上直接使用 on事件名="处理函数()"2. 使用匿名函数的处理方式：元素对象.on事件名 = function() {}*/function clickMe() {alert("命名函数");}//得到按钮2这个对象document.getElementById("b2").onclick = function () {alert("匿名函数");}
</script>
</body>
</html>

小结

事件处理中命名函数的写法

onclick = "函数名()"function 函数名() {}

事件处理中匿名函数的写法
```
元素对象.onclick = function() {}
```

事件介绍：onload、onclick、ondblclick

目标

加载完毕事件
鼠标单击
鼠标双击

加载完成事件

事件名：onload
示例：页面加载完毕以后，才执行相应的JS代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>事件的处理方式</title>
</head>
<body><script type="text/javascript">//让整个页面全部加载完毕以后执行window.onload = function() {//得到按钮2这个对象document.getElementById("b2").onclick = function () {alert("匿名函数");}}</script><!--onclick表示点击事件-->
<input type="button" value="匿名函数" id="b2">
</body>
</html>

鼠标点击事件

点击：onclick
双击：ondblclick (double)

案例演示

需求：单击复制文本内容，双击清除文本内容

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>单击和双击</title><style>input {/*外边距*/margin: 5px;}</style>
</head>
<body>
姓名：<input type="text" id="t1"/> <br/>
姓名：<input type="text" id="t2" /> <br/>
<input type="button" value="单击复制/双击清除" id="b1"><script type="text/javascript">/*单击复制文本内容，双击清除文本内容*///得到按钮对象，设置单击事件document.getElementById("b1").onclick = function () {//复制文本：把t1的value属性值，赋值给t2的valuedocument.getElementById("t2").value = document.getElementById("t1").value;}//得到按钮对象，设置双击事件document.getElementById("b1").ondblclick = function () {//将2个value都设置成空串document.getElementById("t1").value = "";document.getElementById("t2").value = "";}
</script>
</body>
</html>

小结

加载完成事件名：onload
单击事件名：onclick
双击事件名：ondblclick

事件介绍：得到焦点、失去焦点、改变事件

目标

得到焦点
失去焦点
改变事件

事件名

什么是焦点：一个元素得到光标的操作状态，表示获得了焦点

得到焦点：onfcous
失去焦点：onblur (模糊)

焦点事件示例

当文本框失去焦点时，显示后面的文字，获得到焦点时，后面的文字消失

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>焦点</title>
</head>
<body>
用户名：
<input type="text" id="user"> <span id="info" style="color: red"></span>
<script type="text/javascript">/*当文本框失去焦点时，显示后面的文字，获得到焦点时，后面的文字消失如果span中有字，就会显示，没有字就不显示。修改span中文字内容，使用属性：innerText*///设置user对象获得焦点的事件document.getElementById("user").onfocus = function () {document.getElementById("info").innerText = "";}//设置user对象失去焦点的事件document.getElementById("user").onblur = function () {//span元素document.getElementById("info").innerText = "用户名不能为空";}
</script>
</body>
</html>

改变事件示例

事件名：onchange

需求

选中不同的城市，出现一个信息框显示选中城市的值
用户输入英文字母以后，文本框的字母全部变成大写

效果

下拉列表select，它的选项option发生变化
文本框内容发生改变，也会激活这个事件，它是在失去焦点以后才会激活。

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>改变事件</title>
</head>
<body>
城市：
<select id="city"><option value="广州">广州</option><option value="上海">上海</option><option value="南京">南京</option>
</select>
<hr/>
英文：
<input type="text" id="eng"><script type="text/javascript">/*选中不同的城市，出现一个信息框显示选中城市的值this对象表示当前激活的对象*/document.getElementById("city").onchange=function () {//当前元素选中那一项的值alert(this.value);}//用户输入英文字母以后，文本框的字母全部变成大写document.getElementById("eng").onchange=function () {//得到当前元素中value值this.value = this.value.toUpperCase();   //转成大写的函数}
</script>
</body>
</html>

小结

得到焦点事件名：onfocus
失去焦点事件名：onblur
改变事件事件名：onchange

上午回顾

流程控制语句

if的判断条件，可以是非boolean类型number: 非0为真，0为假string: 非空串为真，空串为假object: 非null为真，null为假undefined: 为假NaN：为假switch(true) {case "条件表达式"break;
}for(var i=0; i<10; i++) while(true) {}

函数

命名函数

function 函数名(参数列表) {return 返回值
}

匿名函数

var 变量=function(参数列表) {return 返回值;
}

没有函数的重载，同名的函数后面会覆盖前面，实参的个数与形参的个数无关
每个函数的内部都一个隐藏的数组：arguments

事件

单击：onclick
双击：ondblclick
加载完毕：onload
得到焦点：onfocus
失去焦点：onblur
改变事件：onchange

事件介绍：鼠标移入和移出

目标

鼠标移入
鼠标移出
this关键字

事件名

移入：onmouseover 当鼠标指针移到这个元素上面的时候，激活这个事件
移出：onmouseout 当鼠标指针移出这个元素的时候，激活这个事件

示例

需求：将鼠标移动到img上显示图片，移出则显示另一张图片。图片设置边框，宽500px

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>鼠标移上和移出事件</title>
</head>
<body><!--this表示img元素-->
<img src="img/1.jpg" width="900" id="pic" onmouseout="changePic(this)">
<script type="text/javascript">/*将鼠标移动到img上显示图片，移出则显示另一张图片。图片设置边框，宽500px分析：如果要换图片，只要修改src属性即可*/document.getElementById("pic").onmouseover = function () {//this代表当前被激活的元素this.src = "img/2.jpg";}/*document.getElementById("pic").onmouseout = function () {this.src = "img/0.jpg";}*//*** obj相当于img对象*/function changePic(obj) {obj.src = "img/3.jpg";}
</script>
</body>
</html>

this关键字的作用

出现在元素的事件方法中：

<img src="img/1.jpg" width="900" id="pic" onmouseout="changePic(this)">

出现在匿名函数的代码中：

  document.getElementById("pic").onmouseout = function () {this.src = "img/0.jpg";}

小结

鼠标移入(上)：onmouseover
鼠标移出：onmouseout

JavaScript 对 CSS 样式进行操作

目标

JS操作CSS的两种方式

在JS中操作CSS属性命名上的区别

CSS中写法	JS中的写法	说明
color	color	样式名如果是一个单词是一样
font-size	fontSize	如果有多个单词，样式名中短横去掉，后面每个单词首字母大小

示例：点按钮，修改p标签的字体、颜色、大小

效果

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>使用JS来修改css的样式</title><style>.hello {/*css样式：字体，颜色，大小*/font-family: "隶书";color: blue;font-size: 40px;}</style>
</head>
<body>
<p id="p1">第一自然段</p>
<p id="p2">第二自然段</p>
<hr/>
<input type="button" id="b1" value="改变几个样式">
<input type="button" id="b2" value="改变类样式"><script type="text/javascript">/*在JS中修改CSS样式有2种方式：1. 每条语句修改1个样式，语法：元素.style.样式名 = 样式值;2. 先使用class定义类样式，然后再使用以下方法，一次修改一批样式：元素.className = 类名;*/document.getElementById("b1").onclick = function () {//得到p1元素let p1 = document.getElementById("p1");//使用方式1来修改css样式：字体，颜色，大小p1.style.fontFamily = "楷体";p1.style.color = "red";p1.style.fontSize = "40px";}document.getElementById("b2").onclick = function () {//得到p2元素let p2 = document.getElementById("p2");//一次修改一批样式p2.className = "hello";}
</script>
</body>
</html>

网页变化

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GLHAgxJ4-1593131861874)(C:/Users/User/Desktop/学习笔记/web/webday03/day03(JavaScript基础)]/讲义/assets/image-20200413143054348.png)

小结

JS修改CSS样式的两种方式

元素.style.样式名=样式值
元素.className=类名

内置对象：字符串对象

目标

学习String对象常用的方法

创建字符串

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>内置对象：字符串对象</title>
</head>
<body>
<script type="text/javascript">let a = 3;let b = 4;let c = a + b;//字符串的拼接操作let s1 = a + "+" + b + "=" + c;document.write(s1 + "<br/>");//反引号：${} 占位符，会被真实的变量代替let s2 = `${a} + ${b} = ${c}`;document.write(s2 + "<br/>");
</script>
</body>
</html>

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>string对象的函数</title>
</head>
<body>
<script type="text/javascript">let s1 = "我是中国人，我爱我的国家";//取子字符串：开始位置，结束位置 (索引从0开始)，包头不包尾let s = s1.substring(6, 9);document.write(s + "<br/>");//取子字符串：开始位置，取多长let s2 = s1.substr(6, 3);document.write(s2 + "<hr/>");//将这个字符使用指定的分隔符，分割成一个字符串数组let s3 = "a-b-c-xyz-hello";let arr = s3.split("-");for (let i = 0; i < arr.length; i++) {document.write(arr[i] + "<br/>");}document.write("<hr/>");//转成大写document.write("abc".toUpperCase() + "<br/>");//转成小写document.write("XYZ".toLowerCase() + "<hr/>");//去掉字符串前后的空格let s4 = "   hello world      ";document.write("长度：" + s4.length + "<br/>");  //原长度document.write(s4 + "<br/>");   //原字符串document.write(s4.trim() + "<br/>");  //去掉前后空格document.write("去掉空格长度：" + s4.trim().length + "<br/>");  //去掉前后空格的长度
</script>
</body>
</html>

小结

方法名	作用
substring(startIndex,endIndex)	取子字符串，包头不包尾，索引从0开始。参数是起始位置
substr(startIndex, length)	取子字符串，起始位置，长度
split(delimiter)	把一个字符串使用指定的分隔符，切割成一个数组
toLowerCase()	变成小写
toUpperCase()	变成大写
trim()	去掉前后的空格

内置对象：数学对象

目标

学习Math对象的方法

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>内置对象：数学对象</title>
</head>
<body>
<script type="text/javascript">//四舍五入保留到整数let n1 = Math.round(123.5);document.write(n1 + "<br/>");//向下取整let n2 = Math.floor(123.45);document.write(n2 + "<br/>");//向上取整let n3 = Math.ceil(123.45);document.write(n3 + "<br/>");//产生随机数，0~1之间的小数，不等于1  [0,1)let n4 = Math.random();document.write(n4 + "<br/>");
</script>
</body>
</html>

小结

方法名	作用
round(x)	四舍五入保留到整数
floor(x)	向下取整
ceil(x)	向上取整
random()	随机生成0~1之间的小数，不等于1

全局函数

目标

学习全局函数的使用

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>全局函数</title>
</head>
<body>
<script type="text/javascript">/*//计算2个数的和let n1 = prompt("请输入第1个数","0");let n2 = prompt("请输入第2个数","0");//拼接2个字符串let n3 = n1 + n2;document.write("它们的和是：" + n3 + "<br/>");*//*将一个字符串转成整数，从一开始向后去查找，碰到第一个不能转换的就停止了*/let n4 = parseInt("2") + parseInt("3");document.write(n4 + "<br/>");document.write(parseInt("abc") + "<br/>");  //NaN = Not a Number 不是一个数document.write(parseInt("12abc") + "<br/>");  //12 转换成功//将一个字符串转成小数，转换方式同上let n5 = parseFloat("2.3") + parseFloat("3.1");document.write(n5 + "<hr/>");let order = "明天晚上偷袭珍珠港";document.write(order + "<br/>");//对汉字使用URI编码进行转换let s1 = encodeURI(order);document.write(s1 + "<hr/>");//对已经编码的字符串进行解码let s2 = decodeURI(s1);document.write(s2 + "<hr/>");//执行字符串中js代码let s3 = "alert('Hello 你好！')";eval(s3);
</script>
</body>
</html>

小结

字符串转为数字	说明
parseInt(字符串)	转成整数，如果转换失败，返回NaN
parseFloat(字符串)	转成小数
isNaN(字符串)	在转换前判断是否为非数字，非数字返回true，数字为false

编码和解码	说明
encodeURI(字符串)	对汉字进行URI编码
decodeURI(字符串)	对URI编码后的

执行字符串	说明
eval(字符串)	执行脚本

内置对象：数组对象

目标

数组的创建的方式
数组中的方法

创建数组的四种方式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>数组</title>
</head>
<body>
<script type="text/javascript">//创建数组四种方式：let a1 = new Array();  //创建一个长度为0的数组document.write(a1.length + "<br/>");let a2 = new Array(5);  //创建一个长度为5的数组document.write(a2.length + "<br/>");document.write(a2 + "<hr/>");let a3 = new Array(2, 5, 6, 8);  //指定每个元素，创建数组document.write(a3.length + "<br/>");document.write(a3 + "<br/>");let a4 = [4, 7, 10, 45];   //使用中括号创建数组，指定每个元素document.write(a4 + "<br/>");
</script>
</body>
</html>

数组的特点

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>数组</title>
</head>
<body>
<script type="text/javascript">//创建数组四种方式：let a1 = new Array();  //创建一个长度为0的数组document.write(a1.length + "<br/>");let a2 = new Array(5);  //创建一个长度为5的数组document.write(a2.length + "<br/>");document.write(a2 + "<hr/>");let a3 = new Array(2, 5, 6, 8);  //指定每个元素，创建数组document.write(a3.length + "<br/>");document.write(a3 + "<br/>");let a4 = [4, 7, 10, 45];   //使用中括号创建数组，指定每个元素document.write(a4 + "<hr/>");/*1. 元素类型：因为JS是弱类型，数组中每个元素类型是可以不同的2. 长度是可变的，动态的增加或减少长度3. 数组中还有不少方法*/let a5 = ["abc", true, 50, 3.6];document.write(a5 + "<hr/>");a5[5] = "xyz";  //增加长度//循环输出每个元素for (let i = 0; i < a5.length; i++) {document.write(a5[i] + "<br/>");}document.write("<hr/>");a5.length = 2;  //长度变成2for (let i = 0; i < a5.length; i++) {document.write(a5[i] + "<br/>");}
</script>
</body>
</html>

方法演示案例

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>数组的方法</title>
</head>
<body>
<script type="text/javascript">//两个或两个以上数组的拼接let a1 = [1, 1, 1];let a2 = [2, 2, 2];let a3 = a1.concat(a2, 99);document.write(a3 + "<hr/>");//对数组反转let a4 = [4, 1, 8, 9];a4.reverse();document.write(a4 + "<hr/>");//将一个数组通过分隔符拼接成一个字符串，与字符串中split函数功能相反let a5 = [4, 1, 8, 9];let str = a5.join("=");   //这是一个字符串document.write(str + "<hr/>");/*对字符串进行排序1. 按字符的ASCII码值进行比较2. 两个字符串比较，先比较第1个，如果谁大谁就大，后面不再比较。如果相同则继续比较第2个。3. 小写字母 > 大写字母 > 数字如：*/document.write(("ac" > "abcdefgh") + "<br/>");document.write(("x" > "ABCDE") + "<hr/>");//默认按字符串排序let strArr = ["Jack", "tom","Newboy", "rose"];document.write("排序前：" + strArr + "<br/>");strArr.sort();document.write("排序后：" + strArr + "<hr/>");let a6 = [40, 100, 28, 9];   //默认是按字符的大小来排序document.write("排序前：" + a6 + "<br/>");a6.sort(function (a, b) {return a - b;});  //如果按数字排序，指定比较器document.write("排序后：" + a6 + "<hr/>");//删除数组中最后一个元素let a7 = [2, 6, 7];a7.pop();  //返回最后这个元素document.write(a7 + "<br/>");//向数组最后添加一个或多个元素a7.push(4, 90);document.write(a7 + "<br/>");
</script>
</body>
</html>

小结

方法名	功能
concat()	拼接数组
reverse()	反转
join(separator)	将数组接拼接成一个字符串
sort()	排序
pop()	删除最后一个元素
push()	添加元素

内置对象：日期对象

目标

日期对象方法的使用

创建日期对象

new Date() 创建当前时间的日期对象

日期对象的方法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yWksS4fk-1593131861882)(C:/Users/User/Desktop/学习笔记/web/webday03/day03(JavaScript基础)]/讲义/assets/1552052803821.png)

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>日期对象</title>
</head>
<body>
<script type="text/javascript">let date = new Date();document.write("现在的时间是：" + date + "<br/>");document.write("年份：" + date.getFullYear() + "<br/>");//0-6: 0表示周日，1~6表示周一到周六document.write("周几：" + date.getDay() + "<br/>");//得到1970-1-1到现在相差的毫秒数document.write("毫秒数：" + date.getTime() + "<br/>");//得到本地格式的时间，类似于Java中：SimpleDateFormatdocument.write(date.toLocaleString() + "<br/>");
</script>
</body>
</html>

小结

说说下面方法的作用

getFullYear()：年份
getDay()：周几
getTime()：得到1970-1-1到现在的毫秒数
toLocaleString() ：本地格式的日期

学习总结

能够在 JS 中定义命名函数和匿名函数

function 函数名(参数列表) {return 返回值;
}var 变量名=function(参数列表) {return 返回值;
}元素.onclick = function() {}

能够使用JS中常用的事件

事件名	作用
onclick	单击
ondblclick	双击
onload	加载完毕
onfocus	得到焦点
onblur	失去焦点
onchange	改变事件
onmouseover	鼠标移上
onmouseout	鼠标移出

能够使用 JavaScript 对 CSS 样式进行操作

元素.style.样式名=样式值元素.className=类名

字符串对象的方法

方法名	作用
substring(startIndex,endIndex)	包头不包尾
split(delimiter)	切割字符串
toLowerCase()	转成小写
toUpperCase()	转成大写
trim()	去掉前后空格

全局函数

字符串转为数字	说明
parseInt(字符串)	转成整数
parseFloat(字符串)	转成小数
isNaN(字符串)	判断非数字

编码和解码	说明
encodeURI(字符串)	URI编码
decodeURI(字符串)	URI解码

执行字符串	说明
eval(字符串)	执行字符串中JS代码

能够使用数组中常用的方法

方法名	功能
concat()	拼接数组
reverse()	反转
join(separator)	将数组拼接成一个字符串
sort()	排序，默认按字符串大小
pop()	删除
push()	添加

能够使用日期对象常用的方法

方法名	作用
getFullYear()	得到年份
getDay()	得到周几
getTime()	得到毫秒数
toLocaleString()	转成本地的时间

《JavaScript高级-笔记》

回顾

能够在 JS 中定义命名函数和匿名函数

function 函数名(参数列表) {return 返回值
}元素.onclick = function() {}

能够使用JS中常用的事件

事件名	作用
onclick	单击
ondblclick	双击
onload	加载完毕
onfocus	获得焦点
onblur	失去焦点
onchange	改变事件
onmouseover	鼠标移上
onmouseout	鼠标移出

能够使用 JavaScript 对 CSS 样式进行操作

元素.style.样式名=样式值
元素.className=类名

字符串对象的方法

方法名	作用
substring(startIndex,endIndex)	取子字符串，包头不包尾
split(delimiter)	切割，将字符串切割成一个数组
toLowerCase()	转成小写
toUpperCase()	转成大写
trim()	去掉前后的空格

全局函数

字符串转为数字	说明
parseInt(字符串)	转成整数
parseFloat(字符串)	转成浮点数
isNaN(字符串)	是否非数字，非数字返回真

编码和解码	说明
encodeURI(字符串)	URI编码
decodeURI(字符串)	URI解码

执行字符串	说明
eval(字符串)	执行JS中代码

能够使用数组中常用的方法

方法名	功能
concat()	拼接数组
reverse()	反转
join(separator)	把数组拼接成一个字符串
sort()	排序，默认按字符串
pop()	删除
push()	添加

能够使用日期对象常用的方法

方法名	作用
getFullYear()	得到年份
getDay()	周几：0~6
getTime()	得到毫秒数
toLocaleString()	转成本地格式的日期

学习目标

能够掌握 json 的三种数据格式
BOM
1. 能够使用 window 对象常用的方法
2. 能够使用 location 对象常用的方法和属性
3. 能够使用 history 对象常用的方法
DOM
1. 能够使用 DOM 中来查找节点
2. 能够使用 DOM 来增删改节点
能够使用正则表达式进行表单的验证

学习内容

JSON的格式介绍

目标

什么是JSON
典型的格式有哪些

什么是json

JSON(JavaScript Object Notation, JavaScript对象标记)，是一种轻量级的数据交换格式，用于服务器与浏览器之间传输数据。以前我们都是使用XML来传递数据。

XML不足

描述的数据比需要的真实数据多
占用了更多的传输的带宽
解析XML比较麻烦

<contact><name>貂蝉</name><gender>false</gender><age>20</age>
</contact>

json

{name: "貂蝉",gender: false,age: 20
}

json的语法格式

类型	语法	解释
对象类型	{键:值, 键:值}	代表一个对象，可以有多个属性属性与值之间使用冒号，属性与属性之间使用逗号
数组/集合类型	[元素,元素,元素]	数组中每个元素类型是可以不同
混合类型	[{键:值},{键:值},{键:值}]	数组中每个元素是一个对象
	{键:[元素,元素,元素]}	是一个对象，但某个属性是一个数组或集合

练习1：创建一个JSON对象类型

创建这种格式的：{name:value,name:value…} 对象
创建一个person对象的JSON对象，属性名：firstname、lastname、age给三个属性赋值
输出每个属性的值。

练习2：创建一个数组，其中每个元素是JSON对象

创建这种格式的：[{key:value,key:value},{key:value,key:value}]
创建一个数组，包含三个JSON对象
每个JSON对象都有三个属性：firstname、lastname、age。给每个对象的属性赋不同的值
遍历输出每个JSON对象的属性值

练习3：创建一个JSON对象

要求

某个属性值是一个数组，数组中每个元素是JSON对象

步骤

创建这种格式的对象：{“param”:[{key:value,key:value},{key:value,key:value}]}
一个JSON对象，有一个brothers属性，属性值是一个数组
数组中的每个元素是一个JSON对象，属性名为：firstname,lastname,age。
数组中一共4个元素，给每个元素赋值
得到JSON对象的brothers属性，返回一个数组，对数组进行遍历输出每个元素中的firstname和age属性值

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-daiTy1aX-1593131861886)(C:/Users/User/Desktop/学习笔记/web/webday04/day04/讲义/assets/image-20200414093716240.png)]

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JSON数据格式</title>
</head>
<body>
<h2>JSON对象</h2>
<script type="text/javascript">//一个person对象的JSON对象，属性名：firstname、lastname、age给三个属性赋值let person = {firstname: "孙悟空",lastname: "弼马温",age: 30};//输出对象：对象名.属性名document.write("姓名：" + person.firstname + "，昵称：" + person.lastname + "，年龄：" + person.age + "<br/>");
</script>
<hr/><h2>创建一个数组，其中每个元素是JSON对象</h2>
<script type="text/javascript">let arr = [{firstname: "孙悟空",lastname: "弼马温",age: 30}, {firstname: "猪八戒",lastname: "天蓬元帅",age: 28}, {firstname: "沙悟静",lastname: "卷帘大将",age: 26}];//遍历输出每个JSON对象的属性值/*Java中写法：for(类型 变量名: 集合)JavaScript中写法：for(类型 变量名 of 集合)*/for (let p of arr) {  //p表示集合或数组中每个元素document.write("姓名：" + p.firstname + "，昵称：" + p.lastname + "，年龄：" + p.age + "<br/>");}
</script>
<hr/><h2>JSON对象,其中属性是集合</h2>
<script type="text/javascript">let master = {name: "唐僧",age: 20,brothers: [{firstname: "孙悟空",lastname: "弼马温",age: 30}, {firstname: "猪八戒",lastname: "天蓬元帅",age: 28}, {firstname: "沙悟静",lastname: "卷帘大将",age: 26}]};document.write("姓名：" + master.name + "，年龄：" + master.age + "<br/>");document.write("徒弟们：" + "<br/>");//快捷键：iterfor (let p of master.brothers) {document.write("姓名：" + p.firstname + "，昵称：" + p.lastname + "，年龄：" + p.age + "<br/>");}
</script>
</body>
</html>

小结

JSON三种常用的格式：

对象：{属性名:值}
数组：[元素,元素]
混合：[{},{}]  {属性:[]}

JS中操作JSON的方法

目标

JS中与JSON有关的方法

语法

语法	功能
JSON.parse(字符串)	将一个字符串转成JSON对象注：JSON字符串中属性名一定要使用双引号引起来
JSON.stringify(JSON对象)	将一个JSON对象转成字符串

案例：parse方法的使用

需求

创建一个字符串：’{“name”: “张三”, “age”: 20}’，使用上面的方法转成JSON对象
再使用上面的方法，转回成字符串

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BVTzz2ti-1593131861891)(C:/Users/User/Desktop/学习笔记/web/webday04/day04/讲义/assets/image-20200414094549706.png)]

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JSON有关的函数</title>
</head>
<body>
<script type="text/javascript">//定义一个字符串，属性名一定是双引号let person = '{"name": "张三", "age": 20}';document.write("字符串：" + person + "<br/>");//把字符串转成JSON对象let obj = JSON.parse(person);document.write("对象：" + obj + "<br/>");document.write("姓名：" + obj.name + "，年龄：" + obj.age + "<hr/>");//把JSON对象转成字符串let str = JSON.stringify(obj);document.write("字符串：" + str + "<br/>");
</script>
</body>
</html>

小结

语法	功能
JSON.parse(字符串)	将字符串转成JSON对象
JSON.stringify(JSON对象)	将JSON对象转成字符串

BOM：location对象

目标

什么是BOM编程
location对象的方法和属性

什么是BOM

JavaScript有三个组成：

ECMA Script
BOM：Browser Object Model 浏览器对象模型，用来操作浏览器中各种对象
DOM

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6yIRhbWQ-1593131861893)(C:/Users/User/Desktop/学习笔记/web/webday04/day04/讲义/assets/1552052941943.png)]

BOM对象

windows对象

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>window中的方法</title>
</head>
<body>
<script type="text/javascript">/*** 出现一个确定框，有2个按钮* 点确定，返回true，否则返回false*/let con = window.confirm("你是女生吗");//document.write(con + "<br/>");if (con) {document.write("约吗?" + "<br/>");}else {document.write("捡肥皂" + "<br/>");}
</script>
</body>
</html>

BOM常用对象	作用
window	浏览器窗口，已经学过的方法： prompt(), alert(), setInterval() confirm() 确定框，有2个选择按钮(确定，取消)
location	代表浏览器的地址栏
history	浏览的历史记录

location对象

作用：代表浏览器上地址栏对象，主要用于页面的跳转

属性	功能
href	1. 获取属性值，得到当前访问的地址 2. 设置属性值，跳转到指定的页面
search	获取?后面的参数字符串 GET方法提交表单的时候，参数会显示在地址栏上

location常用方法

location的方法	描述
reload()	重载加载当前的页面，类似于刷新

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>BOM：location对象</title>
</head>
<body><!--点击以后调用方法-->
<input type="button" onclick="location.reload()" value="刷新"><script type="text/javascript">//1. 获取属性值，得到当前访问的地址//document.write(location.href + "<br/>");//2. 设置属性值，跳转到指定的页面//location.href = "http://www.itcast.cn";//获取?后面的参数字符串//document.write(location.search + "<br/>");//显示现在的时候document.write(new Date().toLocaleString() + "<br/>");
</script>
</body>
</html>

与window对象关系

location对象是window对象的一个属性，完整写法：window.location
location对象默认的属性是href

小结

location学习了哪些属性？
1. href 进行页面跳转
2. search 获取?后面的参数字符串
学习了哪些方法
1. reload 重新加载页面
它与window是什么关系?
1. 是window的一个属性

BOM：history对象

目标

history对象有哪些方法

作用

访问历史记录中页面

方法	作用
forward()	相当于浏览器上前进按钮，如果浏览器上前进按钮不可用，这个方法也不起作用
back()	相当于浏览器上后退按钮
go(正数或负数)	go(1)相当于前进，go(-1)相当于后退

注：浏览器上的前进和后退按钮可以点的时候，这个代码才起作用。

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>BOM：历史记录对象</title>
</head>
<body>
<a href="demo04_location.html">跳转到demo04</a><input type="button" value="前进" onclick="history.forward()">
<input type="button" value="前进" onclick="history.go(1)">
</body>
</html>

小结

方法	作用
forward()	前进
back()	后退
go()	既可以前进，又可以后退

案例：倒计时页面跳转

目标

window对象与location对象的综合案例应用

window中计时器有关的方法

window中的方法	作用
setTimeout(函数名, 间隔毫秒数)	过一段时间后调用一次指定的函数，单位是毫秒，只调用一次。返回值是一个整数类型，这就是计时器
clearTimeout(计时器)	清除上面的计时器，参数的计时器就是上面方法的返回值
setInterval(函数名, 间隔毫秒数)	每隔一段时间调用一次指定的函数，单位是毫秒，不停的调用。返回值是一个整数类型，这就是计时器
clearInterval(计时器)	清除上面的计时器，参数的计时器就是上面方法的返回值

需求

页面上显示一个倒计时5秒的数字，到了5秒以后跳转到另一个页面

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IhZBOOXD-1593131861897)(C:/Users/User/Desktop/学习笔记/web/webday04/day04/讲义/assets/1552053355566.png)]

分析

在页面上创建一个span用于放置变化的数字。
定义一个全局变量为5，每过1秒调用1次自定义refresh()函数
编写refresh()函数，修改span中的数字
判断变量是否为0，如果是0则跳转到新的页面
否则变量减1。并修改span中的数字

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>跳转</title>
</head>
<body>
<span id="counter">5</span>秒以后跳转
<script type="text/javascript">/*分析：1.用到倒计时：window.setInterval()2.页面跳转：location.href3.修改标签中文字使用属性：innerText*/let count = 5;setInterval("countDown()", 1000);  //每过1秒调用一次//调用的函数function countDown() {//1.将数字减1count--;//2.更新span中数字document.getElementById("counter").innerText = count;//3.判断数字是否为0if (count == 0) {//4.如果为0就进行页面跳转location.href = "http://www.itcast.cn";}}</script>
</body>
</html>

小结

每过一段时间执行的方法是：setInterval()
跳转到另一个页面使用：location.href
更新数字显示使用：innerText

案例：会动的时钟

目标

页面上有两个按钮，一个开始按钮，一个暂停按钮。点开始按钮时间开始走动，点暂停按钮，时间不动。再点开始按钮，时间继续走动。

步骤

在页面上创建一个h1标签，用于显示时钟，设置颜色和大小。
一开始暂停按钮不可用，设置disabled属性，disabled=true表示不可用。
创建全局的变量，用于保存计时器
为了防止多次点开始按钮出现bug，点开始按钮以后开始按钮不可用，暂停按钮可用。点暂停按钮以后，暂停按钮不可用，开始按钮可用。设置disabled=true。
点开始按钮，在方法内部每过1秒中调用匿名函数，在匿名函数内部得到现在的时间，并将得到的时间显示在h1标签内部。
暂停的按钮在方法内部清除clearInterval()的计时器。

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>会动的时钟</title>
</head>
<body>
<input type="button" value="开始" id="btnBegin">
<!--disabled就元素不可用-->
<input type="button" value="暂停" id="btnPause" disabled="disabled">
<hr/><h1 id="clock" style="color: darkgreen"></h1><script type="text/javascript">let timer;  //计时器//开始按钮的点击事件document.getElementById("btnBegin").onclick = function() {timer = setInterval("showTime()", 1000);  //每过1秒调用1次//修改disabled的属性为true，表示不可用，false表示可用//让开始按钮不可用，让暂停按钮可用document.getElementById("btnBegin").disabled = true;document.getElementById("btnPause").disabled = false;}//暂停按钮的点击事件document.getElementById("btnPause").onclick=function () {document.getElementById("btnBegin").disabled = false;  //开始按钮可用document.getElementById("btnPause").disabled = true;   //暂停按钮不可用//让计时器失效clearInterval(timer);   //计时器是setInterval()的返回值}/*** 分析：* 每过1秒钟输出现在的时间* 不能使用document.write方法* 应该放在一个标签内部，修改标签内部的内容，使用innerText或innerHTML*/function showTime() {//得到现在的时间let now = new Date().toLocaleString();//在有些浏览器上，会覆盖整个网页，导致这些脚本都没有了//document.write(now);//在h1中显示时间document.getElementById("clock").innerText = now;}
</script>
</body>
</html>

小结

清除计时器的方法：clearInterval()
让元素不可用的属性是：disabled

innerHTML和innerText的区别

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>innerText和innerHTML的区别</title>
</head>
<body>
<input type="button" value="改内容" id="btn">
<hr/>
<span id="content"></span><script type="text/javascript">document.getElementById("btn").onclick = function () {//innerText：修改是纯文本的内容，如果内容中有标签，标签是不起作用//document.getElementById("content").innerText = "<h1 style='color: red'>幸福来敲门</h1>";//innerHTML：修改是HTML的内容，标签是起作用document.getElementById("content").innerHTML = "<h1 style='color: red'>幸福来敲门</h1>";}
</script>
</body>
</html>

DOM查找元素的方法

目标

什么是DOM编程
通过案例：学习DOM查找元素的方法

节点与DOM树

DOM: Document Object Model 文档对象模型

作用：操作网页中各种元素，可能通过修改DOM树来实现修改网页结构的目的

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9X3HIPsL-1593131861905)(C:/Users/User/Desktop/学习笔记/web/webday04/day04/讲义/assets/1552054005396.png)]

查找节点的方法

获取元素的方法	作用
document.getElementById(“id”)	通过id得到一个元素
document.getElementsByTagName (“标签名”)	通过标签名得到一组元素
document.getElementsByName(“name”)	通过name属性得到一组元素
document.getElementsByClassName(“类名”)	通过类名得到一组元素

根据CSS选择器获取元素	作用
document.querySelector(CSS选择器)	通过css选择器获取一个元素，如："#id" “.类名” “标签名”
document.querySelectorAll(CSS选择器)	通过css选择器获取一组元素

案例：查找节点

步骤

点第1个按钮，给所有tr奇数行和偶数行添加不同的背景色
点击第2个按钮，选中所有商品
点击第3个按钮给所有的a链接添加href属性。

效果

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>DOM：查找元素的方法</title><style>table {/*细边框样式*/border-collapse: collapse;width: 500px;}</style>
</head>
<body>
<input type="button" value="(通过标签名)给表格奇偶行添加不同的背景色" id="b1">
<hr/>
<table border="1"><tr><td>100</td><td>100</td><td>100</td></tr><tr><td>100</td><td>100</td><td>100</td></tr><tr><td>100</td><td>100</td><td>100</td></tr><tr><td>100</td><td>100</td><td>100</td></tr><tr><td>100</td><td>100</td><td>100</td></tr>
</table><script type="text/javascript">//0.按钮的点击事件document.getElementById("b1").onclick=function () {//1.获取所有的tr//let trs = document.getElementsByTagName("tr");   //传统的写法let trs = document.querySelectorAll("tr");   //新的写法, css的标签选择器//2.遍历tr集合，判断是奇数还是偶数，遍历快捷键：itar, iterfor (let i = 0; i < trs.length; i++) {let tr = trs[i];  //得到每个tr//3.设置不同的背景色if (i % 2 == 0) {  //偶数tr.style.backgroundColor = "lightgreen";}else {  //奇数tr.style.backgroundColor = "lightyellow";}}}
</script><hr/>
<input type="button" value="(通过name属性)选中所有的商品" id="b2"/>
<hr/>
<!--要选中一个checkbox需要设置checked=true，表示选中，否则就没选中-->
<input type="checkbox" name="product">自行车
<input type="checkbox" name="product">电视机
<input type="checkbox" name="product">洗衣机<script type="text/javascript">//通过css的#id选择器来选中元素document.querySelector("#b2").onclick=function () {//1.得到所有的复选框let products = document.getElementsByName("product");//2.遍历集合，将每一项checked=truefor (let product of products) {  //每个元素是一个checkboxproduct.checked = true;}}
</script>
<hr/><input type="button" value="(通过类名)给a添加链接" id="b3"/>
<hr/>
<a class="company">传智播客</a>
<a class="company">传智播客</a>
<a class="company">传智播客</a><script type="text/javascript">document.getElementById("b3").onclick=function () {//1.通过类名得到所有的a标签let companies = document.getElementsByClassName("company");//2.遍历集合，给每个a标签添加href属性for (let company of companies) {company.href = "http://www.itcast.cn";}}
</script>
</body>
</html>

小结

获取元素的方法	作用
document.getElementsByTagName (“标签名”)	通过标签名得到一组元素
document.getElementsByName(“name”)	通过name属性得到一组元素
document.getElementsByClassName(“类名”)	通过类名得到一组元素

根据CSS选择器获取元素	作用
document.querySelector(CSS选择器)	通过css选择器，获取一个元素
document.querySelectorAll(CSS选择器)	通过css选择器，获取一组元素

上午的回顾

JSON的格式

JSON对象：{属性名:值,属性名:值}
数组或集合：[元素,元素]
混合类型：[{},{},{}]   {键:[元素,元素]}

JSON的方法

JSON.parse(): 将字符串转成JSON对象
JSON.stringfy(): 将JSON对象转成字符串

BOM：window对象

prompt() 输入
alert() 信息框
confirm() 确认框
setInterval() / clearInterval()
setTimeout() / clearTimeout()

BOM：location对象

href：页面跳转
search: 得到?后参数字符串reload() 重新加载当前页面

BOM：history对象

forward() 前进
back() 后退
go() 既可以前进，又可以后退

innerHTML和innerText的区别

innerHTML: 标签体内的子标签是起作用的
innerText：标签体内的文字是纯文本

DOM查找元素的方法

getElementById() 通过id得到一个元素
getElementsByTagName() 通过标签名得到一组元素
getElementsByName() 通过name属性得到一组元素
getElementsByClassName() 通过类名得到一组元素
querySelector() 通过CSS选择器得到一个元素
querySelectorAll() 通过CSS选择器得到一组元素

DOM树修改的方法

目标

DOM树上如何创建节点
DOM树上如何添加元素节点
删除DOM树上的元素

添加元素的步骤

创建元素，只是在内存中创建了
将元素添加到DOM树上

创建元素的方法

创建元素的方法	作用
document.createElement(“标签名”)	创建一个元素

修改DOM树的方法

将元素挂到DOM树上的方法	作用
父元素.appendChild(子元素)	将元素追加成最后一个子元素
父元素.removeChild(子元素)	通过父元素删除子元素(他杀)
元素.remove()	删除自己(自杀)

小结

创建元素：document.createElement()
添加成最后一个子元素：父元素.appendChild(子元素)
删除子元素：父元素.removeChild(子元素)
删除本身：元素.remove()

案例：省市级联

案例需求

页面上有两个下拉列表框，页面加载的时候访问数据库，得到所有的省份显示在第1个列表框中。当选择不同的省份的时候，加载这个省份下所有的城市显示在第二个下拉列表中。

案例效果

实现步骤

创建两个下拉列表，一个显示省份，一个显示城市
注册网页加载事件：在网页加载完毕只会显示省份信息
给省份下拉列表注册值改变事件：在省份发生变化时更新城市下拉列表信息

示例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>省市联动</title>
</head>
<body>
<select id="province"><option>--请选择省份--</option>
</select>
<select id="city"><option>--请选择城市--</option>
</select>
</body><script>// 省份数据var provinces= ["广东省","湖南省","广西省"];// 城市数据，数据是一个二维数组，一维中每个元素是一个数组var cities = [["深圳","广州","东莞"],["长沙市","郴州市","湘潭市"],["南宁市","桂林市","柳州市"]];/*在页面加载完毕以后读取所有的省份，并且填充到#province中分析：动态创建option对象，并且设置 <option value="0">广东省</option> 这个value就是它对应的城市数组索引*/window.onload = function () {//1.得到省份这个select对象let selectProvince = document.getElementById("province");//遍历省份这个数组for (let i = 0; i < provinces.length; i++) {let province = provinces[i];  //i=0  province=广东省//2.创建option对象let optionElement = document.createElement("option");//3.设置value和文本optionElement.value = i;optionElement.innerText = province;//4.添加到select的最后一个子元素: 父元素.appendChild(子元素)selectProvince.appendChild(optionElement);}}/*** 省份下拉列表的改变事件*/document.getElementById("province").onchange = function () {//alert(this.value);  //value就是它的索引var arr = cities[this.value];  //得到相应城市的数组//得到城市下拉select对象let city = document.getElementById("city");  //city下拉列表对象//修改city中innerHTMLcity.innerHTML = "<option>--请选择城市--</option>";  //覆盖原来的HTML子元素//向城市下拉列表添加option//1. 遍历城市数组for (let i = 0; i < arr.length; i++) {let arrElement = arr[i];  //每个城市字符串//2. 创建option对象 <option>广州市</option>let optionElement = document.createElement("option");//3. 设置文本optionElement.innerText = arrElement;//4. 添加到select的最后一个子元素: 父元素.appendChild(子元素)city.appendChild(optionElement);}}
</script>
</html>

小结

正则表达式的规则

目标

了解正则表达式的规则

引入

提问：如果要验证一个手机号码，我们以前应该如何写代码？

判断是否全是数字，isNaN
长度要是11个字符
必须以1开头，第2个数字是345789，后面的数字随意

正则表达式作用

用于校验一个字符串是否匹配规则
查找字符

回顾正则表达式的规则

符号	作用
[a-z]	中括号表示1个字符，a-z中任意一个字符
[xyz]	x或y或z，三个字符一个
[^xyz]	除了xyz之外的任意字符
\d	数字
\w	单词，相当于[a-zA-Z0-9_]
.	任意字符，如果要匹配点号需要转义 \.
()	分组
{n}	前面的字符出现n次
{n,}	前面的字符出现大于等于n次
{n,m}	前面的字符出现n次到m之间的次数，包头包尾
+	前面的字符出现1~n次
*	前面的字符出现0~n次
?	前面的字符出现0~1次
\|	多组字符串选择1个
^	匹配开头
$	匹配结尾

小结

正则表达式主要有哪两个作用？

1. 判断字符串是否匹配
2. 查找字符串

使用正则表达式

目标

创建正则表达式有哪2种方式

演示代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>正则表达式</title>
</head>
<body>
<script type="text/javascript">/*** 创建正则表达式的2种方式：* 1. new RegExp("正则表达式")* 2. /正则表达式/** 判断正则表达式是否匹配字符串的方法：* boolean 正则表达式对象.test(字符串) 如果匹配返回true，否则返回false* 与Java不同，Java默认是精确匹配。JS默认是模糊匹配，只要包含这个正则表达式的内容就可以* 结论：如果要在JS中精确匹配，必须以^开头，以$结尾*/var reg = new RegExp("\\d{3}");document.write(reg.test("123") + "<br/>");  //truedocument.write(reg.test("abc") + "<br/>");  //falsedocument.write(reg.test("a123b") + "<br/>");  //truedocument.write("<hr/>");var reg = new RegExp("^\\d{3}");  //匹配3个数字开头document.write(reg.test("a123b") + "<br/>");  //falsedocument.write(reg.test("123b") + "<br/>");  //truedocument.write("<hr/>");var reg = new RegExp("\\d{3}$");  //匹配3个数字结尾document.write(reg.test("a123") + "<br/>");  //truedocument.write("<hr/>");var reg = new RegExp("^\\d{3}$");  //精确匹配，必须匹配3个数字document.write(reg.test("123abc123") + "<br/>");  //falsedocument.write(reg.test("456") + "<br/>");  //true/*使用第2种写法*/var reg = /^\d{3}$/;document.write(reg.test("456") + "<br/>");  //true
</script>
</body>
</html>

两种方式的区别

方式一：正则表达式是做为字符串参数出现的，可以定义成变量，可以进行字符串拼接，相对更加灵活。但\等字符需要转义。
方式二：本身是一个正则表达式对象，\等字符不需要转义。

匹配模式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>正则表达式匹配模式</title>
</head>
<body>
<script type="text/javascript">/*i 忽略大小写比较1. new RegExp("正则表达式","匹配模式")2. /正则表达式/匹配模式*/var reg = new RegExp("cat","i");document.write(reg.test("cat") + "<br/>");  //truedocument.write(reg.test("CAT") + "<br/>");  //truedocument.write("<hr/>");var reg = /cat/i;document.write(reg.test("cat") + "<br/>");  //truedocument.write(reg.test("CAT") + "<br/>");  //true
</script>
</body>
</html>

小结

判断正则表达式与字符串是否匹配的方法是？

boolean 正则表达式对象.test(字符串)
如果匹配返回true

案例：校验注册表单

目标

onsubmit事件说明

 onsubmit事件，如果return false就可以阻止表单提交

案例需求

用户注册，需要进行如下验证，请在JS中使用正则表达式进行验证。

用户名：只能由英文字母和数字组成，长度为4～16个字符，并且以英文字母开头
密码：大小写字母和数字6-20个字符
确认密码：两次密码要相同
电子邮箱: 符合邮箱地址的格式 /^\w+@\w+(.[a-zA-Z]{2,3}){1,2}$/
手机号：/^1[3456789]\d{9}$/
生日：生日的年份在1900～2009之间，生日格式为1980-5-12或1988-05-04的形式，/^((19\d{2})|(200\d))-(0?[1-9]|1[0-2])-(0?[1-9]|[1-2]\d|3[0-1])$/

案例分析

创建正则表达式
得到文本框中输入的值
如果不匹配，在后面的span中显示错误信息，返回false
如果匹配，在后面的span中显示一个打勾图片，返回true
写一个验证表单中所有的项的方法，所有的方法都返回true，这个方法才返回true.

代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>验证注册页面</title><style type="text/css">body {margin: 0;padding: 0;font-size: 12px;line-height: 20px;}.main {width: 525px;margin-left: auto;margin-right: auto;}.hr_1 {font-size: 14px;font-weight: bold;color: #3275c3;height: 35px;border-bottom-width: 2px;border-bottom-style: solid;border-bottom-color: #3275c3;vertical-align: bottom;padding-left: 12px;}.left {text-align: right;width: 80px;height: 25px;padding-right: 5px;}.center {width: 280px;}.in {width: 130px;height: 16px;border: solid 1px #79abea;}.red {color: #cc0000;font-weight: bold;}div {color: #F00;}span {color: red;}</style><script type="text/javascript">/*** 校验所有的表单项*/function checkAll() {return checkUser() && checkMobile();}/*** 检查用户名是否正确* 由英文字母和数字组成，长度为4～16个字符，并且以英文字母开头*/function checkUser() {//1.得到文本框的值let value = document.getElementById("user").value;//2.创建正则表达式let reg = /^[a-zA-Z][a-zA-Z0-9]{3,15}$/;//3.比较正则表达式与文本框的值是否匹配if (reg.test(value)) {//4.如果匹配就通过，在后面显示打勾的图片，返回truedocument.getElementById("userInfo").innerHTML = "<img src='img/gou.png' width='15'/>";return true;} else {//5.如果不匹配，在后面显示错误信息，返回falsedocument.getElementById("userInfo").innerHTML = "用户名格式有误";return false;}}/*** 判断手机号*/function checkMobile() {//1.得到文本框的值let value = document.getElementById("mobile").value;//2.创建正则表达式let reg = /^1[3456789]\d{9}$/;//3.比较正则表达式与文本框的值是否匹配if (reg.test(value)) {//4.如果匹配就通过，在后面显示打勾的图片，返回truedocument.getElementById("mobileInfo").innerHTML = "<img src='img/gou.png' width='15'/>";return true;} else {//5.如果不匹配，在后面显示错误信息，返回falsedocument.getElementById("mobileInfo").innerHTML = "手机格式有误";return false;}}</script>
</head><body>
<!--  onsubmit事件，如果return false就可以阻止表单提交-->
<form action="server" method="post" id="myform" onsubmit="return checkAll()"><table class="main" border="0" cellspacing="0" cellpadding="0"><tr><td><img src="img/logo.jpg" alt="logo"/><img src="img/banner.jpg" alt="banner"/></td></tr><tr><td class="hr_1">新用户注册</td></tr><tr><td style="height:10px;"></td></tr><tr><td><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><!-- 不能为空， 输入长度必须介于 5 和 10 之间 --><td class="left">用户名：</td><td class="center"><!--文本框失去焦点进行验证--><input id="user" name="user" type="text" class="in" onblur="checkUser()"/><span id="userInfo"></span></td></tr><tr><!-- 不能为空， 输入长度大于6个字符 --><td class="left">密码：</td><td class="center"><input id="pwd" name="pwd" type="password" class="in"/></td></tr><tr><!-- 不能为空， 与密码相同 --><td class="left">确认密码：</td><td class="center"><input id="repwd" name="repwd" type="password" class="in"/></td></tr><tr><!-- 不能为空， 邮箱格式要正确 --><td class="left">电子邮箱：</td><td class="center"><input id="email" name="email" type="text" class="in"/></td></tr><tr><!-- 不能为空， 使用正则表达式自定义校验规则,1开头，11位全是数字 --><td class="left">手机号码：</td><td class="center"><input id="mobile" name="mobile" type="text" class="in" onblur="checkMobile()"/><span id="mobileInfo"></span></td></tr><tr><!-- 不能为空， 要正确的日期格式 --><td class="left">生日：</td><td class="center"><input id="birth" name="birth" type="text" class="in"/></td></tr><tr><td class="left">&nbsp;</td><td class="center"><input name="" type="image" src="img/register.jpg"/></td></tr></table></td></tr></table>
</form>
</body>
</html>

小结

表单提交的时候会激活哪个事件？onsubmit

学习总结

能够掌握 json 的三种数据格式

类型	语法
对象类型	{键:值}
数组/集合类型	[元素,元素]
混合类型	[{},{}] {键:[元素,元素]}

语法	功能
JSON.parse(字符串)	字符串->JSON对象
JSON.stringify(JSON对象)	JSON对象->字符串

能够使用window对象常用的方法

window中的方法	说明
setInterval()/setTimeout()	每过一段时间调用1次/过一段时间只调用1次
clearTimeout() / clearInterval()	清除上面的计时器，上面的返回值就是计时器
alert()/prompt()/confirm()	信息/输入/确认

能够使用location对象常用的方法和属性

属性	功能
href	跳转页面
search	获得到参数字符串

location的方法	描述
reload()	刷新

能够使用history对象常用的方法

方法	作用
forward()	前进
back()	后退
go()	前进/后退

能够使用DOM中来查找节点

获取元素的方法	作用
document.getElementById(“id”)	通过id得到一个元素
document.getElementsByTagName (“标签名”)	通过标签名得到一组元素
document.getElementsByName(“name”)	通过name属性得到一组元素
document.getElementsByClassName(“类名”)	通过类名得到一组元素

根据CSS选择器获取元素	作用
document.querySelector(CSS选择器)	通过CSS选择器得到一个元素
document.querySelectorAll(CSS选择器)	通过CSS选择器得到一组元素

能够使用DOM来增删改节点

创建元素的方法	作用
document.createElement(“标签名”)	创建一个元素

将元素挂到DOM树上的方法	作用
父元素.appendChild(子元素)	追加成最后一个子元素
父元素.removeChild(子元素)	删除子元素
元素.remove()	删除自己

能够使用正则表达式进行表单的验证

创建正则表达式格式：

new RegExp("正则表达式","匹配模式")
/正则表达式/匹配模式

正则表达式的判断方法：

boolean 正则表达式.test(字符串)

type=“text” class=“in” οnblur=“checkMobile()”/>

生日：


### 小结2. 表单提交的时候会激活哪个事件？onsubmit# 学习总结- 能够掌握 json 的三种数据格式| 类型          | 语法                      |
| ------------- | ------------------------- |
| 对象类型      | {键:值}                   |
| 数组/集合类型 | [元素,元素]               |
| 混合类型      | [{},{}]  {键:[元素,元素]} || 语法                     | 功能             |
| ------------------------ | ---------------- |
| JSON.parse(字符串)       | 字符串->JSON对象 |
| JSON.stringify(JSON对象) | JSON对象->字符串 |- 能够使用window对象常用的方法| window中的方法                   | 说明                                     |
| -------------------------------- | ---------------------------------------- |
| setInterval()/setTimeout()       | 每过一段时间调用1次/过一段时间只调用1次  |
| clearTimeout() / clearInterval() | 清除上面的计时器，上面的返回值就是计时器 |
| alert()/prompt()/confirm()       | 信息/输入/确认                           |- 能够使用location对象常用的方法和属性| 属性   | 功能             |
| ------ | ---------------- |
| href   | 跳转页面         |
| search | 获得到参数字符串 || location的方法 | 描述 |
| -------------- | ---- |
| reload()       | 刷新 |- 能够使用history对象常用的方法| 方法      | 作用      |
| --------- | --------- |
| forward() | 前进      |
| back()    | 后退      |
| go()      | 前进/后退 |- 能够使用DOM中来查找节点| 获取元素的方法                           | 作用                     |
| ---------------------------------------- | ------------------------ |
| document.getElementById("id")            | 通过id得到一个元素       |
| document.getElementsByTagName ("标签名") | 通过标签名得到一组元素   |
| document.getElementsByName("name")       | 通过name属性得到一组元素 |
| document.getElementsByClassName("类名")  | 通过类名得到一组元素     || 根据CSS选择器获取元素                | 作用                      |
| ------------------------------------ | ------------------------- |
| document.querySelector(CSS选择器)    | 通过CSS选择器得到一个元素 |
| document.querySelectorAll(CSS选择器) | 通过CSS选择器得到一组元素 |- 能够使用DOM来增删改节点| 创建元素的方法                   | 作用         |
| -------------------------------- | ------------ |
| document.createElement("标签名") | 创建一个元素 || 将元素挂到DOM树上的方法    | 作用                 |
| -------------------------- | -------------------- |
| 父元素.appendChild(子元素) | 追加成最后一个子元素 |
| 父元素.removeChild(子元素) | 删除子元素           |
| 元素.remove()              | 删除自己             |- 能够使用正则表达式进行表单的验证创建正则表达式格式：

new RegExp(“正则表达式”,“匹配模式”)
/正则表达式/匹配模式


正则表达式的判断方法：

boolean 正则表达式.test(字符串)

javaScripty笔记相关推荐

【读书笔记】知易行难，多实践
前言: 其实,我不喜欢看书,只是喜欢找答案,想通过专业的解答来解决我生活的困惑.所以,我听了很多书,也看了很多书,但看完书,没有很多的实践,导致我并不很深入在很多时候. 分享读书笔记: <高效1 ...
【运维学习笔记】生命不息，搞事开始。。。
001生命不息,搞事不止!!! 这段时间和hexesdesu搞了很多事情! 之前是机械硬盘和固态硬盘的测速,我就在那默默的看着他一个硬盘一个机械测来测去. 坐在他后面,每天都能看到这位萌萌的小男孩,各 ...
SSAN 关系抽取论文笔记
20210621 https://zhuanlan.zhihu.com/p/353183322 [KG笔记]八.文档级(Document Level)关系抽取任务共指id嵌入一样但是实体嵌入的时候 ...
pandas以前笔记
# -*- coding: utf-8 -*- """ Created on Sat Jul 21 20:06:20 2018@author: heimi "& ...
PyTorch 学习笔记（六）：PyTorch hook 和关于 PyTorch backward 过程的理解 call
您的位置首页 PyTorch 学习笔记系列 PyTorch 学习笔记(六):PyTorch hook 和关于 PyTorch backward 过程的理解发布: 2017年8月4日 7,195阅读 ...
容器云原生DevOps学习笔记——第三期：从零搭建CI/CD系统标准化交付流程
暑期实习期间,所在的技术中台-效能研发团队规划设计并结合公司开源协同实现符合DevOps理念的研发工具平台,实现研发过程自动化.标准化: 实习期间对DevOps的理解一直懵懵懂懂,最近观看了阿里专家带 ...
容器云原生DevOps学习笔记——第二期：如何快速高质量的应用容器化迁移
暑期实习期间,所在的技术中台-效能研发团队规划设计并结合公司开源协同实现符合DevOps理念的研发工具平台,实现研发过程自动化.标准化: 实习期间对DevOps的理解一直懵懵懂懂,最近观看了阿里专家带 ...
王道考研计算机网络笔记第六章：应用层
本文基于2019 王道考研计算机网络: 2019 王道考研计算机网络个人笔记总结第一章:王道考研计算机网络笔记第一章:概述&计算机网络体系结构第二章:王道考研计算机网络笔记第 ...
王道考研计算机网络笔记第五章：传输层
本文基于2019 王道考研计算机网络: 2019 王道考研计算机网络个人笔记总结第一章:王道考研计算机网络笔记第一章:概述&计算机网络体系结构第二章:王道考研计算机网络笔记第 ...

javaScripty笔记

《JavaScript-笔记》

学习目标

学习内容

流程控制：if 语句

目标

if 语句：

if…else 语句

if…else if…else 语句

代码

小结：非布尔类型的表达式

流程控制：switch语句

目标

语法一：case后使用常量，与Java相同

语法二：case后使用表达式

相关的方法

案例：判断一个学生的等级

分析

代码

小结

流程控制：循环语句

目标

while语句：

do-while语句：

for 语句

break和continue

案例：乘法表

需求

分析

代码

命名函数和匿名函数

目标

函数的概述

命名函数的格式

自定义函数

需求

代码

注意事项

代码

匿名函数

应用场景

语法

函数调用代码

小结

案例：轮播图

目标

方法说明

需求

步骤

代码

小结

设置事件的两种方式

目标

什么是事件

设置事件的两种方式

小结

事件介绍：onload、onclick、ondblclick

目标

加载完成事件

鼠标点击事件

案例演示

代码

小结

事件介绍：得到焦点、失去焦点、改变事件

目标

事件名

焦点事件示例

代码

改变事件示例

需求

效果

代码

小结

上午回顾

流程控制语句

函数

事件

事件介绍：鼠标移入和移出

目标

事件名