04 HTML CSS JavaScript

文章目录

HTML
- 1、HTML介绍
- 2、快速入门
- 3、基础标签
- 4、图片、音频、视频标签
- 5、超链接标签
- 6、列表标签
- 7、表格标签
- 8、布局标签
- 9、表单标签
CSS
- 1、概述
- 2、 css 导入方式
- 3、 css 选择器
- 4、 css 属性
JavaScript
- 1、JavaScript简介
- 2、JavaScript引入方式
- 3、JavaScript基础语法
- 4、JavaScript常用对象
- 5、BOM
- 6、DOM
- 7、事件监听
- 8、表单验证案例
- 9、RegExp对象

HTML

1、HTML介绍

HTML(HyperText Markup Language)：超文本标记语言
- 超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容
- 标记语言：由标签构成的语言
  HTML中的标签都是预定义好的，运行在浏览器上并由浏览器解析
W3C标准：
W3C是万维网联盟，这个组成是用来定义标准的。他们规定了一个网页是由三部分组成，分别是：
- 结构：对应的是 HTML 语言
- 表现：对应的是 CSS 语言
- 行为：对应的是 JavaScript 语言
  HTML定义页面的整体结构；CSS是用来美化页面，让页面看起来更加美观；JavaScript可以使网页动起来，比如轮播图也就是多张图片自动的进行切换等效果

2、快速入门

需求：实现如图页面
实现步骤
- 新建文本文件，后缀名改为 .html
- 编写 HTML 结构标签
```
<html><head><title> </title></head><body></body>
</html>
```
  （1）html标签是根标签，head 标签和 body 标签这两个子标签
  （2）head 标签的 title 子标签是用来定义页面标题名称的，它定义的内容会展示在浏览器的标题位置
  （3）body 标签的内容会被展示在内容区中
- 定义文字
```
<html><head>	<title>html 快速入门</title></head><body>乾坤未定，你我皆是黑马~<font color='red'>乾坤未定，你我皆是牛马！！！</font></body>
</html>
```
细节
- HTML 文件以.htm或.html为扩展名
- HTML 结构标签
- HTML 标签不区分大小写
- HTML 标签属性值单双引皆可
- HTML 语法松散

3、基础标签

<!-- html5 标识-->
<!DOCTYPE html>
<html lang="en">
<head><!-- 页面的字符集--><meta charset="UTF-8"><title>Title</title>
</head>
<body><h1>我是标题 h1</h1>
<h2>我是标题 h2</h2>
<h3>我是标题 h3</h3>
<h4>我是标题 h4</h4>
<h5>我是标题 h5</h5>
<h6>我是标题 h6</h6><hr>
<!--html 表示颜色：1. 英文单词：red,pink,blue...2. rgb(值1,值2,值3)：值的取值范围：0~255  rgb(255,0,0)3. #值1值2值3：值的范围：00~FF
-->
<font face="楷体" size="5" color="#ff0000">传智教育</font><hr>
刚察草原绿草如茵，沙柳河水流淌入湖。藏族牧民索南才让家中，茶几上摆着馓子、麻花和水果，炉子上刚煮开的奶茶香气四溢……<br><hr>
<p>
刚察草原绿草如茵，沙柳河水流淌入湖。藏族牧民索南才让家中，茶几上摆着馓子、麻花和水果，炉子上刚煮开的奶茶香气四溢……
</p>
<p>
6月8日下午
</p><hr>
沙柳河水流淌<br>
<b>沙柳河水流淌</b><br>
<i>沙柳河水流淌</i><br>
<u>沙柳河水流淌</u><br><hr>
<center>
<b>沙柳河水流淌</b>
</center></body>
</html>

转移字符：

4、图片、音频、视频标签

图片、音频、视频标签
- img：定义图片
  src：规定显示图像的 URL（统一资源定位符）
  height：定义图像的高度
  width：定义图像的宽度
- audio：定义音频。支持的音频格式：MP3、WAV、OGG
  src：规定音频的 URL
  controls：显示播放控件
