前端成长之路
2018-05-05 23:56:34 17 举报AI智能生成
前端之路
作者其他创作
大纲/内容
js
Dom
Node类型
nodeType
元素
1
特性
2
文本
3
nodeName
元素
标签名称
特性
属性名称
文本
“#text”
文档节点
“#document”
nodeValue
元素
null
特性
属性值
文本
全部文本值
文档节点
null
节点关系
childNodes
childNodes[0]
childNodes . item（0）
childNodes.length
parentNode
previousSibling
nextSibling
firstChild
lastChild
hasChildNodes( )
ownerDocument
指向文档节点（document）
操作节点
appendChild（）
添加到末尾
insertBefore（）
之前
replaceChild（）
参数：要插入的节点和要替换的节点
removeChild（）
cloneNode（）
参数
true：深复制
false：浅复制
normalize（）
合并文本节点
Dom类型
html元素
document . documentElement
document.childNodes[ 0 ]
document.doctype
<!DOCTYPE>
document属性
查找元素
getElementById（）
getElementByTagName（）
[ ]
item（）
namedItem（）
getElementByName（）
Dom一致性检测
document.implementation.hasFeature（）
文档写入
write（）
writeln（）
open（）
close（）
Element类型
HTML元素
取得特性
getAttribute（）
setAttribute（）
removeAttribute(）
attributes属性
getNameItem（name）
removeNameItem（name）
setNameItem（node）
specified属性
创建元素
document.createElement（）
Text类型
访问Text节点的文本
nodeValue属性
data属性
操作文本
appendData（text）
deleteData（offset，count）
insertData（offset，count）
replaceData（offset，count，text）
splitText（offset）
substring（offset，count）
. length
创建文本节点
document . createTextNode（）
normalize（）
splitText（）
Dom操作技术
动态Script
动态样式
事件
事件流
从页面接受事件的顺序
事件冒泡（IE）
事件捕获（Netscape）
DOM事件流
事件捕获阶段
处于目标阶段
事件冒泡阶段
事件处理程序
HTML事件注册
DOM 0 级事件注册
DOM 2 级事件注册
IE事件注册
跨浏览器事件注册
事件对象
DOM中的事件对象
IE中的事件对象
跨浏览器的事件对象
事件类型
事件委托
移除事件
模拟事件
DOM中的事件模拟
IE中的事件模拟
JSON
是数据格式
语法表示三种类型的值
简单值
number、string、boolean、null
不支持undefined
对象
数组
不支持变量、函数实例、对象实例
没有分号
字符串必须用双引号
对象属性必须用双引号
序列化（js—json）
JSON . stringify（）
参数
序列化对象
过滤器
数组
结果只包含数组中列出来的属性
函数
参数
键（key）
值（value）
返回undefined被忽略
缩进
不大于10的数字，自动换行
无参数
结果没有缩进和空格
解析
JSON . parse（）
参数
解析对象
函数
参数（key，value）
返回undefined，将会被删除
BOM
window对象
可以通过delete删除
窗口位置
moveTo（）
moveBy（）
innerWidth
innerHeight
outerWidth
outerHeight
页面视口信息
document.documentElement.clientWidth
document.documentElement.clientHeight
调整浏览器窗口大小
resizeTo（）
resizeBy（）
window.open（）
导航到一个特定的URL
打开一个新的浏览器窗口
close（）
关闭新打开的窗口
location对象
navigator对象
screen对象
history对象
函数表达式
递归
耦合
arguments.callee
命名函数表达式
闭包
指有权访问另一个函数作用域的变量的函数
闭包只能取得包含函数中任何变量的最后一个值
匿名函数的执行环境具有全局性，其this值通常指向window
私有变量
函数中定义的变量
函数的参数
局部变量
函数内部定义的其他函数
继承
原型链
实现继承的主要方法
实例指向超类型的 prototype
借用构造函数
在子类型构造函数的内部调用超类型构造函数
组合继承
原型链和借用构造函数组合一起
原型式继承
基于已有的对象创建新对象。
寄生式继承
创建一个仅用于封装继承过程的函数
寄生组合式继承
借用构造函数继承属性，通过原型链的混成形式继承方法
ajax
XMLHttpRequest（XHR）
open（）
send（）
responseText
responseXML
status
statusText
readyState
readystatechange
abort（）
HTTP头部信息
setRequestHeader（）
getResponseHeader（）
XMLHttpRequest 2 级
append（）
timeout
ontimeout
overrideMimeType（）
load事件
progress事件
博文
https://blog.csdn.net/keke_sir/article/details/80627870
https://blog.csdn.net/keke_sir/article/details/80631798
HTML+CSS3
CSS3
选择器
优先级
不同级别
行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
权值计算
权值实际并不是按十进制，用数字表示只是说明思想，一万个class也不如一个id权值高
内联样式表的权值为 1000
ID 选择器的权值为 100
Class 类选择器的权值为 10
HTML 标签选择器的权值为 1
ID 选择器的权值为 100
Class 类选择器的权值为 10
HTML 标签选择器的权值为 1
分类
标签选择器
类选择器
ID选择器
其他
全局
组合
后代
群组
继承
伪类
子选择器
相邻兄弟
display
属性(常见)
none | block | inline | inline-block | flex
inline
没有自己的独立空间，它是依附于其他块级元素存在的，因此，对行内元素设置高度、内外边距等属性，都是无效的
block
自动占据一定矩形空间，通过设置高度、宽度、内外边距等属性
none
与visibility：hidden区别
前者物理位置消失，后者物理位置不会消失
flex
inline-block
将对象呈递为内联对象，但是对象的内容作为块对象呈递，可以设置高度和内联元素，内容是块级元素，但没有换行符
作用
改变默认元素框类型
布局
固定布局
页面宽高不随页面的变化而变化
width、height 来实现
流式布局
百分比为主要形式，屏幕自适应
百分比实现
结合rem比较多
弹性布局
display：flex
结合属性布局适合多个块布局
浮动布局
float
定位布局
fixed
元素固定在一个位置，不随页面移动而移动
relative
不脱离文档流
absoluted
脱离文档流
补丁布局
块内定位
块间定位
flex布局
概念
采用flex布局的元素，称为flex容器
所有子元素自动成为容器成员，称为flex项目
两根轴
水平的主轴
垂直的交叉轴
布局
骰子布局
语法
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
实例
http://www.ruanyifeng.com/blog/2015/07/flex-examples.html
居中
垂直
inline
line-height 设置为所在块的高度
display：inline-block;padding;
display:table-cell; vertical-align;
根据父元素定位
block
relative;和负边距
display:table-cell; vertical-align;
父元素 display：flex; align-items:center;
水平
block
不能在其父元素的样式中设置 text-align:centent;这是无效的
设置左右外补丁为 auto ；
绝对定位和负外边距
inline
inline外面的块元素的样式中添加：text-align : centent;
水平 垂直 同时居中
定位和负边距
display:flex; align-items:center实现竖直居中，justify-content:center;实现水平居中 || 在子元素中设置margin：auto；即可实现居中
定位
relative
相对于它本身正常的位置进行定位
不脱离文档流
原来的空间不变，偏移的部分没有空间
static
没有定位（默认定位）
该元素下的top、bottom、z-index全部失效
出现在正常的文档流中
absoluted
相对于static定位以外的第一个父元素（被定位或者祖宗HTML）进行定位
脱离文档流
默认参照浏览器左上角
fixed
相对于阅览器窗口进行定位
脱离文档流
inherit
规定应该从父元素继承position属性的值
浮动
属性
none
left
right
子主题
原理
自动被设置为一个block，表明可修改width等
伸缩包装到浮动内容的宽度 ：内部带有图片的一个float将和图片一样宽，带有文本的一个浮动将与该浮动内的最长文本行一样宽。
脱离文档流
一旦让该div浮动起来，立刻会像inline元素一样产生包裹性，宽度会跟随内容自适应
对象
任何element
清除
clear
none | left | right | both
这个规则只能影响使用清除的元素本身，不能影响其他元素
闭合浮动
父元素设置overflow:hidden(BFC)
文字环绕元素
包裹性
带定位的display：inline-block
高度欺骗
inline-height塌陷为0
Box Model（w3c）
DTD
width
box-sizing:content-box ( content )
box-sizing:border-box (border)
height
padding
background, 默认为0
margin
可以为负值
默认透明
默认为0
border
backgroung ， 默认为0
content
子主题
杂式
%
height
父元素的height
width
父元素的width
margin top | right....
父元素content的width,不包括padding
padding top | right.....
父元素content的width
background-position
图像中描述为50% 50% 的点（中心点）
auto
自适应
width：auto
宽度自适应
包裹性
不能用于具有包裹性的元素（BFC）
默认的值
margin ： 0 auto
左右边距宽度自适应
失效原因
没有为div设置高度
div具有包裹性，即脱离标准流（BFC），没有同高度可供参考的父元素进行auto
line-height
常用
设置两段文字在垂直方向上的间距
line-height与height相等，让单行文字居中
值类型
百分比
根据自己的font-size算出line-height，计算得到的结果给下一代使用
数值
直接把这个数值传给子元素，子元素根据这个数值乘以font-size，算出line-height
可继承
p的高度不是由文字（font-size）撑起来的
p的高度由line-height撑起来的
block
p
默认margin
margin合并
BFC
定义
块级格式化上下文
决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用
如果一个元素符合了成为BFC的条件，该元素内部元素的布局和定位就和外部元素互不影响(除非内部的盒子建立了新的 BFC)，是一个隔离了的独立容器。
条件
浮动元素，float 除 none 以外的值
绝对定位元素，position（absolute，fixed）
display 为以下其中之一的值 inline-blocks，table-cells，table-captions
overflow 除了 visible 以外的值（hidden，auto，scroll）
作用
bfc来清除浮动
解决遮挡问题
阻止外边距折叠
URL
href
超文本引用
a
link
加载和处理时页面不暂停
src
指向的内容会嵌入到文档中当前标签所在的位置
img
script
iframe
加载和处理时页面被暂停
<!DOCTYPE>
不是HTML标签
指示web浏览器关于页面使用哪个HTML版本进行编写的指令
大小写不敏感
文档类型 Document Type
DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现
向后兼容
css Sprites
css 精灵
雪碧图
小图标显示
减少http请求
减少加载时间
性能优化
字体大小
px
浏览器无法调整大小(Firefox能调整)
相对长度单位
相对于显示器屏幕分辨率而言
em
相对长度单位
相对于当前对象内文本的字体尺寸
特点
值不固定
继承父级元素的字体大小
父级声明font-size为1.2em(12px)
子级font-size为1em(12px)
此em非彼em
浏览器默认字体高度16px
默认1em=16px
body：font-size=62.5%；
1em=10px
rem
相对单位
根em （root em）
特点
设定字体大小时，仍是相对大小
相对的只是HTML根元素
两者优点于一身
只修改根元素就成比例的调整所有字体大小
避免字体大小逐层复合的连锁反应
HTML5
语义化标签
文档流
前后
靠近页面边缘的一端是前，远离页面的一端是后
web语义化
为什么要语义化
有利于SEO
人可以通过视觉的划分判断内容的语义，而搜索引擎只能通过爬取网页标签等代码来判断内容的语义
如何理解
机器可以读懂内容
恰当语义的html标签、class类名等（蜘蛛不抓js），让页面具有良好的结构和含义，易于机器理解网页设计者想要说的话。
分类
HTML标签语义化
class命名语义化
URL语义化
SEO
搜索引擎优化
原创文章
标题、关键词设置
语义化
js
js简介
ECMAScript
DOM
BOM
标签的位置
</body>之前
先呈现页面，再加载js
<head>内
延迟脚本defer
有先后顺序
只适用于外部脚本
渲染完页面，再执行脚本
异步脚本
没有先后顺序
只适用于外部脚本
边渲染页面，边加载脚本
数据类型
基本数据类型
undefined
使用var 声明，但未初始化
null
空对象指针
Boolean
true
false
“”
NaN
null
undefined
number
Infinity
isFinite（）
是否在最大值和最小值之间
NaN
与任何值都不相等
isNaN（）
是否“不是数值”
数值转换函数
Number（）
用于任何数据类型
ParseInt（）
第一个字符
不是数字或是负号
NaN
ParseFloat（）
遇到第二个非数字或小数点停止
string
用双引号或者单引号表示
一旦建立，值不能改变，只能销毁原来的，用新值的字符串填充
转义 \
String()
将任何类型的值转换成字符串
复杂数据类型
object
Object是所有它的实例的基础
object每个实例都具有下列属性和方法
constructor
保存用于创建当前对象的函数
hasOwnProperty（“propertyName”）
用于检查给定的属性名是否在当前对象实例中
isPrototypeOf（object）
用于检查传入的对象是否是当前对象的原型
propertyIsEnumerable（“PropertyName”）
用于检查给定的属性是否能够使用for—in语句
toLocaleString（）
返回对象的字符串表示
toString（）
返回对象的字符串表示
valueOf（）
返回对象的字符串、数值、布尔值表示
操作符
typeof
undefined
Boolean
string
number
object
function
位操作符
类C语言
不常用操作符
逻辑非
！
逻辑与（短路）
&&
逻辑或（短路）
||
相等操作符
==
先转换操作数，再比较相等性
===
仅比较，不转换
条件操作符
赋值操作符
逗号操作符
instanceof
判断什么类型的对象
语句
三大循环
switch语句
用于任何数据类型
for - in
for ( property in expression ) { statement}
输出的属性名的顺序不可预测
label语句
配合break和continue使用
with语句
with ( expression ) { statement }
作用是将代码的作用域设置到一个特定的对象
函数
argument
不是Array的实例
与数组类似
arguments[i]
长度由传入函数的参数个数决定
没有重载
后定义的函数会覆盖前面的函数
构造函数以大写开头
非构造函数以小写开头
变量
基本类型值
undefined
null
Boolean
number
string
按值访问
可以操作保存在变量中的实际的值
复制时，完全独立，创建副本
引用类型值
对象
值是按引用访问的
不能直接操作对象的内存空间
复制时，复制的是值的指针，指向同一个object
实例改变属性时，会改变object的属性值
传递参数
参数只能按值传递
基本类型
被传递的值复制给局部变量
引用类型
把值在内存中的地址复制给局部变量
声明变量
var
自动添加到最近的环境中
不用var
全局变量
执行环境与作用域
每个执行环境都有一个与之关联的变量对象
web浏览器中，全局执行环境是window对象
执行环境中代码执行完毕后，环境被销毁，保存其中的变量和函数定义也被销毁
每个函数都有自己的执行环境
作用域链
前端始终是当前执行代码所在环境的变量对象
如果环境是函数
其活动对象为变量对象
任何环境都不能通过向下搜索作用域链而进入另一个执行环境
前端临时增加一个变量对象
延长作用域链
1. try - catch 的catch块
2. with语句
垃圾收集
标记清除
引用清除
引用次数为0，清除
循环引用问题
不使用时，手工断开
引用类型（对象定义）
对象是引用类型的一个实例
Object类型
1.new 操作符创建
2. 使用对象字面量{}
object访问对象属性
点表示法
方括号表示法
属性用字符串的形式
变量不用加“”
Array类型
new
数组字面量[ ]
动态调整
检测方法
isArray（）
转换方法
valueOf（）
返回数组本身
toString（）
返回数组中值的字符串形式拼接的，以逗号分隔的字符串
join（）
定义分隔符形式
shift（）
移除第一项，返回该项
unshift（）
在前端添加任意个项，返回新数组长度
pop（）
移除最后一项，返回该项
push（）
在尾端添加任意个项，返回新数组长度
重排序方法
reverse（）
反转数组
sort（）
调用每个项的toString（）方法，比较得到的字符串
接受一个函数，用于比较数值
操作方法
concat（）
创建副本，将接受到的参数添加到副本的末尾
不影响原始数组
slice（）
一或两个参数
返回项的起始和结束位置
不影响原始数组
splice（）
两个参数
要删除的第一项的位置和要删除的项数
三个参数
起始位置、要删除的项数、要插入的项
影响原始数组
位置方法
indexOf（）
要查找的项、（可选）查找起点位置的索引
从开头开始
===
lastIndexOf（）
要查找的项、 （可选）查找起点位置的索引
末尾开始
===
迭代方法
两个参数
每一项运行的函数
三个参数
数组项的值
该项在数组中的位置
数组对象本身
（可选）运行该函数的作用域对象
影响this的值
every（）
每一项都返回true
返回true
some（）
任一项返回true
返回true
filter（）
返回true的项组成的数组
map（）
返回每一项调用的结果组成的数组
forEach（）
没有返回值
归并方法
迭代数组的所有项
reduce（）
第一项开始
reduceRight（）
最后一项开始
两个参数
每一项调用的函数
四个参数
前一个值
当前值
项的索引
数组对象
（可选）归并基础的初始值
Date类型
Date.parse( )
Date.UTC（）
Date.now（）
RegExp类型
g：全局
i：不区分大小写
m:多行模式
exec（）
test（）
Function类型
函数名仅仅是指向函数的指针
没有重载，后面的指针覆盖前面的
使用不带圆括号的函数名是访问函数指针
函数可以当做值来用
把函数当做另一个函数的参数
函数声明
升位
函数表达式
执行到所在的代码行，才会被解释执行
函数内部属性
arguments
保存函数参数
callee
arguments.callee
指向拥有这个arguments对象的函数
this
引用的是函数的执行环境
caller
保存着调用当前函数的函数的引用
函数的属性和方法
属性
length
接受命名参数的个数
prototype
原型
保存着所有实例方法
方法
apply（）
两个参数
在其中运行函数的作用域
参数数组
Array的实例
arguments对象
对象不需要和方法有任何耦合关系
call（）
参数
在其中运行函数的作用域
参数项
bind（）
创建一个函数的实例
参数为函数作用域
基本包装类型
Boolean
String
length属性
字符串中有多少字符
字符方法
charAt（）
返回单字符
参数为索引
charCodeAt（）
返回单字符编码
用[ ] 加数字索引访问字符串中的特定字符
字符串方法
concat（）
将一个或多个字符串拼接起来，返回拼接后的字符串
+
创建新字符串
slice（）
两个参数
开始的索引
最后一个字符后面的位置
substr（）
两个参数
开始的索引
返回的字符个数
substring（）
两个参数
开始的索引
最后一个字符后面的位置
字符串位置方法
indexOf（）
没找到返回 -1
两个参数
查找字符
开始位置索引
lastIndexOf（）
没找到返回 -1
两个参数
查找字符
开始位置索引
trim（）方法
创建一个字符串的副本，删除前面和后面的空格
字符串大小写转换
转换为大写
toUpperCase（）
toLocaleUpperCase（）
转换为小写
toLowerCase（）
toLocaleLowerCase（）
模式匹配方法
match（）
一个参数
正则表达式或RegExp对象
返回数组
search（）
返回第一个匹配项的索引
没找到返回 - 1
替换字符串方法
replace（）
两个参数
正则表达式 或者 字符串
字符串 或者 函数
函数
三个参数
模式的匹配项 match
模式匹配项在字符串中的位置 pos
原始字符串 originalText
split（ ）
基于指定的分隔符把一个字符串分割成多个字符串
第二个参数可指定数组的大小
第一个参数是分隔符
localeCompare（）
与参数比较
字符串等于参数
返回0
字符串第一个字母在字母表中大于参数
返回 -1
字符串第一个字母在字母表中小于参数
返回1
formCharCode（）
接受一或多个字符编码，转换成字符串
Number
toFixed（）
按照指定的小数位返回数值的字符串表示
toExponential（）
返回指数表示法
一个参数
输出结果中的小数位数
toPrecision（）
一个参数
表示数值的所有数字的位数
自动返回合适的格式
每当读取一个基本类型值时，后台就会创建一个对应的基本包装类型的对象
自动创建的基本包装类型的对象，只存在于一行代码的执行瞬间，然后被销毁
所有的基本包装类型的对象在转换布尔值时都是true
单体内置对象
Global
所有在全局作用域中定义的属性和方法，都是它的属性和方法
URL编码方法
encodeURL（）
encodeURLComponent（）
eval（）
只接受一个参数
要执行的js字符串
把执行结果插入到原位置
被执行的代码与该执行环境有相同的作用域链
创建的任何变量和函数都不会被提升
Math
min（）
max（）
舍入方法
Math.ceil（）
向上舍入
Math.floor（）
向下舍入
Math.round（）
四舍五入
random（）
返回0~1的·一个随机数
属性
数据属性
特性
Configurable
Enumerable
Writeable
Value
修改属性默认的特性
Object.defineProperty（）
三个参数
属性所在的对象
属性的名字
描述符对象
其中一个
Configurable
设置为false之后不可恢复
Enumerable
Writeable
Value
访问器属性
set
get
Object.getOwnPropertyDescriptor（）
创建对象
工厂模式
构造函数模式
this
new
原型模式
prototype
所有实例共享属性和方法
constructor
isPrototypeOf( )
确定是否存在原型关系
Object.getPrototypeOf（）
返回[ [ Prototype] ]的值
hasOwnProperty（）
检查一个属性是存在实例中还是原型中
in
in操作符会在通过对象能够访问给定属性时返回true
实例属性会屏蔽同名原型属性
寄生构造函数模式
特殊情况下用来为对象创建构造函数
稳妥构造函数模式
没有公共属性，也不引用this
不使用new，创建实例
收藏
职业：暂无
0 条评论
下一页
