前端三剑客 HTML+CSS+JavaScript 学习笔记

关注

原创 2022-12-10 01:33:49 3.5w 阅读 AI 写同款· GEO 优化 ›

前端三剑客 - HTML 我们要想搭建一个网站，既需要写一些前端代码，又需要写一些后端代码。前端，当前主流的实现方案，其实就是我们平时所说的“前端开发三剑客”。以上转载于「Dark And Grey」的文章原文链接：https://blog.youkuaiyun.com/DarkAndGrey/article/details/124390460我们已经了解了 HTML基本开发方式，也了解了浏览器如何查看页面结构。接下来，就开始具体学习 HTML 中的语法细节。说是语法细节，实际上学习的是 HTML 中的各种标签。一个网页上可能有连接阅读详情

在这里插入图片描述

总结了一些关于前端 HTML&CSS&JavaScript 的知识点，比较适合初学者快速了解和入门〝前端三剑客〞

全文思维导图(大纲)
在这里插入图片描述

1. HTML(结构)

1.1. 概述

HTML(HyperText Markup Language): 超文本标记语言
超文本: 越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容
标记语言: 标签构成的语言

1.2. 基础标签

1. 标题标签

在 body 标签中书写标签

· 标题标签中 h1最大，h6最小

在这里插入图片描述

· 效果
在这里插入图片描述

2. 横线便签

在页面文件中书写 hr 标签

<hr>

效果如下

3. 字体标签

· font：字体标签

· face 属性：用来设置字体。如 “楷体”、"宋体"等

· color 属性：设置文字颜色

· size 属性：设置文字大小

<font face="楷体" size="5" color="#ff0000">html演示</font>

html演示

4. 换行标签

在需要换行的地方加上换行标签（br标签）

<br>

5. 段落标签

<p>段落</p>

6. 加粗、斜体、下划线标签

· b：加粗标签

· i：斜体标签

· u：下划线标签，在文字的下方有一条横线

在这里插入图片描述

7. 居中标签

<center>内容</center>

在这里插入图片描述

8. 特殊字符

转义字符

在这里插入图片描述

1.3. 图片、音频、视频标签

1. 定义图片

· src：规定显示图像的 URL

· height：定义图像的高度

· width：定义图像的宽度

2. 定义音频

· 支持的音频格式：MP3、WAV、OGG

· src：规定音频的 URL

· controls：显示播放控件

3. 定义视频

· 支持的音频格式：MP4, WebM、OGG

· src：规定视频的 URL

· controls：显示播放控件

4. 尺寸单位

· height属性和width属性有两种设置方式

· 像素：单位是px

· 百分比。占父标签的百分比。例如宽度设置为 50%，意思就是占它的父标签宽度的一般（50%）

5. 资源路径

· 图片，音频，视频标签都有src属性，而src是用来指定对应的图片，音频，视频文件的路径

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

· 相对路径：相对位置关系
找页面和其他资源的相对路径。
./ 表示当前路径
…/ 表示上一级路径
…/…/ 表示上两级路径

1.4. 超链接标签