- video：定义视频。支持的音频格式：MP4, WebM、OGG
  src：规定视频的 URL
  controls：显示播放控件
尺寸单位：
height属性和width属性有两种设置方式：
- 像素：单位是px
- 百分比。占父标签的百分比
  例如，宽度设置为 50%，意思就是占它的父标签宽度的一般（50%）

资源路径：
资源路径有如下两种设置方式：

绝对路径：完整路径
这里的绝对路径是网络中的绝对路径。格式为：协议://ip地址:端口号/资源名称
如：

<img src="https://th.bing.com/th/id/R33674725d9ae34f86e3835ae30b20afe?
rik=Pb3C9e5%2b%2b3a9Vw&riu=http%3a%2f%2fwww.desktx.com%2fd%2ffile%2fwallpaper%2fscenery%2f2
0180626%2f4c8157d07c14a30fd76f9bc110b1314e.jpg&ehk=9tpmnrrRNi0eBGq3CnhwvuU8PPmKuy1Yma0zL%2b
a14T0%3d&risl=&pid=ImgRaw" width="300" height="400">

相对路径：相对位置关系
根据.html所在位置通过相对位置关系来寻找资源

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><img src="../img/a.jpg" width="300" height="400">
<img src="https://th.bing.com/th/id/R33674725d9ae34f86e3835ae30b20afe?rik=Pb3C9e5%2b%2b3a9Vw&riu=http%3a%2f%2fwww.desktx.com%2fd%2ffile%2fwallpaper%2fscenery%2f20180626%2f4c8157d07c14a30fd76f9bc110b1314e.jpg&ehk=9tpmnrrRNi0eBGq3CnhwvuU8PPmKuy1Yma0zL%2ba14T0%3d&risl=&pid=ImgRaw" width="300" height="400">
<audio src="b.mp3" controls></audio>
<video src="c.mp4" controls width="500" height="300"></video></body>
</html>

5、超链接标签

超链接标签：a 标签
- href：指定访问资源的URL
- target：指定打开资源的方式
  - _self：默认值，在当前页面打开
  - _blank：在空白页面打开

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><a href="https://www.itcast.cn" target="_self">点我有惊喜</a>
</body>
</html>

6、列表标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><ol type="A"><li>咖啡</li><li>茶</li><li>牛奶</li></ol><ul type="circle"><li>咖啡</li><li>茶</li><li>牛奶</li></ul>
</body>
</html>

效果：

7、表格标签

table ：定义表格
- border：规定表格边框的宽度
- width ：规定表格的宽度
- cellspacing：规定单元格之间的空白
tr ：定义行
align：定义表格行的内容对齐方式
th：定义表头单元格
td ：定义单元格
- rowspan:规定单元格可横跨的行数
- colspan:规定单元格可横跨的列数

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"><title>Title</title>
</head>
<body>
<table border="1" cellspacing="0" width="500"><tr><th>序号</th><th>品牌logo</th><th>品牌名称</th><th>企业名称</th></tr><tr align="center"><td>010</td><td><img src="../img/三只松鼠.png" width="60" height="50"></td><td>三只松鼠</td><td>三只松鼠</td></tr><tr align="center"><td>009</td><td><img src="../img/优衣库.png" width="60" height="50"></td><td>优衣库</td><td>优衣库</td></tr><tr align="center"><td>008</td><td><img src="../img/小米.png" width="60" height="50"></td><td>小米</td><td>小米科技有限公司</td></tr>
</table>
</body>
</html>

8、布局标签

这两个标签，一般都是和css结合到一块使用来实现页面的布局。
div 标签在浏览器上会有换行的效果，而 span 标签在浏览器上没有换行效果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div>我是div</div><div>我是div</div><span>我是span</span><span>我是span</span>
</body>
</html>

效果：

9、表单标签

