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.隨機(jī)數(shù)的公式
//x-y之間的隨機(jī)數(shù)
Math.round( Math.random() * (y-x) + x )

//0-x之間的隨機(jī)數(shù)
Math.round( Math.random() * x );

//1-x之間的隨機(jī)數(shù)
Math.ceil( Math.random() * x );

3.BOM 和 Event
window.navigator.userAgent //瀏覽器信息 可以用來(lái)判斷是不是IE瀏覽器
window.location: 瀏覽器地址信息
window.location.href: url
window.location.search: url問(wèn)號(hào)澜驮？后面的內(nèi)容
window.location.hash: url井號(hào)#后面的內(nèi)容

4.bootstrap
bootstrap是最受歡迎且簡(jiǎn)潔、直觀惋鸥、強(qiáng)悍的前端開發(fā)杂穷，包含html、css和js基礎(chǔ)框架卦绣，
用于開發(fā)響應(yīng)式布局耐量，移動(dòng)設(shè)備優(yōu)先的web項(xiàng)目，讓web開發(fā)更迅速迎卤、簡(jiǎn)單拴鸵。

css3的屬性選擇器
div[id |= "shu"]{
color: red;
}

5.響應(yīng)式介紹
媒詢（@media）
在對(duì)于的媒體設(shè)備和媒體特征下，解析對(duì)應(yīng)的媒詢樣式

媒體設(shè)備
all所有
screen彩屏

媒體特征(從小屏幕寫到大屏幕)
max-width
min-width
媒體關(guān)鍵詞
not
and
only
@media all and (min-width:960px){color:pink} //1.所有設(shè)備2.最小寬度960px

6.CSS3筆記
Css3選擇器-結(jié)構(gòu)性偽類
E：nth-child(n) 表示E父元素中的第n個(gè)字節(jié)點(diǎn)
p:nth-child(odd){background:red} //匹配奇數(shù)行
p:nth-child(even){background:yellow} //匹配偶數(shù)行
p:nth-child(2n){bakcground} //類型偶數(shù)
注意：p:nth-child(2)找p標(biāo)簽父級(jí)下的第二個(gè)子元素，并且這個(gè)元素還是p標(biāo)簽
E:nth-last-child(n)表示E父元素中的第n個(gè)字節(jié)點(diǎn)劲藐，從后向前計(jì)算
E:nth-of-type(n)表示E父元素中的第n個(gè)字節(jié)點(diǎn)八堡，且類型為E
E:nth-last-of-type(n)表示E父元素中的第n個(gè)字節(jié)點(diǎn)，且類型為E聘芜，從后向前結(jié)算
E:empty 表示E元素中沒(méi)有子節(jié)點(diǎn)兄渺。注意：子節(jié)點(diǎn)包含文本節(jié)點(diǎn)

E:first-child 表示E元素中的第一個(gè)子節(jié)點(diǎn)
E:last-child 表示E元素中的最后一個(gè)子節(jié)點(diǎn)
E:first-of-type 表示E父元素中的第一個(gè)子節(jié)點(diǎn)且節(jié)點(diǎn)類型是E的
E:last-of-type 表示E父元素中的最后一個(gè)子節(jié)點(diǎn)且節(jié)點(diǎn)類型是E的
E:only-child表示E元素中只有一個(gè)字節(jié)點(diǎn)。注意：子節(jié)點(diǎn)不包含文本節(jié)點(diǎn)汰现。
E:only-of-type表示E的父元素只有一個(gè)子節(jié)點(diǎn)挂谍，且這個(gè)唯一的子節(jié)點(diǎn)的類型必須是E。注意：子節(jié)點(diǎn)不包含文本系欸但瞎饲。

Css3選擇器-偽類
E:target表示當(dāng)前的URL片段的元素類型口叙，這個(gè)類型必須是E
E:disabled表示不可點(diǎn)擊的表單控件
E:enabled表示可點(diǎn)擊的表單控件
E:checked表示已選中的checkbox或radio
E:first-line表示E元素中的第一行
E:first-letter表示E元素中的第一個(gè)字符（用了該元素該字符選中不了）
E::selection表示E元素在用戶選中文字時(shí)
E::before生成內(nèi)容在E元素前
E::after生產(chǎn)內(nèi)容在E元素后
E:not(s)表示E元素不被匹配
E~F表示E元素毗鄰的F元素
Content屬性

CSS3新增顏色模式
rgba
r red 紅 0-255
g green 綠 0-255
b blue 藍(lán) 0-255
a aplha 透明 0-1

實(shí)例：背景透明，文字不透明
問(wèn)題：注意邊框顏色透明有問(wèn)題

文字陰影
text-shadow:x y blur color, ...
參數(shù)
x 橫向偏移
y 縱向偏移
blur 模糊距離
color 陰影顏色
注意：文本陰影如果加很多層嗅战，會(huì)很卡很卡很卡