定义超链接, 用于链接到另一个资源
href：指定访问资源的URL (#为本网址)
target：指定打开资源的方式 - _self：在当前页面打开 (默认值) - _blank：在空白页面打开
代码演示

在这里插入图片描述

1.5. 列表标签

1. 有序列表

在这里插入图片描述

有序列表中的 type 属性用来指定标记的标号的类型（数字、字母、罗马数字等）

2. 无序列表

在这里插入图片描述

无序列表中的 type 属性用来指定标记的形状
代码演示

在这里插入图片描述

1.6. 表格标签

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

代码演示

在这里插入图片描述

1.7. 布局标签

span：用于组合行内元素在浏览器上没有换行效果
div：定义HTML文档中的一个区域部分, 常与CSS一起使用, 用来布局网页在浏览器上会有换行的效果

代码演示

在这里插入图片描述

1.8. 表单标签

表单：在网页中主要负责数据采集功能，使用标签定义表单
表单项(元素)：不同类型的 input 元素、下拉列表、文本域等

常用标签

在这里插入图片描述

1. from标签属性

action：规定当提交表单时向何处发送表单数据，该属性值就是URL
method ：规定用于发送表单数据的方式(get、post)
- get：默认值。如果不设置method属性则默认就是该值
  - 请求参数会拼接在URL后边
  - url的长度有限制 4KB
- post：
  - 浏览器会将数据放到http请求消息体中
  - 请求参数无限制的

2. 表单项标签

：表单项
- 通过type属性控制输入形式
  - text 一行文本
  - password 密码, 输入则显示 *
  - radio 单选按钮, name属性必行拥有相同的值
  - checkbox 多选按钮
  - file 上传文件按钮
  - submit 提交按钮
  - reset 重置按钮
  - button 普通按钮
- placeholder 该属性为文字提醒, 不影响输入信息
- checked 该属性为默认选择此选项的内容
select：定义下拉列表
option 定义列表项
- selected 默认选择此选项的内容
textarea：文本域
- 可以输入多行文本，而 input 数据框只能输入一行文本
- cols 文本框的宽度
- rows 文本框的高度
- name 文本框的名字
注意
- 标签项的内容要想提交，必须得定义 name 属性。
- 每一个标签都有id属性，id属性值是唯一的标识。
- 单选框、复选框、下拉列表需要使用 value 属性指定提交的值。

3. 返回顶部

<span id="top"></span> 顶部位置
<中间代码. . .>
<a href="#top"></a> 返回顶部

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册练习</title>
</head>
<body>
<span id="top">首页</span>

<span>a</span><br>
<span>a</span><br>
<span>a</span><br>
<span>a</span><br>
<span>a</span><br>
<span>a</span><br>
... ...

<a href="#top">返回顶部</a>
</body>
</html>

注册页面练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册练习</title>
</head>
<body>
<span id="top">首页</span>

<form action="#">
    <label for="un">用户名:</label> <input id="un" type="text" name="username" placeholder="请输入用户名"> <br>
    <label for="pw">密  码:</label> <input id="pw" type="password" name="password" placeholder="请输入密码"><br>

    <spen>性别:</spen>
    <label for="man">男</label><input type="radio" id="man" name="gender" value="1" checked>
    <label for="woman">女</label><input type="radio" id="woman" name="gender" value="0"><br>

    <span>爱好:</span>
    <input type="checkbox" value="lvyou" checked>旅游
    <input type="checkbox" value="dianying">电影
    <input type="checkbox" value="youxi">游戏<br>

    <span>头像:</span>    <select>
    <option value="beijing" selected>北京</option>
    <option value="shanghai">上海</option>
    <input type="file"><br>

    <span>城市:</span>

        <option value="guangzhou">广州</option>
    </select><br>

    <span>个人描述:</span>
    <textarea cols="40" rows="5" name="desc" ></textarea>
    <br/>
    <br/>

    <input type="submit" value="免费注册">
    <input type="reset" value="重置">
    <input type="button" value="普通按钮"><br>


</form>
<a href="#top">返回顶部</a>
</body>
</html>

网页效果图

在这里插入图片描述

2. CSS(表现)

2.1概述

Cascading Style Sheet（层叠样式表）

2.2导入方式

1. 内联样式

在标签内部使用style属性，属性值是css属性键值对

<div style="color: red">Hello CSS~</div>

该方式只能作用在这一个标签上，如果其他的标签也想使用同样的样式，那就需要在其他标签上写上相同的样式。复用性比较差。

2. 内部样式

定义style标签，在标签内部定义css样式

<style type="text/css">
	div{
		color: red;
  }
</style>

这种方式可以做到在该页面中复用。

3. 外部样式

定义link标签，引入外部的css文件

编写一个css文件。名为：demo.css，内容如下:

div{
	color: red;
}

· 在html中引入 css 文件。
<link rel="stylesheet"  href="demo.css">

这种方式可以在多个页面复用。其他的页面想使用同样的样式，只需要使用 link 标签引入该css文件。

在这里插入图片描述

编写页面 02-导入方式.html

在这里插入图片描述

2.3. CSS选择器

1. 元素选择器

在这里插入图片描述

2. id选择器

在这里插入图片描述

3. 类选择器

在这里插入图片描述

4.代码演示

在这里插入图片描述

5. 优先级

id > 类 >元素(id 优先类优先元素)

3. JavaScript(行为)

3.1. 概述

JavaScript 是一门跨平台、面向对象的脚本语言。无需编译，由浏览器直接解析并执行
(JavaScript = ECMAScript + DOM + BOM)

3.2. 基本功能

1. 改变页面内容

在这里插入图片描述

2. 修改指定元素的属性值

在这里插入图片描述

3. 对表单进行校验

在这里插入图片描述

3.3. 引入方式

1. 内部脚本

将 JS代码定义在HTML页面中
在 HTML 中，JavaScript 代码必须位于标签之间
alert(数据)
- alert(数据) 是 JavaScript 的一个方法，作用是将参数数据以浏览器弹框的形式输出出来。
代码演示

在这里插入图片描述

效果图

在这里插入图片描述

注意

在 HTML 文档中可以在任意地方，放置任意数量的

2. 外部脚本

将 JS代码定义在外部 JS文件中，然后引入到 HTML页面中

步骤如下

第一步

在这里插入图片描述

第二步

在这里插入图片描述

注意
- 外部脚本不能包含 script 标签
  在js文件中直接写 js 代码即可，不要在 js文件中写 script 标签
```
  <script> 标签不能自闭合
  在页面中引入外部js文件时，不能写成 <script src="../js/demo.js" />。
```

3.4. 基础语法

1. 书写语法

区分大小写：与 Java 一样，变量名、函数名以及其他一切东西都是区分大小写的

每行结尾的分号可有可无
如果一行上写多个语句时，必须加分号用来区分多个语句。
注释
- 单行注释：// 注释内容
- 多行注释：/* 注释内容 */
注意：JavaScript 没有文档注释
大括号表示代码块例:
```
if (count == 3) { 
  alert(count); 
} 
```

2. 输出语句

window.alert() 写入警告框

代码演示

在这里插入图片描述

效果图

在这里插入图片描述

document.write() 写入 HTML 输出

代码演示

在这里插入图片描述

效果图

在这里插入图片描述

console.log() 写入浏览器控制台

代码演示

在这里插入图片描述

效果图(可以按F12、点击鼠标右键-检查或者进去浏览器菜单-工具-开发者工具都可以查看控制台信息)

在这里插入图片描述

查看浏览器控制台方式

方式一

在这里插入图片描述

方式二

在这里插入图片描述

3. 变量

格式 var 变量名 = 数据值;
JavaScript 是一门弱类型语言，变量可以存放不同类型的值
变量名命名规则和java语言基本相同
- 组成字符可以是任何字母、数字、下划线（_）或美元符号（$）
- 数字不能开头
- 建议使用驼峰命名

var关键字

在这里插入图片描述

注意

在这里插入图片描述

4. 数据类型

使用 typeof 运算符可以获取数据类型
alert(typeof age); 以弹框的形式将 age 变量的数据类型输出

原始类型

1, number

数字（整数、小数、NaN(Not a Number)）
注意: NaN是一个特殊的number类型的值

• 代码演示

在这里插入图片描述

2, string

字符、字符串，单双引皆可
注意: 在 js 中双引号和单引号都表示字符串类型的数据

• 代码演示

在这里插入图片描述

3, boolean

布尔。true，false

• 代码演示

在这里插入图片描述

boolean的取值规则
undefined
null
false
0(包含+0和-0)
NaN
空字符串(”)
以上六种结果为false,其它为true

4, null

对象为空

• 代码演示

在这里插入图片描述

5, undefined

当声明的变量未初始化时，该变量的默认值是 undefined

• 代码演示

引用类型

Object基本上除了基本数据类型都是引用数据类型，如Array、Function、Date、RegExp、Error和自定义封装类等Object类型(根类)。

5. 运算符

基本与Java语言相同

在这里插入图片描述

== 和 === 区别

==：
1. 判断类型是否一样，如果不一样，则进行类型转换
2. 再去比较其值
===：js 中的全等于
1. 判断类型是否一样，如果不一样，直接返回false
2. 再去比较其值

在这里插入图片描述

==类型转换

1, string 转换为 number 类型

在这里插入图片描述

2, boolean 转换为 number 类型：true 转为1，false转为0

在这里插入图片描述

3, 其他类型转为boolean

在这里插入图片描述

取值规则:
undefined
null
false
0(包含+0和-0)
NaN
空字符串(”)
以上六种结果为false,其它为true

6. 流程控制语句

JavaScript 中提供了和 Java 一样的流程控制语句

• if 语句

在这里插入图片描述

• switch 语句

在这里插入图片描述

• for 循环语句

在这里插入图片描述

• 增强for 循环语句

在这里插入图片描述

• while 循环语句

在这里插入图片描述

• dowhile 循环语句

在这里插入图片描述

7. 函数

函数（就是Java中的方法）是被设计为执行特定任务的代码块；JavaScript 函数通过 function 关键词进行定义。
- 定义方式

在这里插入图片描述

注意

在这里插入图片描述

函数调用
- 函数调用函数：
  函数名称(实际参数列表);
  let result = add(10,20);
注意

JS中，函数调用可以传递任意个数参数
- 例如 let result = add(1,2,3);
它是将数据 1 传递给了变量a，将数据 2 传递给了变量 b，而数据 3 没有变量接收。

在这里插入图片描述

3.5. 常用对象

1. Array对象

JavaScript Array对象用于定义数组

定义格式

在这里插入图片描述

元素访问
- 格式: arr[索引] = 值;
代码演示

在这里插入图片描述

特点
- JavaScript 中的数组相当于 Java 中集合。数组的长度是可以变化的，而 JavaScript 是弱类型，所以可以存储任意的类型的数据。
代码演示

在这里插入图片描述

属性
- 常用对象属性

在这里插入图片描述

1, length属性

该属性可以动态的获取数组的长度。有了这个length属性，我们就可以遍历数组了

2, for循环遍历数组

在这里插入图片描述

方法
- 常用方法

在这里插入图片描述

1, push 函数

作用: 给数组添加元素，也就是在数组的末尾添加元素

参数表示要添加的元素

在这里插入图片描述

2, splice 函数

作用: 删除元素

参数1：索引。表示从哪个索引位置删除
参数2：个数。表示删除几个元素

在这里插入图片描述

2. String对象

定义格式

在这里插入图片描述

属性
- String对象提供了很多属性 (这里只举例最常用的)
- 属性 length ，该属性是用于动态的获取字符串的长度
函数
- String对象提供了很多函数（方法） (这里只举例最常用的)
- charAt() ，返回在指定位置的字符
- indexOf() ，检索字符串
- trim() ，去掉字符串两端的空格
代码演示

在这里插入图片描述

应用场景

在这里插入图片描述

3. 自定义对象

定义格式

在这里插入图片描述

1, 调用属性的格式
对象名.属性名

2, 调用函数的格式
对象名.函数名()

代码演示

在这里插入图片描述

4. BOM对象

介绍
- BOM：Browser Object Model 浏览器对象模型。也就是 JavaScript 将浏览器的各个组成部分封装为对象。
组成
- Window：浏览器窗口对象
- Navigator：浏览器对象
- Screen：屏幕对象
- History：历史记录对象
- Location：地址栏对象
BOM 中的各个对象和浏览器的各个组成部分的对应关系图

在这里插入图片描述

Window对象
- window 对象是 JavaScript 对浏览器的窗口进行封装的对象。
- 获取window对象
- 该对象不需要创建直接使用 window，其中 window. 可以省略。

两种调用方式

在这里插入图片描述

window对象属性
- window 对象提供了用于获取其他 BOM 组成对象的属性
- 如果想使用 Location 对象的话，就可以使用 window 对象获取；写成 window.location，而 window. 可以省略，简化写成 location 来获取 Location 对象。

在这里插入图片描述

window对象函数
- 常用的函数
setTimeout(function,毫秒值) : 在一定的时间间隔后执行一个function，只执行一次
setInterval(function,毫秒值) :在一定的时间间隔后执行一个function，循环执行

在这里插入图片描述

confirm代码演示

在这里插入图片描述

定时器代码演示

在这里插入图片描述

案例演示

需求一，每隔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>

需求二，实现点击按钮进行开灯、关灯功能

在这里插入图片描述

需求二代码

<!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>

History对象
- History 对象是 JavaScript 对历史记录进行封装的对象。
获取History对象
- 使用 window.history获取，其中window. 可以省略
  window.history.方法();
  history.方法();
History对象函数

当点击向左的箭头，就跳转到前一个访问的页面，这就是 back() 函数的作用；
当我们向右的箭头，就跳转到下一个访问的页面，这就是 forward() 函数的作用。

在这里插入图片描述

Location对象
- Location 对象是 JavaScript 对地址栏封装的对象。可以通过操作该对象，跳转到任意页面。

在这里插入图片描述

获取Location对象
- 使用 window.location获取，其中window. 可以省略
  window.location.方法();
  location.方法();
Location对象属性
- Location对象提供了很多属性。经常用的只有一个属性 href
  href 设置或返回完整的 URL
代码演示

在这里插入图片描述

案例演示
- 需求：3秒跳转到百度首页

在这里插入图片描述

5. DOM对象

介绍
- DOM：Document Object Model 文档对象模型。也就是 JavaScript 将 HTML 文档的各个组成部分封装为对象。
- XML 文档中的标签需要自己写代码解析，而 HTML 文档是浏览器解析
分类

1, 核心DOM
(通用的标准)
- Document：整个文档对象
- Element：元素对象
- Attribute：属性对象
- Text：文本对象
- Comment：注释对象
左边是 HTML 文档内容，右边是 DOM 树

在这里插入图片描述

2, XML DOM

-针对 XML 文档的标准模型

3, HTML DOM

   -针对 HTML 文档的标准模型

该标准是在核心 DOM 基础上，对 HTML 中的每个标签都封装成了不同的对象

例如：标签在浏览器加载到内存中时会被封装成 Image 对象，同时该对象也是 Element 对象。

例如：标签在浏览器加载到内存中时会被封装成 Button 对象，同时该对象也是 Element 对象。

作用

JavaScript 通过 DOM，就能够对 HTML进行操作了
- 改变 HTML 元素的内容
- 改变 HTML 元素的样式（CSS）
- 对 HTML DOM 事件作出反应
- 添加和删除 HTML 元素
获取Element对象
- Document 对象中提供了以下获取 Element 元素对象的函数
- getElementById()
  根据id属性值获取，返回单个Element对象
- getElementsByTagName()
  根据标签名称获取，返回Element对象数组
- getElementsByName()
  根据name属性值获取，返回Element对象数组
- getElementsByClassName()
  根据class属性值获取，返回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">JavaScript</div> <br>

    <input type="checkbox" name="hobby"> 电影
    <input type="checkbox" name="hobby"> 旅游
    <input type="checkbox" name="hobby"> 游戏
    <br>
    <script>
		//在此处书写js代码
    </script>
</body>
</html>

需求&代码

在这里插入图片描述

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">JavaScript</div> <br>

    <input type="checkbox" name="hobby"> 电影
    <input type="checkbox" name="hobby"> 旅游
    <input type="checkbox" name="hobby"> 游戏
    <br>
    <script>
		//在此处书写js代码
    </script>
</body>
</html>

需求&代码

在这里插入图片描述

3.6. 事件监听

1. 概念

HTML 事件是发生在 HTML 元素上的“事情”。比如：页面上的按钮被点击、鼠标移动到元素之上、按下键盘按键等都是事件。
事件监听是JavaScript 可以在事件被侦测到时==执行一段逻辑代码。例如点击按钮实现替换图片，校验用户输入的内容并给出提示信息

2. 事件绑定

方式一

通过 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>

3. 常见事件

常用的事件属性列举

在这里插入图片描述

onfocus 获得焦点事件

在这里插入图片描述

onblur 失去焦点事件

在这里插入图片描述

onmouseout 鼠标移出事件
onmouseover 鼠标移入事件

在这里插入图片描述

onsubmit 表单提交事件
- 带有表单的页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form id="register" action="#" >
        <input type="text" name="username" />
        <input type="submit" value="提交">
    </form>
    <script>
        
    </script>
</body>
</html>

代码实现

在这里插入图片描述

3.7. 表单验证案例

1. 案例需求

登录页面

在这里插入图片描述

案例需求

在这里插入图片描述

2. 代码演示

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>登录</title>
    <style>
        *{
            margin:0;
            padding:0;
            box-sizing:border-box;
        }
        body {
            background-image: url("../file/bg.jpg");
            background-size: cover;
            font-family: "微软雅黑", sans-serif;
        }
        .login {
            position: absolute;
            top: 50%;
            left: 50%;
            margin: -150px 0 0 -150px;
            width:300px;
            height:300px;
        }
        .login h1 {
            color:#555555;
            text-shadow: 0px 10px 10px #CDC673;
            letter-spacing:2px;text-align:center;
            margin-bottom:20px;
        }
        input{
            padding:10px;
            width:100%;
            color:white;
            margin-bottom:10px;
            background-color:#555555;
            border: 1px solid black;
            border-radius:5px;
            letter-spacing:2px;
        }
        form button{
            width:100%;
            padding:10px;
            margin-bottom:10px;
            background-color:#CDC673;
            border:1px solid black;
            border-radius:5px;
            cursor:pointer;
        }
    </style>
</head>
<body class="login">
<h1>Login</h1>
<form action="" method="post" id="loginForm">
    <input id="username" type="text" name="username" placeholder="请求输入用户名">
    <span id="usernameMsg" style="color: red;display: none">用户名不符合规则</span>
    <input id="password" type="password" name="password" placeholder="请输入密码">
    <span id="passwordMsg" style="color: red;display: none">密码不符合规则</span>
    <button type="submit" id="login">登录</button>
    <button type="submit">注册</button>
</form>

<script>
    //在此处编写js代码实现功能
    //获取用户名的输入框

    //获取用户名输入框，并绑定失去焦点事件
    let usernameObj = document.getElementById("username");
    usernameObj.onblur = checkUserName;

    //获取密码输入框，并绑定失去焦点事件
    let passwordObj = document.getElementById("password");
    passwordObj.onblur = checkPassword;

    function checkUserName() {
        //定义正则表达式规则
        let usernameReg = /^\w{6,12}$/;
        //获取用户输入的用户名
        let username = usernameObj.value.trim();
        //校验用户名是否符合正则规则
        let flag = usernameReg.test(username);
        //判断是否符合规则，如果不符合给出提示
        if(!flag) {
            document.getElementById("usernameMsg").style.display = "block";
        } else {
            document.getElementById("usernameMsg").style.display = "none";
        }

        return flag;
    }

    function checkPassword() {
        //定义正则表达式规则
        let passwordReg = /^\d{6,12}$/;
        //获取用户输入的密码
        let password = passwordObj.value.trim();
        //校验密码是否符合正则规则
        let flag = passwordReg.test(password);
        //判断是否符合规则，如果不符合给出提示
        if(!flag) {
            document.getElementById("passwordMsg").style.display = "block";
        } else {
            document.getElementById("passwordMsg").style.display = "none";
        }

        return flag;
    }

    //给表单绑定表单提交事件
    document.getElementById("loginForm").onsubmit = function() {
        return checkUserName() && checkPassword();
    }

</script>
</body>
</html>

3.8. RegExp(正则表达式)

1.概述

RegExp 是正则对象。正则对象是判断指定字符串是否符合规则。在 js 中对正则表达式封装的对象就是正则对象。

2. 创建对象

直接创建方式：注意不要加引号
var reg = /正则表达式/;
创建 RegExp 对象
var reg = new RegExp(“正则表达式”);

3. 函数

test(str) ：判断指定字符串是否符合规则，返回 true或 false

4. 正则表达式

定义

•正则表达式定义了字符串组成的规则。也就是判断指定的字符串是否符合指定的规则，如果符合返回true，如果不符合返回false。
常用规则

在这里插入图片描述

代码演示

// 规则：单词字符，6~12
//1,创建正则对象，对正则表达式进行封装
var reg = /^\w{6,12}$/;

var str = "abcccc";
//2,判断 str 字符串是否符合 reg 封装的正则表达式的规则
var flag = reg.test(str);
alert(flag);

3.9. 编写js代码的基本流程

确定事件
确定元素
绑定事件
编写业务逻辑（可能包含dom操作）

先写到这，后期会持续更新

标签

#前端 #javascript #html #css

前端三剑客：HTML+CSS+JavaScript 终极实战指南阅读详情

前端三剑客 HTML+CSS+JavaScript 学习笔记

1. HTML(结构)

1.1. 概述

1.2. 基础标签

1. 标题标签

2. 横线便签

3. 字体标签

4. 换行标签

5. 段落标签

6. 加粗、斜体、下划线标签

7. 居中标签

8. 特殊字符

1.3. 图片、音频、视频标签

1. 定义图片

2. 定义音频

3. 定义视频

4. 尺寸单位

5. 资源路径

1.4. 超链接标签

1.5. 列表标签

1. 有序列表

2. 无序列表

1.6. 表格标签

1.7. 布局标签

1.8. 表单标签

1. from标签属性

2. 表单项标签

3. 返回顶部

2. CSS(表现)

2.1概述

2.2导入方式

1. 内联样式

2. 内部样式

3. 外部样式

2.3. CSS选择器

1. 元素选择器

2. id选择器

3. 类选择器

4.代码演示

5. 优先级

3. JavaScript(行为)

3.1. 概述

3.2. 基本功能

1. 改变页面内容

2. 修改指定元素的属性值

3. 对表单进行校验

3.3. 引入方式

1. 内部脚本

2. 外部脚本

3.4. 基础语法

1. 书写语法

2. 输出语句

3. 变量

4. 数据类型

5. 运算符

6. 流程控制语句

7. 函数

3.5. 常用对象

1. Array对象

2. String对象

3. 自定义对象

4. BOM对象

Window对象

History对象

Location对象

5. DOM对象

3.6. 事件监听

1. 概念

2. 事件绑定

3. 常见事件

3.7. 表单验证案例

1. 案例需求

2. 代码演示

3.8. RegExp(正则表达式)

1.概述

2. 创建对象

3. 函数

4. 正则表达式

3.9. 编写js代码的基本流程

相关推荐