介绍
表单：在网页中主要负责数据采集功能
表单项(元素)：不同类型的 input 元素、下拉列表、文本域等
form标签
form 是表单标签，它在页面上没有任何展示的效果，需要借助于表单项标签来展示不同的效果
- action：规定当提交表单时向何处发送表单数据，该属性值就是URL
- method ：规定用于发送表单数据的方式
  - get：默认值。如果不设置method属性则默认就是该值
    （1）请求参数会拼接在URL后边
    （2）url的长度有限制 4KB
  - post：
    （1）浏览器会将数据放到http请求消息体中
    （2）请求参数无限制的
表单项标签
- input：表单项，通过type属性控制输入形式
- select：定义下拉列表，option 定义列表项
- textarea：文本域
  可以输入多行文本，而 input 数据框只能输入一行文本
（1）以上标签项的内容要想提交，必须得定义 name 属性。
（2）每一个标签都有id属性，id属性值是唯一的标识。
（3）单选框、复选框、下拉列表需要使用 value 属性指定提交的值

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><form action="#" method="post"><input type="hidden" name="id" value="123"><label for="username">用户名：</label><input type="text" name="username" id="username"><br><label for="password">密码：</label><input type="password" name="password" id="password"><br>性别：<input type="radio" name="gender" value="1" id="male"> <label for="male">男</label><input type="radio" name="gender" value="2" id="female"> <label for="female">女</label><br>爱好：<input type="checkbox" name="hobby" value="1"> 旅游<input type="checkbox" name="hobby" value="2"> 电影<input type="checkbox" name="hobby" value="3"> 游戏 <br>头像：<input type="file"><br>城市:<select name="city"><option>北京</option><option value="shanghai">上海</option><option>广州</option></select><br>个人描述：<textarea cols="20" rows="5" name="desc"></textarea><br><br><input type="submit" value="免费注册"><input type="reset" value="重置"><input type="button" value="一个按钮"></form>
</body>
</html>

CSS

1、概述

Cascading Style Sheet（层叠样式表）：用于控制网页表现

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div{color: red;}</style>
</head>
<body>
<div>Hello CSS~</div>
</body>
</html>

2、 css 导入方式

css 导入方式就是 css 代码和 html 代码的结合方式，CSS 导入 HTML有三种方式

内联样式：在标签内部使用style属性，属性值是css属性键值对
只能作用在这一个标签上,复用性太差
```
<div style="color: red">Hello CSS~</div>
```
内部样式：定义style标签，在标签内部定义css样式
可以做到在该页面中复用
```
<style type="text/css">div{color: red;}
</style>
```
外部样式：定义link标签，引入外部的css文件
可以在多个页面进行复用
```
div{color: red;
}
```

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>span{color: red;}</style><link href="../css/demo.css" rel="stylesheet">
</head>
<body><div style="color: red">hello css</div><span>hello css </span><p>hello css</p>
</body>
</html>

demo.css：

p{color: red;
}

3、 css 选择器

（1）css 选择器就是选取需设置样式的元素（标签）
（2）常用三种选择器：

元素选择器：元素名称{color: red;}
id选择器：#id属性值{color: red;}
类选择器：.class属性值{color: red;}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div{color: red;}#name{color: blue;}.cls{color: pink;}</style></head>
<body><div>div1</div><div id="name">div2</div><div class="cls">div3</div><span class="cls">span</span>
</body>
</html>

4、 css 属性

需要时去官网https://www.w3school.com.cn/css/index.asp查看即可

JavaScript

1、JavaScript简介

（1） JavaScript 是一门跨平台、面向对象的脚本语言
（2）JavaScript是脚本语言，不需要编译，由浏览器直接解析并执行
（3）JavaScript 是用来控制网页行为的，它能使网页可交互

2、JavaScript引入方式

JavaScript 引入方式就是 HTML 和 JavaScript 的结合方式。JavaScript引入方式有两种：

