Github 起源:一个合格的高级前端工程师须要把握的模块笔记 | 求星星 ✨ | 给个❤️关注,❤️点赞,❤️激励一下作者
大家好,我是 魔王哪吒,很快乐意识你~~
哪吒人生信条:如果你所学的货色 处于喜爱 才会有弱小的能源撑持。
不要胆怯做梦,然而呢,也不要光做梦,要做一个实干家,而不是空谈家,求真力行。
前言
❤️笔芯❤️~
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 梦」第一工夫浏览,回复【材料】有我筹备的一线大厂材料,本文 http://www.dadaqianduan.cn/#/ 曾经收录
github
收录,欢送Star
:https://github.com/webVueBlog/WebFamily