文字陰影的應(yīng)用
最簡(jiǎn)單的用法
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 無(wú)省略號(hào)
ellipsis省略號(hào)
注意配合overflow:hidden和white-space:nowrap一塊使用

7.彈性盒模型
注意在使用彈性盒模型的時(shí)候，父元素必須要加display：box或display：inline-box
Box-orient定義盒模型的布局方向
Horizontal 水平顯示 默認(rèn)
vertical 垂直方向
Box-direction元素排列順序
Normal 正常
Reverse反序
Box-ordinal-group設(shè)置元素的具體位置1,2,3...
Box-flex定義盒子的彈性空間 -webkit-box-flex:1
子元素的尺寸=盒子的尺寸*子元素的box-flex屬性值/所有子元素的box-flex屬性值的和
Box-pack 對(duì)盒子富裕的空間進(jìn)行管理
Star 所有子元素在盒子左側(cè)顯示驮捍，富耘蹦牛空間在右側(cè)
end所有子元素在盒子的右側(cè)顯示，富远遥空間在左側(cè)
center所有子元素居中
justify富余空間在子元素之間平均分布
Box-align 在垂直方向上對(duì)元素的位置進(jìn)行管理
Star所有子元素在頂部
end所有子元素在底部
center所有子元素居中

8.盒模型的陰影 可以多層疊加
box-shadow:[inset] x y blur [spread] color
參數(shù)
inset:投影方式
inset: 內(nèi)投影
不給： 外投影
x启具、y：陰影偏移
blur：模糊半徑
spread：擴(kuò)展陰影半徑
線擴(kuò)展原有的形狀，再開始畫陰影
color

9. 其它盒模型新增屬性
   box-reflect倒影
   direction方向 above|below|left|right;
   距離 10px
   漸變（可選）-webkit-linear-gradient(red,yellow)
   resize自由縮放
   Both 水平垂直都可以縮放
   Horizontal只有水平方向可以縮放
   Vertical只有垂直方向可以縮放
   注意：一定要配合overflow:auto 一塊使用只有水平方向可以縮放
   Box-sizing 盒模型解析模式
   Content-box 標(biāo)準(zhǔn)盒模型
   width/height = border + padding +content
   Border-box 怪異盒模型 width/height = content

Css3分欄布局
column-width 欄目寬度
column-count欄目列數(shù)
column-gap欄目距離
column-rule欄目間隔線

圓角
border-radius:1-4個(gè)數(shù)字/1-4個(gè)數(shù)字
前面是水平珊泳，后面是垂直
不給"/"則水平和垂直一樣
border-radius:10px/5px;
參數(shù)
各種長(zhǎng)度單位都可以：px,%,...
%有時(shí)候很方便鲁冯，但寬高不一致時(shí)不太好

邊框
邊框圖片border-image
border-image-sourceg 引入圖片
border-image-slice 切割圖片
border-image-width 邊框?qū)挾?br> border-image-repeat 圖片的排列方式
-round平鋪，repeat重復(fù)旨椒，stretch拉伸
邊框顏色border-colors

線性漸變
線性漸變格式
linear-gradient([<起點(diǎn)> || <角度>,] ? <點(diǎn)>,<點(diǎn)>...)
linear-gradient(60deg,red 0, blue 50%,pink 100%);
只能用在背景上
IE
filter:progid:DXImageTransform.Microsoft.gradient(start Colorstr="#ffffff",endColorstr="#ff0000",GradientType='1')
參數(shù)
-起點(diǎn)：從什么方向開始漸變 默認(rèn)：top

left晓褪、top、left top
-角度：從什么角度開始漸變
xxx deg的形式
-點(diǎn)：漸變點(diǎn)的顏色和位置
black 50%,位置可選

線性漸變實(shí)例
最簡(jiǎn)單
red,green從上到下
起點(diǎn)位置
left top,red,green
30deg,red,green
平鋪：repeating-linear-gradient

10.DOM優(yōu)化
減少Dom操作
盡量用節(jié)點(diǎn)克隆
-cloneNode
訪問(wèn)元素集合
-盡量用局部變量
元素節(jié)點(diǎn)
-盡量用只獲取元素的節(jié)點(diǎn)方法
選擇器API
-利用querySelector综慎、querySelectorAll
1.用變量聲明document
var doc = document;
2.用變量聲明list.length
var len = list.length;

Dom與瀏覽器
重排： 改變頁(yè)面的內(nèi)容
重繪： 瀏覽器顯示內(nèi)容
添加順序
-盡量在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; //把變量提上來(lái)緩存信息性能會(huì)比較好點(diǎn)
    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);
    }

文檔碎片優(yōu)化
    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與前端模板
能更好的對(duì)邏輯和視圖分離，MVC架構(gòu)的基礎(chǔ)