内部脚本：将 JS代码定义在HTML页面中
在 HTML 中，JavaScript 代码必须位于 <script> 与 </script> 标签之间
```
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script>alert("hello js1");
</script>
</body>
</html>
```
（1）在 HTML 文档中可以在任意地方，放置任意数量的标签
（2）一般把脚本置于元素的底部，可改善显示速度
外部脚本：将 JS代码定义在外部 JS文件中，然后引入到 HTML页面中
在页面使用 script 标签中使用 src 属性指定 js 文件的 URL 路径
```
//demo.js 文件内容
alert("hello js");
```
```
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script src="../js/demo.js"></script>
</body>
</html>
```
（1）外部脚本不能包含 <script> 标签
在js文件中直接写 js 代码即可，不要在 js文件中写 script 标签
（2）<script> 标签不能自闭合
在页面中引入外部js文件时，不能写成 <script src="../js/demo.js" />

3、JavaScript基础语法

书写语法
- 区分大小写：与 Java 一样，变量名、函数名以及其他一切东西都是区分大小写的
- 每行结尾的分号可有可无
  如果一行上写多个语句时，必须加分号用来区分多个语句。
- 注释
  - 单行注释：// 注释内容
  - 多行注释：/* 注释内容 */
    注意：JavaScript 没有文档注释
- 大括号表示代码块
输出语句
- 使用 window.alert() 写入警告框
- 使用 document.write() 写入 HTML 输出
- 使用 console.log() 写入浏览器控制台
  按 F12 就可以看到控制台
变量
- JavaScript 是一门弱类型语言，变量可以存放不同类型的值
  （1）JavaScript 中用 var 关键字（variable 的缩写）来声明变量
  （2）格式： var 变量名 = 数据值;
```
var test = 20;
test = "张三";
```
- 变量名命名规则
  和java语言基本都相同
  - 组成字符可以是任何字母、数字、下划线（_）或美元符号（$）
  - 数字不能开头
  - 建议使用驼峰命名
- var 关键字
  - 作用域：全局变量
  - 变量可以重复定义
- let 关键字
  - 代码块内有效
  - 不允许重复声明
- const关键字
  - 声明一个只读的常量
  - 一旦声明，常量的值就不能改变
数据类型
- 两类数据类型：原始类型和引用类型
  使用 typeof 运算符可以获取数据类型：typeof 变量名
- 原始数据类型：
  - number：数字（整数、小数、NaN(Not a Number)）
  - string：字符、字符串，单双引皆可
  - boolean：布尔
  - null：对象为空
  - undefined：当声明的变量未初始化时，该变量的默认值是 undefined
运算符
- JavaScript 提供了如下的运算符
  大部分和 Java语言都是一样的
- ==和 ===区别
  - ==：1. 判断类型是否一样，如果不一样，则进行类型转换，2. 再去比较其值
  - ===：1. 判断类型是否一样，如果不一样，直接返回false，2. 再去比较其值
- 类型转换
  - 其他类型转为number
    - string 转换为 number 类型：按照字符串的字面值，转为数字。如果字面值不是数字，则转为NaN
```
//将 string 转换为 number 有两种方式：
//（1）使用 + 正号运算符：
var str = +"20";
alert(str + 1) //21
//（2）使用 parseInt() 函数(方法)：
var str = "20";
alert(parseInt(str) + 1);
```
    - boolean 转换为 number 类型：true 转为1，false转为0
```
var flag = +false;
alert(flag); // 0
```
  - 其他类型转为boolean
    - number 类型转换为 boolean 类型：0和NaN转为false，其他的数字转为true
    - string 类型转换为 boolean 类型：空字符串转为false，其他的字符串转为true
    - null类型转换为 boolean 类型是 false
    - undefined 转换为 boolean 类型是 false
  - 使用场景：
    由于 JavaScript 会自动进行类型转换，所以可以简化判断字符串不是null
```
var str = "abc";
//健壮性判断
//if(str != null && str.length > 0){
if(str){alert("转为true");
}else {alert("转为false");
}
```
流程控制语句
JavaScript 中提供了和 Java 一样的流程控制语句，如下
- if
- switch
- for
- while
- dowhile
函数
- 定义格式
  JavaScript 函数通过 function 关键词进行定义，定义格式有两种
  - 方式1
```
function 函数名(参数1,参数2..){要执行的代码
}
```
  - 方式二
```
var 函数名 = function (参数列表){要执行的代码
}
```
  - 细节
    （1）形式参数不需要类型。因为JavaScript是弱类型语言
    （2）返回值也不需要定义类型，可以在函数内部直接使用return返回即可
