前端基础
1.前端开发介绍
那在讲解web前端开发之前,我们先需要对web前端开发有一个整体的认知。主要明确一下三个问题:
1). 网页有哪些部分组成 ?
文字、图片、音频、视频、超链接、表格等等。
2). 我们看到的网页,背后的本质是什么 ?
程序员写的前端代码 (备注:在前后端分离的开发模式中,)
3). 前端的代码是如何转换成用户眼中的网页的 ?
通过浏览器转化(解析和渲染)成用户看到的网页
浏览器中对代码进行解析和渲染的部分,称为 浏览器内核
而市面上的浏览器非常多,比如:IE、火狐Firefox、苹果safari、欧朋、谷歌Chrome、QQ浏览器、360浏览器等等。 而且我们电脑上安装的浏览器可能都不止一个,有很多。
但是呢,需要大家注意的是,不同的浏览器,内核不同,对于相同的前端代码解析的效果也会存在差异。 那这就会造成一个问题,同一段前端程序,不同浏览器展示出来的效果是不一样的,这个用户体验就很差了。而我们想达到的效果则是,即使用户使用的是不同的浏览器,解析同一段前端代码,最终展示出来的效果都是相同的。
要想达成这样一个目标,我们就需要定义一个统一的标准,然后让各大浏览器厂商都参照这个标准来实现即可。 而这套标准呢,其实早都已经定义好了,那就是我们接下来,要介绍的web标准。
Web标准也称为网页标准,由一系列的标准组成,大部分由W3C( World Wide Web Consortium,万维网联盟)负责制定。由三个组成部分:
- **HTML: **HyperText Markup Language,超文本标记语言。
超文本:超越了文本的限制,比普通文本更强大。除了文字信息,还可以定义图片、音频、视频等内容。
标记语言:由标签构成的语言
- HTML标签都是预定义好的。例如:使用
标签展示标题,使用展示超链接,使用展示图片,
- HTML代码直接在浏览器中运行,HTML标签由浏览器解析。
- HTML标签都是预定义好的。例如:使用
- CSS:Cascading Style Sheet,层叠样式表,负责网页的表现(页面元素的外观、位置等页面样式,如:颜色、大小等)。
- JavaScript:负责网页的行为(交互效果)。
当然了,随着技术的发展,我们为了更加快速的开发,现在也出现了很多前端开发的高级技术。例如:vue、elementui、Axios等等。
2.HTML-CSS基础语法
- 示例代码
1 | <!-- 文档类型为html --> |
html基本结构
html有固定的基本结构
1 | <html> |
其中<html>是根标签,<head>和<body>是子标签,<head>中的字标签<title>是用来定义网页的标题的,里面定义的内容会显示在浏览器网页的标题位置。
而 <body> 中编写的内容,就网页中显示的核心内容。
图片
图片标签:
<img>
常见属性:
src
:指定图像的url (可以指定 绝对路径 , 也可以指定 相对路径)width
:图像的宽度 (像素 / 百分比 , 相对于父元素(示例中,父元素指的是body
)的百分比)height
:图像的高度 (像素 / 百分比 , 相对于父元素的百分比)- 备注: 一般width 和 height 我们只会指定一个,另外一个会自动的等比例缩放。
路径书写方式:
绝对路径:
绝对磁盘路径: C:\Users\Administrator\Desktop\HTML\img\news_logo.png
<img src="C:\Users\Administrator\Desktop\HTML\img\news_logo.png">
绝对网络路径: https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png
<img src="https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png">
相对路径:
- ./ : 当前目录 , 可以省略的
./img/news_logo.png
或img/news_logo.png
- ../: 上一级目录,不可省略
- ./ : 当前目录 , 可以省略的
<span>
标签:没有语义的布局标签,一行可以显示多个(组合行内元素),宽度和高度默认由内容展开。
CSS引入标题样式
名称 | 语法描述 | 示例 |
---|---|---|
行内样式 | 在标签内使用style属性,属性值是css属性键值对 | <h1 style="属性名:属性值;">中国新闻网</h1> |
内嵌样式 | 在head 中定义<style>标签,在标签内部定义css样式 |
<style> h1 {...} </style> |
外联样式 | 在head 中定义<link>标签,通过href属性引入外部css文件 |
<link rel="stylesheet" href="css/news.css"> |
对于上述3种引入方式,企业开发的使用情况如下:
- 内联样式会出现大量的代码冗余,不方便后期的维护,所以不常用。
- 内部样式,通过定义css选择器,让样式作用于当前页面的指定的标签上。
- 外部样式,html和css实现了完全的分离,企业开发常用方式。
颜色表示
表示方式 表示含义 取值 关键字 预定义的颜色名 red、green、blue… rgb表示法 红绿蓝三原色,每项取值范围:0-255 rgb(0,0,0)、rgb(255,255,255)、rgb(255,0,0) 十六进制表示法 #开头,将数字转换成十六进制表示 #000000、#ff0000、#cccccc,简写:#000、#ccc
CSS选择器
选择器是选取需设置样式的元素(标签),因为我们是做后台开发的,所以对于css选择器,我们只学习最基本的3种。
选择器通用语法如下:
1 | 选择器名 { |
优先级:id选择器>类选择器>标签选择器
1.元素(标签)选择器:
- 选择器的名字必须是标签的名字
- 作用:选择器中的样式会作用于所有同名的标签上
1 | 元素名称 { |
例子如下:
1 | h1{ |
2.id选择器:
- 选择器的名字前面需要加上#
- 作用:选择器中的样式会作用于指定id的标签上,而且有且只有一个标签
- (id不可重复)
1 | #id属性值 { |
例子如下:
1 | #did { |
3.类选择器:
- 选择器的名字前面需要加上 .
- 作用:选择器中的样式会作用于所有class的属性值和该名字一样的标签上
- (class可以重复)
1 | .class属性值 { |
例子如下:
1 | .cls{ |
超链接
标签: a标签
<a href="..." target="...">央视网</a>
属性:
href
: 指定资源访问的urltarget
: 指定在何处打开资源链接_self
: 默认值,在当前页面打开_blank
: 在空白页面打开
CSS属性避免默认变蓝加下划线
1
2
3
4
5
6
7<style>
a {
color: #000;
/* 指定文本装饰 */
text-decoration: none;
}
</style>
视频、音频
视频标签:
<video>
<!-- 视频 --> <video src="video/1.mp4" controls width="950px"></video>
1
2
3
4
5
6
7
8
9
10
11
12
13
- 属性:
- `src`: 规定视频的url
- `controls`: 显示播放控件
- `width`: 播放器的宽度
- `height`: 播放器的高度
- 音频标签: <audio>
- ```html
<!-- 音频 -->
<audio src="audio/1.mp3" controls></audio>属性:
src
: 规定音频的urlcontrols
: 显示播放控件
段落
换行标签:
<br>
- 注意: 在HTML页面中,我们在编辑器中通过回车实现的换行, 仅仅在文本编辑器中会看到换行效果, 浏览器是不会解析的, HTML中换行需要通过br标签
段落标签:
<p>
- 如: <p> 这是一个段落 </p>
首行缩进和对齐方式
1 | p { |
文本格式
效果 | 标签 | 标签(强调) |
---|---|---|
加粗 | b | strong |
倾斜 | i | em |
下划线 | u | ins |
删除线 | s | del |
前面的标签 b、i、u、s 就仅仅是实现加粗、倾斜、下划线、删除线的效果,是没有强调语义的。 而后面的strong、em、ins、del在实现加粗、倾斜、下划线、删除线的效果的同时,还带有强调语义。「在网页显示中」没有什么区别,在代码编写上有区别。
占位符
在HTML页面中无论输入了多少个空格, 最多只会显示一个。 可以使用空格占位符( ;
)来生成空格,如果需要多个空格,就使用多次占位符。
那在HTML中,除了空格占位符以外,还有一些其他的占位符,如下:
显示结果 | 描述 | 占位符 |
---|---|---|
|
空格 | |
< |
小于号 | < |
> |
大于号 | > |
& |
和号 | & |
" |
引号 | " |
' |
撇号 | ' |
|
TAB |   |
盒子模型
- 盒子:页面中所有的元素(标签),都可以看做是一个 盒子,由盒子将页面中的元素包含在一个矩形区域内,通过盒子的视角更方便的进行页面布局
- 盒子模型组成:内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区域(margin)
布局标签
布局标签:实际开发网页中,会大量频繁的使用 div 和 span 这两个没有语义的布局标签。
标签:
<div>
<span>
特点:
div
标签:一行只显示一个(独占一行)
宽度默认是父元素的宽度,高度默认由内容撑开
可以设置宽高(width、height)
span
标签:- 一行可以显示多个,用来组合行内元素
- 宽度和高度默认由内容撑开
- 不可以设置宽高(width、height)
div
CSS属性:width:设置宽度
height:设置高度
box-sizing: border-box; 指定width height为盒子的高宽,默认是content的高宽
border:设置边框的属性,如:1px solid #000 宽度 线条类型 颜色
background-color:背景色
padding:内边距 如:padding: 20px 20px 20px 20px; 分别表示 上 右 下 左 ; 边距都一样时可以简写: padding: 20px;
margin:外边距
如果只需要设置某一个方位的边框、内边距、外边距,可以在属性后面加上 -位置,如:padding-top、left、right、end
#center { width: 65%; /* 通过外边距设置居中 */ /* margin: 0% 17.5% 0% 17.5%; */ margin: 0 auto;/* 上下外边距为0,浏览器自动计算左右边距 */ }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
### 表格标签
- `<table>` : 用于定义整个表格, 可以包裹多个 <tr>, 常用属性如下:
- border:规定表格边框的宽度
- width:规定表格的宽度
- cellspacing:规定单元之间的空间
- `<tr>`:表格的行,可以包裹多个 `<td>`
- `<td>` :表格单元格(普通),可以包裹内容 , 如果是表头单元格,可以替换为`<th>` (加粗)
### 表单标签
- 表单标签: `<form>`
- 表单属性:
- action: 规定表单提交时,向何处发送表单数据,表单提交的URL,默认提交到当前页面。
- method: 规定用于发送表单数据的方式,常见为: GET、POST,默认为GET。
- GET:表单数据是拼接在url后面的, 如: xxxxxxxxxxx?username=Tom&age=12,url中能携带的表单数据大小是有限制的。
- POST: 表单数据是在请求体(消息体)中携带的,大小没有限制。
- 表单项标签:
- <input>:表单项 , 通过type属性控制输入形式。
| type取值 | **描述** |
| ------------------------ | ---------------------------------------- |
| text | 默认值,定义单行的输入字段 |
| password | 定义密码字段 |
| radio | 定义单选按钮 |
| checkbox | 定义复选框 |
| file | 定义文件上传按钮 |
| date/time/datetime-local | 定义日期/时间/日期时间 |
| number | 定义数字输入框 |
| email | 定义邮件输入框,必须要有@ |
| hidden | 定义隐藏域,看不到,但是会提交 |
| submit / reset / button | 定义**提交按钮** / 重置按钮 / 可点击按钮 |
- <select>: 定义下拉列表, <option> 定义列表项
- <textarea>: 文本域
```html
<!-- value: 表单项提交的值 -->
<form action="" method="post">
姓名: <input type="text" name="name"> <br><br>
密码: <input type="password" name="password"> <br><br>
性别: <input type="radio" name="gender" value="1"> 男
<label><input type="radio" name="gender" value="2"> 女 </label>
<!-- 加<label>后点那个文字也能选中元素 --><br><br>
爱好: <label><input type="checkbox" name="hobby" value="java"> java </label>
<label><input type="checkbox" name="hobby" value="game"> game </label>
<label><input type="checkbox" name="hobby" value="sing"> sing </label> <br><br>
图像: <input type="file" name="image"> <br><br>
生日: <input type="date" name="birthday"> <br><br>
时间: <input type="time" name="time"> <br><br>
日期时间: <input type="datetime-local" name="datetime"> <br><br>
邮箱: <input type="email" name="email"> <br><br>
年龄: <input type="number" name="age"> <br><br>
学历: <select name="degree">
<option value="">----------- 请选择 -----------</option>
<option value="1">大专</option>
<option value="2">本科</option>
<option value="3">硕士</option>
<option value="4">博士</option>
</select> <br><br>
描述: <textarea name="description" cols="30" rows="10"></textarea> <br><br>
<input type="hidden" name="id" value="1">
<!-- 表单常见按钮 -->
<input type="button" value="按钮"><!-- 将会配合事件监操作 -->
<input type="reset" value="重置">
<input type="submit" value="提交">
<br>
</form>
注意:表单中的所有表单项,要想能够正常的采集数据,在提交的时候能提交到服务端,表单项必须指定name属性。
3.JavaScript基础语法
引入方式
第一种方式:内部脚本,将JS代码定义在HTML页面中。
- JavaScript代码必须位于<script></script>标签之间。
- 在HTML文档中,可以在任意地方,放置任意数量的<script>。
- 一般会把脚本置于<body>元素的底部,可改善显示速度。
例子:
1 | <script> |
第二种方式:外部脚本将, JS代码定义在外部 JS文件中,然后引入到 HTML页面中。
- 外部JS文件中,只包含JS代码,不包含<script>标签。
- 引入外部js的<script>标签,必须是双标签。
例子:
1 | <script src="js/demo.js"></script> |
- 注意:
- demo.js中只有js代码,没有
<script>
标签。 <script>
标签不能自闭合,假如只写一半会失效。
- demo.js中只有js代码,没有
书写语法
掌握了js的引入方式,那么接下来我们需要学习js的书写了,首先需要掌握的是js的书写语法,语法规则如下:
区分大小写:与 Java 一样,变量名、函数名以及其他一切东西都是区分大小写的
每行结尾的分号可有可无(建议写上)
大括号表示代码块
注释:
单行注释:// 注释内容
多行注释:/* 注释内容 */
输出语句 | 描述 |
---|---|
window.alert() | 在浏览器中弹出警告框,点确定后才能运行后面的js代码 |
document.write() | 写入HTML,在浏览器中展示 |
console.log() | 写入浏览器控制台,console是浏览器控制台对象 |
变量
js中主要通过如下3个关键字来声明变量:
关键字 | 解释 |
---|---|
var | 早期ECMAScript5中用于变量声明的关键字, 定义出来的变量属于全局变量 且可以重复声明 |
let | ECMAScript6中新增的用于变量声明的关键字,只在代码块内生效,且不允许重复声明 |
const | 声明常量的,常量一旦声明,不能修改,属于局部变量 |
注意:
JavaScript 是一门弱类型语言,变量可以存放不同类型的值 。
变量名规则和java一模一样:
- 组成字符可以是任何字母、数字、下划线(_)或美元符号($)
- 数字不能开头
- 建议使用驼峰命名
- 组成字符可以是任何字母、数字、下划线(_)或美元符号($)
1 | <script> |
数据类型和运算符
虽然js是弱数据类型的语言,但是js中也存在数据类型,js中的数据类型分为 :原始类型 和 引用类型,具体有如下类型
数据类型 | 描述 |
---|---|
number | 数字(整数、小数、NaN(Not a Number)) |
string | 字符串,单双引皆可,和python完全一样 |
boolean | 布尔。true,false |
null | 对象为空 |
undefined | 当声明的变量未初始化时,该变量的默认值是 undefined |
1 | //原始数据类型 |
js中的运算规则绝大多数和java中一样,具体运算符如下:
运算规则 | 运算符 |
---|---|
算术运算符 | + , - , * , / , % , ++ , – |
赋值运算符 | = , += , -= , *= , /= , %= |
比较运算符 | > , < , >= , <= , != , == , ===(全等运算符) 注意:== 会进行类型转换,=== 不会进行类型转换 |
逻辑运算符 | && , || , ! |
三元运算符 | 条件表达式 ? true_value: false_value |
1 | var age = 20; |
类型转换:
可以通过parseInt()
函数来进行将其他类型转换成数值类型。(直接转化为字面意)
1 | // 类型转换 - 其他类型转为数字 |
0、null、undefined、”” 全部会被理解为false,除此之外全部理解成true。
1 | if(0) //false |
函数
大致有两种定义方法:
方法一
1 | function 函数名(参数1,参数2..){ |
注意:
形式参数不需要声明类型,并且JavaScript中不管什么类型都是let或者var去声明,加上也没有意义。
返回值也不需要声明类型,直接return即可
示例:
1 | function add(a, b){ |
方法二
1 | var functionName = function (参数1,参数2..){ |
示例:
1 | var add = function(a,b){ |
4.JavaScript对象
基本对象
Array
Array对象时用来定义数组的。常用语法格式有如下2种:
方式1:
1 | var 变量名 = new Array(元素列表); |
例如:
1 | var arr = new Array(1,2,3,4); //1,2,3,4 是存储在数组中的数据(元素) |
方式2:
1 | var 变量名 = [ 元素列表 ]; |
例如:
1 | var arr = [1,2,3,4]; //1,2,3,4 是存储在数组中的数据(元素) |
和java中一样,需要通过索引来获取数组中的值。
1 | arr[索引] = 值; |
注意:
- JavaScript中数组相当于java中的集合,数组的长度是可以变化的。而且JavaScript是弱数据类型的语言,所以数组中可以存储任意数据类型的值。
1 | var arr = [1,2,3,4]; |
属性和方法
属性 | 描述 |
---|---|
length | 设置或返回数组中元素的数量。 |
方法方法 | 描述 |
---|---|
forEach() | 遍历数组中的每个有值得元素,并调用一次传入的函数 |
push() | 将新元素添加到数组的末尾,并返回新的长度 |
splice() | 从数组中删除元素 |
forEach()函数
这个方法的参数,需要传递一个函数,而且这个函数接受一个参数,就是遍历时数组的值。
1
2
3
4//e是形参,接受的是数组遍历时的值
arr.forEach(function(e){
console.log(e);
})在ES6中,引入箭头函数的写法,语法类似java中lambda表达式
1
2
3arr.forEach((e) => {
console.log(e);
})push()函数
用于向数组的末尾添加元素的,其中函数的参数就是需要添加的元素。
1
2
3//向数组的末尾添加3个元素
arr.push(7,8,9);
console.log(arr);splice()函数
用来删除数组中的元素,函数中填入2个参数。
参数1:表示从哪个索引位置删除
参数2:表示删除元素的个数
1
2
3//从索引2的位置开始删,删除2个元素
arr.splice(2,2);
console.log(arr);
String
语法格式
String对象的创建方式有2种:
方式1:
1 | var 变量名 = new String("…") ; |
例如:
1 | var str = new String("Hello String"); |
方式2:
1 | var 变量名 = "…" ; |
例如:
1 | var str = 'Hello String'; |
属性和方法
属性 | 描述 |
---|---|
length | 字符串的长度。 |
方法 | 描述 |
---|---|
charAt() | 返回在指定位置的字符。 |
indexOf() | 检索字符串。 |
trim() | 去除字符串两边的空格 |
substring() | 提取字符串中两个指定的索引号之间的字符。 |
charAt()函数:
用于返回在指定索引位置的字符,函数的参数就是索引。
1
console.log(str.charAt(4)); //o
indexOf()函数
用于检索指定内容在字符串中的索引位置的,返回值是索引,参数是指定的内容。
1
console.log(str.indexOf("lo")); //3
trim()函数
用于去除字符串两边的空格的。
1
2var s = str.trim();
console.log(s.length);substring()函数
用于截取字符串的,函数有2个参数,左闭右开。
1
console.log(s.substring(0,5)); //"Hello"
自定义对象
在 JavaScript 中自定义对象特别简单,其语法格式如下:
1 | var 对象名 = { |
我们可以通过如下语法调用属性:
1 | 对象名.属性名 |
通过如下语法调用函数:
1 | 对象名.函数名() |
示例:
1 | //自定义对象 |
json对象
JSON对象:JavaScript Object Notation,JavaScript对象标记法。是通过JavaScript标记法书写的文本。其格式如下:
1 | { |
其中,key必须使用引号并且是双引号标记,value可以是任意数据类型。
用处:
前后端交互时,我们需要传输数据,但是java中的对象我们该怎么去描述呢?
我们可以使用如图所示的xml格式,可以清晰的描述java中需要传递给前端的java对象。
1 | <user> |
但是xml格式存在如下问题:
- 标签需要编写双份,占用带宽,浪费资源
- 解析繁琐
所以我们可以使用json来替代,直接传输{"name":"Tom", "age":18, "addr":["北京","上海","西安"]}
输入如下代码:
1 | var jsonstr = '{"name":"Tom", "age":18, "addr":["北京","上海","西安"]}'; |
因为上述是一个json字符串,不是json对象,我们需要借助如下函数来进行json字符串和json对象的转换。
1 | var obj = JSON.parse(jsonstr); |
我们也可以通过如下函数将json对象再次转换成json字符串。添加如下代码:
1 | alert(JSON.stringify(obj)); //{"name":"Tom", "age":18, "addr":["北京","上海","西安"]} |
BOM对象
BOM的全称是Browser Object Model,翻译过来是浏览器对象模型。也就是JavaScript将浏览器的各个组成部分封装成了对象。
我们要操作浏览器的部分功能,可以通过操作BOM对象的相关属性或者函数来完成。
例如:我们想要将浏览器的地址改为http://www.baidu.com
,我们就可以通过BOM中提供的location对象的href属性来完成,代码如下:location.href='http://www.baidu.com'
BOM中提供了如下5个对象:
对象名称 | 描述 |
---|---|
Window | 浏览器窗口对象 |
Navigator | 浏览器对象 |
Screen | 屏幕对象 |
History | 历史记录对象 |
Location | 地址栏对象 |
Window对象
window对象指的是浏览器窗口对象,是JavaScript的全部对象,所以对于window对象,我们可以直接使用,并且对于window对象的方法和属性,我们可以省略window.
例如:我们之前学习的alert()函数其实是属于window对象的,其完整的代码如下:
1 | window.alert('hello'); |
因为可以省略window. 所以可以简写成
1 | alert('hello') |
所以对于window对象的属性和方法,我们都是采用简写的方式。
window对象提供了获取其他BOM对象的属性:
属性 | 描述 |
---|---|
history | 用于获取history对象 |
location | 用于获取location对象 |
Navigator | 用于获取Navigator对象 |
Screen | 用于获取Screen对象 |
也就是说我们要使用location对象,只需要通过代码window.location
或者简写location
即可使用
window也提供了一些常用的函数
函数 | 描述 |
---|---|
alert() | 显示带有一段消息和一个确认按钮的警告框。 |
comfirm() | 显示带有一段消息以及确认按钮和取消按钮的对话框。 |
setInterval() | 按照指定的周期(以毫秒计)来调用函数或计算表达式。 |
setTimeout() | 在指定的毫秒数后调用函数或计算表达式。 |
confirm()函数:弹出确认框,并且提供用户2个按钮,分别是确认和取消。
这个函数有一个返回值,当用户点击确认时,返回true,点击取消时,返回false。我们根据返回值来决定是否执行后续操作。修改代码如下:再次运行,可以查看返回值true或者false
1
2var flag = confirm("您确认删除该记录吗?");
alert(flag);setInterval(fn,毫秒值):定时器,用于周期性的执行某个功能,并且是循环执行。该函数需要传递2个参数:
fn:函数,需要周期性执行的功能代码
毫秒值:间隔时间
1
2
3
4
5var i = 0;
setInterval(function(){
i++;
console.log("定时器执行了"+i+"次");
},2000);setTimeout(fn,毫秒值) :定时器,只会在一段时间后执行一次功能。参数和上述setInterval一致
1
2
3setTimeout(function(){
alert("JS");
},3000);浏览器打开,3s后弹框,关闭弹框,发现再也不会弹框了。
Location对象
location是指代浏览器的地址栏对象,对于这个对象,我们常用的是href属性,用于获取或者设置浏览器的地址信息,添加如下代码:
1 | //获取浏览器地址栏信息 |
DOM对象
Document Object Model 文档对象模型。也就是 JavaScript 将 HTML 文档的各个组成部分封装为对象。
封装的对象分为
- Document:整个文档对象
- Element:元素对象
- Attribute:属性对象
- Text:文本对象
- Comment:注释对象
JavaScript会将html文档转换为DOM树
1 | <html lang="en"> |
1 | graph TB |
主要作用如下:
- 改变 HTML 元素的内容
- 改变 HTML 元素的样式(CSS)
- 对 HTML DOM 事件作出反应
- 添加和删除 HTML 元素
总而达到动态改变页面效果目的
获取DOM对象
HTML中的Element对象可以通过Document对象获取,而Document对象是通过window对象获取的。
document对象提供的用于获取Element元素对象的api如下表所示:
函数 | 描述 |
---|---|
document.getElementById() | 根据id属性值获取,返回单个Element对象 |
document.getElementsByTagName() | 根据标签名称获取,返回Element对象数组 |
document.getElementsByName() | 根据name属性值获取,返回Element对象数组 |
document.getElementsByClassName() | 根据class属性值获取,返回Element对象数组 |
首先在准备如下页面代码:
1 |
|
document.getElementById(): 根据标签的id属性获取标签对象,id是唯一的,所以获取到是单个标签对象。
1
2
3
4<script>
var img = document.getElementById('h1');
alert(img); //[object HTMLlmageElement]
</script>document.getElementsByTagName() : 根据标签的名字获取标签对象,同名的标签有很多,所以返回值是数组。
1
2
3
4var divs = document.getElementsByTagName('div');
for (let i = 0; i < divs.length; i++) {
alert(divs[i]); //浏览器输出2次:[object HTMLDivElement]
}document.getElementsByName() :根据标签的name的属性值获取标签对象,name属性值可以重复,所以返回值是一个数组。
1
2
3
4var ins = document.getElementsByName('hobby');
for (let i = 0; i < ins.length; i++) {
alert(ins[i]); //浏览器输出3次:[object HTMLInputElement]
}document.getElementsByClassName() : 根据标签的class属性值获取标签对象,class属性值也可以重复,返回值是数组。
1
2
3
4var divs = document.getElementsByClassName('cls');
for (let i = 0; i < divs.length; i++) {
alert(divs[i]); //浏览器输出2次:[object HTMLDivElement]
}
操作属性
那么获取到标签了,我们通过查询文档资料JavaScript 和 HTML DOM 参考手册 (w3school.com.cn),得到需要操作的属性
例如:
1 | //1. 点亮灯泡 : src 属性值 |
5.JavaScript事件
事件绑定
JavaScript对于事件的绑定提供了2种方式:
方式1:通过html标签中的事件属性进行绑定
例如一个按钮,我们对于按钮可以绑定单机事件,可以借助标签的onclick属性,属性值指向一个函数。
1
<input type="button" id="btn1" value="事件绑定1" onclick="on()">
很明显没有on函数,所以我们需要创建该函数,代码如下:
1
2
3
4
5<script>
function on(){
alert("按钮1被点击了...");
}
</script>点击按钮时弹出弹窗:按钮1被点击了…
方式2:通过DOM中Element元素的事件属性进行绑定
依据我们学习过得DOM的知识点,我们知道html中的标签被加载成element对象,所以我们也可以通过element对象的属性来操作标签的属性。
此时我们再次添加一个按钮,代码如下:
1
<input type="button" id="btn2" value="事件绑定2">
我们可以先通过id属性获取按钮对象,然后操作对象的onclick属性来绑定事件,代码如下:
1
2
3document.getElementById('btn2').onclick = function(){
alert("按钮2被点击了...");
}浏览器刷新页面,点击第二个按钮弹出弹窗:按钮2被点击了…
需要注意的是:事件绑定的函数,只有在事件被触发时,函数才会被调用。
常见事件
上面案例中使用到了 onclick
事件属性,那都有哪些事件属性供我们使用呢?下面就给大家列举一些比较常用的事件属性
事件属性名 | 说明 |
---|---|
onclick | 鼠标单击事件 |
onblur | 元素失去焦点 |
onfocus | 元素获得焦点 |
onload | 某个页面或图像被完成加载 |
onsubmit | 当表单提交时触发该事件 |
onmouseover | 鼠标被移到某元素之上 |
onmouseout | 鼠标从某元素移开 |
onload
1
<body onload="load()">
1
2
3
4//onload : 页面/元素加载完成后触发
function load(){
console.log("页面加载完成...")
}页面加载完后控制台显示
onclick
1
<input id="b1" type="button" value="单击事件" onclick="fn1()">
1
2
3
4//onclick: 鼠标点击事件
function fn1(){
console.log("我被点击了...");
}onblur、onfocus
1
<input type="text" name="username" onblur="bfn()" onfocus="ffn()" onkeydown="kfn()">
1
2
3
4
5
6
7
8
9//onfocus: 元素获得焦点
function ffn(){
console.log("获得焦点...");
}
//onkeydown: 某个键盘的键被按下
function kfn(){
console.log("键盘被按下了...");
}当鼠标点击这个框或者使用TAB按键进入时触发onfocus
onkeydown
1
<input type="text" name="username" onblur="bfn()" onfocus="ffn()" onkeydown="kfn()">
1
2
3
4//onkeydown: 某个键盘的键被按下
function kfn(){
console.log("键盘被按下了...");
}onmouseover、onmouseout
1
<table width="800px" border="1" cellspacing="0" align="center" onmouseover="over()" onmouseout="out()">
1
2
3
4
5
6
7
8//onmouseover: 鼠标移动到元素之上
function over(){
console.log("鼠标移入了...")
}
//onmouseout: 鼠标移出某元素
function out(){
console.log("鼠标移出了...")
}onsubmit
1
<form action="" style="text-align: center;" onsubmit="subfn()">
1
2
3
4//onsubmit: 提交表单事件
function subfn(){
alert("表单被提交了...");
}
6.VUE
引入Vue
第一步:在html文件同级创建js目录,将vue.js文件拷贝到js目录
第二步:然后在<head>
编写<script>
标签来引入vue.js文件,代码如下:
1 | <script src="js/vue.js"></script> |
第三步:在js代码区域定义vue对象,代码如下:
1 | <script> |
在创建vue对象时,有几个常用的属性:
- el: 用来指定哪儿些标签受 Vue 管理。 该属性取值
#app
中的app
需要是受管理的标签的id属性值 - data: 用来定义数据模型
- methods: 用来定义函数。这个我们在后面就会用到
第四步:在html区域编写视图,其中{{}}是插值表达式,用来将vue对象中定义的model展示到页面上的
1 | <body> |
浏览器中打开发现只要修改input中的内容,旁边显示的文字也会跟着改变。
这是因为发生了双向数据绑定(Vue的特点)
Vue指令
HTML 标签上带有 v- 前缀的特殊属性,都是vue指令。
在vue中,通过大量的指令来实现数据绑定到视图的,所以接下来我们需要学习vue的常用指令,如下表所示:
指令 | 作用 |
---|---|
v-bind | 为HTML标签绑定属性值,如设置 href , css样式等 |
v-model | 在表单元素上创建双向数据绑定 |
v-on | 为HTML标签绑定事件 |
v-if | 条件性的渲染某元素,判定为true时渲染,否则不渲染 |
v-else | 同上 |
v-else-if | 同上 |
v-show | 根据条件展示某元素,区别在于切换的是display属性的值 |
v-for | 列表渲染,遍历容器的元素或者对象的属性 |
v-bind和v-model
先定义Vue对象
1 | new Vue({ |
v-bind: 为HTML标签绑定属性值,如设置 href , css样式等。当vue对象中的数据模型发生变化时,标签的属性值会随之发生变化
示例:
给<a>标签的href属性赋值,并且值应该来自于vue对象的数据模型中的url变量。所以编写如下代码:
1
2
3
4
5<div id="app">
<a v-bind:href="url">链接1</a>
</div>在上述的代码中,v-bind指令是可以省略的,但是
:
不能省略,所以超链接的代码也可以编写如下:1
<a :href="url">链接2</a>
v-model: 在表单元素上创建双向数据绑定。
什么是双向?
vue对象的data属性中的数据变化,视图展示会一起变化
视图数据发生变化,vue对象的data属性中的数据也会随着变化。
data属性中数据变化,我们知道可以通过赋值来改变,但是视图数据为什么会发生变化呢?只有表单项标签!所以双向绑定一定是使用在表单项标签上的。编写如下代码:
1
<input type="text" v-model="url">
打开浏览器后,发现我们只是改变了表单数据,之前超链接的绑定的数据值也发生了变化。
这是因为我们双向绑定,在视图发生变化时,同时vue的data中的数据模型也会随着变化。
v-on
v-on: 用来给html标签绑定事件的。需要注意的是如下2点:
v-on语法给标签的事件绑定的函数,必须是vue对象种声明的函数
v-on语法绑定事件时,事件名相比较js中的事件名,没有on
例如:在js中,事件绑定demo函数
1
<input onclick="demo()">
vue中,事件绑定demo函数
1
<input v-on:click="demo()">
在vue对象的methods属性中定义事件绑定时需要的handle()函数:
1 | <script> |
然后我们给第一个按钮,通过v-on指令绑定单击事件:
1 | <input type="button" value="点我一下" v-on:click="handle()"> |
同样,v-on也存在简写方式,即v-on: 可以替换成@:
1 | <input type="button" value="点我一下" @click="handle()"> |
同理:@blur
,@focus
等
v-if和v-show
指令 | 描述 |
---|---|
v-if、if-else、else | 条件性的渲染某元素,判定为true时渲染,否则不渲染 |
v-show | 根据条件展示某元素,区别在于切换的是display属性的值 |
需求是当我们改变年龄时,需要动态判断年龄的值,呈现对应的年龄的文字描述。
年轻人,我们需要使用条件判断age<=35
,中年人我们需要使用条件判断age>35 && age<60
,其他情况是老年人。
通过v-if指令编写如下代码:
1 | <body> |
打开浏览器后,通过改变输入框中的数字,后面就会显示判定结果。
v-show和v-if的作用效果是一样的,只是原理不一样:
1 | 年龄<input type="text" v-model="age">经判定,为: |
在浏览器中查看,发现:
v-if指令,不满足条件的标签代码直接没了,而v-show指令中,不满足条件的代码依然存在,只是添加了css样式来控制标签不去显示。
1 | <body> |
v-for
v-for: 从名字我们就能看出,这个指令是用来遍历的。其语法格式如下:
1 | <标签 v-for="变量名 in 集合模型数据"> |
需要循环那个标签,v-for 指令就写在那个标签上。
有时我们遍历时需要使用索引(索引变量是从0开始),那么v-for指令遍历的语法格式如下:
1 | <标签 v-for="(变量名,索引变量) in 集合模型数据"> |
接下来,我们再VS Code中创建名为16. Vue-指令-v-for.html的文件编写代码演示,提前准备如下代码:
1 | <body> |
浏览器打开,呈现如下效果:
北京
上海
西安
成都
深圳
1 : 北京
2 : 上海
3 : 西安
4 : 成都
5 : 深圳
生命周期
vue的生命周期:指的是vue对象从创建到销毁的过程。vue的生命周期包含8个阶段:每触发一个生命周期事件,会自动执行一个生命周期方法,这些生命周期方法也被称为钩子方法。其完整的生命周期如下图所示:
状态 | 阶段周期 |
---|---|
beforeCreate | 创建前 |
created | 创建后 |
beforeMount | 挂载前 |
mounted | 挂载完成 |
beforeUpdate | 更新前 |
updated | 更新后 |
beforeDestroy | 销毁前 |
destroyed | 销毁后 |
下图是 Vue 官网提供的从创建 Vue 到效果 Vue 对象的整个过程及各个阶段对应的钩子函数:
其中我们需要重点关注的是**mounted,**其他的我们了解即可。
mounted:挂载完成,Vue初始化成功,HTML页面渲染成功。我们一般用于页面初始化自动的ajax(一种异步交互技术)请求后台数据
编写mounted声明周期的钩子函数,与methods同级,代码如下:
1 | <script> |
浏览器打开,运行结果如下:我们发现,自动打印了这句话,因为页面加载完成,vue对象创建并且完成了挂载,此时自动触发mounted所绑定的钩子函数,然后自动执行,弹框。(一般会在这个时候发送异步请求到服务端请求数据)
7.Ajax
Ajax:Asynchronous JavaScript And XML,异步的JavaScript和XML。其作用有如下2点:
- 与服务器进行数据交换:通过Ajax可以给服务器发送请求,并获取服务器响应的数据。
- 异步交互:可以在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页的技术,如:搜索联想、用户名是否可用的校验等等。
Ajax作用
我们详细的解释一下Ajax技术的2个作用
与服务器进行数据交互
前端可以通过Ajax技术,向后台服务器发起请求,后台服务器接受到前端的请求,从数据库中获取前端需要的资源,然后响应给前端。
前端再通过vue技术,可以将数据展示到页面上,这样用户就能看到完整的页面了。
异步交互:可以在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页的技术。
当我们再百度搜索java时,下面的联想数据是通过Ajax请求从后台服务器得到的,在整个过程中,我们的Ajax请求不会导致整个百度页面的重新加载,并且只针对搜索栏这局部模块的数据进行了数据的更新,不会对整个页面的其他地方进行数据的更新,这样就大大提升了页面的加载速度,用户体验高。
异步非阻塞式web开发:
异步非阻塞式Web开发是一种网络应用程序的编程模型,它允许在等待某些任务完成时,继续执行其他任务。
异步非阻塞式Web开发中,一个任务在开始执行后,如果需要等待一个操作完成(例如:读写文件、网络通信等),程序会继续执行其他任务,而不需要等待这个操作完成。当这个操作完成后,程序会通知相关的任务,然后任务再继续执行后续的操作。
原生Ajax
1、准备服务器端数据地址
http://yapi.smart-xwork.cn/mock/169327/emp/list(返回的是JSON格式内容)
2、创建XMLHttpRequest 对象:用于和服务器交换数据,也是原生Ajax请求的核心对象,提供了各种方法。
3、向服务器发送请求,调用对象的open()方法设置请求的参数信息,例如请求地址,请求方式。然后调用send()方法向服务器发送请求。
4、我们通过绑定事件的方式,来获取服务器响应的数据。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>原生Ajax</title>
</head>
<body>
<input type="button" value="获取数据" onclick="getData()">
<div id="div1"></div>
</body>
<script>
function getData(){
//1. 创建XMLHttpRequest
var xmlHttpRequest = new XMLHttpRequest();
//2. 发送异步请求
xmlHttpRequest.open('GET','http://yapi.smart-xwork.cn/mock/169327/emp/list');
xmlHttpRequest.send();//发送请求
//3. 获取服务响应数据
xmlHttpRequest.onreadystatechange = function(){
//此处判断 4 表示浏览器已经完全接受到Ajax请求得到的响应, 200表示这是一个正确的Http请求,没有错误
if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
document.getElementById('div1').innerHTML = xmlHttpRequest.responseText;
}
}
}
</script>
</html>
Axios
上述原生的Ajax请求的代码编写起来还是比较繁琐的,所以通常使用更加简单的发送Ajax请求的技术Axios 。Axios是对原生的AJAX进行封装,简化书写。
基本使用
Axios的使用比较简单,主要分为2步:
引入Axios文件
1
<script src="js/axios-0.18.0.js"></script>
使用Axios发送请求,并获取响应结果,官方提供的api很多,此处给出2种,如下
发送 get 请求
1
2
3
4
5
6axios({
method:"get",
url:"http://localhost:8080/ajax-demo1/aJAXDemo1?username=zhangsan"
}).then(function (resp){
alert(resp.data);
})或者可以这么写
1
2
3
4
5
6axios({
method:"get",
url:"http://localhost:8080/ajax-demo1/aJAXDemo1?username=zhangsan"
}).then(result => {
console.log(result.data);
})发送 post 请求
1
2
3
4
5
6
7axios({
method:"post",
url:"http://localhost:8080/ajax-demo1/aJAXDemo1",
data:"username=zhangsan"
}).then(function (resp){
alert(resp.data);
});
axios()是用来发送异步请求的,小括号中使用 js的JSON对象传递请求相关的参数:
- method属性:用来设置请求方式的。取值为 get 或者 post。
- url属性:用来书写请求的资源路径。如果是 get 请求,需要将请求参数拼接到路径的后面,格式为: url?参数名=参数值&参数名2=参数值2。
- data属性:作为请求体被发送的数据。也就是说如果是 post 请求的话,数据需要作为 data 属性的值。
then() 需要传递一个匿名函数。我们将 then()中传递的匿名函数称为 回调函数,意思是该匿名函数在发送请求时不会被调用,而是在成功响应后调用的函数。而该回调函数中的 resp 参数是对响应的数据进行封装的对象,通过 resp.data 可以获取到响应的数据。
在
axios
的上下文中,.then(result => { ... })
中的result
对象通常包含以下属性:data
: 实际的响应数据,我们需要的JSON内容就在其中。status
: HTTP 状态码。statusText
: HTTP 状态文本。headers
: 响应头信息。config
: 请求的配置对象。
请求方法的别名
Axios还针对不同的请求,提供了别名方式的api,具体如下(方括号中是可选参数):
方法 | 描述 |
---|---|
axios.get(url [, config]) |
发送get请求 |
axios.delete(url [, config]) |
发送delete请求 |
axios.post(url [, data[, config]]) |
发送post请求 |
axios.put(url [, data[, config]]) |
发送put请求 |
我们目前只关注get和post请求,所以在上述的入门案例中,我们可以将get请求代码改写成如下:
1 | axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => { |
post请求改写成如下:
1 | axios.post("http://yapi.smart-xwork.cn/mock/169327/emp/deleteById","id=1").then(result => { |
数据动态加载
使用Vue中的钩子 函数mounted (),可以自动加载并将json赋值
其中请求服务端返回的数据位JSON格式,其中的data提供了一个数组,是我们需要的
1 | <body> |
8.前端工程化
略
- 本文作者: NICK
- 本文链接: https://nicccce.github.io/TechNotes/Front-End/
- 版权声明: 本博客所有文章除特别声明外,均采用 MIT 许可协议。转载请注明出处!