前端工程师快速入门
概述
前端开发工程师是Web前端开发工程师的简称，2007年才真正开始受到重视的一个新兴职业。Web前端开发技术是一个先易后难的过程，主要包括三个要素：HTML（标准通用标记语言下的一个应用）、级联样式表和JavaScript。前端开发工程师不仅要掌握基本的Web前端开发技术，网站性能优化、SEO和服务器端的基础知识，而且要学会运用各种工具进行辅助开发以及理论层面的知识，包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持等。
html(超文本标记语言)
-
什么是 HTML？
HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言 (HyperTextMarkupLanguage)
HTML 不是一种编程语言，而是一种标记语言(markup language)
标记语言是一套标记标签(markup tag)
HTML 使用标记标签来描述网页
-
HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 ** 和 **
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
css(级联样式表)
-
CSS 概述
CSS 指层叠样式表 (CascadingStyleSheets)，主要是用来调整html的外观样式
样式定义如何显示HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在CSS 文件中
多个样式定义可层叠为一
-
使用
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="html" cid="n55" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; background: inherit; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; position: relative !important; padding: 10px 30px; border: 1px solid; width: inherit;">//内联样式
This is a paragraph
//内部引入css样式
//引入外部css样式//内联样式
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
//内部引入css样式
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
//引入外部css样式
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
</html>
//css文件代码
body {
color: #000;
background: #fff;
margin: 0;
padding: 0;
font-family: Georgia, Palatino, serif;
}
//css文件代码
body {
color: #000;
background: #fff;
margin: 0;
padding: 0;
font-family: Georgia, Palatino, serif;
}</pre> -
什么是JavaScript
- 简称js，是世界上最流行的编程语言。这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。主要是用来创建动态更新的内容，控制多媒体，制作图像动画，使网页增加互动性。
-
使用
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" cid="n65" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; background: inherit; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; position: relative !important; padding: 10px 30px; border: 1px solid; width: inherit;">document.write("This is a heading");//动态输出
点击这里//控制按钮点击
x=document.getElementById("demo") //找到元素
x.style.color="#ff0000"; //改变样式</pre>
初级前端
前端应用需要适配电脑、手机、平板等不同设备，前端技术更新发展很快，做好前端并不容易.2014年10月29日万维网联盟发布了H5，前端迎来迅猛发展，不仅能做绚丽的网页还可以做跨平台的手机app.甚至上海公司推出了前端脚本语言设计的硬件开发语言ruff.
html5
-
h5与h4区别
-
推出理由及目标:解决web上存在的各种问题
web浏览器之间兼容性低
文档结构不明确
Web应用程序的功能受到了限制
-
语法的改变
内容类型
DOCTYPE申明
指定字符编码
可以省略标记的元素
具有boolean值的属性
省略引号
-
新增的元素和废除的元素
-
新增的结构元素
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" cid="n104" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; background: inherit; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; position: relative !important; padding: 10px 30px; border: 1px solid; width: inherit;">section、article、aside、header、hgroup、footer、nav、figure</pre>
-
新增的其它元素
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" cid="n107" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; background: inherit; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; position: relative !important; padding: 10px 30px; border: 1px solid; width: inherit;">video、audio、embed、mark、progress、meter、time、ruby、rt、rp、wbr、canvas、command、details、datalist、datagrid、keygen、output、source、menu</pre>
-
新增input元素类型
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" cid="n110" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; background: inherit; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; position: relative !important; padding: 10px 30px; border: 1px solid; width: inherit;">email、url、number、range、Date Pickers、color...</pre>
-
废除的元素
能使用css代替的元素：basefont、big、center、font、s、tt、u等
不再使用frame框架
只有部分浏览器支持的元素
其它被废除的元素
-
-
新增的属性和废除的属性
表单相关的属性
链接相关的属性
其它属性
废除的属性
-
全局属性
contentEditable属性
designMode属性
hidden属性
spellcheck属性
tabindex属性
-
-
新增的主题结构元素
-
article:代表文档、独立内容，如博客、帖子...;article可以嵌套使用，可以用来表示插件
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" cid="n151" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; background: inherit; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; position: relative !important; padding: 10px 30px; border: 1px solid; width: inherit;"><article>
<h1>这是一个内嵌页面</h1>
<object>
<embed src="#" width="600" height="500"></embed>
</object>
</article></pre> -
section:
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" cid="n154" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; background: inherit; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; position: relative !important; padding: 10px 30px; border: 1px solid; width: inherit;"> <section>
<h1>苹果</h1>
<p>这是一颗🍎很好吃</p>
</section></pre> -
nav元素是一个可以用作页面导航的连接组,一个页面可以有多个nav作用于不同导航
传统导航条
侧边栏导航
页内导航
翻页操作
aside元素页面主内容之外的解释说明
time元素
-
-
新增的非主题结构元素
header:主要放置标题，也可以放置其它内容
footer:主要放底部，footer可以在区域块中使用
address:用来在文档中显示联系信息，文档作者、邮箱、地址、电话
hgroup:-hgroup是将标题及其子元素分组的元素
-
html结构
显示编排内容区域块：明确使用section元素创建文档结构，在每个内容区块内使用标题
隐式编排内容区域块:不明确使用section等元素，根据页面中所书写的各级标题等把内容区块自动创建出来。
标题分级，下级区域块&新区域块
不同区域块可以使用相同级别的标题
-
表单新增属性
表单内的form属性：h5中表单内从属元素可以写在页面任何地方，设置form属性为表单id就好
表单内formaction属性：h5可以为所有提交按钮增加不同的formaction属性，是不同按钮提交到不同页面
表单内的formmethod属性：对每一个表单元素指定不同的提交方法
表单内的formenctype属性：可以使用formenctype属性分别对表单元素指定不同编码方式
表单内的formtarget属性：可以对多个提交按钮分别使用formtarget属性来指定提交后在何处打开所需要加载的页面
表单内的autofocus属性：为文本框、选择框或按钮设置aotufocus属性，当画面打开时该控件自动获得焦点
表单内元素的required属性：输入元素设置required，在提交时如果元素内容为空白，则不允许提交，同时在浏览器中显示提示文字
表单内的lable属性：为可使用标签的输入表单元素设置labels属性，属性值为NodeList对象，代表该元素所绑定的标签元素所构成的集合
control属性：标签内放置一个表单元素，通过该标签的control属性来访问该表单元素,可以自动改变内容值等
placeholder属性：当文本框处于为输入状态时，模糊显示提示
list属性：单行文本设置list属性，值是datalist的id,那么datalist列表内容为文本框的可选项，类似之前的下拉菜单支持输入
AutoComplete属性：自动完成输入功能，还有安全方面的控制
pattern属性：为输入元素设置该正则属性，在提交时内容不符合格式不能提交并提示
SelectionDirection属性：为输入元素设置该属性，可以监听到使用鼠标选取内容的方向--forward和backward
indeterminate属性：为复选框设置该属性表示复选框尚未明确选取状态
image的height和width属性
-
增加与改良的input元素
- url类型、email类型、date类型、time类型、datetime类型、datetime-local类型、month类型、week类型、number类型、range类型、search类型、tel类型、color类型
-
增强的页面元素
新增的figure元素figcaption元素
新增的details元素与summary元素
新增的mark元素
新增的progress元素
新增的meter元素
改良的ol列表
改良的dl列表
严格限制的cote元素和改良的small元素
-
新增Range对象：一个range对象代表页面上的一段连续区域，通过range对象可以获取和修改网络上的任何区域
Range对象的SelectNode、SelectNodeContents、deleteContents方法
Range对象的setStart、setEnd、setStartBefore、setStartAfter、setEndBefore、setEndAfter方法
Range对象的cloneRange、cloneContents、extractContents
Range对象insertNode、compareBoundaryPoints
Range对象的collapse、detach方法
-
html5中音视频播放
音频播放：auido->source定义资源，control控制
视频播放：video
html5拖放：boxDiv.ondrop方法
-
html5的Canvas标签
-
Canvas的使用
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" cid="n278" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; background: inherit; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; position: relative !important; padding: 10px 30px; border: 1px solid; width: inherit;">context=mycanvas.getContext("2d");
context.fillStyle="#ff0000";
context.rotate(45);//旋转
context.translate(200,200);//平移
context.fillRect(0,0,200,200);//填充绘制</pre> Canvas的使用路径
Canvas绘制变化图形
Canvas图形绘制处理
-
Canvas的应用
- createjs动画
-
-
html中SVG的使用
-
什么是svg
SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用来定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损
SVG 是万维网联盟的标准
SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体
-
SVG的优势
SVG可以通过文本编辑器来创建和修改
SVG图像可被搜索、索引、脚本化压缩
SVG图像可在任何分辨率下被高质量的打印
SVG可在图像质量不下降的情况下被放大
-
-
html5File中的api应用
-
fileApi协议族
Directories and System-文件系统和目录
FileWriter-写入文件
FileReader-读取文件
File Api-页面选择文件处理
接口对象:FileSystem、Entry、DirectoryEntry、FileEntry、DirectoryReader
-
实现文件列表功能
- cordova-plugin-file在Android中操作文件
操作栏的创建及WebFont的使用
使用对话框创建文件夹
-
-
Web存储
-
新存储类型
localStorage:没有时间限制
sessionStorage:针对一个session的数据存储,当用户关闭浏览器数据被删除
-
web缓存与webWorkers
-
web缓存
CACHE MANIFEST:此标题下文件会首次下载后缓
NETWORK:此标题下文件需要与服务器连接且不会缓存
FALLBACK:此标题规定页面无法访问时的回退页面(比如404)
-
webWorkers:运行在后台的js，独立于其它脚本不会影响页面性能
postMessage:发送
terminate:停止
onmessage:接收
-
-
-
html5服务器推送
- onopen、onerror、onmessage
-
响应式布局
-
基本实现
设备宽高
渲染窗口的宽高
设备的手持方向
设备的分辨率
-
响应式布局框架Bootstrap
- 快速、简单、灵活的栅格系统、小而强大、响应式布局、跨平台
-
-
使用html5构建布局和移动手机页面
-
html5在移动开发中的准则
尽量使用单页面开发
慎重选择前端UI框架
动画、特效使用准则(60fps)
-
浏览器消耗最小的css属性
位置-transform:translate(x,y,z)
大小-transform:scale(n)
旋转-transform:rotate
透明度-opacity:0..1
长度单位使用rem
-
css3
-
css基础样式
-
css格式、派生选择器、id选择器、类选择器、属性选择器
- id不可以重复，class可以重复；id是先找到结构内容在加载样式，class是先加载好样式再去找内容
-
css背景
-
属性 描述 background 简写属性，作用是将背景属性设置在一个声明中。 background-attachment 背景图像是否固定或者随着页面的其余部分滚动。 background-color 设置元素的背景颜色。 background-image 把图像设置为背景。 background-position 设置背景图像的起始位置。 background-repeat 设置背景图像是否及如何重复。
-
-
css文本：通过文本属性，可以改变文本的颜色、字符间距、对齐文本、装饰文本、对文本缩进
-
属性 描述 color 设置文本颜色 direction 设置文本方向。 line-height 设置行高。 letter-spacing 设置字符间距。 text-align 对齐元素中的文本。 text-decoration 向文本添加修饰。 text-indent 缩进元素中文本的首行。 text-shadow 设置文本阴影。CSS2 包含该属性，但是 CSS2.1 没有保留该属性。 text-transform 控制元素中的字母。 unicode-bidi 设置文本方向。 white-space 设置元素中空白的处理方式。 word-spacing 设置字间距。
-
-
css字体：css字体属性定义文本的字体系列、大小、加粗、风格和变形
-
属性 描述 font 简写属性。作用是把所有针对字体的属性设置在一个声明中。 font-family 设置字体系列。 font-size 设置字体的尺寸。 font-size-adjust 当首选字体不可用时，对替换字体进行智能缩放。（CSS2.1 已删除该属性。） font-stretch 对字体进行水平拉伸。（CSS2.1 已删除该属性。） font-style 设置字体风格。 font-variant 以小型大写字体或者正常字体显示文本。 font-weight 设置字体的粗细。
-
-
css链接
a:link-普通的、未被访问的连接
a:visited-用户已经访问的连接
a: hover -鼠标指针位于链接的上方
a:active-链接被点击
-
css列表：允许你放置、改变列表标志，或者将图像作为列表标志
-
属性 描述 list-style 简写属性。用于把所有用于列表的属性设置于一个声明中。 list-style-image 将图象设置为列表项标志。 list-style-position 设置列表中列表项标志的位置。 list-style-type 设置列表项标志的类型。 marker-offset
-
css表格-表格边、折叠边框、表格宽高、表格文本对齐、表格内边距、表格颜色
-
css轮廓：主要用来突出元素
-
属性 描述 CSS outline 在一个声明中设置所有的轮廓属性。 2 outline-color 设置轮廓的颜色。 2 outline-style 设置轮廓的样式。 2 outline-width 设置轮廓的宽度。
-
-
-
css定位：改变元素在页面的位置
-
css定位机制
普同流
-
浮动：
可用值left、right、none、inherit(从父级继承浮动属性)
-
clear属性
- 去掉浮动属性：left、right、both、inherit
绝对布局
-
css定位属性
-
-
css盒子模型
-
盒子模型概述
内边距
-
边框
- css3边框：border-radius、box-shadow、border-image
外边距
外边距合并
-
盒子的类型：inline、block
- display的inline-block属性和table的inline-table属性，list-item
-
对盒子中容纳不下的内容显示
- overflow相关
对盒子使用阴影：box-shadow
指定针对元素的宽度和高度的计算方法：box-sizing: content-box(是否包含外边距)
-
-
css常用操作
对齐操作：margin、position、float
-
分类
尺寸操作：line-height、width、height...
属性：clear、cursor、display、float、position、visibility
导航栏
-
css选择器
- 元素选择器、选择器分组、类选择器、id选择器、属性选择器、后代选择器、子元素选择器、相邻兄弟选择器
-
css动画与特效
-
2D、3D转换
2D转换：translate()|rotate()|scale()|skew()|matrix
3D转换：rotateX()|rotateY()
-
过渡
-
属性 描述 CSS transition 简写属性，用于在一个属性中设置四个过渡属性。 3 transition-property 规定应用过渡的 CSS 属性的名称。 3 transition-duration 定义过渡效果花费的时间。默认是 0。 3 transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。 3 transition-delay 规定过渡效果何时开始。默认是 0。 3
-
-
动画
-
属性 描述 CSS @keyframes 规定动画。 3 animation 所有动画属性的简写属性，除了 animation-play-state 属性。 3 animation-name 规定 @keyframes 动画的名称。 3 animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 3 animation-timing-function 规定动画的速度曲线。默认是 "ease"。 3 animation-delay 规定动画何时开始。默认是 0。 3 animation-iteration-count 规定动画被播放的次数。默认是 1。 3 animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。 3 animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。 3 animation-fill-mode 规定对象动画时间之外的状态。 3 transform与animation动画
-
-
html与css简单页面
-
css选择器详解
-
属性选择器与结构性伪类选择器
[id^=div]
-
结构性伪类选择器
伪元素选择器
结构性伪类选择器：root、not、empty、target
child相关选择器
-
UI元素状态伪类选择器与兄弟元素选择器
- UI元素状态伪类选择器17种：E:hover、E:active、E:focus、E:disabled、E: read-only、E:checked、E:default、E:indeterminate、E:selection、E:invalid、E:valid、E:required、E:optional、E:in-range
-
-
css文字与字体相关样式
给文字添加阴影
使用服务器端字体
修改字体种类保持尺寸
-
css背景与边框
与背景相关的新增属性
在一个元素中显示多个背景图像
圆角边框的绘制
使用图像边框
-
老式浏览器支持html5与css3
- google的html5.js和behavior:url("ie-css3.htc")
-
css布局属性全接触
<pre spellcheck="false" class="md-fences mock-cm md-end-block" lang="" cid="n847" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; background: inherit; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; position: relative !important; padding: 10px 30px; border: 1px solid; width: inherit;">(ul.menu>li6>a[href="#"]{内容})//开发工具快捷代码
h1{图片瀑布流}+ul.picC>li18>img[src="../../$.jpg"]//快捷代码
</pre>-
Flexbox(弹性布局)
弹性基础：弹性容器、弹性子元素、主轴、侧轴、主侧轴开始和结束
-
弹性容器属性
flex-direction:设置主轴方向，确定弹性子元素排列方式
flex-wrap:当弹性子容器超出弹性容器范围时是否换行
flex-flow:direction和wrap的复合属性
justify-content:主轴上的对齐方式
align-items:侧轴上的对齐方式
align-content:侧轴有空白时，侧轴的对齐方式
-
弹性子容器属性
order:控制弹性容器子元素顺序
flex-grow:控制弹性子元素扩展比例
flwx-shrink:设置弹性子元素收缩比例
flex-basis:指定弹性子元素收缩前的默认大小值
flex:grow|shrink|basis的复合属性
align-self:允许独立子元素覆盖弹性的默认对齐值
-
多列属性
-
属性 描述 CSS column-count 规定元素应该被分隔的列数。 3 column-fill 规定如何填充列。 3 column-gap 规定列之间的间隔。 3 column-rule 设置所有 column-rule-* 属性的简写属性。 3 column-rule-color 规定列之间规则的颜色。 3 column-rule-style 规定列之间规则的样式。 3 column-rule-width 规定列之间规则的宽度。 3 column-span 规定元素应该横跨的列数。 3 column-width 规定列的宽度。 3 columns 规定设置 column-width 和 column-count 的简写属性。 3
-
-
媒体查询解析语法
-
媒体功能
-
aspect-ratio 定义输出设备中的页面可见区域宽度与高度的比率 color 定义输出设备每一组彩色原件的个数。如果不是彩色设备，则值等于0 color-index 定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于0 device-aspect-ratio 定义输出设备的屏幕可见宽度与高度的比率。 device-height 定义输出设备的屏幕可见高度。 device-width 定义输出设备的屏幕可见宽度。 grid 用来查询输出设备是否使用栅格或点阵。 height 定义输出设备中的页面可见区域高度。 max-aspect-ratio 定义输出设备的屏幕可见宽度与高度的最大比率。 max-color 定义输出设备每一组彩色原件的最大个数。 max-color-index 定义在输出设备的彩色查询表中的最大条目数。 max-device-aspect-ratio 定义输出设备的屏幕可见宽度与高度的最大比率。 max-device-height 定义输出设备的屏幕可见的最大高度。 max-device-width 定义输出设备的屏幕最大可见宽度。 max-height 定义输出设备中的页面最大可见区域高度。 max-monochrome 定义在一个单色框架缓冲区中每像素包含的最大单色原件个数。 max-resolution 定义设备的最大分辨率。 max-width 定义输出设备中的页面最大可见区域宽度。 min-aspect-ratio 定义输出设备中的页面可见区域宽度与高度的最小比率。 min-color 定义输出设备每一组彩色原件的最小个数。 min-color-index 定义在输出设备的彩色查询表中的最小条目数。 min-device-aspect-ratio 定义输出设备的屏幕可见宽度与高度的最小比率。 min-device-width 定义输出设备的屏幕最小可见宽度。 min-device-height 定义输出设备的屏幕的最小可见高度。 min-height 定义输出设备中的页面最小可见区域高度。 min-monochrome 定义在一个单色框架缓冲区中每像素包含的最小单色原件个数 min-resolution 定义设备的最小分辨率。 min-width 定义输出设备中的页面最小可见区域宽度。 monochrome 定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0 orientation 定义输出设备中的页面可见区域高度是否大于或等于宽度。 resolution 定义设备的分辨率。如：96dpi, 300dpi, 118dpcm scan 定义电视类设备的扫描工序。 width 定义输出设备中的页面可见区域宽度。
-
-
响应式表格布局
响应式图片
-
初级前端实践与面试
中级前端
JavaScript
-
Javascript基础
-
JavaScript介绍
- JavaScript是互联网最流行脚本语言，它是轻量级语言，可以嵌入html，被所有浏览器兼容，更可广泛用于服务器、PC端、移动端
-
JavaScript实现
可以放置在html的head和body标签中，一般为了不干扰页面放在head中，不限制脚本使用数量
演示
-
JavaScript语法
语句之间可以使用分号隔开，JavaScript对大小写敏感，标识符以字母、下划线或美元符号开始,忽略空格
JavaScript注释：注释和java一样：//单行注释；/多行注释/
JavaScript变量：通过var来定义，可以有美元符号和数字
JavaScript数据类型：String、Number、Boolean、Array、Object、null、未定义；通过赋值null清除变量
-
-
Javascript语法详解
算数运算符：+、-、*、%、/、++、--
赋值运算符：=、+=、-=、*=、/=、%=
字符串操作
比较运算符：==、===、!=、!==、>、<、>=、<=
逻辑运算符：&&、||、!
条件运算符：三元运算
Javascript函数
-
JavaScript异常处理和事件处理
异常
-
事件
事件流
事件冒泡
事件捕获
事件对象：type、target、stopPropagetion、preventDefault
-
属性 当以下情况发生时，出现此事件 FF N IE onabort 图像加载被中断 1 3 4 onblur 元素失去焦点 1 2 3 onchange 用户改变域的内容 1 2 3 onclick 鼠标点击某个对象 1 2 3 ondblclick 鼠标双击某个对象 1 4 4 onerror 当加载文档或图像时发生某个错误 1 3 4 onfocus 元素获得焦点 1 2 3 onkeydown 某个键盘的键被按下 1 4 3 onkeypress 某个键盘的键被按下或按住 1 4 3 onkeyup 某个键盘的键被松开 1 4 3 onload 某个页面或图像被完成加载 1 2 3 onmousedown 某个鼠标按键被按下 1 4 4 onmousemove 鼠标被移动 1 6 3 onmouseout 鼠标从某元素移开 1 4 4 onmouseover 鼠标被移到某元素之上 1 2 3 onmouseup 某个鼠标按键被松开 1 4 4 onreset 重置按钮被点击 1 3 4 onresize 窗口或框架被调整尺寸 1 4 4 onselect 文本被选定 1 2 3 onsubmit 提交按钮被点击 1 2 3 onunload 用户退出页面 1 2 3
-
JavaScriptDOM对象
操作html
操作css属性
-
添加句柄(为元素动态添加事件)
- addEventListener、removeEventListener
-
JavaScript内置对象
基本的对象创建
String对象与方法
-
属性 描述 constructor 对创建该对象的函数的引用 length 字符串的长度 prototype 允许您向对象添加属性和方法 -
方法 描述 anchor() 创建 HTML 锚。 big() 用大号字体显示字符串。 blink() 显示闪动字符串。 bold() 使用粗体显示字符串。 charAt() 返回在指定位置的字符。 charCodeAt() 返回在指定的位置的字符的 Unicode 编码。 concat() 连接字符串。 fixed() 以打字机文本显示字符串。 fontcolor() 使用指定的颜色来显示字符串。 fontsize() 使用指定的尺寸来显示字符串。 fromCharCode() 从字符编码创建一个字符串。 indexOf() 检索字符串。 italics() 使用斜体显示字符串。 lastIndexOf() 从后向前搜索字符串。 link() 将字符串显示为链接。 localeCompare() 用本地特定的顺序来比较两个字符串。 match() 找到一个或多个正则表达式的匹配。 replace() 替换与正则表达式匹配的子串。 search() 检索与正则表达式相匹配的值。 slice() 提取字符串的片断，并在新的字符串中返回被提取的部分。 small() 使用小字号来显示字符串。 split() 把字符串分割为字符串数组。 strike() 使用删除线来显示字符串。 sub() 把字符串显示为下标。 substr() 从起始索引号提取字符串中指定数目的字符。 substring() 提取字符串中两个指定的索引号之间的字符。 sup() 把字符串显示为上标。 toLocaleLowerCase() 把字符串转换为小写。 toLocaleUpperCase() 把字符串转换为大写。 toLowerCase() 把字符串转换为小写。 toUpperCase() 把字符串转换为大写。 toSource() 代表对象的源代码。 toString() 返回字符串。 valueOf() 返回某个字符串对象的原始值。 -
Date对象
-
属性 描述 constructor 返回对创建此对象的 Date 函数的引用。 prototype 使您有能力向对象添加属性和方法。 -
方法 描述 Date() 返回当日的日期和时间。 getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。 getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。 getMonth() 从 Date 对象返回月份 (0 ~ 11)。 getFullYear() 从 Date 对象以四位数字返回年份。 getYear() 请使用 getFullYear() 方法代替。 getHours() 返回 Date 对象的小时 (0 ~ 23)。 getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。 getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。 getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)。 getTime() 返回 1970 年 1 月 1 日至今的毫秒数。 getTimezoneOffset() 返回本地时间与格林威治标准时间 (GMT) 的分钟差。 getUTCDate() 根据世界时从 Date 对象返回月中的一天 (1 ~ 31)。 getUTCDay() 根据世界时从 Date 对象返回周中的一天 (0 ~ 6)。 getUTCMonth() 根据世界时从 Date 对象返回月份 (0 ~ 11)。 getUTCFullYear() 根据世界时从 Date 对象返回四位数的年份。 getUTCHours() 根据世界时返回 Date 对象的小时 (0 ~ 23)。 getUTCMinutes() 根据世界时返回 Date 对象的分钟 (0 ~ 59)。 getUTCSeconds() 根据世界时返回 Date 对象的秒钟 (0 ~ 59)。 getUTCMilliseconds() 根据世界时返回 Date 对象的毫秒(0 ~ 999)。 parse() 返回1970年1月1日午夜到指定日期（字符串）的毫秒数。 setDate() 设置 Date 对象中月的某一天 (1 ~ 31)。 setMonth() 设置 Date 对象中月份 (0 ~ 11)。 setFullYear() 设置 Date 对象中的年份（四位数字）。 setYear() 请使用 setFullYear() 方法代替。 setHours() 设置 Date 对象中的小时 (0 ~ 23)。 setMinutes() 设置 Date 对象中的分钟 (0 ~ 59)。 setSeconds() 设置 Date 对象中的秒钟 (0 ~ 59)。 setMilliseconds() 设置 Date 对象中的毫秒 (0 ~ 999)。 setTime() 以毫秒设置 Date 对象。 setUTCDate() 根据世界时设置 Date 对象中月份的一天 (1 ~ 31)。 setUTCMonth() 根据世界时设置 Date 对象中的月份 (0 ~ 11)。 setUTCFullYear() 根据世界时设置 Date 对象中的年份（四位数字）。 setUTCHours() 根据世界时设置 Date 对象中的小时 (0 ~ 23)。 setUTCMinutes() 根据世界时设置 Date 对象中的分钟 (0 ~ 59)。 setUTCSeconds() 根据世界时设置 Date 对象中的秒钟 (0 ~ 59)。 setUTCMilliseconds() 根据世界时设置 Date 对象中的毫秒 (0 ~ 999)。 toSource() 返回该对象的源代码。 toString() 把 Date 对象转换为字符串。 toTimeString() 把 Date 对象的时间部分转换为字符串。 toDateString() 把 Date 对象的日期部分转换为字符串。 toGMTString() 请使用 toUTCString() 方法代替。 toUTCString() 根据世界时，把 Date 对象转换为字符串。 toLocaleString() 根据本地时间格式，把 Date 对象转换为字符串。 toLocaleTimeString() 根据本地时间格式，把 Date 对象的时间部分转换为字符串。 toLocaleDateString() 根据本地时间格式，把 Date 对象的日期部分转换为字符串。 UTC() 根据世界时返回 1970 年 1 月 1 日 到指定日期的毫秒数。 valueOf() 返回 Date 对象的原始值。
-
array对象
Math对象
-
JavaScriptDom对象控制HTML元素详解
-
属性：
<pre spellcheck="false" class="md-fences mock-cm md-end-block" lang="" cid="n1564" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; background: inherit; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; position: relative !important; padding: 10px 30px; border: 1px solid; width: inherit;">document.body.offsetHeight
document.body.offsetWidth
</pre> -
方法 描述 getElementById() 返回带有指定 ID 的元素。 getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。 getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。 appendChild() 把新的子节点添加到指定节点。 removeChild() 删除子节点。 replaceChild() 替换子节点。 insertBefore() 在指定的子节点前面插入新的子节点。 createAttribute() 创建属性节点。 createElement() 创建元素节点。 createTextNode() 创建文本节点。 getAttribute() 返回指定的属性值。 setAttribute() 把指定属性设置或修改为指定的值。
-
-
JavaScript浏览器对象
window对象
计时器：setTimeout、setInterval
-
History对象：返回历史记录地址集合
- back、forward、go方法
-
Location对象
location.hostname:返回web主机的域名
location.pathname:返回当前页面的路径和文件名
location.port
location。protocol//返回所使用的web协议
location.href//返回当前页面url
location.assign()//加载新的文档
Screen对象
Navigator对象
弹出窗口
Cookies对象
JavaScript瀑布流
JavaScript面向对象详解
-
JavaScript正则表达式
正则定义
-
正则使用
<pre spellcheck="false" class="md-fences mock-cm md-end-block" lang="" cid="n1654" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; background: inherit; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; position: relative !important; padding: 10px 30px; border: 1px solid; width: inherit;">//test方法
ar pat = /my/;
var str = "this is my code...";
console.log(pat.test(str)); // true
//exec
var pat = /hello/;
console.log(pat.exec("oh hello world")); //返还hello
//不区分大小写
var str = "Visit Hunger";
var patt1 = /hunger/i;
console.log(str.match(patt1)); //全局匹配
var str="hello hunger valley! I am hunger"; var patt1=/hunger/g; console.log(str.match(patt1)); //不区分大小写，全局匹配 var str="hell
//字符串正则
Hunger valley! I am hunger";
var patt1=/hunger/gi;
console.log(str.match(patt1));
//search
var str="Visit W3School!";
console.log(str.search(/w3school/)); //-1 console.log(str.serach(/w3school/i)); //
//replace
var str="Hello JI! oh I am hunger"
console.log(str.replace(/Hunger/, "valley")); console.log(str.replace(/hunger/ig, "hunger"));
//split
var str = "Hello Hunger , oh I am Hunger";
str.split("");
str.split(/\s+/);
</pre>
Jquery
-
认识Jquery
-
是简化js的一个函数库，包含的功能;Jquery通过美元符号定义，通过(selector)选择元素，action()执行操作->
HTML元素选取与操作
CSS操作
HTML函数事件
JavaScript特效和动画
HTML DOM遍历和修改
AJAX
Utilities
-
-
Jquery选择器和事件
常用元素、类、id选择器
-
事件
常用事件方法
绑定事件
解除绑定事件
事件的目标
事件的冒泡
自定义事件
-
JqueryHTML元素相关操作
修改属性与回调
添加元素
删除元素remove和删除内容empty
-
jQuery元素的遍历与过滤
向下遍历：children | find
向上遍历：parentsUntil | parents |parent
同级遍历：nextAll | nextUntil | prev |next | preUntil
过滤：first | last | eq | filter |not
-
Jquery盒子模型和CSS操作与动画
-
Jquery的效果
jQuery隐藏与显示
jQuery淡入淡出
jQuery滑动
jQuery动画与停止
jQuery Callback
jQuery chaining
-
Jquery的Ajax异步
jquery的扩展与noConflict
jquery 菜单
-
jQueryUI是包含底层用户交互、动画、特效和可换主题的可视控件
-
jQuery下载与使用
- jQuery包含交互、小部件和效果库
jQuery UI Interactions
-
jQuery Widgets
- accordion | dilog |button | progressbar |datePicker | menu |slider |spinner |table
-
Backbone框架
-
单页面应用
-
优点
前后端分离
减轻服务器压力
更好的用户体验
-
缺点
SEO收录空难
浏览历史问题
初次加载问题
-
AngularJS
-
AngularJS四个核心思想
依赖注入
模块化
双向绑定
语义化标签
-
Cordova是驱动PhoneGap的核心引擎
- 命令行方式创建一个移动端项目
Bootstrap
Bootstrap简介
Bootstrap栅格、代码和表格
Bootstrap表单、按钮和图片
Bootstrap之下拉菜单、按钮组、按钮式下拉菜单
Bootstrap输入框组、导航和导航条
Bootstrap媒体对象、面板和well
Bootstrap过渡效果、模态框和下拉菜单
Bootstrap基本组件
Bootstrap警告框、进度条和列表组
Bootstrap滚动监听、标签页和工具提示
-
Bootstrap实践与进阶
- gunt与less重新定义bootstrap
subline或webstrom开发工具快速生成代码
<h2>web编辑器代码快速生成</h2>>
<h3>子代>：div>ul>li</h3>
<div>
<ul>
<li></li>
</ul>
</div>
<h3>兄弟节点+:div+p+bd</h3>
<div></div>
<p></p>
<div></div>
<h3>父代:div+div>p>span+emheader</h3>
<div></div>
<div>
<p><span></span><em></em></p>
<header></header>
</div>
<h3>重复:ul>li5</h3>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<h3>成组:(div>dl>(dt+dd)*3)+footer>p</h3>
<div>
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>
</div>
<footer>
<p></p>
</footer>
<h3>id#代替,class点代替:div#header+div.page+div#footer.class1.class2.class3</h3>
<div id="header"></div>
<div class="page"></div>
<div id="footer" class="class1 class2 class3"></div>
<h3>属性[]:td[title="helloword" colspan=3]</h3>
<td title="helloword" colspan="3"></td>