- 函数调用
  - 函数调用格式：函数名称(实际参数列表);
  - 细节：JS中，函数调用可以传递任意个数参数，多的不接收，少了设空

4、JavaScript常用对象

Array对象
JavaScript Array对象用于定义数组
- 定义格式
  - 方式1：var 变量名 = new Array(元素列表);
  - 方式2：var 变量名 = [元素列表];
- 元素访问：arr[索引] = 值; 索引从0开始
- 特点
  （1）JavaScript 中的数组相当于 Java 中集合。
  （2）数组的长度是可以变化的
  （3）可以存储任意的类型的数据
- 属性
- 方法
  - push 函数：给数组添加元素，也就是在数组的末尾添加元素
    参数表示要添加的元素
  - splice 函数：删除元素
    参数1：索引。表示从哪个索引位置删除
    参数2：个数。表示删除几个元素
```
 // 方式一
var arr = new Array(1,2,3);// 方式二
var arr2 = [1,2,3];// 访问
arr2[0] = 10;
alert(arr2)//属性length
for (let i = 0; i < arr.length; i++) {alert(arr[i]);
}// push:添加方法
var arr5 = [1,2,3];
arr5.push(10);
alert(arr5);  //数组的元素是 {1,2,3,10}// splice:删除元素
var arr5 = [1,2,3];
arr5.splice(0,1); //从 0 索引位置开始删除，删除一个元素 
alert(arr5); // {2,3}
```
String对象
- 定义
  - 方式1：var 变量名 = new String(s);
  - 方式2：var 变量名 = “数组”;
- 属性
  length ，该属性是用于动态的获取字符串的长度
- 函数
  
  trim()：去掉字符串两端的空格
```
var str4 = ' abc   ';
alert(1 + str4.trim() + 1);
```

自定义对象

定义

var 对象名称 = {属性名称1:属性值1,属性名称2:属性值2,...,函数名称:function (形参列表){},...
};

调用

对象名.属性名
对象名.函数名()

var person = {name : "zhangsan",age : 23,eat: function (){alert("干饭~");}};
alert(person.name);  //zhangsan
alert(person.age); //23
person.eat();  //干饭~

5、BOM

BOM介绍
- BOM：Browser Object Model 浏览器对象模型
- JavaScript 将浏览器的各个组成部分封装为对象
- 通过操作 BOM 中的对象可以实现操作浏览器的各个组成部分
- BOM 中包含了如下对象：
  - Window：浏览器窗口对象
  - Navigator：浏览器对象
  - Screen：屏幕对象
  - History：历史记录对象
  - Location：地址栏对象

Window对象

获取window对象
- 该对象不需要创建直接使用 window ，其中 window. 可以省略
- 显式使用 window 对象调用：window.alert(“abc”);
- 隐式调用：alert(“abc”)
window对象属性
window 对象提供了用于获取其他 BOM 组成对象的属性

（1）想使用 Location 对象的话，就可以使用 window 对象获取，写成 window.location
（2）window. 可以省略，简化写成 location 来获取 Location 对象
window对象函数
常用的函数

案例
需求：每隔1秒，灯泡切换一次状态

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript演示</title>
</head>
<body>
<input type="button" onclick="on()" value="开灯">
<img id="myImage" border="0" src="../imgs/off.gif" style="text-align:center;">
<input type="button" onclick="off()" value="关灯">
<script>function on(){document.getElementById('myImage').src='../imgs/on.gif';}function off(){document.getElementById('myImage').src='../imgs/off.gif'}//定义一个变量，用来记录灯的状态，偶数是开灯状态，奇数是关灯状态var x = 0;//使用循环定时器setInterval(function (){if(x % 2 == 0){//表示是偶数，开灯状态，调用 on() 函数on();}else {  //表示是奇数，关灯状态，调用 off() 函数off();}x ++;//改变变量的值},1000);
</script>
</body>
</html>

