1.sort排序 从小到大
从大到小排序
例子：
let num = [21,4,5,65,10,4];
num.sort(function(a,b){
return b-a;
})
console.log(num); //[ 65, 21, 10, 5, 4, 4 ]
像素排序
let nums = ['200px','10px','300px','60px'];
nums.sort(function(a,b){
return parseInt(a)-parseInt(b);
})
console.log(nums); //['10px','60px','200px','300px']
2.随机数的公式
//x-y之间的随机数
Math.round( Math.random() * (y-x) + x )
//0-x之间的随机数
Math.round( Math.random() * x );
//1-x之间的随机数
Math.ceil( Math.random() * x );
3.BOM 和 Event
window.navigator.userAgent //浏览器信息 可以用来判断是不是IE浏览器
window.location: 浏览器地址信息
window.location.href: url
window.location.search: url问号？后面的内容
window.location.hash: url井号#后面的内容
4.bootstrap
bootstrap是最受欢迎且简洁、直观、强悍的前端开发，包含html、css和js基础框架，
用于开发响应式布局，移动设备优先的web项目，让web开发更迅速、简单。
css3的属性选择器
div[id |= "shu"]{
color: red;
}
5.响应式介绍
媒询（@media）
在对于的媒体设备和媒体特征下，解析对应的媒询样式
媒体设备
all所有
screen彩屏
媒体特征(从小屏幕写到大屏幕)
max-width
min-width
媒体关键词
not
and
only
@media all and (min-width:960px){color:pink} //1.所有设备2.最小宽度960px
6.CSS3笔记
Css3选择器-结构性伪类
E：nth-child(n) 表示E父元素中的第n个字节点
p:nth-child(odd){background:red} //匹配奇数行
p:nth-child(even){background:yellow} //匹配偶数行
p:nth-child(2n){bakcground} //类型偶数
注意：p:nth-child(2)找p标签父级下的第二个子元素，并且这个元素还是p标签
E:nth-last-child(n)表示E父元素中的第n个字节点，从后向前计算
E:nth-of-type(n)表示E父元素中的第n个字节点，且类型为E
E:nth-last-of-type(n)表示E父元素中的第n个字节点，且类型为E，从后向前结算
E:empty 表示E元素中没有子节点。注意：子节点包含文本节点
E:first-child 表示E元素中的第一个子节点
E:last-child 表示E元素中的最后一个子节点
E:first-of-type 表示E父元素中的第一个子节点且节点类型是E的
E:last-of-type 表示E父元素中的最后一个子节点且节点类型是E的
E:only-child表示E元素中只有一个字节点。注意：子节点不包含文本节点。
E:only-of-type表示E的父元素只有一个子节点，且这个唯一的子节点的类型必须是E。注意：子节点不包含文本系欸但。
Css3选择器-伪类
E:target表示当前的URL片段的元素类型，这个类型必须是E
E:disabled表示不可点击的表单控件
E:enabled表示可点击的表单控件
E:checked表示已选中的checkbox或radio
E:first-line表示E元素中的第一行
E:first-letter表示E元素中的第一个字符（用了该元素该字符选中不了）
E::selection表示E元素在用户选中文字时
E::before生成内容在E元素前
E::after生产内容在E元素后
E:not(s)表示E元素不被匹配
E~F表示E元素毗邻的F元素
Content属性
CSS3新增颜色模式
rgba
r red 红 0-255
g green 绿 0-255
b blue 蓝 0-255
a aplha 透明 0-1
实例：背景透明，文字不透明
问题：注意边框颜色透明有问题
文字阴影
text-shadow:x y blur color, ...
参数
x 横向偏移
y 纵向偏移
blur 模糊距离
color 阴影颜色
注意：文本阴影如果加很多层，会很卡很卡很卡
文字阴影的应用
最简单的用法
text-shadow: 2px 2px 4px black;
阴影叠加
text-shadow: 2px 2px 0px red, 2px 2px 4px green;
先渲染后面的，在渲染前面的
层叠
color: red;font-size: 100px;font-weight:bold;text-shadow: 2px 2px 0 white,4p 4px 0 red;
光晕
color:white;font-size:100px;text-shadow:0 0 10px #fff,0 0 20px #ffff,
0 0 30px #fff, 0 0 40px #ff00de,0 0 70px # ff00de, 0 0 80px #ff00de,
0 0 100px #ff00de, 0 0 150px #ff00de;
文字描边
-webkit-text-stroke:宽度 颜色
新增文本功能
Direction 定义文本排列方式（全兼容）
Rtl 从右向左排列
Ltr 从左向右排列
注意要配合unicode-bidi 一块使用 unicode-bidi:bidi-override;
Text-overflow 定义省略文本的处理方式
clip 无省略号
ellipsis省略号
注意配合overflow:hidden和white-space:nowrap一块使用
7.弹性盒模型
注意在使用弹性盒模型的时候，父元素必须要加display：box或display：inline-box
Box-orient定义盒模型的布局方向
Horizontal 水平显示 默认
vertical 垂直方向
Box-direction元素排列顺序
Normal 正常
Reverse反序
Box-ordinal-group设置元素的具体位置1,2,3...
Box-flex定义盒子的弹性空间 -webkit-box-flex:1
子元素的尺寸=盒子的尺寸*子元素的box-flex属性值/所有子元素的box-flex属性值的和
Box-pack 对盒子富裕的空间进行管理
Star 所有子元素在盒子左侧显示，富裕空间在右侧
end所有子元素在盒子的右侧显示，富裕空间在左侧
center所有子元素居中
justify富余空间在子元素之间平均分布
Box-align 在垂直方向上对元素的位置进行管理
Star所有子元素在顶部
end所有子元素在底部
center所有子元素居中
8.盒模型的阴影 可以多层叠加
box-shadow:[inset] x y blur [spread] color
参数
inset:投影方式
inset: 内投影
不给： 外投影
x、y：阴影偏移
blur：模糊半径
spread：扩展阴影半径
线扩展原有的形状，再开始画阴影
color
- 其它盒模型新增属性
box-reflect倒影
direction方向 above|below|left|right;
距离 10px
渐变（可选）-webkit-linear-gradient(red,yellow)
resize自由缩放
Both 水平垂直都可以缩放
Horizontal只有水平方向可以缩放
Vertical只有垂直方向可以缩放
注意：一定要配合overflow:auto 一块使用只有水平方向可以缩放
Box-sizing 盒模型解析模式
Content-box 标准盒模型
width/height = border + padding +content
Border-box 怪异盒模型 width/height = content
Css3分栏布局
column-width 栏目宽度
column-count栏目列数
column-gap栏目距离
column-rule栏目间隔线
圆角
border-radius:1-4个数字/1-4个数字
前面是水平，后面是垂直
不给"/"则水平和垂直一样
border-radius:10px/5px;
参数
各种长度单位都可以：px,%,...
%有时候很方便，但宽高不一致时不太好
边框
边框图片border-image
border-image-sourceg 引入图片
border-image-slice 切割图片
border-image-width 边框宽度
border-image-repeat 图片的排列方式
-round平铺，repeat重复，stretch拉伸
边框颜色border-colors
线性渐变
线性渐变格式
linear-gradient([<起点> || <角度>,] ? <点>,<点>...)
linear-gradient(60deg,red 0, blue 50%,pink 100%);
只能用在背景上
IE
filter:progid:DXImageTransform.Microsoft.gradient(start Colorstr="#ffffff",endColorstr="#ff0000",GradientType='1')
参数
-起点：从什么方向开始渐变 默认：top
left、top、left top
-角度：从什么角度开始渐变
xxx deg的形式
-点：渐变点的颜色和位置
black 50%,位置可选
线性渐变实例
最简单
red,green从上到下
起点位置
left top,red,green
30deg,red,green
平铺：repeating-linear-gradient
10.DOM优化
减少Dom操作
尽量用节点克隆
-cloneNode
访问元素集合
-尽量用局部变量
元素节点
-尽量用只获取元素的节点方法
选择器API
-利用querySelector、querySelectorAll
1.用变量声明document
var doc = document;
2.用变量声明list.length
var len = list.length;
Dom与浏览器
重排： 改变页面的内容
重绘： 浏览器显示内容
添加顺序
-尽量在appendChild前添加操作
合并dom操作
-利用cssText
例子：
ele.style.width = '100px';
ele.style.height = '100px';
性能比较好：ele.style.cssText = 'width:100px;height:100px'
缓存布局信息
例子：
var oDiv = document.getElementById("div");
var L = oDiv.offsetLeft; //把变量提上来缓存信息性能会比较好点
var T =oDiv.offsetTop;
setInterval(function(){
L++;
T++
oDiv.style.left = L +'px';
oDiv.style.top = T + 'px';
})
文档碎片
-createDocumentFragment();
例子：
var oul = document.getElmentById('ull');
for(var i =0;i < 5000; i++){ //5000次重排和重绘
var oli = document.createElment("li");
oul.appendChild(oli);
}
文档碎片优化
var oul = document.getElmentById('ull');
var ofrag = document.createDocumentFragment();
for(var i =0;i < 5000; i++){ //5000次重排和重绘
var oli = document.createElment("li");
ofrag.appendChild(oli);
}
oul.appendChild(ofrag);
console.timeEnd('miao');
Dom与事件
事件委托
Dom与前端模板
能更好的对逻辑和视图分离，MVC架构的基础
