目录
计算机通识
进制转化
我之前在复习数字逻辑电路时写过进制转化,这里不写了,直接给链接,有例题
数字电子技术复习第一章_yuwoxinanA3的博客-CSDN博客 看第1.2数制与编码
位运算
这个也直接给链接
储存单位换算
宽带换算
任务里讲的确实草率,这里引用简单易懂的说法
日常生活我们都认为为什么装了百兆宽带,而下载速度只有几十MB/s呢?看看下面你就懂了
mbps是Million bits per second的缩写,是一种传输速率单位,指每秒传输的位(比特)数量
通常我们说的宽带的100兆还是千兆啊,说的就是网络的带宽,是一Mbps为单位的
1Mbps=0.125MB/s(等号左边是带宽,等号右边是网速)
Mbps缩写中严格限定M为大写,b、p、s为小写
换算实质:
4Mbps=每秒钟传输4M比特,要注意单位,4M比特不是4M字节
100Mbps=100/8=12.5MB/s
4Mbps=4/8(MB/s)=0.5MB/s
数据校验
奇偶校验
CRC循环冗余(不一定考)
B站某博主的10分钟视频
字符编码
ASCII码
多媒体格式
码率计算公式
码率(kbps)= 文件大小(KB)*8/时间(秒)
TCP/IP协议簇
子网划分
等长子网划分(根据子网数划分)
题目:请将IP网络183.164.128.0/17划分为等长的8个子网,并分别给出每个子网的子网地址、广播地址、子网掩码、IP 地址总数、可分配IP地址数和可分配IP地址范围。
不等长子网划分(根据每个子网内的主句数分别划分子网段)
题目:某ISP拥有一个网络地址块201.123.16.0/21, 现在该ISP要为4个组织分配IP地址,其需要的地址数量分别为985、 486、 246以及211, 请给出一个合理的分配方案,并说明各组织所分配子网的子网地址、广播地址、子网掩码、IP 地址总数、可分配IP地址数和可分配IP地址范围。
IPV4
地址分类
私有IP地址
IP报文格式
IPV6
表示方法
地址类型
OSI7层模型
各层作用
各层协议
域名规则
网络拓扑
网络命令
ping命令
ping命令:这是在开发中使用频率极高的一个命令,主要用于确定网络的连通性,例如很多刚刚安装操作系统的计算机,第一件事就是先看看是否能联网,所以往往执行的第一条命令就是ping命令。它的格式是:ping 主机名/域名/IP地址。
ipconfig/ifconfig命令
ipconfig/ifconfig命令:当使用不带任何参数选项ipconfig/ifconfig命令时,显示每个已经配置了的接口的IP地址、子网掩码和缺省网关值。其中在Windows中使用的是ipconfig,而在Mac或Linux系统中,使用的是ifconfig。
netstat命令
netstat命令:能够显示活动的TCP连接、计算机侦听的端口、以太网统计信息、IP路由表、IPv4以及IPv6统计信息,通过它可以了解网络当前的状态。
常用网络端口
端口范围:
TCP与UDP段结构中端口范围在0~65535之间。
常用端口范围:
端口号小于256的是常用端口,服务器一般都是通过常用端口号来识别的。
TCP/IP使用的端口号:
任何TCP/IP实现所提供的服务都用0~1023之间的端口号。
其他:
1024~49151端口号是被注册的端口号,可以由用户自由使用,也是被IANA指定为特殊服务使用,从49152~65535是动态或私有端口号(以上并不是强制的)
HTTP报文识别
请求报文
请求报文是由请求方法,请求URI,协议版本,可选的首部字段以及内容实体构成。
例
GET /index.html HTTP/1.1
Host: www.cnblogs.com/ACFLOOD
Content-Length: 16
本例中,GET表示请求方法,/index.jsp是请求URI,HTTP/1.1是协议版本,其余的是首部字段。
响应报文
响应报文基本上由协议版本,状态码(返回请求成功或失败情况),对状态码的解释短语,可选的首部字段以及内容实体构成。
例
HTTP/1.1 200 OK
Date: Mon, 10 May 2016 07:50:15 GMT
Content-Length: 300
Content-Type: text/html
本例中,HTTP/1.1表示协议版本,200表示状态码,OK是对状态码的描述,Date是响应日期,与Content-Length和Content-Type一样,都属于首部字段。
HTTP是一种无状态(stateless) 协议
HTTP是一种无状态(stateless) 协议,HTTP协议本身不会对发送过的请求和相应的通信状态进行持久化处理。这样做的目的是为了保持HTTP协议的简单性,从而能够快速处理大量的事务,提高效率。
然而,在许多应用场景中,我们需要保持用户登录的状态或记录用户购物车中的商品。由于HTTP是无状态协议,所以必须引入一些技术来记录管理状态,例如Cookie。
session与cookie的区别
(1)Cookie以文本文件格式存储在浏览器中,而session存储在服务端它存储了限制数据量。它只允许4kb它没有在cookie中保存多个变量。
(2)cookie的存储限制了数据量,只允许4KB,而session是无限量的
(3)我们可以轻松访问cookie值但是我们无法轻松访问会话值,因此它更安全
(4)设置cookie时间可以使cookie过期。但是使用session-destory(),我们将会销毁会话。
HTTP请求方法
-
GET:获取资源。通过URI请求访问已被识别的资源,经过服务器解析后返回相应内容。
-
POST:传输实体。例如登录注册时表单的提交。
-
PUT:传输文件。类似于FTP协议中的文件上传,PUT方法要求在请求报文的主体包含文件,保存到指定URI的位置。由于PUT方法没有验证机制,存在安全性问题,所以必须配合采用安全标准(如REST)。
-
HEAD:获得报文首部。不返回报文主体,仅返回首部。
-
DELETE:删除文件。DELELTE方法请求删除服务器上的资源,同样存在安全性问题。所以必须有验证机制与之配合。
-
OPTIONS:询问服务器支持哪些方法。示例:
请求报文
OPTIONS * HTTP/1.1 Host: www.cnblogs.com
响应报文
HTTP/1.1 200 OK Allow: GET, POST, HEAD, OPTIONS
本例中,客户端通过OPTIONS *询问服务器支持的方法。响应报文最后返回了支持的 方法类型。
-
TRACE:追踪路径。发送请求时,通过在Max-Forwards首部字段中填入数值,每经过一个服务器数值减一,当减为零之后停止传输,最后收到请求的服务器发出响应。
-
CONNECT:通过与代理服务器建立隧道,使用隧道协议加密之后,与服务器进行TCP通信。常用的隧道协议有SSL(Secure Socket Layer)以及TLS(Transport Layer Security)。
-
常见http状态码
状态码第一位数字决定了不同的响应状态,有如下:
- 1 表示消息
- 2 表示成功
- 3 表示重定向
- 4 表示请求错误
- 5 表示服务器错误
200 OK:客户端请求成功。
400 Bad Request:客户端请求有语法错误,不能被服务器所理解。
401 Unauthorized:请求未经授权,这个状态代码必须和WWW-Authenticate报头域一起使用。
403 Forbidden:服务器收到请求,但是拒绝提供服务。
404 Not Found:请求资源不存在,举个例子:输入了错误的URL。
500 Internal Server Error:服务器发生不可预期的错误。
503 Server Unavailable:服务器当前不能处理客户端的请求,一段时间后可能恢复正常,举个例子:HTTP/1.1 200 OK(CRLF)。
HTTPS基本概念
HTTPS(全称是Hyper Text Transfer Protocol over SecureSocket Layer)是身披SSL/TLS外壳的HTTP。它在HTTP之上利用SSL/TLS建立安全的信道,加密数据传输。它被广泛用于互联网上安全敏感的通讯,例如电商、支付等应用。
加密算法
对称加密:加密与解密用同一套密钥,如DES、3DES和AES等
非对称加密:加密和解密所使用的密钥不同,如RSA、DSA等
不可逆加密:明文加密后无法通过解密来复原,如MD5、SHA等
SSL
TLS
全称Transport Layer Security,传输层协议,它是在SSL3.0基础上设计的,相当于SSL的后续版本,它的目标是让SSL更安全。
证书与证书链
大学读完之后有毕业证书,并且这个证书可以在学信网查询
专业上有注会、CCIE、律师证等,可以在国家职业认证机构或委托机构的网站上查到
公司注册之后,营业执照信息也可以在天眼查或企查查上找到
证书的作用
-
过往经历的证明
-
第三方信用担保
-
唯一合法性检验
工作流程
HTTPS 默认工作在 TCP 协议443端口,它的工作流程一般如以下方式:
- 1、TCP 三次同步握手
- 2、客户端验证服务器数字证书
- 3、DH 算法协商对称加密算法的密钥、hash 算法的密钥
- 4、SSL 安全加密隧道协商完成
- 5、网页以加密的方式传输,用协商的对称加密算法和密钥加密,保证数据机密性;用协商的hash算法进行数据完整性保护,保证数据不被篡改。
HTTP 与 HTTPS 区别
- HTTP 明文传输,数据都是未加密的,安全性较差,HTTPS(SSL+HTTP) 数据传输过程是加密的,安全性较好。
- 使用 HTTPS 协议需要到 CA(Certificate Authority,数字证书认证机构) 申请证书,一般免费证书较少,因而需要一定费用。证书颁发机构如:Symantec、Comodo、GoDaddy 和 GlobalSign 等。
- HTTP 页面响应速度比 HTTPS 快,主要是因为 HTTP 使用 TCP 三次握手建立连接,客户端和服务器需要交换 3 个包,而 HTTPS除了 TCP 的三个包,还要加上 ssl 握手需要的 9 个包,所以一共是 12 个包。
- http 和 https 使用的是完全不同的连接方式,用的端口也不一样,前者是 80,后者是 443。
- HTTPS 其实就是建构在 SSL/TLS 之上的 HTTP 协议,所以,要比较 HTTPS 比 HTTP 要更耗费服务器资源。
数据结构
链表
链表(Linked List):它和数组一样,也是一组数据的集合,但和数组不一样的是,它并不是一组连续的数据集合,而是通过指针连接在一起的。
数组
数组(Array):它是将具有相同类型的若干数据组织在一起的集合,这是一种最基本而且也是一种最经常使用的数据结构。
堆
堆(Heap):它是一种特殊的树型结构,它的特点是根结点的值是所有节点中最大或者最小的,而且根结点的子节点也是一个堆结构。
栈
栈(Stack):一种特殊的线性表,只能在一个表的固定端进行数据节点的插入和删除操作,栈正是一种按照后进先出(LIFO)的原则来存储数据的数据结构。
队列
队列(Queue):和栈类似,但不同的是,它是在一端执行入队操作,而在另一端进行出队操作。
树
树(Tree):这是一种典型的非线性结构,之所以叫做“树”,是因为它的结构看起来就像一颗倒过来的树,它只有一个根结点,但可以有多个后继节点。
图
图(Graph):这也是一种非线性数据结构,在图结构中,数据节点称为顶点,顶点之间的连线称为边。
散列表(Hash):
这种数据结构来源于散列函数,它的思想是如果存在x,那么就必然有一个唯一的存储位置f(x)可以找到x,这样通过数学函数就直接计算出x的存储位置而不用在进行比较、查找以后才知道。
算法常识
查找
顺序查找:它的基本思想就是从第一个元素开始,按顺序遍历待查找序列,直到找出给定目标或者查找失败
二分查找:又叫折半查找,它要求列表必须是有序的。它的原理是每次都把待比较元素A和列表中间的元素B进行比较,如果A小于B,那么A再和位于B前半部分的元素进行比较,并且再次选择中间元素进行比较,直到比较完所有元素为止。
排序
冒泡排序:它重复地走访过要排序的数列,一次比较两个元素,如果它们的顺序错误就把它们交换过来。走访数列的工作是重复地进行直到没有再需要交换,也就是说该数列已经排序完成。这个算法的名字由来是因为越小(大)的元素会经由交换慢慢“浮”到数列的顶端。
选择排序:是一种简单直观的排序算法。它的工作原理是:首先在未排序序列中找到最小(大)元素,存放到排序序列的起始位置,然后,再从剩余未排序元素中继续寻找最小(大)元素,然后放到已排序序列的末尾。以此类推,直到所有元素均排序完毕。
WEB基础
HTML元素
文档元数据
html文件组成
文档类型声明 <!DOCTYPE HTML>
html元素 即根元素 此处表示文档HTML部分的开始
head元素 此处包含着文档的元数据,元数据向浏览器提供了有关文档内容、标记的信息、js脚本和对外部资源的引用(css样式表)
head
标签中一般可以包含以下标签:<title>、<style>、<script>、<link>、<meta>、<base>
<title></title>
用于定义文档的标题
该标题会出现在浏览器窗口的标题栏或状态栏上
把该页面加入收藏夹或书签列表时,该标题为页面链接的默认名称
例:
<title>CSDN能力认证中心</title>
<link />
用于定义文档与外部资源的关系,最常用于链接样式表,也常用于给标题添加小图标
<link />
是空元素,仅包含属性,只能存在于head
部分
<style></style>
用于给文档引入
CSS
样式信息,将样式表包含在style
开始与结束标签之间
<script></script>
用于给页面添加脚本
可以直接在
script
开始和结束标签之间包含JavaScript
脚本)
也可以通过script
的src
属性链接外部脚本文件
<meta />
提供有关页面的元信息,比如针对搜索引擎和更新频度的描述和关键词
name
和content
属性通常一起使用,以键值对的方式给文档提供元数据,其中name
的属性值作为元数据的名称,content
作为元数据的值
keywords
和description
这两个名称使用频率最高,是搜索引擎优化的主要方式之一
charset
属性用于指定文档的字符编码。常用值为UTF-8
、ISO-8859-1
等
http-equiv
属性可用于模拟一个HTTP响应头,与content
属性搭配使用,常用属性值如下:
-
content-type
:规定文档的字符编码,等同于charset
属性设置字符编码 -
default-style
:设置默认CSS样式表组的名称 -
refresh
:设置文档自动刷新的时间间隔,content只包含一个正整数,则为重新载入页面的时间间隔(秒),content包含一个正整数和【url=XXX】格式的字符串时,该正整数则是重定向到指定链接的时间间隔(秒)
<base />
用于为页面中的所有相对链接设置默认
URL
或默认target
属性
body元素 此元素里面包含着文档内容
内容区域标签
语义化标签
表单标签
HTML表单用于收集用户输入。表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等。
1、<form></form>
标签
用于创建HTML表单,常用属性如下:
-
action:规定表单提时,表单数据提交的URL
-
method:规定用于发送form-data的HTTP方法,常用属性值为get、post
2、<input />
元素
<input />
元素是最重要的表单元素,根据input元素的不同type类型,表现形式也是不一样的
3、<label></label>
标签
用于为
input
标签提供标注
点击
label
文本,浏览器会自动将焦点转到和标签相关的表单控件上
label
标签的for
属性值应当与相关元素的id
属性值相同
4、<select></select>
标签
用于创建下拉列表
select
元素中的<option></option>
标签用于定义列表的可选项
<select>
<option value=" trainee">C1见习工程师能力认证</option>
<option value="web ">C4前端基础能力认证</option>
<option value=" java">C4Java基础能力认证</option>
<option value=" python">C4Python基础能力认证</option>
</select>
5、<button></button>
元素
用于定义普通按钮
转义字符
文本内容标签
段落标签 <p>
段落内的换行符将会忽略,段落内的多个空格将被一个空格所代替
换行元素<br />
插入空行来进行换行
预排版标签 <pre>
保留空白字符,能够以正常排版方式显示空格与段落,字体是等宽字体
分级标题<h1><h2><h3><h4><h5><h6>
标题格式化显示,值越大,字越小,<h4>是默认的文本字体大小
文本块引用<blockquto>
字体样式与大小
斜体<i></i>
粗体<b></b>
强调斜体<em></em>
强调加粗<strong></strong>
字体大一号<big></big>
字体小一号<small></small>
上标标签<sup></sup>
下标标签<sub></sub>
水平线<hr/>
绘制一条水平线分开上下文, 默认3像素
内联元素标签
不占行的,依附于块级元素存在,直接修改高度,宽度一般是无效的
a,span,label,input,select,textarea,img,strong,em,code,br
图片与多媒体标签
图片:img
src 属性:图片路径;
alt 属性:图片无法显示时使用的替代文字;
title:鼠标悬停时显示的文字 ;
视频:video元素
src 属性:视频路径 ;
controls 属性:【布尔属性】指定后,会显示播放控件;
autoplay :【布尔属性】指定后,视频在页面显示后立即进入播放状态;
muted :静音,某些浏览器强制提升用户体验自动播放时需设置该属性;
loop :【布尔属性】指定后,视频将循环播放;
height:设置视频播放器的高度;
width:设置视频播放器的宽度;
poster:规定视频下载时显示的图像,或者是在当用户点击播放按钮前显示的图像。
Preload:如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用“autoplay”则忽略该属性。
音频:audio元素
src 属性:音频路径;
controls 属性:【布尔属性】指定后,会显示播放控件;
autoplay :【布尔属性】指定后,视频在页面显示后立即进入播放状态;
muted :静音 某些新浏览器强制提升用户体验 自动播放时需设置该属性;
loop :【布尔属性】指定后,视频将循环播放;
figure元素
用作文档中插图的图像
<figure>
<p>黄浦江上的的卢浦大桥</p>
<img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>
表格内容标签
<table> 标签定义 HTML 表格。
简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。
tr 元素定义表格行,th 元素定义表头,td 元素定义表格单元
CSS
引入方式
行内样式
直接使用HTML元素的
style
属性引入CSS样式
例:
<p style="font-size: 16px; color: #333;">软件工程师能力认证</p>
内嵌样式
使用
<style></style>
标签引入样式
<style>
p {
color: #333;
font-size: 16px;
}
</style>
外部样式
链接样式(最常用)
在
<head></head>
标签中,使用<link />
标签链接外部的CSS文件
link
标签的href
属性设置为目标链接的CSS文件路径,rel属性设置为stylesheet
表示链接样式表,type属性设置为text/css
例:
<link rel="stylesheet" href="style.css" type="text/css" />
导入样式
使用
@import url()
引入CSS文件
-
在CSS文件中直接使用
@import url()
-
在HTML文件中需要在
<style></style>
标签中使用@import url()
在HTML初始化时,
@import url()
导入的CSS会被直接导入到HTML或CSS文件中,成为文件的一部分
// 在HTML文件中导入
<style>
@import url(style.css);
</style>
// 在CSS文件中导入
@import url(style.css);
背景属性
1、background-size属性
1.1 contain
保持图片纵横比例缩放背景图片,使背景图片能够在背景区域完全显示
有可能出现图片无法完全覆盖背景区域
1.2 cover
保持图片纵横比不变,最大程度覆盖背景区域
有可能导致背景图片部分区域无法显示
2、background-repeat
2.1、repeat(默认)
允许水平和垂直方向重复(平铺)背景图片
2.2、repeat-x
只允许水平方向重复(平铺)背景图片
2.3、repeat-y
只允许垂直方向重复(平铺)背景图片
3、background
简写属性可以在一个属性声明中设置一个或多个背景属性,常用的属性设置如上表
background: #ff0000 url('smiley.gif') no-repeat cover;
字体样式
1、color属性
用于设置文本的颜色,可设置的值有:
-
颜色名,如【red】
-
十六进制值,如【#FFFFFF】
-
RGB值,如【rgb(255, 0, 0)】
-
rgba值,如【rgba(255, 0, 0, 0.9)】
2、font-size属性
用于设置文本字体大小,可以设置为绝对大小,单位为px,也可设置为相对大小,单位为
rem
、em
等
字体大小未设置时默认字体大小为16px
3、font-weight属性
-
用于设置文本的粗细,可设置的值有:
4、font-family属性
用于规定文本使用的字体名或字体族名列表,字体名在列表越往前优先级越高。如果浏览器不支持第一个字体,则会尝试下一个,以此类推
font-family:"Times New Roman", "Georgia", "Serif";
5、text-align属性
用于设置文本的水平对齐方式,可设置的值有:
-
center
(居中对齐) -
left
(左对齐) -
right
(右对齐)
文本方向是从左到右则默认左对齐,文本方向是从右至左则默认右对齐
6 line-height属性
用于设置行间距,可设置的值如下
-
数字:行间距为当前字体大小乘此数字
-
固定值:设置固定的行间距,如20px
-
百分比:行间距为当前字体大小乘百分比
7、text-indent属性
用于指定首行缩进值,可设置的值如下
-
固定值:设置固定首行缩进,如20px
-
百分比:首行缩进值为父元素宽度乘此百分比
8、letter-spacing属性
用于设置字间距,设置固定值为字间距,如10px
9、word-spacing属性
用于指定文本中单词之间的间距,设置固定值为单词间距,如10px
10、text-decoration
用于设置文本的装饰线,是下表属性的简写
-
例:
text-decoration: underline wavy red; /* 表示为红色波浪形下划线 */
11、text-transform
用于设置文本大小写字母,常用属性如下
-
uppercase
:全部文本均为大写字母 -
lowercase
:全部文本均为小写字母 -
capitalize
:文本的每个单词首字母为大写字母
12、writing-mode
设置文本在水平或垂直方向的排布方式
-
horizontal-tb
:文本流在水平方向从上到下排列,文字方向为水平方向
sideways-lr
:文本流在垂直方向,从下至上、从左至右排列
sideways-rl:文本流在垂直方向,从上至下、从右至左排列
vertical-lr
:文本流在垂直方向,从上至下、从左至右排列,文字方向为水平方向
vertical-rl
:文本流在垂直方向,从上至下、从右至左排列,文字方向为水平方向,跟古诗阅读顺序一致
13、white-space
用于设置文本的空白符处理方式,属性值如下
基础选择器
1、通配选择器
可以与其他选择器相结合,选择某元素下的所有元素
/*选择类名为box的元素的所有后代,添加一个黑色的字体颜色*/
.box * { color: #000; }
由于每个浏览器对元素的默认边距不一致,通配选择器常用于reset样式文件中,覆盖浏览器的默认样式
* {
margin: 0;
padding: 0;
border: 0;
}
2、标签选择器
标签选择器也常用于
reset样式文件
中,用于清除元素的默认样式,如li
标签的小圆点、a
标签的下划线等
3、id选择器
id属性的属性值应当是当前文档唯一
4、类选择器
class属性值在文档中可以重复
5、组合选择器
通过间隔符将基础选择器连接起来,实现组合选择的效果
伪类选择器
伪元素选择器
一个选择器只能使用一个伪元素,伪元素必须在基础选择器语句后使用
为了便于区分伪类选与伪元素,使用双冒号【::】作为伪元素选择符
CSS优先
浏览器通过CSS选择器的优先级来判断元素到底应该显示那个属性值
CSS的优先级如下
-
【内联样式】 > 【ID选择器】 > 【类选择器、属性选择器、伪类选择器】 > 【标签选择器 、伪元素选择器】
通配符选择器【*】和关系选择符【+(相邻选择符)、>(子代选择符)、~(兄弟选择符)、" "(后代选择符)等】对优先级没有影响
在选择器使用较多的情况下,使用CSS优先级判断元素的属性值显示很容易出错且不利于排错,可以通过给选择器添加权重的概念来帮助我们更好的理解CSS选择器的优先级
选择器权重计算
选择器的权重可以相加
#header .nav li { list-style: none; }
该选择器的权重 = ID选择器100 + 类选择器10 + 标签选择器1 = 111
对于同一个元素的两种选择器均声明了同一个属性情况
-
权重相同时,根据HTML代码从上往下执行的特点,后面选择器会覆盖前面选择器中相同的属性
-
权重不同时,权重大的选择器生效
!important规则
当你在一个样式声明中使用
!important
规则时,这个样式将覆盖其他的任何声明!important
规则与优先级无关,但是会直接影响样式的最终显示结果
块元素与行内元素
1、块级元素
-
在浏览器显示时总是独占一行
-
宽高、内外边距可以控制,且上下左右的外边距均可对周围元素产生影响
-
可以包含内容、行内元素和其他块级元素
-
宽度未设置时默认为其父级元素的宽度,高度未设置时为内容的高度
-
常见块级元素:
div、form、footer、h1-h6、ol、ul、p、video
-
设置
display
属性为display: block
可将元素转换为块级元素
2、行内元素
-
不独占一行,默认不自动换行
-
宽高、上下边距不可以控制,仅有左右边距可以控制且会对周围元素产生影响
-
一般只能包含内容和其他行内元素,不可包含块级元素
-
设置宽高无效,宽高默认为内容的宽高
-
常见行内元素:
span、label、a、em、strong、img
-
设置
display
属性为display: inline
可将元素转换为行内元素
3、行内块级元素
-
综合块级元素与行内元素的特性
-
不独占一行
-
元素宽高、内外边距均可设置,上下左右边距均会对周围元素产生影响
-
宽高未设置时默认为内容宽高
-
常见行内块级元素:
button、input、textarea、select
-
设置
display
属性为display: inline-block
可将元素设置为行内块级元素
盒子模型
盒模型由里到外包括四个部分:内容部分,padding(内边距),border(边框),margin(外边距)
内容部分一般用来显示图像或文字,在标准盒模型中(默认),内容部分的宽高可以通过width、height属性设置
-
padding(内边距)是包围在内容区域外的空白区域,代表的是盒子边框与实际内容之间的距离,通过【padding】相关属性设置大小
-
border指的是盒子模型的边框。border除了可以使用
border-width
设置边框大小外,可以使用border-style
设置边框的样式,如实线、虚线,使用border-color
设置边框颜色 -
margin(外边距)指的是盒子和其他元素之间的空白部分,代表的是盒子的边框与其他相邻盒子边框之间的距离,通过【margin】相关属性设置大小
标准盒模型
在标准盒模型中,给盒模型设置
width
和height
,实际上是给内容区域设置大小
标准盒模型的盒子实际宽高 = 内容区域的宽高 + border大小 + padding大小
怪异盒模型
在怪异盒模型中,给盒模型设置的
width
和height
就是盒模型的实际大小,宽高已经包含了border
和padding
怪异盒模型的实际大小 = 盒模型设置的
width、height(包含border和 padding)
在怪异盒模型中,内容部分的实际宽高是盒模型的宽高减去padding和border
不管是标准盒模型还是怪异盒模型,margin都不计入盒子的实际大小。但是margin会影响盒模型所占空间,即影响的盒子模型的外部空间。在计算盒子模型的实际占位大小时才会将margin计入其中。
浏览器默认使用标准盒模型,如需使用怪异盒模型,可用通过将盒模型设置为
box-sizing: border-box
实现
定位
什么是脱离文档流
文档流指的是在元素排版过程中,元素会自动从上至下,从左往右流式排列,称为文档流
元素脱离文档流后,将不在文档流中占据空间,元素浮于文档流的上方,此时元素层级发生变化
position定位
position属性用于指定元素的定位类型,属性值可为
-
static(默认定位)
-
relative(相对定位)
-
absolute(绝对定位)
-
fixed(固定定位)
-
sticky(粘性定位)
设置定位类型后可以通过设置top、right、bottom、left属性确定定位的位置
static定位
-
页面上的每个盒子从上到下、从左到右依次排列的布局
<div class="box-container">
<div class="box1">box1</div>
<div class="box2">box2</div>
</div>
relative定位
-
相对于元素自身原始位置定位,元素不脱离文档流,即原来元素所占的空间不会改变
上述static定位示例代码中,将box1设置以下属性,元素会相对于自身原始位置向右偏移20px,向下偏移50px
.box1 {
position: relative;
top: 50px;
left: 20px;
}
absolute定位
-
元素相对于最近的非static定位的祖先元素定位进行偏移,元素脱离文档流
上述static定位示例代码啊中,将box2以及其父级元素box-container设置如下属性
box2元素相对于relative定位的box-container向右偏移25px,向下偏移30px
.box-container {
position: relative;
}
.box2 {
position: absolute;
top: 30px;
left: 25px;
}
fixed定位
-
相对于浏览器窗口进行定位,元素脱离文档流
常用于顶部导航栏、顶部搜索框、侧边联系客服等板块
sticky定位(存在兼容性问题)
-
根据自身原始位置或浏览器窗口进行固定定位,类似relative和fixed的结合
常用于页面的搜索工具栏,初始加载在默认位置(相当于
relative
),页面向下滚动时,工具栏固定在页面头部(相当于fixed
),页面重新向上滚动,工具栏也会回到默认位置
层级属性z-index
-
用于设置元素的堆叠顺序,该属性仅能在非static定位的定位元素上生效
-
数值越高,层级越高,层级高的元素会覆盖层级低的元素(层级高的元素会在层级低的元素上方)
z-index属性值相同时,遵循
后来者居上
的原则,后面的元素会覆盖前面的元素
上述
absolute
定位的示例中,给box1、box2添加背景后可以清晰看见,box2覆盖box1
将box1、box2增加以
z-index
属性,可将box1、box2层级改变,使box1在box2的上方
.box1 { z-index: 1; }
.box2 { z-index: 0; }
浮动
float属性
-
用于设置元素是否浮动,absolute(绝对)定位的元素会忽略float属性
元素浮动后会被移出正常的文档流,向左或者向右平移,一直平移直到碰到了所处的容器的边框,或者碰到另外一个浮动的元素。
-
下表为float可设置的属性值
clear属性
-
用于清除浮动,给元素清除浮动后,元素将会排在该元素之前的浮动元素下方
-
下表为float可设置的属性值
<style>
.layout {
width: 120px;
height: 300px;
margin: 10px;
background-color: cadetblue;
float: left;
}
.content {
width: 340px;
height: 300px;
margin: 10px;
background-color: powderblue;
float: left;
}
footer {
width: 500px;
height: 40px;
background-color: darkseagreen;
}
</style>
<main>
<section class="layout flex-center">侧边栏</section>
<section class="content flex-center">内容</section>
</main>
<footer></footer>
在以上代码使用浮动实现两列布局中,main中的section都为浮动元素,main元素的高度为0无法被撑开
main后的footer元素在页面布局时无法在main后正常显示(如下图)
section元素左浮动,此时将footer元素左侧浮动清除,即可将footer元素置于main元素下方
/* 清除左右两侧浮动 */
footer {
clear: both;
}
/* 或清除左侧浮动*/
footer {
clear: left;
}
浮动布局
-
浮动在布局中最常用于实现两列布局或三列布局
在使用浮动属性实现三列布局的时候常用,左侧盒子左浮动,右侧盒子右浮动,中间的盒子左右外边距设置大于左右两侧盒子大小即可
JS基础
变量命名规则
变量名不能以数字或者某些特殊字符开头
1
1a
*a
(a
%a
<r
// 以上都是非法的变量名,会直接报错
变量名不能是关键字
补充
-
一般应当坚持使用拉丁字符(0-9,a-z,A-Z)和下划线字符。
-
不应当使用规则之外的其他字符,因为它们可能引发错误,或对国际用户来说难以理解。
-
变量名不要以下划线开头—— 以下划线开头的被某些JavaScript设计为特殊的含义,因此可能让人迷惑。
-
变量名不要以数字开头。这种行为是不被允许的,并且将引发一个错误。
-
一个可靠的命名约定叫做 "小写驼峰命名法",用来将多个单词组在一起,小写整个命名的第一个字母然后大写剩下单词的首字符。
-
让变量名直观,它们描述了所包含的数据。不要只使用单一的字母/数字,或者长句。
-
变量名大小写敏感
-
最后也是最重要的一点—— 你应当避免使用JavaScript的保留字给变量命名。保留字,即是组成JavaScript的实际语法的单词!因此诸如 var, function, let和 for等,都不能被作为变量名使用。浏览器将把它们识别为不同的代码项,因此你将得到错误。
逻辑运算
比较运算符
我们假定 num = 5,下表中解释了比较运算符
逻辑运算符
我们假定num = 5,下表中解释了逻辑运算符:
隐式类型转化
字符串和数字的运算
字符串和数字进行加运算时,会将数字转换成字符串,然后和另一个字符串进行拼接
字符串和数字进行减、乘、除运算,以及大小比较时,会将字符串转换成数字,再和另一个数字进行运算或比较
各种值转换成布尔值
数字0,空字符串"",null,undefined 转成布尔值的时候都是false
非0数字,非空字符串转成布尔值的时候都是true
任何数组(即使是空数组),任何对象(即使是空对象) 转成布尔值的时候都是true
条件分支
if分支
基本语法结构
if (条件1) {
// 代码块1
} else if (条件2) {
// 代码块2
} else {
// 代码块3
}
说明
-
如果条件1为真就会执行代码块1。即使条件2为真也不会去执行代码块2,更不会执行代码块3
-
只有当条件1为假,并且条件2为真的时候,才会执行代码块2
-
如果条件1和条件2都为假,才会执行代码块3
-
else if 和 else 部分不是必需的。
-
可以有多个else if
switch分支
基本语法结果
switch (expression) {
case value1:
// 当 expression 的结果与 value1 匹配时,执行此处语句
[break;]
case value2:
// 当 expression 的结果与 value2 匹配时,执行此处语句
[break;]
...
case valueN:
// 当 expression 的结果与 valueN 匹配时,执行此处语句
[break;]
[default:
// 如果 expression 与上面的 value 值都不匹配,执行此处语句
[break;]]
}
说明
-
[]表示这一部分语句是可选的,并不是说正常代码中要加[]
-
expression和value的是进行严格模式的匹配
-
如果所有case都没有匹配到,将执行default分支的代码
for循环
1、for循环的使用方法
-
for:多次遍历代码块
-
for/in:遍历对象属性
2、使用示例
for (语句 1; 语句 2; 语句 3) {
要执行的代码块
}
2.1 for循环是您希望创建循环时经常使用的语法结构,代码结构如下:
-
语句 1 在循环(代码块)开始之前执行。
-
语句 2 定义运行循环(代码块)的条件。
-
语句 3 会在循环(代码块)每次被执行后执行。
2.2 for循环代码实例一(普通遍历):
for (var i = 0; i < 10; i++) {
console.log(i)
}
// 执行结果
0 1 2 3 4 5 6 7 8 9
for (var i = 0; i < 10; i+=2) {
console.log(i)
}
// 执行结果
0 2 4 6 8
说明:
-
语句1在循环之前设置一个变量(var i = 0),从0开始遍历
-
语句2定义运行循环的条件(i必须小于10),当i = 10的时候不满足循环条件
-
语句3会在代码块每次执行之后对变量值i进行递增(i++)
-
语句3 (i+=2) 相当于每次循环迭代器i+2,也可以这么写(i=i+2)
2.3 for循环代码实例二(数组遍历):
var arr = [11, 22, 33, 44, 55]
for (var i = 0; i < arr.length; i++) {
console.log(arr[i])
}
// 执行结果
11 22 33 44 55
说明:
-
语句1在循环之前设置一个变量(var i = 0),从0开始遍历(数组下标从0开始)
-
语句2定义运行循环的条件(i必须小于arr的数组长度),当arr下标正好是0-3,4的时候不满足循环要求
-
语句3会在代码块每次执行之后对变量值i进行递增(i++)从arr[0]-arr[3]
2.4 for循环代码实例三(对象遍历):
var obj = {name:"tom", gender:"man", age:32}
for (var key in obj) {
// 打印键
console.log(key)
// 打印值
console.log(obj[key])
}
// 执行结果
name
tom
gender
man
age
32
说明:
JavaScript提供了一种特殊的循环(也就是for .. in循环),用来迭代对象的属性或数组的每个元素,for...in循环中的循环计数器是字符串,而不是数字。它包含当前属性的名称或当前数组元素的索引
Math内置对象
Math对象的作用是:执行常见的算数任务。保存数学公式和信息,与我们在JavaScript直接编写计算功能相比,Math对象提供的计算功能执行起来要快得多。
对象属性
对象定义(以下操作都基于这个对象)
// 定义一个对象
var obj = { name: "李明", age: 18, gender: "man", city: "山东", hobby: "游泳" }
访问对象属性的语法
// 访问对象属性方式一
obj.name
// 访问对象属性方式二
obj['name']
// 访问对象属性方式三
// 将对象属性赋值给一个变量,使用变量方式访问
var key = 'name'
obj[key]
添加对象的属性语法
// 添加一个属性方式一
obj.nickName = "小明"
// 添加一个属性方式二
obj["nickName"] = "小明"
console.log(obj)
// {name: '李明', age: 19, gender: 'man', city: '山东', hobby: '游泳', nickName: "小明"}
修改对象的属性语法
// 修改一个属性方式一
obj.age = 19
// 修改一个属性方式二
obj["age"] = 19
console.log(obj)
// { name: '李明', age: 19, gender: 'man', city: '山东', hobby: '游泳'}
删除对象的属性语法
// 删除一个属性
delete obj.age
console.log(obj)
// {name:'李明', gender: 'man', city: '山东', hobby: '游泳'}
for循环遍历对象属性的语法
// for循环遍历对象,需要使用for ... in
for (var key in obj) {
console.log(key)
console.log(obj[key])
}
函数定义与调用
通过声明来定义函数
function关键字
我们可以使用function关键字来定义一个具有名称的函数,其语法结构如下
function name([param[, param[, ... param]]])
{
[statements]
}
-
[]表示可选,并不是正常代码中需要使用[]
-
name表示函数名,()中的表示参数,{}中的表示函数体。在函数被调用的时候,会执行函数体中的代码。
-
注意:函数被定义的时候,函数体中的代码并不会被执行。只有到函数被调用的时候,函数体中的代码才会被执行。
-
对于使用函数声明这个方法定义的函数,函数调用可以在函数定义之前,如示例中的pri函数。
通过表达式来定义函数
表达式定义法
我们还可以使用函数表达式的方式来定义一个函数,这时可以将函数直接赋值给一个变量,其语法结构如下
var myFunction = function name([param[, param[, ... param]]]) {
statements
}
-
[]表示可选,并不是正常代码中需要使用[]
-
name表示函数名,可以省略,()中的表示参数,{}中的表示函数体。在函数被调用的时候,会执行函数体中的代码。
-
注意:函数被定义的时候,函数体中的代码并不会被执行。只有到函数被调用的时候,函数体中的代码才会被执行。
-
对于使用函数表达式这个方法定义的函数,函数调用必须在函数定义之后。
-
如果省略name,我们称该函数为匿名函数。
函数调用
-
对于使用函数声明的方法定义的函数,可以使用函数名加括号的方式来调用;对于使用函数表达式定义的函数,可以使用表达式所赋值的变量名加括号来调用。如上述代码所示。
-
在函数被执行的时候,会运行函数体中的代码。如果函数体中有return语句,则会在函数被调用处返回return出来的值,并结束函数的运行。return并不是必需的,没有return的话,函数会返回undefined。
function add1(a, b) {
return a + b;
}
var res = add1(4, 5)
console.log(res) // 预期输出:9
function add2(a, b) {
a + b;
}
var res = add2(4, 5)
console.log(res) // 预期输出:undefined
-
函数在调用的时候,会将调用时给定的参数和定义时设定的参数依次绑定。如果调用时给定的参数个数不够,那么函数体中没有绑定的参数将被赋值为undefined
function foo(a, b) {
console.log(b)
}
foo(4) // 预期输出:undefined
foo(4,8) // 预期输出:8
常见内置函数
eval
eval函数会将传入的字符串当做 JavaScript 代码进行执行。这是一个十分危险的函数,一般情况不建议使用。
var a = eval("2+2")
console.log(a)
// 预期输出:4
// 这里eval把字符串"2+2",当成js代码执行,得到结果4
eval("console.log('hello world')")
// 预期输出:hello world
// 这里eval把字符串"console.log('hello world')",当成js代码执行,打印输出:hello world
isNaN
用来确定一个值是否为NaN。NaN表示不是一个数字。如果isNaN函数的参数不是Number类型, isNaN函数会首先尝试将这个参数转换为数值,然后才会对转换后的结果是否是NaN进行判断。因此,对于能被强制转换为有效的非NaN数值来说(空字符串和布尔值分别会被强制转换为数值0和1),返回false值也许会让人感觉莫名其妙。比如说,空字符串就明显“不是数值(not a number)”。这种怪异行为起源于:"不是数值(not a number)"在基于IEEE-754数值的浮点计算体制中代表了一种特定的含义。isNaN函数其实等同于回答了这样一个问题:被测试的值在被强制转换成数值时会不会返回IEEE-754中所谓的“不是数值(not a number)”。
isNaN('abc') // 返回值:true 因为字符串'abc'不是一个数字
isNaN('12.23') // 返回值:false 因为字符串'12.23'是一个数字
isNaN(NaN); // true
isNaN(undefined); // true
isNaN({}); // true
isNaN(true); // false
isNaN(null); // false
isNaN(37); // false
// strings
isNaN("37"); // false: 可以被转换成数值37
isNaN("37.37"); // false: 可以被转换成数值37.37
isNaN("37,5"); // true
isNaN('123ABC'); // true: parseInt("123ABC")的结果是 123, 但是Number("123ABC")结果是 NaN
isNaN(""); // false: 空字符串被转换成0
isNaN(" "); // false: 包含空格的字符串被转换成0
// dates
isNaN(new Date()); // false
isNaN(new Date().toString()); // true
isNaN("blabla") // true: "blabla"不能转换成数值
// 转换成数值失败, 返回NaN
parseFloat
根据给定的参数返回其对应的浮点数。
parseFloat(3.14);
parseFloat('3.14');
parseFloat(' 3.14 ');
parseFloat('314e-2');
parseFloat('0.0314E+2');
parseFloat('3.14some non-digit characters');
// 以上的返回值都是3.14
parseInt
解析一个字符串并返回指定基数的十进制整数。
parseInt("0xF", 16);
parseInt("F", 16);
parseInt("17", 8);
parseInt(021, 8);
parseInt("015", 10); // parseInt(015, 8); 返回 13 parseInt(15.99, 10);
parseInt("15,123", 10);
parseInt("FXX123", 16);
parseInt("1111", 2);
parseInt("15 * 3", 10);
parseInt("15e2", 10);
parseInt("15px", 10);
parseInt("12", 13); // 以上都返回15,第二个参数表示基数(可以理解为进制)
字符串定义与转义字符
使用引号来定义字符串
我们可以使用一对单引号或者一对双引号来定义一个字符串
var str1 = "这是双引号定义的字符串"
var str2 = '这是单引号定义的字符串'
// 1. 在JavaScript中双引号定义的字符串和单引号定义的字符串没有本质区别
// 2. 无论是单引号还是双引号,都必须配对使用,不能一个单引号和双引号配对
// 3. 单引号中的字符串中不能出现单引号,可以出现双引号;双引号中的字符串中不能出现双引号,可以出现单引号
使用模板字符串的方式定义字符串:我们可以使用一对反引号来定义字符串
var str1 = `这是一个普通的字符串`
var str2 = `这是一个换行的
字符串`
var a = 2
var b = 3
var str3 = `这是一个可以解析变量的字符串,例如:${a + b}`
// 最终str3的值为:
// 这是一个可以解析变量的字符串,例如:5
转义符
在定义一个字符串的时候,有些特殊字符并不适合直接出现。例如:换行符、单引号(不能出现在单引号内)、双引号(不能出现在双引号内),这个时候可以我们需要使用\转义符,例如:
var str1 = '这是一个换行的\n字符串'
console.log(str1)
// 预期输出:
// 这是一个换行的
// 字符串
// 在这里使用了\n来代表换行符。如果直接在定义字符串的时候回车换行,将出现语法错误
var str2 = "如何使用双引号\""
console.log(str2)
// 预期输出:
// 如何使用双引号"
// 在这里使用了\"来代表双引号。如果在双引号定义的字符串中直接使用双引号,将出现语法错误。单引号同理。
// 如果使用模板字符串的方式定义字符串,可以直接使用回车换行。但是要在其中使用反引号`,也必须转义
字符串常见方法与属性
String对象属性
String对象的常用方法
数组
数组定义
// 直接使用中括号就能定义一个数组,数组中的值的类型不必相同,数组中可以嵌套数组
var arr = [1, 2, 5, 'init', ['apple', 2, 4]]
数组中值的访问与修改
var arr = [1, 2, 5, 'init', ['apple', 2, 4]] // 可以使用下标(或者叫索引)来取数组中的值。下标是从0开始的
arr[0] // 取下标为0的值,即1
arr[3] // 取下标为3的值,即'init'
// 我们可以给数组中某一个下标的值进行重新赋值,即修改该下标的值
arr[0] = 'name' // 将字符串'name'赋值给数组arr下标为0的位置,此时arr[0]的值就为'name'了,而不是1了
数组常见属性
length
访问一个数组的length属性,返回该数组的长度,即该数组元素的个数
var arr = [1, 2, 5, 'init', ['apple', 2, 4]]
arr.length // 返回数组arr的长度,即5
数组常见方法
forEach()
对数组的每个元素执行一次给定的函数
var array1 = ['a', 'b', 'c']
array1.forEach( function(element) {
console.log(element)
})
// 预期输出
// "a"
// "b"
// "c"
indexOf()
返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1。
var beasts = ['ant', 'bison', 'camel', 'duck', 'bison']
console.log(beasts.indexOf('bison')) // 预期输出: 1
// start from index 2
console.log(beasts.indexOf('bison', 2)) // 预期输出: 4
console.log(beasts.indexOf('giraffe')) // 预期输出: -1
join()
将一个数组的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目,那么将返回该项目而不使用分隔符。
var elements = ['Fire', 'Air', 'Water']
console.log(elements.join()) // 预期输出: "Fire,Air,Water"
console.log(elements.join('')) // 预期输出: "FireAirWater"
console.log(elements.join('-')) // 预期输出: "Fire-Air-Water"
map()
创建一个新数组,其结果是该数组中的每个元素是调用一次提供的函数后的返回值。
var array1 = [1, 4, 9, 16]; // 传入一个回调函数给map方法
var map1 = array1.map(function (x) { return x * 2 });
console.log(map1); // 预期输出: Array [2, 8, 18, 32]
pop()
从数组中删除最后一个元素,并返回该元素的值。此方法更改数组的长度。
var plants = ['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato'];
console.log(plants.pop()); // 预期输出: "tomato"
console.log(plants); // 预期输出: Array ["broccoli", "cauliflower", "cabbage", "kale"]
plants.pop();
console.log(plants); // 预期输出: Array ["broccoli", "cauliflower", "cabbage"]
push()
将一个或多个元素添加到数组的末尾,并返回该数组的新长度。
var animals = ['pigs', 'goats', 'sheep'];
var count = animals.push('cows');
console.log(count); // 预期输出: 4
console.log(animals); // 预期输出: Array ["pigs", "goats", "sheep", "cows"]
animals.push('chickens', 'cats', 'dogs');
console.log(animals); // 预期输出: Array ["pigs", "goats", "sheep", "cows", "chickens", "cats", "dogs"]
reverse()
将数组中元素的位置颠倒,并返回该数组。数组的第一个元素会变成最后一个,数组的最后一个元素变成第一个。该方法会改变原数组。
var array1 = ['one', 'two', 'three'];
console.log('array1:', array1); // 预期输出: "array1:" Array ["one", "two", "three"]
var reversed = array1.reverse();
console.log('reversed:', reversed); // 预期输出: "reversed:" Array ["three", "two", "one"]
// 注意:该方法会修改原数组
console.log('array1:', array1); // 预期输出: "array1:" Array ["three", "two", "one"]
shift()
从数组中删除第一个元素,并返回该元素的值。此方法更改数组的长度。
var array1 = [1, 2, 3];
var firstElement = array1.shift();
console.log(array1); // 预期输出: Array [2, 3]
console.log(firstElement); // 预期输出: 1
slice()
返回一个新的数组对象,这一对象是一个由 begin 和 end 决定的原数组的浅拷贝(包括 begin,不包括end)。原始数组不会被改变。
var animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
console.log(animals.slice(2)); // 预期输出: Array ["camel", "duck", "elephant"]
console.log(animals.slice(2, 4)); // 预期输出: Array ["camel", "duck"]
console.log(animals.slice(1, 5)); // 预期输出: Array ["bison", "camel", "duck", "elephant"]
console.log(animals.slice(-2)); // 预期输出: Array ["duck", "elephant"]
console.log(animals.slice(2, -1)); // 预期输出: Array ["camel", "duck"]
sort()
对数组的元素进行排序,并返回数组。
var months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months); // 预期输出: Array ["Dec", "Feb", "Jan", "March"]
var array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1); // 预期输出: Array [1, 100000, 21, 30, 4]
// 如果sort()方法调用的时候没有传入回调函数,会将数组转成字符串然后进行大小比较并升序排列,字符串的大小比较是按照字典顺序进行的。所以10000会比21小。
// 如果sort()方法调用的时候传入了回调函数,会按回调函数的返回值来决定相邻两个元素的排序,例如:
var array1 = [1, 30, 4, 21, 100000];
array1.sort(function (item1, item2) {
return item1 - item2
});
console.log(array1); // 预期输出: Array [1, 4, 21, 30, 100000]
// 这里面的item, item2参数就是array1里面相邻的两个元素
// 如果这个回调函数返回的结果大于0,那么item2将排在item1的前面
// 如果这个回调函数返回的结果小于0,那么item1将排在item2的前面
// 如果这个回调函数返回的是0,那么item1和item2的位置不变
unshift()
将一个或多个元素添加到数组的开头,并返回该数组的新长度(该方法修改原有数组)。
var array1 = [1, 2, 3];
console.log(array1.unshift(4, 5)); // 预期输出: 5
console.log(array1); // 预期输出: Array [4, 5, 1, 2, 3]
Web进阶
DOM结构及节点
整个HTML的结构都可以由类似上图的树结构表示,整个树结构由节点组成
-
document对象指代整个文档节点, 它是文档内其他节点的访问入口,提供了操作其他节点的方法
-
节点可以分为元素节点、文本节点和属性节点
-
节点之间有层级关系,父(parent)、子(child)和同胞(sibling)等术语用于描述这些关系。父节点拥有子节点,同级的子节点被称为同胞(兄弟或姐妹)
常用节点获取方法和属性
要进行DOM操作,首先要获取到需要操作的节点或节点集合,接下来以下面的示例代码为基础,介绍常用的DOM获取方法和属性。
<div class="box" id="container">
<p class="item" title="111">项目1</p>
<p class="item">项目2</p>
<p>项目3</p>
<input type="text" value="123">
</div>
注:复制示例代码到HTML文件中,并在浏览器内打开这个HTML文件。(Chrome浏览器中右键选择“检查”可打开控制台,选择控制台的Console可运行代码,回车查看结果)。
DOM修改
innerHTML代码示例
改变p元素内容
// 更改为文字
document.querySelector('p').innerHTML = '测试项目'
// 更改为html内容(p元素中内容替换为span元素)
document.querySelector('p').innerHTML = '<span>测试项目</span>'
setAttribute(name, value)代码示例
参数:name为属性名,value为属性值
改变input的type属性
document.querySelector('input').setAttribute('type', 'button')
通过属性名更改属性
改变input的type属性
document.querySelector('input').type = 'button'
DOM添加
createElement(tagName)代码示例
创建一个
<div>
元素
newDiv = document.createElement('div')
// 可以直接对创建完的元素进行操作,如:修改元素内文字
newDiv.innerHTML = '我是新元素'
appendChild(node)代码示例
创建一个新元素
<p>
,然后添加到<div>
的最尾部:
var p = document.createElement('p');
document.querySelector('div').appendChild(p)
insertAdjacentHTML(position, text)代码示例
-
position(内容相对当前元素位置):
-
'beforebegin':元素自身的前面
-
'afterbegin':插入元素内部的第一个子节点之前
-
'beforeend':插入元素内部的最后一个子节点之后
-
'afterend':元素自身的后面
-
将一个新元素
<p>
插入到<div>
的最尾部:
// 执行添加
var div = document.querySelector('div')
div.insertAdjacentHTML('beforeend', '<p></p>')
DOM删除
removeChild(child)
<div>
<p>项目1</p>
<p>项目2</p>
<div>
<script>
// 删除div中的第一个p元素
var parent = document.querySelector('div')
var child = document.querySelector('p')
parent.removeChild(child)
</script>
remove()
<div>
<p>项目1</p>
<p>项目2</p>
<div>
<script>
// 删除div中的第一个p元素
var p1 = document.querySelector('p')
p1.remove()
</script>
DOM控制CSS样式
通过style属性控制样式
style属性可以设置或返回元素的内联样式
-
语法:element.style.property = value
-
property为CSS属性名,如:color,margin。如果属性名原来包含“-”,则需转换为小驼峰形式,如:backgroundColor,marginLeft。
var box = document.querySelector('div')
box.style.color = "#fff" // 将元素中文字设置为白色
box.style.marginLeft = "100px" // 将元素左外边距设置为100px
通过classList控制样式
classList属性返回一个元素类属性集合(这里可以简单理解为类名的集合),通过使用classList中的方法可以方便的访问和控制元素类名,达到控制样式的目的
classList常用方法介绍
<div class="box">classList test</div>
<script>
var box = document.querySelector('.box')
box.classList.add('box1', 'box2') // [box] => [box, box1, box2]
box.classList.remove('box1', 'box2') // [box, box1, box2] => [box]
box.classList.replace('box', 'box2') // [box] => [box2]
box.classList.contains('box1') // 当前元素不包含类名box1,返回false
box.classList.toggle('active') // [box2] => [box2, active]
</script>
节点写入
节点写入常用方式
innerHTML
-
在div中写入h1元素
<body>
<div></div>
</body>
<script>
document.querySelector('div').innerHTML = '<h1>我是新内容</h1>'
</script>
如果写入内容中包含html标签字符串,会被解析成对应的html标签
innerText
-
在div中写入字符串
<body>
<div></div>
</body>
<script>
document.querySelector('div').innerText = '<h1>我是新内容</h1>'
</script>
html标签字符串不会被解析,会被当作普通字符串写入
document.write()
document.write('我是新内容')
document.write('<h1>我是新内容</h1>')
和innerHTML类似,写入内容如果包含html标签字符串,会被解析成对应的html标签。document.write()根据运行时机,会写入文档不同的位置
事件基础
事件定义
用户与浏览器交互的方法,规定了浏览器在什么时刻执行什么事情
事件举例:鼠标单击,双击,键盘输入,页面或图像载入
事件三要素(事件源,事件,事件处理程序)
-
事件源:谁触发的,一般指某个元素节点
-
事件:怎么触发的
-
事件处理程序:触发后发生了什么事
事件绑定
事件源要与事件绑定后,才能触发对应事件。下面以鼠标点击事件为例,介绍事件的三种绑定方式。
方式一:行内事件属性赋值
<button onclick="alert('行内事件属性赋值')">点击按钮</button>
方式二:事件属性赋值
var btn = document.querySelector('button');
btn.onclick = function() {
alert('事件属性赋值')
}
方式三:事件监听
addEventListener(type, listener, useCapture)
-
type: 事件类型
-
listener: 监听器(处理程序)
-
useCapture: 默认为false,设置为true时,不会因冒泡触发监听器
const btn = document.querySelector('button');
btn.addEventListener('click', function() {
alert('事件监听')
})
事件属性赋值与事件监听区别:
-
事件属性多次赋值,只会执行最后一次事件处理程序;事件监听可以添加多个监听器,执行多个事件处理程序;
-
事件属性赋值兼容IE8及以下浏览器,而事件监听最低兼容到IE9浏览器
鼠标及键盘事件
常用鼠标事件
代码示例:
var btn = document.querySelector('button')
btn.addEventListener('mouseenter', function() { // 鼠标移入文字为红色
this.style.color = 'red'
})
btn.addEventListener('click', function() { // 鼠标单击文字为蓝色
this.style.color = 'blue'
})
btn.addEventListener('mouseleave', function() { // 鼠标移出文字为黑色
this.style.color = 'black'
})
事件处理程序中的this指代当前操作元素
常用键盘事件
键盘事件经常用于表单元素中,如:
input
输入框
代码示例:
var input = document.querySelector('input')
input.addEventListener('keydown', function() {
console.log('keydown', this.value) // 获取上一次输入值
})
input.addEventListener('keypress', function() {
console.log('keypress', this.value) // 获取上一次输入值
})
input.addEventListener('keyup', function() {
console.log('keyup', this.value) // 获取当前输入值
})
使用时注意触发顺序(keydown
->keypress
->keyup
),不同的键盘事件触发时机不同,返回的结果有区别
常用键盘事件属性
使用键盘事件属性可以精确的控制键盘操作,如:回车触发,方向键触发
代码示例:
// 以输入a为例,分别查看三种事件返回结果
var input = document.querySelector('input')
input.addEventListener('keydown', function(event) {
console.log(event.keyCode) // 65
console.log(event.charCode) // 0
console.log(event.key) // a
})
input.addEventListener('keypress', function(event) {
console.log(event.keyCode) // 97
console.log(event.charCode) // 97
console.log(event.key) // a
})
input.addEventListener('keyup', function(event) {
console.log(event.keyCode) // 65
console.log(event.charCode) // 0
console.log(event.key) // a
})
可以看到,三种事件中,只有key属性返回的结果保持统一,如果不考虑IE8以下浏览器兼容性,推荐使用key来代替keyCode和charCode
窗口事件
常用鼠标事件
load事件代码示例
<script>
/* 输出div中文字内容 */
// 方式一
window.addEventListener('load', function() {
console.log(document.querySelector('.box').innerHTML)
})
// 方式二
window.onload = function() {
console.log(document.querySelector('.box').innerHTML)
}
</script>
<div class="box">主要内容</div>
此处JS代码在元素之前,所以应该将代码放在load事件中,等待元素加载完成后再获取其内容。
使用onload绑定事件时,注意一个页面不要存在多个onload,这样会只会运行最后一个onload中的代码,推荐使用addEventListener绑定事件。
beforeunload事件代码示例
window.addEventListener("beforeunload", function (e) {
var confirmationMessage = "confirm close window ?"
// 兼容WebKit与非WebKit内核浏览器
(e || window.event).returnValue = confirmationMessage
return confirmationMessage
})
根据returnValue或return的值可自定义对话框信息(只对IE有效)
resize事件代码示例
/* 调整浏览器窗口时,获取可视窗口宽高 */
window.addEventListener("resize", function (e) {
console.log(window.innerWidth) // 可视窗口宽
console.log(window.innerHeight) // 可视窗口高
})
多用于检测不同屏幕尺寸,自适应布局
scroll事件代码示例
/* 获取滚动条垂直滚动距离 */
window.addEventListener("scroll", function () {
var myTop =
window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop; // 兼容写法
console.log(myTop);
})
常用于检测滚动条滚动距离
BOM window对象
BOM即浏览器对象模型(Browser Object Model),它提供了页面与浏览器窗口进行交互的对象接口。BOM由一系列的相关对象组成,window作为BOM的顶层对象,所有其他全局对象都是window的子对象,甚至DOM也是其子对象之一。学会了window对象及其子对象的常用属性方法,基本就掌握了BOM的大部分知识。
BOM结构
window
对象作为BOM的顶级对象,本身包含一些全局属性和方法,其子对象也有其特有的属性和方法
使用window子对象时,可以使用完整语法,也可以忽略window,如:
window.alert()
与alert()
效果相同
window对象
open(url, name, features, replace)
-
url
: 打开指定页面的url,如果没有则打开空白页-
name
: 指定target
属性或窗口名称,支持以下值:-
_blank
–- url加载到新窗口(默认) -
_parent
–- url加载到父框架 -
_self
–- url替换当前页面 -
_top
–- url替换任何可加载的框架集 -
name
-- 窗口名称
-
-
-
features
: 设置新打开窗口的功能样式(如:width=500) -
replace
-
true
–- url替换浏览历史中的当前条目 -
false
–- 在浏览历史中创建新条目
-
// 新窗口打开csdn首页
open('https://www.csdn.net/')
// 当前窗口打开csdn首页
open('https://www.csdn.net/', '_self')
// 新窗口打开csdn首页,并设置窗口宽高500px
open('https://www.csdn.net/', '_blank', 'width=500,height=500')
scrollTo(xpos, ypos)
-
xpos
:距离网页左上角x坐标 -
ypos
:距离网页左上角y坐标
<style>
.box { height: 3000px; }
</style>
<div class="box">
<p>我是顶部</p>
</div>
<script>
window.addEventListener('load', function() {
scrollTo(0, 500) // 页面加载后,滚动到距离顶部500px
})
</script>
location对象
location对象包含当前url信息,经常用于网址判断,url跳转
获取网址信息
// 以https://www.csdn.net/nav/python?param1=111¶m2=222#first为例,
查看输出结果
console.log(location.href)
// “https://www.csdn.net/nav/python?param1=111¶m2=222#first”
console.log(location.host) // “www.csdn.net”
console.log(location.protocol) // “https://”
console.log(location.pathname) // “/nav/python”
console.log(location.search) // “?param1=111¶m2=222”
console.log(location.hash) // “#first”
通过给href属性赋值url字符串的方式,可以跳转到对应url
location.href = 'https://www.csdn.net'
history对象
history对象包含用户浏览器的历史记录,但是不可读取,经常用于页面跳转
navigator对象
navigator对象包含浏览器相关信息,经常用于判断设备类型,浏览器兼容性
判断是否为谷歌内核:
navigator.userAgent.toLowerCase().indexOf('chrome')
// 返回-1时不是chrome内核,大于-1时是chrome内核
screen对象
screen对象包含用户屏幕的信息
BOM计时器
定时器方法
setTimeout(代码字符串或函数, 等待的毫秒数, 参数1, 参数2…)
setTimeout()
可执行代码字符串,如:a+b,但不推荐使用,有安全风险;
定时器到期时,可以通过
setTimeout()
的额外参数(参数1, 参数2…)给执行函数传递参数(IE9及以下浏览器不支持此语法);
定时器清除方法
clearTimeout(id)
,id为setTimeout()
的返回值;
示例:
<p class="info"></p>
<button class="btn">清除定时器</button>
<script>
var info = document.querySelector('.info')
var btn = document.querySelector('.btn')
var t1 = setTimeout(function() {
info.innerHTML = '已经5秒了'
}, 5000);
// 点击按钮可清除定时器
var btn = document.querySelector('.btn')
btn.addEventListener('click', function() {
clearTimeout(t1)
info.innerHTML = '定时器已清除'
})
</script>
setInterval(代码字符串或函数, 运行间隔毫秒数,参数1, 参数2…)
语法与
setTimeout()
相似,区别是setInterval()
第二个参数为运行间隔;
由于
setInterval()
是循环执行,如果没有特殊需求,则必须限制执行次数,使用clearInterval(id)
清除定时器;
示例:
<p class="info"></p>
<script>
var info = document.querySelector('.info')
var num = 0
var t1 = setInterval(function() { // 每隔1秒显示当前时间,5次后停止
info.innerHTML = '当前时间:' + String(new Date())
if (num >= 4) { clear() }
num++
}, 1000)
// 清除定时器
function clear() {
clearInterval(t1)
info.innerHTML = '定时器已清除'
}
</script>