History对象
（1）使用 window.history获取，其中window. 可以省略
（2）常用方法：
Location对象
（1）使用 window.location获取，其中window. 可以省略
（2）常用属性：

6、DOM

概述
- DOM：Document Object Model 文档对象模型
- JavaScript 将 HTML 文档的各个组成部分封装为对象
- 封装的对象分为
  - Document：整个文档对象
  - Element：元素对象
  - Attribute：属性对象
  - Text：文本对象
  - Comment：注释对象
- 如下图，左边是 HTML 文档内容，右边是 DOM 树
- 作用：JavaScript 通过 DOM，就能够对 HTML进行操作了
  - 改变 HTML 元素的内容
  - 改变 HTML 元素的样式（CSS）
  - 对 HTML DOM 事件作出反应
  - 添加和删除 HTML 元素
- DOM相关概念：
  DOM 是 W3C（万维网联盟）定义了访问 HTML 和 XML 文档的标准。
  该标准被分为 3 个不同的部分：
  （1）核心 DOM：针对任何结构化文档的标准模型。 XML 和 HTML 通用的标准
  （2） XML DOM：针对 XML 文档的标准模型
  （3）HTML DOM：针对 HTML 文档的标准模型
- HTML DOM
  该标准是在核心 DOM 基础上，对 HTML 中的每个标签都封装成了不同的对象
  例如：<img>标签在浏览器加载到内存中时会被封装成 Image 对象，同时该对象也是 Element 对象；<input type='button'> 标签在浏览器加载到内存中时会被封装成 Button 对象，同时该对象也是Element 对象。

获取 Element对象

HTML 中的 Element 对象可以通过 Document 对象获取，而 Document 对象是通过 window 对象获取
Document 对象中提供了以下获取 Element 元素对象的函数
- getElementById() ：根据id属性值获取，返回单个Element对象
- getElementsByTagName() ：根据标签名称获取，返回Element对象数组
- getElementsByName() ：根据name属性值获取，返回Element对象数组
- getElementsByClassName() ：根据class属性值获取，返回Element对象数组

//1.  getElementById() ：根据id属性值获取,返回单个Element对象
var img = document.getElementById("light");
alert(img);//2. getElementsByTagName() ：根据标签名称获取，返回Element对象数组
var divs = document.getElementsByTagName("div");
for (let i = 0; i < divs.length; i++) {alert(divs[i]);
}//3. getElementsByName：根据name属性值获取，返回Element对象数组
var hobbys = document.getElementsByName("hobby");
for (let i = 0; i < hobbys.length; i++) {alert(hobbys[i]);
}//4. getElementsByClassName：根据class属性值获取，返回Element对象数组
var clss = document.getElementsByClassName("cls");
for (let i = 0; i < clss.length; i++) {alert(clss[i]);
}

HTML Element对象使用
HTML 中的 Element 元素对象有很多，不可能全部记住，根据具体的需求查阅文档使用
案例演示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><img id="light" src="../imgs/off.gif"> <br><div class="cls">传智教育</div>   <br><div class="cls">黑马程序员</div> <br><input type="checkbox" name="hobby"> 电影<input type="checkbox" name="hobby"> 旅游<input type="checkbox" name="hobby"> 游戏<br><script>//在此处写js低吗</script>
</body>
</html>

需求1：点亮灯泡

此案例由于需要改变 img 标签的图片，所以我们查询文档，下图是查看文档的流程：

代码实现：

//1，根据 id='light' 获取 img 元素对象
var img = document.getElementById("light");
//2，修改 img 对象的 src 属性来改变图片
img.src = "../imgs/on.gif";

需求2：将所有的 div 标签的标签体内容替换为呵呵

//1，获取所有的 div 元素对象
var divs = document.getElementsByTagName("div");
/*style:设置元素css样式innerHTML：设置元素内容*/
//2，遍历数组，获取到每一个 div 元素对象，并修改元素内容
for (let i = 0; i < divs.length; i++) {//divs[i].style.color = 'red';divs[i].innerHTML = "呵呵";
}

需求3：使所有的复选框呈现被选中的状态

