Github来源:一个合格的初级前端工程师需要掌握的模块笔记 | 求星星 ✨ | 给个❤️关注,❤️点赞,❤️鼓励一下作者
大家好,我是魔王哪吒,很高兴认识你~~
哪吒人生信条:如果你所学的东西 处于喜欢 才会有强大的动力支撑。
每天学习编程,让你离梦想更新一步,感谢不负每一份热爱编程的程序员,不论知识点多么奇葩,和我一起,让那一颗四处流荡的心定下来,一直走下去,加油,2021
加油!欢迎关注加我vx:xiaoda0423
,欢迎点赞、收藏和评论
不要害怕做梦,但是呢,也不要光做梦,要做一个实干家,而不是空谈家,求真力行。
前言
如果这篇文章有帮助到你,给个❤️关注,❤️点赞,❤️鼓励一下作者,接收好挑战了吗?文章公众号首发,关注 程序员哆啦A梦 第一时间获取最新的文章
❤️笔芯❤️~
Web模块
html基本结构
html
标签是由<>
包围的关键词。html
标签通常成对出现,分为标签开头和标签结尾。- 有部分标签是没有结束标签的,为单标签,单标签必须使用
/
结尾。 - 页面所有的内容,都在
html
标签中。 html
标签分为三部分:标签名称,标签内容,标签属性。html
标签具有语义化,可通过标签名能够判断出该标签的内容,语义化的作用是网页结构层次更清晰,更容易被搜索引擎收录,更容易让屏幕阅读器读出网页内容。- 标签的内容是在一对标签内部的内容。
- 标签的内容可以是其他标签。
标签属性
class
属性:用于定义元素的类名id
属性:用于指定元素的唯一id
,该属性的值在整个html
文档中具有唯一性style
属性:用于指定元素的行内样式,使用该属性后将会覆盖任何全局的样式设定title
属性:用于指定元素的额外信息accesskey
属性:用于指定激活元素的快捷键tabindex
属性:用于指定元素在tab
键下的次序dir
属性:用于指定元素中内容的文本方向,属性只有ltr
或rtl
两种lang
属性:用于指定元素内容的语言
事件属性
window
窗口事件,onload
,在网页加载结束之后触发,onunload
,在用户从网页离开时发生(点击跳转,页面重载,关闭浏览器窗口等)form
表单事件,onblur
,当元素失去焦点时触发,onchange
,在元素的值被改变时触发,onfocus
,当元素获得焦点时触发,onreset
,当表单中的重置按钮被点击时触发,onselect
,在元素中文本被选中后触发,onsubmit
,在提交表单时触发keyboard
键盘事件,onkeydown
,在用户按下按键时触发,onkeypress
,在用户按下按键后,按着按键时触发。该属性不会对所有按键生效,不生效的有,alt,ctrl,shift,esc
mouse
鼠标事件,onclick
,当在元素上发生鼠标点击时触发,onblclick
,当在元素上发生鼠标双击时触发,onmousedown
,当元素上按下鼠标按钮时触发,onmousemove
,当鼠标指针移动到元素上时触发,onmouseout
,当元素指针移出元素时触发,onmouseup
,当元素上释放鼠标按钮时触发。Media
媒体事件,onabort
,当退出时触发,onwaiting
,当媒体已停止播放但打算继续播放时触发。
文本标签
- 段落标签
<p></p>
,段落标签用来描述一段文字 - 标题标签
<hx></hx>
,标题标签用来描述一个标题,标题标签总共有六个级别,<h1></h1>
标签在每个页面中通常只出现一次 - 强调语句标签,
<em></em>
,用于强调某些文字的重要性 - 更加强调标签,
<strong></strong>
和<em>
标签一样,用于强调文本,但它强调的程度更强一些 - 无语义标签
<span></span>
,标签是没有语义的 - 短文本引用标签
<q></q>
,简短文字的引用 - 长文本引用标签
<blockquote></blockquote>
,定义长的文本引用 - 换行标签
<br/>
多媒体标签
- 链接标签,
<a></a>
- 图片标签,
<img/>
- 视频标签,
<video></video>
- 音频标签,
<audio></audio>
列表
- 无序列表标签,
ul,li
,<ul></ul>
列表定义一个无序列表,<li></li>
代表无需列表中的每一个元素 - 有序列表,
ol,li
- 定义列表,
<dl></dl>
,定义列表通常和<dt></dt>
和<dd></dd>
标签一起使用
表格
- 表格标签
<table></table>
- 表格的一行
<tr></tr>
- 表格的表头
<th></th>
- 单元格
<td></td>
- 表格合并,同一行内,合并几列
colspan="2"
,同一列内,合并几行rowspan="3"
表单标签
- 表单标签
<form>
<form></form>
表单是可以把浏览者输入的数据传送到服务器端,这样服务器端程序就可以处理表单传过来的数据。
<form method="传送方式" action="服务器文件">
action
,浏览者输入的数据被传送到的地方
method
,数据传送的方式
- 输入标签
<input/>
name
:为文本框命名,用于提交表单,后台接收数据用。
value
:为文本输入框设置默认值。
type
:通过定义不同的type
类型,input
的功能有所不同。
text 单行文本输入框
password 密码输入框(密码显示为***)
radio 单选框 (checked属性用于显示选中状态)
checkbox 复选框(checked属性用于显示选中状态)
file 上传文件
button 普通按钮
reset 重置按钮(点击按钮,会触发form表单的reset事件)
submit 提交按钮(点击按钮,会吃饭form表单的submit事件)
email 专门用于输入 e-mail
url 专门用于输入 url
number 专门用于number
range 显示为滑动条,用于输入一定范围内的值
date 选取日期和时间(还包含:month、week、time、datetime、datetime-local)
color 选取颜色
button
按钮,下拉选择框<select></select>
<option value="提交值">选项</option>是下拉选择框里面的每一个选项
- 文本域:
<textarea></textarea>
,当用户想输入大量文字的时候,使用文本域。cols
,多行输入域的列数,rows
,多行输入域的行数。
其他语义化标签
- 盒子
<div></div>
- 网页头部
<header></header>
,html5
新增语义化标签,定义网页的头部,主要用于布局,分割页面的结构 - 底部信息
<footer></footer>
,html5
新增语义化标签,定义网页的底部,主要用于布局,分割页面的结构 - 导航
<nav></nav>
,html5
新增语义化标签,定义一个导航,主要用于布局,分割页面的结构 - 文章
<article></article>
,html5
新增语义化标签,定义一篇文章,主要用于布局,分割页面的结构 - 侧边栏
<aside></aside>
,语义化标签,定义主题内容外的信息,主要用于布局,分割页面的结构。 - 时间标签
<time></time>
,语义化标签,定义一个时间
网页结构
<!DOCTYPE html>
定义文档类型,告知浏览器用哪一种标准解释HTML
<html></html>
可告知浏览器其自身是一个HTML
文档<body></body>
标签之间的内容是网页的主要内容<head></head>
标签用于定义文档的头部,它是所有头部元素的容器<title></title>
元素可定义文档的标题<link>
标签将css
样式文件链接到HTML
文件内<meta>
定义文档的元数据
模块划分
- 常见的企业网站,多由头部区,展示图片区域,主题区域,底部信息区域组成
- 网页拆分原则: – 由上到下 – 由内到外
CSS代码语法
CSS
全称为层叠样式表(Cascading Style Sheets)
,它主要是用于定义HTML
内容在浏览器内的显示样式,如文字大小、颜色、字体加粗等。css
代码通常存放在<style></style>
标签内css
样式由选择符和声明组成,而声明又由属性和值组成- 选择符
{属性:值}
- 选择符:又称选择器,指明网页中要应用样式规则的元素
CSS 放置位置
- 行内样式,不建议使用
- 内联式样式表
- 外联样式表
CSS的继承
CSS
的某些样式是具有继承性的,继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代。- 不可继承样式:
display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear
- 可以继承的样式:
letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction、visibility、cursor
选择器的种类
- 标签选择器:通过标签的名字,修改
css
样式 - 通配符选择器:选择页面中所有的元素
- 属性选择器
- 后代选择器:选择某个父元素下面所有的元素
- 一级子元素选则器:选择某个父元素的直接子元素,后代选择器是选择父元素的所有子孙元素,一级子元素原则器只选择第一级子元素,不会再向下查找元素
id
选择器:通过id
查找页面中唯一的标签class
选择器:通过特定的class
(类)来查找页面中对应的标签,以.class
名称- 伪类选择器:
:hover
鼠标移入某个元素;:before
在某个元素的前面插入内容;:after
在某个元素的后面插入内容 - 群组选择器:可以对多个不同的选择器设置相同的样式
选择器的优先级
- 当有不同的选择器对同一个对象进行样式指定时,并且两个选择器有相同的属性被赋予不同的值时。
- 通过测算那个选择器的权重值最高,应用哪一个选择器的样式
- 权重计算方式:
标签选择器:1
class选择器:10
id选择器:100
行内样式:1000
!important 最高级别,提高样式权重,拥有最高级别
背景样式
- 背景颜色
background-color
- 背景图片
background-image
background-image:url(bg01.jpg);
- 背景图片位置
background-position
background-position:10px 100px;
// 代表坐标x,y轴
- 背景图片重复
background-repeat
background-repeat:no-repeat
// no-repeat 设置图像不重复,常用
// round 自动缩放直到适应并填充满整个容器
// space 以相同的间距平铺且填充满整个容器
- 背景图片定位
background-attachment
background-attachment:fixed
// 背景图像是否固定或者随着页面的其余部分滚动
// background-attachment的值可以是scroll(跟随滚动),fixed(固定)
background
缩写
background:#ff0000 url(bg01.jpg) no-repeat fixed center
字体样式
- 字体族
font-family
font-family:"微软雅黑","黑体";
- 字体大小
font-size
font-size:12px;
网页默认字体大小是
16px
- 字体粗细
font-weight
font-weight:400;
normal(默认)
bold(加粗)
bolder(相当于<strong>和<b>标签)
lighter (常规)
100 ~ 900 整百(400=normal,700=bold)
- 字体颜色
color
颜色的英文单词color:red;
十六进制色:color: #FFFF00;
RGB(红绿蓝)color:rgb(255,255,0)
RGBA(红绿蓝透明度)A是透明度在0~1之间取值。color:rgba(255,255,0,0.5)
- 字体斜体
font-style
font-style:italic
normal 文本正常显示
italic 文本斜体显示
oblique 文本倾斜显示
文本属性
- 行高
line-height
line-height:50px;
可以将父元素的高度撑起来
- 文本水平对齐方式
text-align
left 左对齐
center 文字居中
right 右对齐
- 文本所在行高的垂直对齐方式
vertical-align
baseline 默认
sub 垂直对齐文本的下标,和<sub>标签一样的效果
super 垂直对齐文本的上标,和<sup>标签一样的效果
top 对象的顶端与所在容器的顶端对齐
text-top 对象的顶端与所在行文字顶端对齐
middle 元素对象基于基线垂直对齐
bottom 对象的底端与所在行的文字底部对齐
text-bottom 对象的底端与所在行文字的底端对齐
- 文本缩进
text-indent
text-indent:2em;
通常用在段落开始位置的首行缩进
- 字母之间的间距
letter-spacing
- 单词之间间距
word-spacing
- 文本的大小写
text-transform
capitalize 文本中的每个单词以大写字母开头。
uppercase 定义仅有大写字母。
lowercase 定义仅有小写字母。
- 文本的装饰
text-decoration
none 默认。
underline 下划线。
overline 上划线。
line-through 中线。
- 自动换行
word-wrap
word-wrap: break-word;
基本样式
- 宽度
width
width:200px;
定义元素的宽度
- 高度
height
height:300px
元素默认没有高度
需要设置高度
可以不定义高度,让元素的内容将元素撑高
- 鼠标样式
cursor
定义鼠标的样式cursor:pointer
default默认
pointer小手形状
move移动形状
- 透明度
opacity
opacity:0.3
透明度的值0~1之间的数字,0代表透明,1代表完全不透明
透明的元素,只是看不到了,但是还占据着文档流
- 可见性
visibility
visibility:hidden;
visible 元素可见
hidden 元素不可见
collapse 当在表格元素中使用时,此值可删除一行或一列,不会影响表格的布局。
- 溢出隐藏
overflow
设置当对象的内容超过其指定高度及宽度时如何显示内容
visible 默认值,内容不会被修剪,会呈现在元素框之外。
hidden 内容会被修剪,并且其余内容是不可见的。
scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
- 边框颜色
outline
input
文本输入框自带边框,且样式丑陋,我们可以通过outline
修改边框
outline:1px solid #ccc;
outline:none清除边框
样式重置
早期的网页没有css
样式,为了界面美观,很多元素自带margin、padding
等样式,但这些样式在不同浏览器解析的值都不一样,需要将css
样式重置,保证在不同浏览器显示一致。
清除元素的margin和padding
去掉自带的列表符
去掉自带的下划线
盒模型样式
- 块状元素、内联元素和内联块状元素。
块级元素:
- 每个块级元素都从新的一行开始,并且其后的元素也另起一行。
- 元素的高度、宽度、行高以及顶和底边距都可设置。
- 元素宽度在不设置的情况下,是它本身父容器的100%,除非设定一个宽度。
行内元素:
- 和其他元素都在一行上
- 元素的高度、宽度、行高及顶部和底部边距不可设置
- 元素的宽度就是它包含的文字或图片的宽度,不可改变。
行内块状元素:
- 和其他元素都在一行上
- 元素的高度、宽度、行高以及顶和底边距都可设置。
- 元素分类转换
display
block
:将元素转换为块级元素
inline
:将元素装换为行级元素
inline-block
:将元素转换为内联块元素
none
: 将元素隐藏
- 描边
border
border:2px solid #f00;
线条的样式:
dashed(虚线)| dotted(点线)| solid(实线)。
css
样式中允许只为一个方向的边框设置样式:
下描边border-bottom:1px solid red;
上描边border-top:1px solid red;
右描边border-right:1px solid red;
左描边border-left:1px solid red;
- 间距
margin
div{margin:20px 10px 15px 30px;}
- 内填充
padding
padding:10px
浮动float
- 浮动原理
-
浮动使元素脱离文档普通流,漂浮在普通流之上的。
-
浮动元素依然按照其在普通流的位置上出现,然后尽可能的根据设置的浮动方向向左或者向右浮动,直到浮动元素的外边缘遇到包含框或者另一个浮动元素为止,且允许文本和内联元素环绕它。
-
浮动会产生块级框(相当于设置了
display:block
),而不管该元素本身是什么。
- 清除浮动带来的影响
clear
清除浮动:
none : 不清除(默认值)。
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
both : 不允许两边有浮动对象
- 利用伪类实现清除浮动
.clearFix {
content="";
display:block;
width:0;
height:0;
clear:both;
}
定位position
- 定位功能可以让布局变的更加自由。
- 层模型–绝对定位(相对于父类)
绝对定位使元素的位置与文档流无关,因此不占据空间。这一点与相对定位不同,相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。
#box_relative {
position: absolute;
left: 30px;
top: 20px;
}
如下图所示:
如果想为元素设置层模型中的绝对定位,需要设置
position:absolute
(绝对定位),这条语句的作用将元素从文档流中拖出来,然后使用left、right、top、bottom
属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块,则相对于body
元素,即相对于浏览器窗口。
- 层模型–相对定位(相对于原位置)
相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动。
#box_relative {
position: relative;
left: 30px;
top: 20px;
}
如下图所示:
如果想为元素设置层模型中的相对定位,需要设置
position:relative
(相对定位),它通过left、right、top、bottom
属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)
方式生成一个元素(并且元素像层一样浮动了起来),然后相对于原位置移动,移动的方向和幅度由left、right、top、bottom
属性确定,偏移前的位置保留不动。
- 层模型–固定定位(相对于网页窗口)
position:fixed
与
absolute
定位类型类似,但它的相对移动的坐标是视图(屏幕内的网页窗口)本身。由于视图本身是固定的,它不会随浏览器窗口的滚动条滚动而变化,除非你在屏幕中移动浏览器窗口的屏幕位置,或改变浏览器窗口的显示大小,因此固定定位的元素会始终位于浏览器窗口内视图的某个位置,不会受文档流动影响,这与background-attachment:fixed
属性功能相同。
浏览器默认样式
- 页边距
IE
默认为10px
,通过body
的margin
属性设置
要清除页边距一定要清除这两个属性值
body { margin:0; padding:0;}
- 段间距
IE
默认为19px
,通过p
的margin-top
属性设置
p
默认为块状显示,要清除段间距,一般可以设置
p { margin-top:0; margin-bottom:0;}
html5
HTML5 的优势
- 解决跨浏览器,跨平台问题
- 增强了
web
的应用程序
HTML5 废弃元素
frame frameset noframes
acronym applet dir
basefont big center font strike tt
HTML5 新增元素
<header> 用于定义文档或节的页眉
<footer> 用于定义文档或节的页脚
<article> 用于定义文档内的文章
<section> 用于定义文档中的一个区域(或节)
<aside> 用于定义与当前页面或当前文章的内容几乎无关的附属信息
<figure> 用于定义一段独立的引用,经常与说明(caption)<figcaption>配合使用,通常用在主文中的图片,代码,表格等。
<figcaption> 用于表示是与其相关联的引用的说明/标题,用于描述其父节点<figure>元素里的其他数据。
<hgroup> 用于对多个<h1>~<h6>元素进行组合
<nav> 用于定义页面上的导航链接部分
<mark> 用于定义高亮文本
<time> 用于显示被标注的内容是日期或时间(24小时制)
<meter> 用于表示一个已知最大值和最小值的计数器
<progress> 用于表示一个进度条
<audio> 定义声音,比如音乐或其他音频流
<video> 定义视频,比如电影片段或其他视频流
HTML5 表单相关元素和属性
input新增type类型
color 用来创建一个允 许用户使用颜色选择器,或输入兼容 CSS 语法的颜色代码的区域
time 生成一个时间选择器
datetime 生成一个 UTC 的日期时间选择器
datetime-local 生成一个本地化的日期时间选择器
date 显示一个日期输入区域,可同时使用日期选择器,结果值包括年、月、日,不包括时间。
month 生成一个月份选择器,它结果值包括年份和月份, 但不包括日期
week 生成一个选择的几周的选择器
email 生成一个 E-mail 输入框
number 生成一个只能输入数字的输入框
range 生成一个拖动条,通过拖动条,使得用户只能输入指定范围,指定步长的值
search 生成一个专门用于输入搜索关键字的文本框
tel 生成一个只能输入电话号码的文本框
url 生成一个 URL 输入框
HTML5 input新增属性
placeholder 主要用在文本框,规定可描述输入字段预期值的简短的提示信息
autocomplete 为了完成表单的快速输入,一般浏览器提供了自动补全的功能选择
autofocus 当为某个表单控件增加该属性后,当浏览器打开这个页面, 这个表单控件会自动获得焦点
list 为文本框指定一个可用的选项列表,当用户在文本框中输 入信息时,会根据输入的字符,自动显示下拉列表提示,供用户从中选择
pattern 用于验证表单输入的内容,通常 HTML5 的 type 属性,比如 email、tel、 number、url 等,已经自带了简单的数据格式验证功能了,加上 pattern 属性后, 验证会更加高效
novalidate 当提交表单时不对其进行验证
required 必需在提交之前填写输入字段
spellcheck 拼写检查,为<input>、<textarea>等元素新增属性
formenctype 规定在发送到服务器之前应该如何对表单数据进行编码
formtarget 带有两个提交按钮的表单,会提交到不同的目标窗口
multiple 一次上传多个文件
maxlength wrap <textarea>新增<br />maxlength:用于规定文本区域最大字符数。<br />wrap:是否包含换号符(soft/ hard)
css3
CSS3 新增选择器
- 兄弟选择器
元素 1 ~ 元素 2
第1个元素之后,所有的元素2都会被选择,且这些元素和第一个元素拥有同一个父元素(两个元素之间不一定要相邻)。
- 属性选择器
E[attribute^=value]
用于选取带有以指定值开头的属性值的元素E[attribute$=value]
用于选取属性值以指定值结尾的元素E[attribute*=value]
用于选取属性值中包含指定值的元素,位置不限,也不限制整个单词
- 伪类选择器
:root
选择文档的根元素,HTML 里,永远是<html>
元素:last-child
向元素添加样式,且该元素是它的父元素的最后一个子元素:nth-child(n)
向元素添加样式,且该元素是它的父元素的第 n 个子元素:nth-last-child(n)
向元素添加样式,且该元素是它的父元素的倒数第 n 个子 元素:only-child
向元素添加样式,且该元素是它的父元素的唯一子元素:first-of-type
向元素添加样式,且该元素是同级同类型元素中第一个元 素:last-of-type
向元素添加样式,且该元素是同级同类型元素中最后一个 元素:nth-of-type(n)
向元素添加样式,且该元素是同级同类型元素中第 n 个元 素:nth-last-of-type(n)
向元素添加样式,且该元素是同级同类型元素中倒数第 n 个元素:only-of-type
向元素添加样式,且该元素是同级同类型元素中唯一的元素:empty
向没有子元素(包括文本内容)的元素添加样式
- 伪元素选择器
:enabled
向当前处于可用状态的元素添加样式,通常用于定义表单的样式或者超链接的样式:disabled
向当前处于不可用状态的元素添加样式,通常用于定义表单的 样式或者超链接的样式:checked
向当前处于选中状态的元素添加样式:not(selector)
向不是selector
元素的元素添加样式:target
向正在访问的锚点目标元素添加样式::selection
向用户当前选取内容所在的元素添加样式
CSS3 新增属性
- 新增背景属性
background-clip
设置背景覆盖范围border-box/paddingbox/content-box
background-origin
设置背景覆盖的起点border-box/paddingbox/content-box
background-size
设置背景的大小cover/contain/长度/百分比
- 新增的字体文本相关属性
text-overflow
设置当文本溢出元素框时处理方式clip/ellipsis
word-wrap
规定单词的换行方式normal/break-word
word-break
规定自动换行的方式normal/break-all/keep-all
- 新增盒模型属性
box-shadow
阴影h-shadow v-shadow <br />blur spread color inset
resize
调整尺寸none/both/horizontal
outline-offset
轮廓的偏移量length/inherit
新增变形动画属性
transform
translate(x,y)
rotate(angle)
scale(x,y)
skew(angleX ,angleY)
transform-origin
表示元素旋转的中心点,默认值为 50% 50%。
-
第一个值表示元素旋转中心点的水平位置,它还可以赋值
left、right、center
、长度、百分比 -
第二个值表示元素旋转中心点的垂直位置,它还可以赋值
top、bottom、 center
、长度、百分比。
3D 变形属性
transform 3D
函数
transform
增加了三个变形函数:
rotateX
:表示元素沿着x
轴旋转。rotateY
:表示元素沿着y
轴旋转。rotateZ
:表示元素沿着z
轴旋转。
-
transform-style
用来设置嵌套的子元素在3D
空间中显示效果。 -
perspective
设置成透视效果,透视效果为近大远小。 -
perspective-origin
设置3D
元素所基于的x
轴和y
轴,改变3D
元素的底部位置,该属性取值同transform-origin
,默认值为50% 50%。
-
backface-visibility
用来设置当元素背面面向屏幕时是否可见,通常用于设置 不希望用户看到旋转元素的背面。
它的属性值有visible
(背面可见,默认值)、 hidden
(背面不可见)两个。
CSS3 的过渡属性
transition-delay
设置过渡的延迟时间transition-duration
设置过渡的过渡时间transition-timing-function
设置过渡的时间曲线transition-property
设置哪条CSS
使用过渡transition
一条声明设置 所有过渡属性
CSS3 的动画属性
animation
@keyframes
定义动画选择器animation-name
使用@keyframes
定义的动画animation-delay
设置动画的持续动画时间animation-timing-function
设置动画的时间曲线animation-iteration-count
设置动画播放次数animation-direction
设置动画反向播放animation-play-state
设置动画播放状态transition
一条声明设置所有动画属性
CSS3 新增多列属性
column-count
设置元素应该被分隔的列数column-width
设置列的宽度columns
一条声明设置列宽和列数column
column-gap
设置列之间的间隔column-span
设置元素应该横跨的列数column-rule-style
设置列之间间隔的样式column-rule-color
设置列之间间隔的颜色column-rule-width
设置列之间间隔的宽度column-rule
一条声明设置列之间间 隔所有属性
CSS3新增单位
px、em、rem、vh、 vw和%
移动端长度单位
使用CSS单位
px、em、rem、vh、 vw
等实现页面布局。
px
:绝对单位,页面按精确像素展示em
:相对单位,基准点为父节点字体的大小,如果自身定义了font-size
按自身来计算(浏览器默认字体是16px
),整个页面内1em
不是一个固定的值。
em
会根据父级元素的大小而变化,但是如果嵌套了多个元素,要计算它的大小,是很容易出错的,这样就引申出了rem
。
rem
:相对单位,可理解为”root em”
, 相对根节点html
的字体大小来计算,CSS3
新加属性。%
:%
百分比,相对长度单位,相对于父元素的百分比值vw、vh、vmin、vmax
主要用于页面视口大小布局
vw:viewpoint width
,视窗宽度,1vw
等于视窗宽度的1%。
vh:viewpoint height
,视窗高度,1vh
等于视窗高度的1%。
vmin:vw
和vh
中较小的那个。vmax:vw
和vh
中较大的那个。
弹性盒模型
弹性盒模型的语法基础概念
任何一个容器都可以指定弹性布局
JavaScript
JavaScript基础
- 外部引入
js
文件:通过<script src="main.js"></script>
- 关键词
- 变量名大小写敏感
- 命名规范
JavaScript数据类型
- 字符串
(String)
- 数字
(Number)
- 布尔值
(Boolean)
- 未定义
(Undefined)
//undefined有两种结果
//1、真的没定义
alert(typeof dada); //undefined
//2、定义了,但是没有放东西进去
var dada;
alert(dada); //undefined
undefined
,表示未定义或只声明未给值的变量
- 对象
(Object)
js
中内置了如下的对象:
Object
是所有JS对象的超类(基类),JS中的所有对象都是继承自Object对象的Array
数组对象 定义数组属性和方法Number
数字对象Boolean
布尔对象 布尔值相关Error
错误对象 处理程序错误Function
函数对象 定义函数属性和方法Math
数学对象Date
日期对象RegExp
对象正则表达式对象 定义文本匹配与筛选规则String
字符串对象 定义字符串属性和方法
算术运算
var y = 3;
强制转换
- 字符串转数字
parseInt() parseFloat() isNaN()
- 数字转为字符串
toString()
赋值运算
- 复合的赋值运算符
+= -= *= /= %=
关系运算
- 关系运算:
> < <= >= != == === ==和=== !=和!==
“=”、“==”、“===”
有什么区别?
=
是赋值符号==
忽略数据类型的判断 是否相等===
数值和数据类型都要相等才判断为相等
逻辑运算
- 逻辑与
&&
- 逻辑或
||
- 逻辑非
!
- 复合逻辑表达式
三元运算
条件运算符?:
三元运算符:(比较表达式)?结果1:结果2
分支循环
程序运行的三大结构:顺序结构、选择结构、循环结构
- 单分支选择:
if
语句 - 双分支选择:
if-else
语句 - 多分支语句:
if-else if-else
语句
switch
语法格式
switch(num){ //表达式
case 1:
//执行代码块1
break; //中断执行,跳出
...
default: //默认,其他都不是的情况下执行
//执行代码块
break;
}
//强调:break非常重要,如果不加break的话,程序会一直继续往下执行;
while
语法格式:
while
循环的特点:不知道具体执行的次数时,使用最合适
while(条件表达式){
//要重复执行的代码段 - 循环体
}
do-while
语法格式:
do{
//循环体
}while(循环条件判断);
do-while
是先执行循环体,再检测循环条件。do-while
能保证循环体至少执行一次。- 其他循环无法保证循环至少执行一次。
for
for(1循环变量初始化;2循环条件判断;4循环变量的修改){
3循环体
}
break和continue
break
退出循环continue
跳过本次循环,继续下一次循环
数组
- 数组定义
var arr = new Array();
var arr = [];
- 字面量方式定义
var arr = ["1","2"];
- 向数组赋值
arr[0] = "1";
arr[1] = "2";
alert(arr[0]+","+arr[1]);
- 数组索引
arr[0]+","+arr[1]
- 数组长度
//语法
arr.length
//最后一个元素的索引
arr.length-1
数组方法
indexOf
数组可以通过indexOf()
来搜索一个指定的元素的位置,如未找到返回 -1
concat
concat()
方法把当前的 数组 和 另一个 数组连接起来,并返回一个新的 数组
var newArr = arr1.concat(arr2,"dada");
push和pop
push()
向数组的末尾添加若干元素,pop()
则把 数组的最后一个元素删除掉
arr.push("a","b");
console.log(arr);
arr.pop();
console.log(arr);
//空数组继续pop不会报错,而是返回undefined
unshift和shift
unshift()
向数组前面添加若干元素,shift()
则把数组的第一个元素删除掉
arr.unshift("a","b");
arr.shift();
slice
slice()
截取数组的部分元素,然后返回一个新的数组
console.log(arr.slice(0,3)); //从索引0开始,到索引3结束,但不包括3
console.log(arr.slice(3)); //从索引3开始到结束
如果不给
slice()
传递任何参数,就会从头到尾截取所有元素。利用这一点,可以很容易的复制一份新的数组
sort
sort()
可以对当前数组排序
var arr = ["b","c","a"];
arr.sort();
arr;//["a","b","c"]
reverse
reverse()
把整个数组的元素给掉个个
join
join()
方法把数组的每个元素用指定的字符串连接起来
var arr = ["a","b","c"];
arr.join("-"); //"a-b-c"
splice
可以从指定的索引开始删除若干元素,然后再从该位置添加若干元素
二维数组
var arr = [[1,2,3],["a","b","c"],"dadaqianduan"];
var x = arr[1][1]; //b
字符串
- 字符串属性
length
-字符串的长度属性 slice()
slice(start[,end]),start--开始索引 end--结束索引
substr()
substr(start[,length]),start:开始,取length个字符
split()
split([separator[,limit]])
,按条件分割字符串,返回数组
indexOf()
在父串中首次出现的位置,从0
开始!没有返回-1
lastIndexOf()
倒序查找
charAt(index)
charAt(index)
指定索引的字符
toLowerCase()
转小写
toUpperCase()
转大写
正则表达式
创建正则表达式
var reg = new RegExp("a","i");
// 将匹配字母a,第二个参数i,表示匹配时不分大小写
元字符
模式修饰符
正则方法
test
方法
检索字符串中指定的值。
exec
方法
该方法用于检索字符串中的正则表达式的匹配,该函数返回一个数组,其中存放匹配的结果。如果未找到匹配,则返回值为 null
。
支持正则的 String方法
js对象
定义对象
//使用new运算符
var obj = new Object();
//字面量
var obj={
name:"dadaqianduan",
age:12,
sex:"男"
}
对象的数据访问
//用.语法
obj.name
//用[]语法
obj["name"]
JSON
json(JavaScript Object Notation)
,是一种轻量级的数据交换格式。
var man = {
"name":"dadaqianduan",
"age":12,
"sex":"男"
};
内置对象
Object
是所有JS对象的超类(基类),JS中的所有对象都是继承自Object对象的Array
数组对象Number
数字对象Boolean
布尔对象Error
错误对象Function
函数对象Math
数学对象Date
日期对象RegExp
对象正则表达式对象String
字符串对象
Math 方法
abs()
绝对值 (去除正负)random()
随机数,0-1
之间的随机数,1
不会出现round()
四舍五入floor(x)
下舍入(向下取整)ceil(x)
上舍入(向上取整)max(x,y)
x 和 y
中的最大值min(x,y)
x 和 y
中的最小值cos(x)
x
的余弦sin(x)
x
的正弦sqrt(x)
返回x
的平方根pow(3,4)
返回3
的4
次方
Date 方法
getFullYear()
返回 年(4位)getMouth()
返回 月(0–11)getDate()
返回 日期getDay()
返回 星期 (0-6)getHours()
返回 小时getMinutes()
返回 分钟getSeconds()
返回秒getTime()
返回1970年1月1日午夜到指定日期(字符串)的毫秒数setFullYear()
设置 年份setMouth()
设置 月setDate()
设置 天setHours()
设置小时setMinutes()
设置 分钟setSeconds()
设置 秒setTime()
使用毫秒的形式设置时间对象
//判断闰年
function runYear(year){
if(year%4==0 && year%100!=0 || year%400==0){
return true;
}
};
面向对象是一种编程思想
- 类是一个抽象的概念
- 对象:具体的事物
- 类是对象的抽象,对象是类的具体实例
- 类不占用内存,对象占用内存空间
- 对象的访问 声明对象
- 遍历对象 –
for in
循环
定义对象
- 字面量创建
- 工厂模式
// 工厂模式中的函数,首字母大写
function Cat(n,c){
return {
name:n,
color:c,
say:function(){
alert("dadaqianduan")
}
}
}
- 构造函数
Javascript
提供了一个构造函数(Constructor)
模式。
所谓”构造函数”,其实就是一个普通函数,但是内部使用了this
变量。
对构造函数使用new
运算符,就能生成实例,并且this
变量会绑定在实例对象上。
构造函数首字母大写
构造函数中的this
,指向的 实例化的对象
function Cat(n,c){
this.name=n;
this.color=c;
}
生成实例对象
var cat1 = new Cat("dadaqianduan","黄色")
// 自动含有一个constructor属性,指向它们的构造函数
实例:自动含有一个
constructor
属性,指向它们的构造函数
alert(cat1.constructor == Cat); //true
Javascript
还提供了一个instanceof
运算符
验证 原型对象 与 实例对象 之间的关系。
var txt = 'dadaqianduan';
alert(txt instanceof String); //false
var age = 123123;
alert(age instanceof Number); //false
var res = /\d/;
alert(res instanceof RegExp); //true
var arr = [];
alert(arr instanceof Array); //true
原型和原型链
构造函数都有一个
prototype
属性,指向 另一个对象 。这个对象的 所有属性和方法,都会被构造函数的实例继承。
所有的函数都是 Function
的实例。
在构造函数上都有一个 原型 属性prototype,prototype
也是一个对象;这个对象上有一个 constructor
属性,该属性指向的就是构造函数。
实例对象上有一个_proto_
属性,该属性也指向原型对象,该属性不是标准属性,不可以用在编程中,该属性用于浏览器内部使用。
constructor
constructor
是构造函数 创建的实例的属性,该属性的作用是 指向 创建当前对象的 构造函数。
son.constructor == parent; // true
每个原型都有一个constructor
属性,指向该关联的构造函数。
function Person() {
}
console.log(Person===Person.prototype.constructor) //true
关系图:
区分一下普通对象和函数对象
function f1(){};
var f2 = function(){};
var f3 = new function(){};
var o1 = {};
var o2 = new Object();
var o3 = new f1();
console.log(typeof Object); //function
console.log(typeof Function);//function
console.log(typeof f1) //function
console.log(typeof f2) // function
console.log(typeof f3) //function
console.log(typeof o1) //object
console.log(typeof o2) //object
console.log(typeof o3)// object
- 在
JavaScript
中,原型是一个对象,原型的作用是 实现对象的继承。 - 在
JavaScript
中的所有函数对象中,都存在一个属性,prototype
,该属性对应当前对象的原型。 - 所有的
JavaScript
对象,都存在一个_proto_
属性,_proto_
属性指向实例对象的构造函数的原型。
var p = new Person(); // 实例对象
console.log(p._proto_ === Person.prototype); // true
p
是实例对象,Person
是p
的构造函数。p
的_proto_
属性 指向 构造函数Person
的原型。
js
是如何通过原型进行继承的:
var parent = function(name) {
this.name = name;
}
parent.prototype.getName = function() {
return this.name;
}
var son = new parent("dadaqianduan");
console.log(son.getName()); // dadaqianduan
son
继承了parent
的原型中的函数属性getName
原型链
除了
Object
的prototype
的原型是null
外,所有的对象 和 原型 都有自己的原型,对象的原型 指向 原型对象。
在层级多的关系中,多个原型层层相连 则 构成了 原型链。
在查找一个对象的属性时,如当前对象找不到该属性,就会沿着原型链一直往上查找,直到找到为止,如果到了原型链顶端,没找到,则返回undefined
原型
- 所有引用类型都有一个
__proto__
属性 - 所有函数都有一个
prototype
属性 - 所有引用类型的
__proto__
属性指向它构造函数的prototype
构造函数和实例原型之间的关系:
Person
(构造函数) 的 prototype
指向 Person.prototype
__proto__
每个对象,除null
外,都有的属性叫__proto__
,这个属性会指向该对象的原型。
function Person() {
}
var person = new Person();
console.log(person.__proto__ === Person.prototype); // true
关系图:
关系图:
关系图:
梳理:
写一个构造函数Person
,一般构造函数区别与普通函数要求首字母大写:
function Person(){}
prototype
原型
原型 是 一个对象,在原型prototype
上定义的属性,通过“继承”,实现 实例 也有这个属性。
继承 是在 new
操作符内部实现的。
构造函数 内部 有个
prototype
的属性,通过这个属性就能访问到 原型。
Person
是构造函数,Person.prototype
是原型。
- 实例
有构造函数,可以在原型上创建可继承的属性,通过new
操作符创建实例:
function Person(){}
person = new Person()
da = person instanceof Person // 检查person是否是Person的实例
da // true
// 继承
function Person() {}
Person.prototype.name = 'dadaqianduan.cn'
person = new Person()
da = person.name // 实例继承的属性
da // 'dadaqianduan.cn'
proto
实例通过_proto_
访问到原型。
function Person() {}
Person.prototype.name = 'dadaqianduan.cn'
person = new Person()
da = person.__proto__ === Person.prototype
da // true
constructor
构造函数
原型也可以通过
constructor
访问到构造函数
function Person() {}
Person.prototype.name = 'dadaqianduan.cn'
person = new Person
da = Person.prototype.constructor === Person
da // true
小结
- 所有引用类型(函数,数组,对象)都拥有
__proto__
属性。 - 所有函数拥有
prototype
属性。 - 每个实例对象(
Object
)都有一个私有属性,为__proto__
指向它的构造函数的原型对象(prototype
)。该原型对象也有一个自己的原型对象__proto__
,层层向上直到一个对象的原型对象为null
,null
没有原型,并作为这个原型链中的最后一个环节。
常用的JavaScript设计模式
百度百科:
设计模式(Design pattern)
是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结。
使用设计模式是为了可重用代码、让代码更容易被他人理解、保证代码可靠性。 毫无疑问,设计模式于己于他人于系统都是多赢的;设计模式使代码编制真正工程化;设计模式是软件工程的基石脉络,如同大厦的结构一样。
单体模式
单体是一个用来划分 命名空间并将一批相关的属性和方法组织在一起的对象,如果它可以被实例化,那么它只能被实例化一次。
特点:
(1)可以来划分命名空间,从而清除全局变量所带来的危险。
(2)利用分支技术来来封装浏览器之间的差异。
(3)可以把代码组织的更为一体,便于阅读和维护。
工厂模式
工厂模式的定义:
提供创建对象的接口,意思就是根据领导(调用者)的指示(参数),生产相应的产品(对象)。
- 创建一个对象常常需要复杂的过程,所以不适合在一个复杂的对象中。
- 创建对象可能会导致大量的重复代码,也可能提供不了足够级别的抽象。
工厂就是把成员对象的创建工作转交给一个外部对象,好处在于消除对象之间的耦合(也就是相互影响)。
分类:
简单工厂模式:使用一个类,通常为单体,来生成实例。
复杂工厂模式定义:将其成员对象的实列化推到子类中,子类可以重写父类接口方法以便创建的时候指定自己的对象类型。
父类只对创建过程中的一般性问题进行处理,这些处理会被子类继承,子类之间是相互独立的,具体的业务逻辑会放在子类中进行编写。
应用场景:
以下几种情景下工厂模式特别有用:
(1)对象的构建十分复杂;
(2)需要依赖具体环境创建不同实例;
(3)处理大量具有相同属性的小对象。
单例模式
单例模式定义了一个对象的创建过程,此对象只有一个单独的实例,并提供一个访问它的全局访问点。也可以说单例就是保证一个类只有一个实例,实现的方法一般是先判断实例存在与否,如果存在直接返回,如果不存在就创建了再返回,这就确保了一个类只有一个实例对象。
使用闭包方式来实现单例:
var single = (function(){
var unique;
function getInstance(){
// 如果该实例存在,则直接返回,否则就对其实例化
if( unique === undefined ){
unique = new Construct();
}
return unique;
}
function Construct(){
// ... 生成单例的构造函数的代码
}
return {
getInstance : getInstance
}
})();
unique
是返回对象的引用,而getInstance
是静态方法获得实例。Construct
是创建实例的构造函数。
可以通过 single.getInstance()
来获取到单例,并且每次调用均获取到同一个单例。这就是 单例模式 所实现的效果。
应用场景:
- 单例模式是一种常用的模式,有一些对象我们往往只需要一个,比如全局缓存、浏览器的
window
对象。 - 借助单例模式,可以把代码组织的更为一致,方便阅读与维护。
函数
函数的定义
// 使用关键字function 定义函数
// 定义函数,吃饭
function dada(){
console.log("点餐");
console.log("拿筷子");
console.log("吃东西");
}
局部变量和全局变量
- 变量的作用域
- 函数体内的变量:局部变量,仅在函数体内可以使用
- 函数体外的变量:全局变量,对全局可见
- 局部变量
function da(){
var dadada = "dada";//局部变量
alert(dadada);
}
da(); //调用
alert(dadada); //报错访问不到,函数体外对dadada不可见
- 全局变量
var da = "我是全局变量";
function home(){
var da = "我是局部变量";
alert(da);
}
home();
-----------------------
var a=3; //全局
function da(){
alert(a); //3
var b=5;
alert(b);//5
}
da();
console.log(b); //报错,访问不到
典型错误,不使用var
声明的变量也是全局变量(不建议这样用)
function dada(){
da = "123"; //全局变量
}
dada();
alert(da);
返回值
return
的含义
//理解返回值
function getNum(){
return 2; //return的作用,将函数的结果返回给当前函数名
}
var result = getNum(); //如果希望返回值保存,就放在变量中;
console.log(result); //2
return
使用方法
return
只能返回一个数据- 如果函数中没有
return
,则返回undefined
return
可以用来结束一个函数
function Fun(){
console.log("helloweb");
return;
console.log("我还会执行吗?");
}
Fun();
function fn(){
for(var i=0;i<10;i++){
if(i == 3){ //循环3次就return
break;
}
console.log("谁最帅!"); //打印3次
}
return "看return会不会执行我"; //return不执行,break执行
}
匿名函数
//使用函数表达式定义函数
//say本质上是一个指向函数对象的变量,我们称为函数变量
var say = function(){
console.log("hello");
};
say();
var oBtn = document.getElementById("box");
oBth.onclick = function(){
alert("你点击我啦");
}
自运行函数
示例:
function fn(){
//这里是代码
}
fn(); //运行fn函数
----------------------
var fn = function(){
//这里是代码
}
fn(); //运行fn函数
---------------------
//(fn)() 等价于 fn()
(function(){
//这里是代码
})()
闭包
闭包 (closure)
有权访问另外一个函数作用域中的变量的函数。
创建闭包的常见方式有:
- 在一个函数内部创建另外一个函数,并且把这个函数
return
出去。 - 用函数为元素绑定事件,当事件发生时,还可以操作该函数中的变量。
特性
- 可以读取其它函数内部的变量
- 让这些变量的值始终保持在内存中
示例:
//方式1----函数内部return一个函数
function run(){
var a=10;
return function(){
a++;
console.log(a);
};
};
var b=run();
//alert(b); //b是一个函数
b();//可以访问另外一个作用域中变量的函数
//方式2--函数内部为绑定事件
function addClick(){
var txt="abcd";
document.getElementById('box').onclick=function(){
alert(txt);
}
};
addClick();
//方式3--函数内部将变量作为回调函数的参数
function play(num,fn){
if(num>10){
return fn && fn(num);
};
};
var ss=play(20,function(n){
return n+1;
});
console.log(ss);
BOM
BOM概述
BOM(browser object model)
浏览器对象模型
BOM
提供了独立于内容而与浏览器窗口进行交互的对象、载入页面的相关信息,其核心对象是window
对象
BOM
没有相关标准,每个浏览器都定义了自己的属性,并且,都有其自己对BOM
的实现方式
W3C
虽然没有为BOM
统一制定标准,但是其中的窗口对象、导航对象等,因功能趋同,实际上已经成为默认的标准
window方法
alert()
提示框confirm()
带有确认 取消 按钮的提示框prompt()
带有可输入内容的文本域的提示框setInterval()
间隔定时器,可按照指定的周期(以毫秒计)来调用函数或计算表达式setTimeout()
超时定时器,在指定的毫秒数后调用函数clearInterval()
清除间隔定时器clearTimeout()
清除超时定时器requestAnimationFrame
帧定时器
frames [ ]
框架集
把浏览器窗口分成几个窗框,每个窗框同时取得多个URL
地址,显示不同网页内容。
history 历史记录
window.history.go(1)
前进(跳转)window.history.go(-1)
后退(跳转)window.history.forward()
前进window.history.back()
后退
location 定位
window.location.href='http://www.baidu.com/'
页面跳转window.location.reload()
页面重载
navigator 导航
window.navigator.userAgent
浏览器类型、版本、操作系统类型、浏览器引擎类型等信息
screen 屏幕
window.screen.width
返回当前屏幕宽度(分辨率值) window.screen.height
返回当前屏幕高度(分辨率值)
document 文档
window
的document
的属性,代表所有html
的元素,这部分是js
主要操作的部分,因此这部分必须规范,才能进行统一开发。因此,W3C
将这部分进行了规范—DOM
标准。
DOM
DOM(document object model )
文档对象模型,定义了表示和修改文档所需的对象、行为和属性,以及这些对象之间的关系。
DOM对象方法
getElementById(id)
通过id
获取DOM
对象(对象)getElementsByTagName(tag)
通过标签获取DOM
对象(“类似数组”对象)getElementsByName(name)
通过name
获取DOM
对象(“类似数组”对象)getElementsByClassName(class)
通过class
获取DOM
对象(IE8以下不支持)
操作DOM间的关系
createElement(tag)
创建元素removeChild(对象)
删除元素appendChild(对象)
插入元素replaceChild(替换对象,被替换对象)
替换元素insertBefore(对象,目标对象)
前部插入
appendChild replaceChild insertBefore
都具有移动对象的功能
节点属性:
父节点 parentNode
第一级所以子节点 childNodes
第一个子节点 firstChild
最后一个子节点 lastChild
前一个兄弟节点 previousSbiling
后一个兄弟节点 nextSibling
克隆节点:
cloneNode( 布尔值 )
true:复制本节点以及所有子节点
false:只复制节点本身
DOM节点属性
setAttribute("属性名",属性值)
设置属性getAttribute( 属性名 )
获取属性removeAttribute( 属性名 )
删除属性:hasAttributes(属性名)
判断属性是否存在(返回ture/false
)
事件
var oDiv=document.getElementById('box');
oDiv.onclick=function(){
alert('hello world');
};
addEventListener( )
增加事件监听removeEventListener( )
删除事件监听
事件分类
window
事件
onload
加载(某个页面或图像被完成)onunload
用户退出页面onresize
窗口或框架被调整尺寸onscroll
滚动条事件
- 鼠标事件
onclick 鼠标点击
ondblclick 鼠标双击
onmousedown 鼠标按键按下
onmouseup 鼠标按键被松开
onmouseout 鼠标从某元素移开
onmouseover 鼠标被移到某元素之上
onmouseenter 鼠标进入某元素
onmouseleave 鼠标离开某元素
onmousemove 鼠标移动
oncontextmenu 右键菜单
- input事件
onblur 元素失去焦点。
onfocus 元素获得焦点。input输入框
onchange 内容改变时触发。
- 键盘事件
onkeydown 按键按下
onkeypress 按键按下并释放
onkeyup 按键释放
- form事件
onreset 表单重置(重置按钮)
onsubmit 表单提交(form内有text被聚焦,直接回车可触发onsubmit)
事件对象
获取事件数据,不同的事件会有不同数据
oDiv.onclick=function(ev){
//ev就是事件对象
}
事件流
- 对象的默认行为
- 阻止默认行为:
event.preventDefaut()
事件流
事件流方向:捕获 → 事件目标→冒泡
- 事件捕获
- 事件目标
- 事件冒泡 与 阻止事件冒泡
事件目标
ev.targrt
ev.target.nodeName
ev.target.tagName
事件委派(delegate)
原理: 将事件绑定在父级上,利用事件冒泡原理,通过判断事件的“目标元素”来触发父级上绑定的事件
作用
- 不用分别为子元素绑定事件
- 为未知元素绑定事件
事件监听
可以为一个元素,同时绑定多个事件
obj.addEventListener(事件,回调函数,冒泡/捕获) ;
btn.addEventListener("click",function(ev){ //ev 事件对象
alert('dadaqianduan');
},false) //false 冒泡阶段
jQuery
一款轻量级的js库
丰富的DOM选择器
简单的事件操作
重新封装方法,让操作DOM属性更简单
链式操作
丰富的动画效果
Ajax操作支持
浏览器兼容
插件扩展开发,可扩展性强
不能向后兼容
插件兼容性
多个插件冲突
jQuery 选择器
id
选择器
$('#box')
class
选择器
$('.box')
- 标记选择器
$('p')
*
代表所有标签
属性选择器
[attribute]
匹配包含给定属性的元素[attribute=value]
匹配给定的属性是某个特定值的元素[attribute!=value]
匹配给定的属性不是某个特定值的元素[attribute^=value]
匹配给定的属性是以某些值开始的元素[attribute$=value]
配给定的属性是以某些值结尾的元素[attribute*=value]
匹配给定的属性是以包含某些值的元素
位置选择器
:first
匹配第一个元素
:last
获取最后一个元素
:not
去除所有与给定选择器匹配的元素
:even
匹配所有索引值为偶数的元素,从 0 开始计数
:odd
匹配所有索引值为奇数的元素,从 0 开始计数
:eq
匹配一个给定索引值的元素
:gt
匹配所有大于给定索引值的元素
:lt
匹配所有小于给定索引值的元素
后代选择器
$("选择器1 选择器2 ……")
子代选择器
$("选择器1>选择器2>……")
选择器对象
$("选择器").each(function(index){this}) 选择器对象的遍历
$("选择器").find() 找前面选择器匹配到的元素的子元素
$("选择器").not() 在前面选择器匹配到的元素中去除某个或某多个
$("选择器").add() 在前面选择器中在追加节点
子元素
:first-child 匹配第一个子元素
:last-child 匹配最后一个子元素
:first-of-type 选择所有相同的元素名称的第一个兄弟元素
:last-of-type 选择所有相同的元素名称的最后一个兄弟元素
:nth-child 匹配其父元素下的第N个子或奇偶元素
:nth-last-child() 选择所有他们父元素的第n个子元素。计数从最后一个元素开始到第一个
:nth-last-of-type() 选择的所有他们的父级元素的第n个子元素,计数从最后一个元素到第一个
:nth-of-type() 选择同属于一个父元素之下,并且标签名相同的子元素中的第n个
:only-child 如果某个元素是父元素中唯一的子元素,那将会被匹配
:only-of-type 选择所有没有兄弟元素,且具有相同的元素名称的元素。
表单
:input 匹配所有 input, textarea, select 和 button 元素
:text 匹配所有的单行文本框
:password 匹配所有密码框
:radio 匹配所有单选按钮
:checkbox 匹配所有复选框
:submit 匹配所有提交按钮
:image 匹配所有图像域
:reset 匹配所有重置按钮
:button 匹配所有按钮
:file 匹配所有文件域
:hidden 匹配所有隐藏域
表单对象属性
:enabled 匹配所有可用元素
:disabled 匹配所有禁用元素
:checked 匹配所有选中的被选中元素
:selected 匹配所有选中的option元素
DOM操作
- 查找获取
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容
val() - 设置或返回表单字段的值
- 内部插入
append() 向每个匹配的元素内部追加内容
appendTo() 把所有匹配的元素追加到另一个指定的元素集合中
prepend() 向每个匹配的元素内部前置内容
prependTo() 把所有匹配的元素前置到另一个、指定的元素集合中
- 外部插入
after() 在每个匹配的元素之后插入内容
before() 在每个匹配的元素之前插入内容
insertAfter() 把所有匹配的元素插入到另一个、指定的元素集合的后面
insertBefore() 把所有匹配的元素插入到另一个、指定的元素集合的前面
- 包裹
wrap() 把所有匹配的元素用其他元素的结构化标记包裹起来
unwrap() 这个方法将移出元素的父元素。
wrapAll() 将所有匹配的元素用单个元素包裹起来
wrapInner() 将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来
- 替换
replaceWith() 将所有匹配的元素替换成指定的HTML或DOM元素
replaceAll() 用匹配的元素替换掉所有 selector匹配到的元素
- 删除
empty() 删除匹配的元素集合中所有的子节点
remove() 从DOM中删除所有匹配的元素
- 克隆
clone() 克隆匹配的DOM元素并且选中这些克隆的副本
JQuery 事件
页面载入
$(document).ready(function(){
})
//简写方式
$(function(){
})
事件绑定
$("#box").on("click",function(){
/**/
})
$("#box").off("click,mousemove");
容器适应
获取元素的宽高有以下几种方法:
$(选择器).width() | innerWidth() | outerWidth()
$(选择器).height() | innerHeight() | outerHeight()
innerWidth()和innerHeight()是指元素里面内容的宽高加上内边距的宽高;
outerWidth()和outerHeight()是指元素里面内容的宽高加上内边距的宽高和边框;
获取窗口的宽高的方法如下:
$(window).width()
$(window).height()
标签样式操作
$(选择器).css (样式属性名[,值]) 方法设置或返回被选元素的一个或多个样式 属性
$(选择器).addClass(类别名) 增加类别样式
$(选择器).removeClass(类别名) 去除类别样式
$(选择器).toggleClass(类别名) 交替使用类别样式:有这个类别样式就去除,没有就追加;
滑动
show() 显示元素
hide() 隐藏元素
slidDown() 向下滑动显示
slideUp() 向上滑动收起隐藏
slideToggle() 交替滑动状态
fadeIn() 淡入
fadeOut() 淡出
fadeTo() 动画到指定透明度
fadeToggle() 交替淡出、淡入状态
自定义动画
animate() 自定义动画
stop() 停止所有在指定元素上正在运行的动画
delay() 设置一个延时来推迟执行队列中之后的项目
finish() 停止当前正在运行的动画,删除所有排队的动画,并完成匹配元素所有的动画
AJAX
$.ajax()
$.get() 通过远程 HTTP GET 请求载入信息
$.post() 通过远程 HTTP POST 请求载入信息
$.getJSON() 通过 HTTP GET 请求载入 JSON 数据
工作原理
AJAX = 异步 JavaScript 和 XML
在浏览器中输入
url
地址请求服务器时,是通过Ajax
发送http
请求给服务器,服务的响应结果也是先返回给Ajax
,先Ajax
处理之后在返回给浏览器显示在页面。
XMLHttpRequest对象
//第一步:
xhr = new XMLHttpRequest();
//第二步
xhr.open("post","test.php");
//第三步:
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//第四步:
xhr.send("a=1&b=2");
//第五步:
xhr.onreadystatechange=function(){
if(xhr.status==200 && xhr.readyState==4){
var result=xhr.responseText;//获取到结果
alert(result);
}
}
XML和HTML的区别
get() 和post()
$.get(url,data,callback,dataType)
$.post(url,data,callback,dataType)
AJAX
工作原理
Ajax
的基本格式如下:
$.ajax({
url:'请求的资源',
type:'请求方式get|post',
data:'发送数据 名=值&名=值',
dataType:'回传值的类型',
success:function(res){ res接收返回值
}
})
HTTP
HTTP
(超文本传输协议)是一种通信协议,它允许将超文本标记语言(HTML
)文档从Web
服务器传送到客户端的浏览器。
HTTP消息结构
request line
请求行:第一行必须是请求行,用来说明请求类型、要访问的资源以及使用的HTTP
版本。
header
请求头:用来说明服务器要使用的附加信息。
blank line
空白行:请求头部与请求体之间必须有一个空白行,必不可少
body
请求体:也叫请求正文,可以添加任意的其他数据
状态行:
Host 接受请求的服务器地址,可以是:IP:端口 或 域名
User-Agent 发送请求的应用程序名称(浏览器信息)
Connection 指定与连接相关的属性,如:Connection:Keep-Alive
Accept-Charset 客户端可以接受的编码格式
Accept-Encoding 客户端可以接受的数据压缩格式
Accept-Language 客户端可以接受的语言
referer 当前请求来自哪个链接(防盗连)
content-type 请求的文件类型
cookie 该网站相关的会话信息
url请求过程
- 首先客户端与服务器需要建立连接。
- 建立连接后,客户端发送一个请求给服务器,请求方式的格式为:统一资源标识符(
URL
)、协议版本号,客户端信息和可能的内容。 - 服务器接到请求后,给予相应的响应信息,其格式为一个状态行,包括信息的协议版本号、一个成功或错误的代码(
status Code
状态码),后边服务器信息、实体信息和可能的内容。 - 客户端接收完, 服务器所返回的信息后,与服务器断开连接。
如果在以上过程中的某一步出现错误,那么产生错误的信息将返回到客户端。对于用户来说,这些过程是由
HTTP
自己完成的,用户只要用鼠标点击,等待信息显示就可以了。
预加载
预加载:将所有所需的资源提前请求加载到本地,后面在需要使用就直接从缓存中存取资源
- 使用
image
对象
<img src="" style="display:none"/>
- 使用
image
对象
var image = new Image();
image.src="";
- 使用
XMLHttpRequest
对象
xmlhttprequest.onreadystatechange=callback;
xmlhttprequest.onprogress=progressCallback;
xmlhttprequest.open("GET",http://xx.jpg,true);
xmlhttprequest.send();
function callback(){
if(xmlhttprequest.readyState=4 && xmlhttprequest.status==200){
var responseText=xmlhttprequest.responseText;
}else{
console.log("Request was unsuccessful" + xmlhttprequest.status);
}
}
function progressCallback(e){
c=e||event;
if(e.lengthComputable){
console.log("Received"+e.loaded+"of"+e.total+"bytes");
}
}
懒加载
首屏加载,技术上显示要用的技术就是图片懒加载,即到可视区域再加载。
性能优化
JavaScript代码优化
- 代码与结构分离
- 样式与结构的分离
- 数据与代码分离
AMD:Asynchronous Module Definition
,即异步模块加载机制。CMD:Common Module Definition
,即通用模块定义规范- 导出
(export)
与导入(import)
两个模块
提升文件加载速度
- 合并
JavaScript
代码,尽可能少的使用script
标签。 - 无堵塞加载
JavaScript
。 - 动态创建
script
标签来加载
webpack
webpack
是一个module bundler
(模块构建工具),由于 JavaScript
应用程序的复杂性不断增加,构建工具已成为 web
开发中不可或缺的一部分。它帮助我们去打包、编译和管理项目需要的众多资源文件和依赖库。
webpack
支持CommonJS
、AMD和ES6
模块系统,并且兼容多种JS
书写规范,可以处理模块间的依赖关系,所以具有更强大的JS
模块化的功能,它能压缩图片,对CSS、js
文件进行语法检查、压缩、编译打包。
webpack的特点
- 可以很好的用于单页应用
- 同时支持
require()
和import
模块语法 - 允许非常前沿的
code splitting
(代码分割) 特性 - 热加载可以让
React、Vue.js
和其它类似框架的本地开发更快 - 它是目前最受欢迎的构建工具
webpack的缺点
- 不适合
web
开发的初学者 - 对于
CSS
、图片和其它非JS
资源文件时,需要先混淆处理 - 文档不够完善
- 变化很大,不同版本的使用方法存在较大差异
安装
- 全局安装:
//安装全局webpack
npm install webpack -g
//安装全局webpack-cli
npm install webpack-cli -g
webpack基本应用
SPA(single page web application)
单页应用程序,是webpack
打包的典型应用
示例,主要的几个部分组成:
index.html 主文件
JS文件 可能有多个JS文件,可通过webpack合并打包为一个文件
CSS文件 可能有多个CSS文件,可通过webpack合并打包为一个文件
图片 可通过webpack压缩优化
示例:
//a.js
var run=function(){
console.log("aaa");
};
//node CommonJS模块
//module.exports.run=run;
//ES6语法
export default {run};
//b.js
var play=function(arg){
console.log(arg);
};
//node CommonJS模块
//module.exports.play=play;
//ES6语法
export default {play};
//index.js
//node CommonJS 引入js模块
//var a=require("./a.js");
//var b=require("./b.js");
//ES6 引入js模块
import a from "./a.js";
import b from "./b.js";
var txt = "hello world";
a.run();
b.play(txt);
dist
文件夹(存放打包后的文件,可以先不创建,打包时可以自动创建)-dis,dist,bulit
打包:
webpack --mode development
配置文件入门
默认的配置文件名为:webpack.config.js
核心概念
一个配置文件的基本结构如下:
//配置项
module.exports={
//入口
entry:".....",
//输出配置
output:{......},
//模块
module: {......},
//解析
resolve:{......},
//插件(数组)
plugins:[......],
//开发服务器
devServer:{......}
};
entry 入口 定义入口文件,默认入口文件:./src/index.js
output 输出 定义出口文件,默认出口文件:./dist/main.js
resolve 解析 路径映射、省略后缀名等
module 模块 定义不同loader,让 webpack 能够处理非 JavaScript 模块
plugins 插件 扩展webpack功能
devServer 开发服务器 用于配置webpack-dev-server选项
设置配置文件自动完成:
// webpack是基于node构建的,只支持CommonJS模块
module.exports={
//入口配置
entry:'./src/js/main.js',
//出口配置
output:{
path:__dirname +'/dist', //输出目录 __dirname:本文件所在硬盘路径(node全局变量)
filename:'js/main.js' //文件名称(可以有子目录)
}
};
修改webpack.json
文件
在webpack.json
中的"scripts"
下增加:
"scripts": {
"dev": "webpack --mode development",
"build": "webpack --mode production"
},
执行打包
npm run dev
entry 和 output
-
entry
入口配置 是指页面中的入口文件。也就是打包从哪个文件开始。默认入口文件:./src/index.js
-
output
出口配置 是指生成的文件输出到哪个地方去,默认出口文件:./dist/main.js
,主要有以下属性:
path 输出路径
filename 输出文件名
示例:
//入口
entry: {
index: './src/js/main.js', }, //输出 output: {
path: __dirname + "/dist",//打包后的文件存放的地方
filename:"main.js"//打包后输出的文件名
},
module
webpack
只能打包js
文件(只理解 JavaScript
语法),无法识别其他语法的文件,如果要让webpack
打包其他文件,首先需要让webpack
识别不同文件,这就需要特别的模块,这种模块统称为loader
。
loader
分类
转换编译 script-loader,babel-loader,ts-loader,coffee-loader
处理样式 style-loader,css-loader,less-loader,sass-loader,postcss-loader
处理文件 raw--loader,url-loader,file-loader
处理数据 csv-loader,xml-loader
处理模板语言 html-loader,pug-loader,jade-loader,markdown-loader
清理和测试 mocha-loader,eslint-loader
常用loader
css-loader 解析css语句
style-loader 将css-loader解析后的文本,添加<style>标签 babel-loader 将ES6+、JSX语法转成ES5低版本语法 url-loader url-loader对未设置或者小于limit byte设置的图片以base64的格式进行转换 对于大于limit byte的图片用file-loader进行解析 file-loader 解析项目中的url引入(包括img的src和background的url) 修改打包后文件引用路径,使之指向正确的文件 less-loader less编译器 vue-loader Vue也推出了自己的vue-loader,可以方便的打包 .vue文件 的代码 在vue-cli(快速构建单页应用的脚手架)中得到应用。
css loader
//index.js
import a from "./a.js";
import b from "./b.js";
var txt = "hello world";
a.run();
b.play(txt);
//打包css文件
import "./style.css"; //注意:是相对路径
安装loader
(loader
也是依赖包,需要安装)
npm install css-loader --save-dev
npm install style-loader --save-dev
在module
中定义ccs
模块相关的配置:
module: {
rules: [
{
test: /.css$/, //正则
//把css添加到html的style标签里(style-loader要先加载)
loader: ['style-loader','css-loader'], //loader或者use
exclude: /node_modules/, //正则 排除node_modules目录
}
]
},
babel loader
babel
是一个 js
编译器,它通过语法转换器支持最新版本的 JavaScript
(包括JSX、TypeScript
等新语法)。 这些插件允许你立刻使用新语法,无需等待浏览器支持。
使用Babel
首先要配置 .babelrc
文件,该文件用来设置转码规则和插件(json
格式),存放在项目的根目录下。
tips
:在linux
系统中,rc
结尾的文件通常代表运行时自动加载的文件、配置等等。
在.babelrc
配置文件中,主要是对预设(presets
) 和 插件(plugins
) 进行配置。.babelrc
配置文件一般为如下:
{
"presets": [
["env",{"modules":false}] //modules是配置项
],
"plugins": [
[ "transform-runtime",{"polyfill":false}] //polyfill是配置项
]
}
预设 对
js
最新的语法糖进行编译,并不负责转译新增的api
和全局对象。
插件 控制如何转换代码,
babel
默认只转换新的js
语法,而不转换新的API
plugins
插件(plugins
)可以扩展webpack
的功能,loader
不能做的处理都能交给plugin
来做。
如:HtmlWebpackPlugin
插件简化了HTML
文件的创建,可以通过模板文件,生成一个HTML
文件
resolve
resolve
(译:解析)配置webpack
如何寻找模块对应的文件。
alias (译:别名)通过别名将原来导入路径映射成一个新的导入路径
extensions (译:扩展)数组 导入模块时,可以省略的文件后缀名
resolve: {
alias: {
"@": path.join(__dirname,"./src") //将项目根目录下的src目录,映射为 @
},
extensions:[".js", ".json"]
}
其他配置项示例:
devtool 是否生成以及如何生成sourcemap
devserver 开启一个本地开发服务器
watch 监听文件变化并自动打包
watchoption 用来定制watch模式的选项
performance 打包后命令行如何展示性能提示,如果超过某个大小是警告还是报错
webpack-dev-server
webpack-dev-server
是一个小型的web
服务器,可以自动监视项目文件的变化,自动刷新浏览器,其HMR
(Hot Module Replacement
热模块替换)方式只替换更新的部分,而不是重载页面,大大提高了刷新效率。
需要本地安装 webpack和webpack-cli
npm install webpack --save-dev
npm install webpack-cli --save-dev
npm install webpack-dev-server --save-dev
webpack.config.js
配置文件:
let path=require("path");
//HtmlWebpackPlugin插件
let HtmlWebpackPlugin=require('html-webpack-plugin');
let htmlPlugin=new HtmlWebpackPlugin({
filename:"index.html", //生成的新文件
template:__dirname+"/src/index_temp.html", //模板文件
minify:{ //压缩
removeComments:true, //刪除注释
collapseWhitespace:true //合并空格
},
});
//配置项
module.exports = {
//输入
entry:'./src/js/main.js',//主入口文件
//输出
output: {
path: __dirname + "/dist", //打包后的文件存放的地方
filename:"main.js" //打包后输出的文件名
},
//模块
module: {
rules: [
{
test: /.css$/, //正则 解析css文件
//把css添加到html的style标签里(style-loader要先加载)
use: ['style-loader','css-loader'],
exclude: /node_modules/, //正则 必须要写exclude!!
},
{
test: /\.js$/,
use: 'babel-loader',
exclude: /node_modules/, //正则 必须要写exclude!!
},
]
},
//插件
plugins:[
htmlPlugin
],
//解析
resolve: {
alias: {
"@": path.join(__dirname,"./src") //将项目根目录下的src目录,映射为 "@"
},
extensions:['.js', '.json']
},
//开发服务器
devServer: {
inline:true, //支持dev-server自动刷新
port:"8080", //端口
open:true, //自动打开默认浏览器
},
}
webpack-dev-serve.cmd
是定义在.bin
目录中的
"scripts": {
"dev": "webpack-dev-server --hot",
"build": "webpack --mode production"
}
运行
npm start
vue
MVC模式
MVC
模式是移动最广泛的软件架构之一,把应用程序强制性地划分为三部分:模型(Model
)、视图(View
)和控制器(Controller
)。
MVVM模式
MVVM
模式是把MVC
模式的Controller改成ViewModel
。View
的变化会自动更新ViewModel,ViewModel
的变化也会自动同步到View
上显示。
基础语法
示例:
el 把 Vue 实例挂载到DOM元素上,通过id绑定html元素
data 数据对象,Vue实例的数据(注意:数据不要与methods中的方法重名)
methods 事件对象,包含事件所要触发的函数(注意:方法名不要与data中的数据重名)
computed 计算属性
watch 监听器
directives 自定义指令
钩子(hook)函数(8个) hook(钩子)函数,不同生命周期引发的动作
路由钩子函数(3个) 路由组件在不同状态时触发
components 组件容器
template 定义模板,可以是字符串,也可以是”#“选择器
props 用于接收来自父组件的数据
router 路由
store vuex 状态
实例属性/方法
vm.$el Vue 实例使用的根 DOM 元素
vm.$data Vue的data配置项
vm.$options 用于当前 Vue 实例的初始化选项
vm.$props 当前组件接收到的 props 对象
vm.$parent 父实例(如果当前实例有的话)
vm.$root 当前组件树的根 Vue 实例
vm.$children 当前实例的直接子组件
vm.$refs 原生DOM元素或子组件注册引用信息
vm.$slots 用来访问被插槽分发的内容
vm.$router 全局路由(vue-router插件)
vm.$store vuex 状态对象(vuex插件)
方法
vm.$emit() 子组件可以使用 $emit 触发父组件的自定义事件
vm.$set() Vue.set的别名
设置对象的属性, 这个方法主要用于避开 Vue 不能检测属性被添加的限制
vm.$watch 侦听数据变化
vm.$on() 监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。
vm.$mount 可以使用 vm.$mount() 手动挂载(Vue 实例化时没有 el 选项)
vm.$destroy 完全销毁一个实例。清理它与其它实例的连接,解绑它的全部指令及事件监听器。
触发 beforeDestroy 和 destroyed 的钩子。
属性绑定指令
v-bind 动态改变dom标签上的属性<br />v-bind :class="" 简写 :class=""
生命周期
4个阶段:创建→挂载→更新→销毁
beforeCreate 实例创建前
created 实例创建后 初始化数据(Ajax数据请求,获取Vuex状态、路由切换等)
beforeMount 载入前
mounted 载入后 需要操作DOM时(应用第三方插件等)
beforeUpdate 更新前
updated 更新后 通过事件修改数据、v-model引发数据变化、AJAX异步更新数据
beforeDestroy 实例销毁前
destroyed 实例销毁后 切换路由(组件将被销毁)
计算属性
多次访问计算属性会立即返回之前的计算结果,而不必再次执行函数。
计算属性具有缓存
数组的更新检查
push()、pop()、shift()、unshift()
splice()、sort()、reverse()
变异方法,可触发视图更新
filter(), concat() 和 slice()
非变异方法,不触发视图更新
它们可以返回新数组,用新数组替换旧数组,就可以刷新视图
事件对象
event.type 触发的事件类型
event.target 触发事件的HTML元素
event.preventDefault( ) 阻止事件的默认行为
event.stopPropagation( ) 阻止事件冒泡
Vue组件
- 创建组件
let myTemp={
template:'#temp', //模板id
data: function(){ //必须为函数(闭包)
return { //必须有return,返回值为对象{}
title:"dadaqianduan"
}
}
- 注册组件
//在components配置项中注册组件
let app=new Vue({
el:"#box",
components:{myTemp}
});
//全局注册组件,还可以使用Vue.component方法(仅限全局注册,不建议使用)
Vue.component('myTemp',MyTemp);
- 使用组件
<!--在Vue实例中使用组件-->
<div id='box'>
<!--组件名如果用驼峰定义,改为短横线命名-->
<my-temp></my-temp>
</div>
- 事件通信
- 父子组件之间的数据操作,是通过
props
属性和$emit()
方法来实现的
路由使用
定义路由包括路由路径(
path
)、路由名称(name
)、路由组件对象(component
)
routes: [
{
path: '/', // 路由路径
name: 'home', // 路由名称
component: Home // 路由组件对象
},
{
path: '/users',
name: 'Users',
component: UserComponent
},
{
path: '/about',
name: 'about',
component: () => import( './views/About.vue')
}
]
- 动态路由
routes: [
{
path: '/users/:username/post/:postid',
name: 'Users',
component: UserComponent,
}
]
/user/:username
/user/tom
{username:'tom'}
/user/:username/post/:postId
/user/tom/post/3
{username:'tom',postId:'3'}
路由导航
- 路由导航守卫
什么是路由导航守卫可以简单理解为路由组件的生命周期回调函数。
// 路由导航守卫
// 作用:在第一次进入当前路由组件之前被调用
// 使用场景:获取ajax数据
beforeRouteEnter(to, from, next) {
// to:表示要进入的路由组件
// from:表示将要离开的路由组件
// next:表示后续操作函数
// 此时还未进入到组件中,故不能使用this获取当前组件的实例
next(function(app) {
// 进入到当前组件后,才执行的回调
// 此时回调参数 app 表示当前组件的实例对象
axios.get('/users/' + app.id).then(res => {
app.user = res.data.data;
});
});
}
beforeRouteUpdate(to, from, next) {
// 此时,可以使用this表示当前组件对象
const app = this;
// 发送ajax请求
// this表示切换前的状态
// to表示要切换到的路由对象 route
axios.get('/users/' + to.params.id).then(res => {
app.user = res.data.data;
});
// 执行后续
next();
}
- 编程式路由导航
methods: {
login(){
if(登陆成功){
//实现页面跳转
this.$router.push('/');
}
}
}
- push()
跳转到指定的路由地址, 并把当前地址写入到history中,参数可以是字符串路径或描述地址信息的对象
字符串 router.push('home')
对象 router.push({path:'home'})
命名的路由 router.push({name:user,params:{userId:1}})
-
replace( )
:跳转到指定路由,它不会向history
添加新记录,而是替换掉当前的history
记录。 -
全局路由导航守卫
示例:
// 全局路由导航守卫
router.beforeEach((to, from, next) => {
});
嵌套路由
children: [
{
path: "",
component: 路由名
},
{
path: "路径名",
component: 路由名
}
]
命名视图
使用
<router-view>
可以使用name
属性为其设置名称,即命名路由的视图简称命名视图。
示例:
<router-view/>
<router-view name="content"></router-view>
import About from './views/About.vue';
routes: [
{
path: "/about",
name: "about",
components: {
default: About,
content: UserComponent
}
}
]
回看笔者往期高赞文章,也许能收获更多喔!
- Vue.js笔试题解决业务中常见问题
- 【初级】个人分享Vue前端开发教程笔记
- 达达前端个人web分享92道JavaScript面试题附加回答
- 【图文并茂,点赞收藏哦!】重学巩固你的Vuejs知识体系
- 【思维导图】前端开发-巩固你的JavaScript知识体系
- 14期-连肝7个晚上,总结了计算机网络的知识点!(共66条)
❤️关注+点赞+收藏+评论+转发❤️,原创不易,鼓励笔者创作更好的文章
点赞、收藏和评论
我是Jeskson
(达达前端),感谢各位人才的:点赞、收藏和评论,我们下期见!(如本文内容有地方讲解有误,欢迎指出☞谢谢,一起学习了)
我们下期见!
文章持续更新,可以微信搜一搜「 程序员哆啦A梦 」第一时间阅读,回复【资料】有我准备的一线大厂资料,本文 www.dadaqianduan.cn/#/ 已经收录
github
收录,欢迎Star
:github.com/webVueBlog/…
免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://itzsg.com/8799.html