//1，获取所有的 复选框 元素对象
var hobbys = document.getElementsByName("hobby");
//2，遍历数组，通过将 复选框 元素对象的 checked 属性值设置为 true 来改变复选框的选中状态
for (let i = 0; i < hobbys.length; i++) {hobbys[i].checked = true;
}

7、事件监听

（1）HTML 事件是发生在 HTML 元素上的“事情”
（2）事件监听是JavaScript 可以在事件被侦测到时执行一段逻辑代码

事件绑定
JavaScript 提供了两种事件绑定方式：

方式一：通过 HTML标签中的事件属性进行绑定
方式二：通过 DOM 元素属性绑定

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><!--方式1：在下面input标签上添加 onclick 属性，并绑定 on() 函数--><input type="button" value="点我" onclick="on()"> <br><input type="button" value="再点我" id="btn"><script>function on(){alert("我被点了");}//方式2：获取 id="btn" 元素对象，通过调用 onclick 属性 绑定点击事件document.getElementById("btn").onclick = function (){alert("我被点了");}</script>
</body>
</html>

常见事件

8、表单验证案例

需求

1、当输入框失去焦点时，验证输入内容是否符合要求
2、当点击注册按钮时，判断所有输入框的内容是否都符合要求，如果不合符则阻止表单提交

环境准备

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>欢迎注册</title><link href="../css/register.css" rel="stylesheet">
</head>
<body><div class="form-div"><div class="reg-content"><h1>欢迎注册</h1><span>已有帐号？</span> <a href="#">登录</a></div><form id="reg-form" action="#" method="get"><table><tr><td>用户名</td><td class="inputs"><input name="username" type="text" id="username"><br><span id="username_err" class="err_msg" style="display: none">用户名不太受欢迎</span></td></tr><tr><td>密码</td><td class="inputs"><input name="password" type="password" id="password"><br><span id="password_err" class="err_msg" style="display: none">密码格式有误</span></td></tr><tr><td>手机号</td><td class="inputs"><input name="tel" type="text" id="tel"><br><span id="tel_err" class="err_msg" style="display: none">手机号格式有误</span></td></tr></table><div class="buttons"><input value="注 册" type="submit" id="reg_btn"></div><br class="clear"></form></div><script></script>
</body>
</html>

验证输入框
此小节完成如下功能：
（1）校验用户名。当用户名输入框失去焦点时，判断输入的内容是否符合长度是 6-12 位规则，不符合使id=‘username_err’ 的span标签显示出来，给出用户提示。
（2）校验密码。当密码输入框失去焦点时，判断输入的内容是否符合长度是 6-12 位规则，不符合使id='password_err’的span标签显示出来，给出用户提示。
（3）校验手机号。当手机号输入框失去焦点时，判断输入的内容是否符合长度是 11 位规则，不符合使 id=‘tel_err’ 的span标签显示出来，给出用户提示。

//1. 验证用户名是否符合规则
//1.1 获取用户名的输入框
var usernameInput = document.getElementById("username");
//1.2 绑定onblur事件 失去焦点
usernameInput.onblur = function () {//1.3 获取用户输入的用户名var username = usernameInput.value.trim();//1.4 判断用户名是否符合规则：长度 6~12if (username.length >= 6 && username.length <= 12) {//符合规则document.getElementById("username_err").style.display = 'none';} else {//不合符规则document.getElementById("username_err").style.display = '';}
}
//2. 验证密码是否符合规则
//2.1 获取密码的输入框
var passwordInput = document.getElementById("password");
//2.2 绑定onblur事件 失去焦点
passwordInput.onblur = function() {//2.3 获取用户输入的密码var password = passwordInput.value.trim();//2.4 判断密码是否符合规则：长度 6~12if (password.length >= 6 && password.length <= 12) {//符合规则document.getElementById("password_err").style.display = 'none';} else {//不合符规则document.getElementById("password_err").style.display = '';}
}
//3. 验证手机号是否符合规则
//3.1 获取手机号的输入框
var telInput = document.getElementById("tel");
//3.2 绑定onblur事件 失去焦点
telInput.onblur = function() {//3.3 获取用户输入的手机号var tel = telInput.value.trim();//3.4 判断手机号是否符合规则：长度 11if (tel.length == 11) {//符合规则document.getElementById("tel_err").style.display = 'none';} else {//不合符规则document.getElementById("tel_err").style.display = '';}
}

验证表单
当用户点击注册按钮时，需要同时对输入的用户名、密码、手机号，如果都符合规则，则提交表单；如果有一个不符合规则，则不允许提交表单。实现该功能需要获取表单元素对象，并绑定 onsubmit 事件

//1. 获取表单对象
var regForm = document.getElementById("reg-form");
//2. 绑定onsubmit 事件
regForm.onsubmit = function () {//挨个判断每一个表单项是否都符合要求，如果有一个不合符，则返回falsevar flag = checkUsername() && checkPassword() && checkTel();return flag;
}//1. 验证用户名是否符合规则
//1.1 获取用户名的输入框
var usernameInput = document.getElementById("username");
//1.2 绑定onblur事件 失去焦点
usernameInput.onblur = checkUsername;
function checkUsername() {//1.3 获取用户输入的用户名var username = usernameInput.value.trim();//1.4 判断用户名是否符合规则：长度 6~12var flag = username.length >= 6 && username.length <= 12;if (flag) {//符合规则document.getElementById("username_err").style.display = 'none';} else {//不合符规则document.getElementById("username_err").style.display = '';}return flag;
}
//1. 验证密码是否符合规则
//1.1 获取密码的输入框
var passwordInput = document.getElementById("password");
//1.2 绑定onblur事件 失去焦点
passwordInput.onblur = checkPassword;
function checkPassword() {//1.3 获取用户输入的密码var password = passwordInput.value.trim();//1.4 判断密码是否符合规则：长度 6~12var flag = password.length >= 6 && password.length <= 12;if (flag) {//符合规则document.getElementById("password_err").style.display = 'none';} else {//不合符规则document.getElementById("password_err").style.display = '';}return flag;
}
//1. 验证手机号是否符合规则
//1.1 获取手机号的输入框
var telInput = document.getElementById("tel");
//1.2 绑定onblur事件 失去焦点
telInput.onblur = checkTel;
function checkTel() {//1.3 获取用户输入的手机号var tel = telInput.value.trim();//1.4 判断手机号是否符合规则：长度 11var flag = tel.length == 11;if (flag) {//符合规则document.getElementById("tel_err").style.display = 'none';} else {//不合符规则document.getElementById("tel_err").style.display = '';}return flag;
}

9、RegExp对象

RegExp简介
（1）RegExp 是正则对象
（2）正则对象用于判断指定字符串是否符合规则
（3）正则表达式是和语言无关的
（4）正则表达式在不同的语言中的使用方式不同
（5）js 中需要使用正则对象来使用正则表达式
正则对象使用
- 创建对象
  正则对象有两种创建方式：
  - 直接量方式：var reg = /正则表达式/; 注意不要加引号,
  - 创建 RegExp 对象：var reg = new RegExp(“正则表达式”);
- 函数
  test(str) ：判断指定字符串是否符合规则，返回 true或 false
正则表达式
- 常用的规则
  - ^：表示开始
  - $：表示结束
  - [ ]：代表某个范围内的单个字符，比如： [0-9] 单个数字字符
  - .：代表任意单个字符，除了换行和行结束符
  - \w：代表单词字符：字母、数字、下划线()，相当于 [A-Za-z0-9]
  - \d：代表数字字符：相当于 [0-9]
- 量词：
  - +：至少一个
  - *：零个或多个
  - ？：零个或一个
  - {x}：x个
  - {m,}：至少m个
  - {m,n}：至少m个，最多n个
```
// 规则：单词字符，6~12
//1,创建正则对象，对正则表达式进行封装
var reg = /^\w{6,12}$/;
var str = "abcccc";
//2,判断 str 字符串是否符合 reg 封装的正则表达式的规则
var flag = reg.test(str);
alert(flag);
```