CSS CSS3

布局屬性

標簽的權(quán)值為1欺栗，類選擇符的權(quán)值為10，ID選擇符的權(quán)值最高為100 !important為最高權(quán)值important;

a:link一般狀態(tài) a:visited點擊后 a:hover鼠標經(jīng)過時 a:active:點擊時

list-style-type:none;去點 list-style-image列表圖片 list-style-position:900px;列表圖片位置

背景顏色background-color:;字體顏色color:; 邊框顏色border-color:;

display:none;顯示為無block顯示 display:block;區(qū)塊 display:inline-block;行內(nèi)塊元素

絕對定位(position:absolute)相對定位(position:relative)固定定位(position:fixed) placement-top:1px雾狈；放置絕對定位

text-align:center;水平居中 vertical-align: middle;把此元素放置在父元素的中部。left;左:right;右 ?opacity: 0.6;透明

font-weight:bold;字體加粗 italic=斜體 font-size:;字體大小 line-height:;行高

background-repeat:no-repeat;背景圖不重復(fù) repeat全圖 ?repeat-x repeat-y ?背景位置background-position:先x left后y center;

background:url(images/9821.png ) no-repeat left bottom 20px,url(images/9821.png )left top;多重背景語法

background-size:100%;背景圖片大小 ?background-size:cover;以背景圖最適合的比例鋪滿整個屏幕

background-attachment: fixed;背景圖片固定在相應(yīng)位置 ?z-index: 99;加大層疊權(quán)值

background-origin: content-box;從填充 ?background-origin: padding-box; 從外邊框???background-origin: border-box;從內(nèi)邊框 ?（背景圖的開始位置）

padding:填充;margin:邊界蚓哩；auto居中 上右下左如順時針尘应，padding:20px 10px 15px 30px; 上下 左右一樣padding:10px 20px ??box-sizing:border-box;讓填充在內(nèi)邊距

overflow: scroll;溢出的將以卷動滾動條的方式呈現(xiàn) hidden;隱藏溢出容器的內(nèi)容且不出現(xiàn)滾動條 ??auto;當內(nèi)容沒有溢出容器時不出現(xiàn)滾動條，當內(nèi)容溢出容器時出現(xiàn)滾動條峡继，按需出現(xiàn)滾動條

text-decoration:underline;下劃線 ???overline=上劃線 ?????line-through=中劃線 ?text-indent:2em;段落縮進

中文冯袍、字母間距l(xiāng)etter-spacing:50px;英文單詞間距word-spacing:50px; width:寬度； heigh:高度碾牌；

浮動=float:left;左康愤，float:right;右 防止浮動上來=overflow:hidden;clear:both;消除左右浮動

邊框=border:solid;實線，dashed（虛線）舶吗，dotted（點線） border:1px solid #fff;

border-radius:圓角;

CSS3動畫屬性

transition: all=全部 color=顏色 1s過度時間 規(guī)定速度效果的速度曲線征冷。?定義過渡效果何時開始; ??

transition-property:width; ?規(guī)定設(shè)置過渡效果的CSS屬性的名稱

transition-duration: 5s;??規(guī)定完成過渡效果需要多少秒或毫秒。

transition-timing-function: linear;?

規(guī)定速度效果的速度曲線誓琼。linear（默認）規(guī)定以相同速度開始至結(jié)束的過渡效果（等于cubic-bezier(0,0,1,1)）检激。

ease規(guī)定慢速開始，然后變快踊赠，然后慢速結(jié)束的過渡效果（cubic-bezier(0.25,0.1,0.25,1)）呵扛。?

ease-in規(guī)定以慢速開始的過渡效果（等于 cubic-bezier(0.42,0,1,1)）。

ease-out規(guī)定以慢速結(jié)束的過渡效果（等于 cubic-bezier(0,0,0.58,1)）

ease-in-out規(guī)定以慢速開始和結(jié)束的過渡效果（等于 cubic-bezier(0.42,0,0.58,1)）筐带。

cubic-bezier(n,n,n,n)在 cubic-bezier 函數(shù)中定義自己的值今穿。可能的值是 0 至 1 之間的數(shù)值伦籍。

transition-delay: 2s;延遲2秒執(zhí)行效果

transform-style: preserve-3d;設(shè)置為3D效果 ?perspective: 1000px;景深

transform:scale(1.2);放大先X后Y 1.2=X和Y rotate(-30deg)=旋轉(zhuǎn) ?translateZ(100px)=偏移 ?translate(X,Y)=偏移

transform-origin:x y z;設(shè)置動畫基準點

@keyframes=定義動畫 go=名稱{ 0%{transform:tranlateX(0px);} 50%{transform:tranlateY(300px);} 100%{transform:tranlateY(0px);}}?} ?

animation:name=定義名稱 10s=動畫總共時間 innear=勻速 ease-in=快到慢 ?ease-out=慢到快 ?ease-in-out=慢快慢

1s=延遲播放 infinite=無線播放（或者設(shè)置2次 20） alternate=反向播放;

animation-play-state:paused;=動畫暫停animation-fill-mode:forwards;停留最后一針 ?animation-fill-mode:backwards;在第一針位置等待

CSS3陰影屬性

text-shadow: 0px 3px 5px rgba(0,0,0,0.5);陰影代碼 可以多重陰影如text-shadow: 0px 3px 5px rgba(0,0,0,0.5),0px 3px 5px rgba(0,0,0,0.5);

第1個長度值用來設(shè)置對象的陰影水平偏移值蓝晒。可以為負值 第2個長度值用來設(shè)置對象的陰影垂直偏移值帖鸦≈マ保可以為負值

如果提供了第3個長度值則用來設(shè)置對象的陰影模糊值。不允許負值 ?rgba(0,0,0,0.5);顏色

box-shadow:;是背景陰影 text-shadow:;是內(nèi)容陰影

CSS3 選擇器

子選擇器即大于符號(>),用于選擇指定標簽元素的第一代子元素 ??.first>span{border:1px solid red;}<span>內(nèi)容</span>

p:target選擇器可用于選取當前活動的目標元素作儿。 當點擊 a鏈接 跳轉(zhuǎn)的目標元素樣式就會激活

例子跳轉(zhuǎn)至內(nèi)容 1</a> <p id="news1"><b>內(nèi)容 1...</b></p> ?

E::first-line 偽元素選擇器 選擇匹配E元素內(nèi)的第一行文本

E::first-letter 偽元素選擇器 選擇匹配E元素內(nèi)的第一個字符

E::before 偽元素選擇器 在匹配E的元素前面插入內(nèi)容

E::after 偽元素選擇器 在匹配E的元素后面插入內(nèi)容

使用E::before與E::after 為類選擇器需要配合（ content屬性來使用）content: "hello "

更深入的例子div:hover::before ?{ content: ''; ?height: 100%; top: 0; ?left: -5000px; ?position: absolute; ?width: 10000px; ?z-index: -1; }

:first-child選擇某個元素的第一個子元素洛二；

:last-child選擇某個元素的最后一個子元素；

:nth-child()選擇某個元素的一個或多個特定的子元素攻锰；:nth-child(4n+1)隔三選一 ?:nth-child()不支持負數(shù)

第一個參數(shù)是代表從第幾個參數(shù)開始選攘浪弧）:nth-child(2n)==:nth-child(even)"選擇偶數(shù) ?:nth-child(2n+1)"和":nth-child(odd)" 選擇奇數(shù)

:nth-last-child()選擇某個元素的一個或多個特定的子元素一喘，從這個元素的最后一個子元素開始算颓芭；

:nth-of-type()選擇指定的元素；如（ div p ::nth-of-type ） 或 :nth-of-type(even) 偶爾 odd 是奇數(shù)

:nth-last-of-type()選擇指定的元素悍引，從元素的最后一個開始計算妒蛇；

:first-of-type選擇一個上級元素下的第一個同類子元素机断；

:last-of-type選擇一個上級元素的最后一個同類子元素楷拳；

:only-child選擇的元素是它的父元素的唯一一個了元素；

:only-of-type選擇一個元素是它的上級元素的唯一一個相同類型的子元素吏奸；

:empty選擇的元素里面沒有任何內(nèi)容欢揖。

E[attr]：只使用屬性名，但沒有確定任何屬性值苦丁；

E[attr="value"]：指定屬性名浸颓，并指定了該屬性的屬性值；

E[attr~="value"]：指定屬性名旺拉，并且具有屬性值产上，此屬性值是一個詞列表，并且以空格隔開蛾狗，其中詞列表中包含了一個value詞晋涣，而且等號前面

E[attr^="value"]：指定了屬性名，并且有屬性值沉桌，屬性值是以value開頭的谢鹊；

E[attr$="value"]：指定了屬性名，并且有屬性值留凭，而且屬性值是以value結(jié)束的佃扼；

E[attr*="value"]：指定了屬性名，并且有屬性值蔼夜，而且屬值中包含了value兼耀；

E[attr|="value"]：指定了屬性名，并且屬性值是value或者以“value-”開頭的值（比如說zh-cn）;

E[attr][attr="value"]（ 可以有多個匹配 這樣只要是同時具有這兩屬性的元素都將被選中）

CSS3 彈性盒布局

display:flex;新版彈性盒模型 ?flex-direction:row;設(shè)置主軸為水平方向 ?flex-direction:column;設(shè)置主軸為垂直方向

flex-direction:row-reverse;設(shè)置主軸為水平反向排序 ?flex-direction:column-reverse;設(shè)置主軸為垂直反向排序

flex-wrap:no-wrap不換行wrap換行; ?指定子元素是否換行

justify-content:flex-start;元素在主軸開始位置 ?justify-content:flex-end;元素在主軸結(jié)束位置 justify-content:center;元素在主軸中間 ?justify-content:space-between;富郧罄洌空間平均分配在每兩個元素之間 ?justify-content:space-around;富粤鲈耍空間平均分配在每個元素兩側(cè)

align-items:flex-start;元素在側(cè)軸開始位置,富裕空間在側(cè)軸結(jié)束位置 ??align-items:flex-end;元素在側(cè)軸結(jié)束位置,富越程猓空間在側(cè)軸開始位置

align-items:center;元素在側(cè)軸中間,富哉兀空間在側(cè)軸兩側(cè) ??align-items:baseline;根據(jù)側(cè)軸方向上文字的基線對齊

flex-grow:1;彈性盒空間(2兩倍彈性空間)??order:?1;排列順序，數(shù)值小的排在前面(允許負值)

flex-shrink:0;屬性都為1韭山，當空間不足時郁季，都將等比例縮小。為0時則不會縮小

align-self:?center;用于覆蓋父級指定的布局方式

display:-webkit-box;老版彈性盒模型 ?-webkit-box-orient:horizontal;設(shè)置主軸為水平方向 ?-webkit-box-orient:vertical;設(shè)置主軸垂直平方向

-webkit-box-direction:reverse;反序排序 老板彈性盒模型需要兩條 -webkit-box-orient:horizontal; -webkit-box-direction:reverse; ?配合使用 ?并且不以邊界為起點

-webkit-box-pack:start;元素在主軸開始位置,富郧酰空間在主軸結(jié)束位置 ?-webkit-box-pack:end;元素在主軸結(jié)束位置,富怨ぃ空間在主軸開始位置

-webkit-box-pack:center;元素在中間,富裕空間在主軸兩側(cè) ??-webkit-box-pack:justify;富孕螅空間平均分配在每兩個元素之間

-webkit-box-align:start;元素在側(cè)軸開始位置,富裕空間在側(cè)軸結(jié)束位置 ??-webkit-box-align:end;元素在側(cè)軸結(jié)束位置,富圆ぞ唬空間在側(cè)軸開始位置

-webkit-box-align:center;元素在側(cè)軸中間,富越希空間在側(cè)軸兩側(cè)

-webkit-box-flex;彈性盒空間 ??-webkit-box-ordina-group;元素具體位置

HML HTML5標簽

meta 移動端設(shè)置標簽

<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

name="viewport"窗口設(shè)定 ?width=device-width頁面大小屏幕等寬 ?initial-scale=1初始化比例大小

minimum-scale=1.0允許縮放的最小比例 ??maximum-scale=1.0允許縮放的最大比例 ??user-scalable=no用戶是否可以縮放

常用HTML5標簽

contenteditable="true" 給某個元素加上該屬性就變成可編輯狀態(tài)

<header></header> ?頭部標簽

<nav></nav> ?導(dǎo)航條標簽

<main></main> ?頁面主題內(nèi)容標簽

<footer></footer> ?底部導(dǎo)航標簽

<time></time> ??標記時間

<progress></progress> ??進度條標簽?value值可以用來控制進度條

<audio></ audio>音頻控件彪杉、

[if !supportLists]??[endif]<audio></ audio>音頻控件、

[if !supportLists]??[endif]controls ?: ??顯示或隱藏用戶控制界面

[if !supportLists]??[endif]autoplay ?: ?媒體是否自動播放

[if !supportLists]??[endif]loop ?: 媒體是否循環(huán)播放

[if !supportLists]??[endif]currentTime ?: ?開始到播放現(xiàn)在所用的時間

[if !supportLists]??[endif]duration ?: ?媒體總時間(只讀)

[if !supportLists]??[endif]volume ?: ??0.0-1.0的音量相對值

[if !supportLists]??[endif]muted ?: ??是否靜音

[if !supportLists]??[endif]autobuffer ?: ??開始的時候是否緩沖加載牵咙，autoplay的時候派近，忽略此屬性

[if !supportLists]??[endif]paused ?: ??媒體是否暫停(只讀)

[if !supportLists]??[endif]ended ??: ??媒體是否播放完畢(只讀)

[if !supportLists]??[endif]error ??: ?媒體發(fā)生錯誤的時候，返回錯誤代碼(只讀)

[if !supportLists]??[endif]currentSrc ?: ??以字符串的形式返回媒體地址(只讀)

[if !supportLists]??[endif]play() ?: ?媒體播放

[if !supportLists]??[endif]pause() ?: ?媒體暫停

[if !supportLists]??[endif]load() ?: ?重新加載媒體

[if !supportLists]??[endif]（Video額外特性）

[if !supportLists]??[endif]poster ?: ??視頻播放前的預(yù)覽圖片

[if !supportLists]??[endif]width洁桌、height ?: ??設(shè)置視頻的尺寸

[if !supportLists]??[endif]videoWidth渴丸、videoHeight ?: ??視頻的實際尺寸(只讀)

[if !supportLists]??[endif]

插入音頻

分行 ??空格 ?<hr />水平橫線 ?

創(chuàng)建表格的四個元素table、tbody另凌、<th></th>：表格的頭部的一個單元格谱轨，也就是th標簽中的文本默認為粗體并且居中顯示

:表格的一行 td表格的一個單元格

當表格內(nèi)容非常多時，表格會下載一點顯示一點吠谢，但如果加上標簽后土童，這個表格就要等表格內(nèi)容全部下載完才會顯示。

HTML（表單標簽）

<form?autocomplete=”on”記錄之前輸入的內(nèi)容action=”當提交跳轉(zhuǎn)相應(yīng).html” novalidate當前嵌套的文本框不做校驗> placeholder="Email"提示信息

當type="text"為文本輸入框; ?????當type="password"為密碼輸入框工坊。

當type="email"為郵件輸入框献汗。 當type="url"為路徑輸入框。

type="submit"提交按鈕 ??type="button"普通按鈕 ??type="reset"重置 ?

type="file"=文件選擇框 ?accept=”?audio/*” ??multiple=” multiple”允許一個以上的(上傳)值王污。

audio/*?接受所有的聲音文件罢吃。video/*?接受所有的視頻文件。image/*?接受所有的圖像文件昭齐。

type="date"=日歷 ?type="color"=顏色選取器 ??

<input list="browsers" name="browser"><datalist id="browsers"><option value="Internet Explorer">?</datalist> ?常用下拉框組合

type="checkbox"為復(fù)選框當設(shè)置 checked="checked"時該選項被默認選中 ????

下拉列表框

文本域

舉列男</label> ?for 屬性中的值應(yīng)當與相關(guān)控件的 id 屬性值一定要相同尿招。??????????????????????????????????????????????????????

JavaScript筆記

事件觸發(fā)（window）

addEventListener("事件名如:click",函數(shù)名,flase為冒泡 true為捕獲);事件綁定（可以綁定多個函數(shù)）

removeEventListener("事件名如:click",函數(shù)名,flase為冒泡 true為捕獲);取消事件綁定

Event.cancelBubble = true;阻止事件冒泡（用于ie的阻止）event.stopPropagation();阻止事件冒泡（標準瀏覽器有效IE不行）Event.preventDefault();阻止鏈接默認行為，沒有阻止冒泡

onclick=鼠標單擊 ?ondblclick=鼠標雙擊??onblur=失去光標后 ??onseroll=鼠標滾動

onmouseenter=鼠標懸浮???onmouseover=移入??onmouseout=移開 ??onmousemove=鼠標移動

onmousedown=鼠標上的元素被按下觸發(fā)的事件?mouseup：鼠標按下后司浪，松開時觸發(fā)的事件

ontouchstart=手指按下??ontouchmove=手指移動??ontouchend=手指抬起

（注意：移動端開發(fā)時泊业，瀏覽器的模擬器時好時壞，一般不用on的方式綁定事件函數(shù)啊易，要用事件綁定的方式 addEventListener ）移動端事件對象：（touches = 當前位于屏幕上的所有手指列表??targetTouches = 位于當前DOM元素上的手指列表??changedTouches =?涉及當前事件的手指列表）

onkeydown=當鍵盤某個按鍵被按下時觸發(fā)此事件?onkeyup=當鍵盤上某個按鍵被按放開時觸發(fā)此事件?onkeypress=當鍵盤某個鍵被按下并且釋放時觸發(fā)此事件.

onchange=當前元素失去焦點并且元素的內(nèi)容發(fā)生改變而觸發(fā)此事件?onfocus=當某個元素獲得焦點時觸發(fā)此事件?onreset=當表單中RESET的屬性被激發(fā)時觸發(fā)此事件?onsubmit=表單被遞交時觸發(fā)此事件

window.onresize=當瀏覽器的窗口大小被改變時觸發(fā)此事件

window.onload=加載后執(zhí)行 ?window.onerror=出現(xiàn)錯誤時觸發(fā)此事件

window.onunload=當前頁面將被改變時觸發(fā)此事件

onpaste=?當內(nèi)容被粘貼時觸發(fā)此事件???onselect=當文本內(nèi)容被選擇時的事件

oncontextmenu=當瀏覽者按下鼠標右鍵出現(xiàn)菜單時或者通過鍵盤的按鍵觸發(fā)頁面菜單時觸發(fā)的事件

DOM元素屬性?（Element）

[if !supportLists]1)?[endif]document.getElementById(“box”); ??獲取一個ID元素

[if !supportLists]2)?[endif]document.getElementsByTagName(“div”); ??獲取所有標簽為div的

[if !supportLists]3)?[endif]document.getElementsByClassName(“dom”);????獲取所有class為dom的

[if !supportLists]4)?[endif]document.getElementsByName(“name”); ??獲取name屬性返回數(shù)組

[if !supportLists]5)?[endif]document.querySelector(“#id #d1”); ??能像CSS一樣獲取元素不兼容IE8以下 返回的是一個元素

[if !supportLists]6)?[endif]document.queryselectorAll(“#ul li”);???能像CSS一樣獲取元素不兼容IE8以下 ?返回的是一組元素

[if !supportLists]7)?[endif]（注意）className 返回的是字符串（”me1 me2”）classList返回的是數(shù)組 ?[“me1”],[“me2”]

[if !supportLists]8)?[endif]元素.classList=獲取所有class類名 ?元素.classList.add("類名")=在后面添加class類名 ?

[if !supportLists]9)?[endif]元素.classList.remove("類名")=刪除class類名方法 ??

[if !supportLists]10)?[endif]元素.classList.toggle("類名")=如果這個類名不存在就添加吁伺，存在刪除

[if !supportLists]11)?[endif]元素.parentNode=獲取父節(jié)點 （11） 元素.children=獲取子節(jié)點

[if !supportLists]12)?[endif]元素.firstElementChild=獲取第一個子節(jié)點 ?

[if !supportLists]13)?[endif]元素.slastElementChild=獲取最后一個節(jié)點

[if !supportLists]14)?[endif]元素.previousElementSibling=獲取上一個節(jié)點 ?（同級的上一個）

[if !supportLists]15)?[endif]元素.nextElementSibling=獲取下一個節(jié)點 （同級的下一個）

[if !supportLists]16)?[endif]document.createDocumentFragment()創(chuàng)建一個DOM載體，可用于一次性添加

[if !supportLists]17)?[endif]document.createElement('h1')=創(chuàng)建一個節(jié)點

[if !supportLists]18)?[endif]變量.style.cssText='height:100px;width:100px;';能添加多條樣式并提高性能

[if !supportLists]19)?[endif]父級.appendChild(節(jié)點)=在某個元素里后面添加一個節(jié)點

[if !supportLists]20)?[endif]父級.insertBefore(節(jié)點,何處);在指定位置（前面）插入一個節(jié)點

[if !supportLists]21)?[endif]父級.insertAfter()租谈；在指定位置（后面）插入一個節(jié)點

[if !supportLists]22)?[endif]父級.removeChild(元素)=刪除一個節(jié)點(注意：使用前要聲明父級)

[if !supportLists]23)?[endif]父級.cloneNode(true表示克隆子節(jié)點一起 默認false表示不克隆子節(jié)點); ?

[if !supportLists]24)?[endif]父級.replaceChild(元素,元素);用第一個元素替換掉第二個元素

[if !supportLists]25)?[endif]元素.remove()刪除自身

[if !supportLists]26)?[endif]元素.insertAdjacentHTML('beforebegin', '<p>hello </p>');?作為前一個同輩元素被插入

[if !supportLists]27)?[endif]元素.insertAdjacentHTML('afterend', '<p>hello </p>');作為后一個同輩元素被插入

[if !supportLists]28)?[endif]元素.insertAdjacentHTML('afterbegin', '<p>hello </p>');作為第一個子元素被插入

[if !supportLists]29)?[endif]元素.insertAdjacentHTML('beforeend', '<p>hello </p>');作為最后一個子元素被插入

[if !supportLists]30)?[endif]元素.setAttribute("屬性名","屬性");=設(shè)置屬性 ??

[if !supportLists]31)?[endif]元素.getElementBytag("屬性名");=獲取屬性 ?

[if !supportLists]32)?[endif]元素.removeAttribute=刪除屬性 ?

[if !supportLists]33)?[endif]元素.getAttribute(“屬性”)=獲取相對路徑或者屬性

window 下的方法（window）

History.pushState('name','title22','/path'); //推進一個狀態(tài)

History.replaceState('name',"title",'/path'); //替換一個路由

History.back(); //加載 history 列表中的前一個 URL篮奄。

History.forward(); //加載 history 列表中的下一個 URL。

History.go(); //加載 history 列表中的某個具體頁面割去。

window.onhashchange = function(){} ??當hash改變時觸發(fā)此函數(shù)

window.btoa(str)Base64轉(zhuǎn)碼（注意不能轉(zhuǎn)碼中文）window.atob("Base64")?Base64解碼

window.encodeURIComponent("url轉(zhuǎn)碼") window.decodeURIComponent(“URL解碼”)

window.localStorage沒有過期時間 瀏覽器關(guān)閉后不消失 ?window.sessionStorage 瀏覽器關(guān)閉后會消失 ?H5存儲

window.localStorage.setItem('name','222'); ???存值

window.localStorage.getItem('name'); ???取值

window.localStorage.removeItem('name'); ??刪除

innerHTML=找相應(yīng)的代碼 ?javascript:void(0)空鏈接窗口不動 ??typeof=檢查數(shù)據(jù)類型

setInterval=開始定時器 ?setTimeout(func(){},300)=只重復(fù)一次 ??clearInterval=清除定時器 ?

while for break=跳出循環(huán) continue跳出當前循環(huán) eval=轉(zhuǎn)成代碼執(zhí)行

var date=new Date();=系統(tǒng)時間 ?

date.setDate(date.getDate() - 1); ?//昨天的時間

date.setDate(date.getDate() + 1); //明天的時間??

date.setTime(毫秒) //設(shè)置時間戳 ?date.getTime() //獲取時間戳

date.getFullYear(); //得到年份???date.getMonth() + 1, //月份 ?

date.getDate(), //日????date.getHours(), //小時

date.getMinutes(), //分???date.getSeconds(), //秒

date.getDay(); //周（數(shù)值類型）?date.getMilliseconds();//獲取毫秒

var date=new Date(2018,10,26,9,10,36);=定義一個（之前或未來）時間

以下是定義之前或者未來允許的（時間格式）

new Date("2009-1-1"); ?new Date("2009/1/1"); new Date(2009,1,3)

new Date("2009-1-1 3:21"); ?new Date("2009/1/1 3:21");

（注意）：定義之前或者未來時間有個小Bug(當參數(shù)錯了或當前沒31號窟却，照樣會被定義出來)

以下公式計算（今天于未來的時間差）

Math.floor(時間戳/?86400000)=天 ??Math.floor()=向下取整

Math.floor(時間戳%86400000/?3600000)=小時

Math.floor(時間戳%86400000%3600000/60000)=分

Math.floor(時間戳%86400000%3600000%60000/1000)=秒

Math.random()=0-1之間的小數(shù) ?Math.floor()=向下取整 Math.ceil()=向上取整 ??

Math.abs()把正數(shù)轉(zhuǎn)換為負數(shù)???Math.round()四舍五入

ES6的Math?方法

Math.trunc() ?方法用于去除一個數(shù)的小數(shù)部分，返回整數(shù)部分

Math.sign() ??方法用來判斷一個數(shù)到底是正數(shù)呻逆、負數(shù)夸赫、還是零。??參數(shù)為正數(shù)咖城，返回+1茬腿；參數(shù)為負數(shù)呼奢，返回-1；??參數(shù)為0切平，返回0握础；參數(shù)為-0，返回-0;?其他值悴品，返回NaN禀综。

Math.sinh(x)返回x的雙曲正弦（hyperbolic sine）

Math.cosh(x)返回x的雙曲余弦（hyperbolic cosine）

Math.tanh(x)返回x的雙曲正切（hyperbolic tangent）

Math.asinh(x)返回x的反雙曲正弦（inverse hyperbolic sine）

Math.acosh(x)返回x的反雙曲余弦（inverse hyperbolic cosine）

Math.atanh(x)返回x的反雙曲正切（inverse hyperbolic tangent）

BOM窗口屬性（window）

var weizhi=ev||event; weizhi.clientX ?weizhi.clientY可視區(qū)位置

document.documentElement.scrollTop||document.body.scrollTop=滾動距離

document.documentElement.clientWidth=可視區(qū)寬度 ??

document.documentElement.clientHeight=可視區(qū)高度

元素.clientWidth=獲取元素的寬度 ??元素.clientHeigth=獲取元素的高度

元素.getBoundingClientRect()=某元素離可視區(qū)高度距離 ，自身寬高等

元素.offsetTop=獲取計算后的屬性 ??元素.scrollTop=獲取某元素滾動距離

window.innerHeight=瀏覽器內(nèi)部高度 ?window.innerWidth=瀏覽器內(nèi)部寬度

screen.avaiHeight=可用高度 ?screen.avaiWidth=可用寬度 ?

screen.height=高度 ?screen.width=寬度

open('網(wǎng)址或路徑','_blank=新建窗口','_self=在當前打開') close()=關(guān)閉當前瀏覽器

window.navigator.userAgent=檢測瀏覽器版本

window.location.hostname返回WEB主機域名 ?

window.location.pathname返回當前頁面的路徑和文件名 ?

window.location.port返回主機的端口

window.location.protocol返回所使用的WEB協(xié)議 ?

window.location.href返回當前頁面的URL

window.location.assign方法加載新的文檔

Number ES6方法（Number.protopety）

（1）Number.isFinite(Number)檢查一個數(shù)值是否為有限的?return Booleab

（2）Number.parseInt=轉(zhuǎn)換為整數(shù) （3）Number.parseFloat=浮點數(shù)

（4）Number.isNan(Numbel)=?判斷是否是數(shù)值類型return?Boolean類型

（5）Number.isInteger() 判斷一個值是否為整數(shù)???return?Boolean類型

ES7新增了一個指數(shù)運算符（**）

let?a = 2;???a **= 2;???//等同于 a = a * a;

let?b = 3;???b **= 3;???//等同于 b = b * b * b;

String字符串方法（String.prototype）

JSON.parse()將json字符串轉(zhuǎn)成json對象苔严。JSON.stringify()將json對象轉(zhuǎn)換成json字符串定枷。

（1）str.charAt(index);??返回子字符串，index為字符串下標邦蜜，

（2）str.slice(下標,下標)=截取元素 ?slice('')=截取每一個元素 slice(0,-4)從0到倒數(shù)第四個

（3）str.split(separator,limit);?參數(shù)1指定字符串或正則依鸥，參照2指定數(shù)組的最大長度 返回數(shù)組

（4）str.indexOf(元素,起始點)=找到后，返還相應(yīng)下標悼沈，找不到返回-1

（5）str.lastIndexOf(元素,起始點); ?從右往左找子字符串贱迟，找到返還相應(yīng)下標，找不到時返回-1

（6）str.concat(str1,str2) 將兩個或多個字符的文本組合起來絮供，返回一個新的字符串衣吠。

（7）substring(起始點,結(jié)束點) 返回值:提取的字符串起點到終點（不包含結(jié)束點）

（8）str.trim()????去除字符串首尾空格

（9）str.charCodeAt(index);??返回子字符串的unicode編碼，

（10）String.fromCharCode(num1,...num2);??根據(jù)unicode編碼返回字符串

charCodeAt 49-58=數(shù)字 charCodeAt 65-91大寫的英文 charCodeAt 97-123小寫的英文

（11）toUpperCase()=轉(zhuǎn)成大寫 ?（12）toLowerCase=小寫

以下是ES6字符串方法

（13）Includes(str) ?返回布爾值壤靶，表示是否找到了參數(shù)字符串缚俏。

（14）startsWith(str) 返回布爾值，表示參數(shù)字符串是否在源字符串的頭部贮乳。

（15）endsWith()返回布爾值忧换，表示參數(shù)字符串是否在源字符串的尾部。

（16）str.repeat(3)方法返回一個新字符串向拆，表示將原字符串重復(fù)n次

（17）'?'.at(0) ??// "?" ?返回字符串給定位置的字符

以下是ES7字符串方法

'str.padStart(5, 'ab') ?// 'ababx'???padStart用于頭部補全

'str.padEnd?(5, 'ab') ?// 'ababx' ??padEnd用于尾部補全亚茬。

Array數(shù)組方法（Array.prototype）

（1）arr.push(元素 )=從尾部添加（2）arr.pop(元素 )刪除最后一個元素并返回刪除的元素。

（3）arr.unshift(元素 )=從頭部添加（4）arr.shift(元素 )第一個元素刪除并返回第一個元素的值浓恳。

（5）arr.toString()把數(shù)組轉(zhuǎn)換為字符串刹缝，并返回結(jié)果（不操作源數(shù)組）

（6）arr.concat=連接一個數(shù)組 列如 ?var a=[1.2.3]; var b=[4.5.6]; a.concat(b);??//[1,2,3,4,5,6] 該方法是淺拷貝

（7）arr.join()=將數(shù)組轉(zhuǎn)換成字符串= ?a=[1,2.3] ??a.join(“”)?//”123”?a.join(“-“)?//”1-2-3”?

（8）arr.reverse()=反轉(zhuǎn)數(shù)組項的順序。

（9）arr.sort(function(n1,n2){return n1-n2;});數(shù)組排序 ?return n1-n2?從小到大排序颈将，return n2-n1?從大到小排序（操作源數(shù)組）

（10）slice(下標,下標)=截取元素 ?slice('')=截取每一個元素 slice(0,-4)從0到倒數(shù)第四個 兩個參數(shù)都可以接受負數(shù)

（11）split('元素',限制長度)=分割成數(shù)組{如果加元素就以元素為分割} var a='12-5-6';a.split('-');a=[0=12 1=5 2=6]

（12）splice(下標,下標,值,) 一個參數(shù)時則從下標開始刪到尾 兩個參數(shù)時從下標刪到下標的位置

三個參數(shù)時(下標,數(shù)量>0,值)是修改 三個參數(shù)時從(下標,數(shù)量是0的話,值)是增加在下標的前面

（13）arr.indexOf(index)=接收兩個參數(shù)：要查找的項和（可選的）表示查找起點位置的索引梢夯。其中， 從數(shù)組的開頭（位置 0）開始向后查找晴圾。?（14）arr.lastIndexOf(index)=接收兩個參數(shù)：要查找的項和（可選的）表示查找起點位置的索引颂砸。其中，從數(shù)組的末尾開始向前查找。

（15）arr.forEach(function(value,index, array){});對數(shù)組進行遍歷循環(huán)（操作源數(shù)組）

（16）arr.map(function(value,index,array){return});返回每次函數(shù)調(diào)用的結(jié)果組成的數(shù)組沾凄。（不操作源數(shù)組）

（17）arr.filter(function(value,index,array){return});返回滿足過濾條件組成的數(shù)組梗醇。（不操作源數(shù)組）

（18）arr.every(function(value,index,array){return});判斷數(shù)組中每一項都是否滿足條件，只有所有項都滿足條件撒蟀，才會返回true（不操作源數(shù)組）

（19）arr.some(function(value,index,array){return});判斷數(shù)組中是否存在滿足條件的項，只要有一項滿足條件温鸽，就會返回true保屯。（不操作源數(shù)組）

（20）arr.reduce(function(prev, cur, index, array){ return?prev + cur; },10);返回的值決定return是什么 （參數(shù)1是上一個，參數(shù)2是下一個）

（21） reduceRight ）的作用跟這個一樣涤垫，只不過從數(shù)組右邊往左遍歷（不操作源數(shù)組）

Array ES6數(shù)組方法（Array.prototype）

（1）Array.from(arr)轉(zhuǎn)為真正的數(shù)組姑尺，并返回結(jié)果（二個參數(shù)，作用類似于數(shù)組的map方法）（不操作原數(shù)組）

（2）arr.find((value,index,arr)){return}用于找出第一個符合條件的數(shù)組成員蝠猬，然后返回該成員切蟋。（不操作原數(shù)組）

（3）arr.findIndex((value,index,arr)){return}用于找出第一個符合條件的數(shù)組成員，然后返回該成員（索引index）（不操作原數(shù)組）

（4）arr.fill(“填充內(nèi)容”,”起始位置”,”結(jié)束位置”)填充一個數(shù)組榆芦。

（5）arr.keys() ?arr.values() ?arr.entries() 返回一個（Iterator）遍歷器

（6）arr.includes(value)回一個布爾值柄粹，表示某個數(shù)組是否包含給定的值。該方法屬于ES7

對象的屬性（Object）

（1）__proto__原型鏈 ??（2）prototype=原型 ?

（3）constructor=構(gòu)造函數(shù)（如果給prototype賦值一個引用數(shù)據(jù)類型 constructor會丟失）

（4）obj.constructor.name="檢測數(shù)據(jù)類型"

（5）obj.hasOwnProperty判斷是否是自身原型上的私有屬性 ??delete刪除屬性 ?

（6）Object.getOwnPropertyDescriptor(obj,”屬性”)方法可以獲取該屬性的描述對象匆绣。如：enumerable 可枚舉性等

ES6 對象方法

（1）Object.is({}, {}) ?用來比較兩個值是否嚴格相等驻右，與嚴格比較運算符（===）的行為基本一致。return Boolean類型

（2）Object.assign(target, obj,…) ??用于對象的合并崎淳，將源對象（obj）的所有（自身不包含原型鏈上的）可枚舉屬性堪夭，復(fù)制到目標對象（target）（該方法是淺拷貝）

（3）Object.getOwnPropertyNames(obj)?返回一個數(shù)組，包含對象自身的所有屬性（不含Symbol屬性拣凹，但是包括不可枚舉屬性）森爽。

（4）Object.getOwnPropertySymbols(obj)???返回一個數(shù)組，包含對象自身的所有Symbol屬性嚣镜。

（5）Reflect.ownKeys(obj)?返回一個數(shù)組爬迟，包含對象自身的所有屬性，不管是屬性名是Symbol或字符串祈惶，也不管是否可枚舉雕旨。

（6）Object.setPrototypeOf(object, obj.prototype) ?同于下function?(obj, obj.prototype) { ?obj.__proto__ = proto; ?return?obj; ?} ?設(shè)置原型鏈

（7）Object.getPrototypeOf(obj); ?用于讀取（原型鏈）__proto__對象

（8）Object.keys(obj) ?方法捧请，返回一個數(shù)組凡涩，成員是參數(shù)對象自身的（不含繼承的）所有可遍歷（enumerable）屬性的鍵名

（9）Object.values(obj) ?方法返回一個數(shù)組，成員是參數(shù)對象自身的（不含繼承的）所有可遍歷（enumerable）屬性的鍵值疹蛉。

（10）Object.entries(obj)方法返回一個數(shù)組活箕，成員是參數(shù)對象自身的（不含繼承的）所有可遍歷（enumerable）屬性的鍵值對數(shù)組。

（11）Object.getOwnPropertyDescriptors(obj) ?返回指定對象所有自身屬性和方法（非繼承屬性）的描述對象可款。

function下的方法（function.prototype）

function.prototype下的改變（this）指向方法. ??call(改this,N個參數(shù)...) ???bind(改this)返回一個綁定this的函數(shù) ??apply(改this,參數(shù)是數(shù)組或者類數(shù)組)

canvas(畫布)??canvas元素默認具有高寬 ?width:300px; ?height:150px;

var canvas = document.getElementById(‘canvas’);

var ctx = canvas.getContext('2d'); ??渲染上下文和它的繪畫功能育韩。

（1）canvas提供了三種方法繪制矩形fillRect, strokeRect, clearRect

fillRect(x, y, width, height) 繪制一個填充的矩形（填充色默認為黑色）

strokeRect(x, y, width, height) 繪制一個矩形的邊框（默認黑色）

clearRect(x, y, width, height)清除指定矩形區(qū)域克蚂，填充一個背景色

（2）添加樣式和顏色

fillStyle:設(shè)置圖形的填充顏色。strokeStyle :設(shè)置圖形輪廓的顏色筋讨。

linewidth=當前繪線的粗細

lineJoin:?設(shè)定線條與線條間接合處的樣式（默認是miter）round : 圓角bevel : 斜角miter : 直角round : 圓角 bevel : 斜角 miter : 直角

（3）繪制路勁

moveTo(x, y) ??設(shè)置筆觸起點：指定的坐標x以及y上

lineTo(x, y) ?將筆觸移動到指定的坐標x以及y上

closePath() ?閉合路徑埃叭，??如果圖形已經(jīng)閉合了的，即當前點為開始點悉罕，該函數(shù)什么也不做

stroke() ?通過線條來繪制圖形輪廓赤屋。不會自動調(diào)用closePath()

lineCap=butt方形?round圓形?square方形?線段末端以指定形式結(jié)束?round ?square增加了一個高度，是線段厚度一半的矩形區(qū)域

fill() ?填充路徑的內(nèi)容區(qū)域生成實心的圖形壁袄。自動調(diào)用closePath()

rect(x, y, width, height) ?繪制矩形

clip()從原始畫布中剪切任意形狀和尺寸类早。

（4）保存狀態(tài) 與 重新繪制

beginPath() ?重新繪制新的圖形（清空在此之前所有關(guān)聯(lián)的筆繪）

save() ?存到棧中的繪制狀態(tài)

restore() ?通過在繪圖狀態(tài)棧中彈出頂端的狀態(tài)

（5）畫圓

arc(x, y, radius, startAngle, endAngle*Math.PI/180, anticlockwise)radius為半徑，startAngle以及endAngle參數(shù)用弧度定義了開始以及結(jié)束的弧度嗜逻，這些都是以x軸為基準涩僻。anticlockwise 為一個布爾值。為true時栈顷，是逆時針方向逆日，否則順時針方向。

arcTo(x1, y1, x2, y2, radius) 根據(jù)控制點和半徑畫一段圓弧?(x1 y1) ?(x2 y2)只是控制一個方向

quadraticCurveTo(cp1x, cp1y, x, y)繪制二次貝塞爾曲線妨蛹，cp1x,cp1y為一個控制點屏富，x,y為結(jié)束點。起始點為moveto時指定的點蛙卤。

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)繪制三次貝塞爾曲線绰垂，cp1x,cp1y為控制點一乞榨，cp2x,cp2y為控制點二惶室，x,y為結(jié)束點汁讼。起始點為moveto時指定的點

（6）canvas中的變換所有的變換（多次添加都是累加的）

translate(x, y)它用來移動canvas的原點到一個不同的位置。

rotate(angle*Math.PI/180)旋轉(zhuǎn)的角度(angle)行嗤，它是順時針方向的

scale(x, y)分別是橫軸和縱軸的縮放因子已日，它們都必須是正值。

（7）繪制圖像與文本操作

1?ctx.drawImage(img, x, y, width ,height); 繪制一張圖片栅屏，需要等圖片加載后才能操作

實例var img = new Image(); ?img.src="tg.png"; img.onload=function(){ draw(); }

function draw(){ ?ctx.drawImage(img,0,0,img.width,img.height) ?}

2?ctx.createPattern(img,"no-repeat");?返回一個背景對象飘千，需要等圖片加載后才能操作

實例var img = new Image(); ?img.src="tg.png"; ?img.onload=function(){draw();}

function draw(){ var pattern = ctx.createPattern(img,"no-repeat")

?ctx.fillStyle=pattern; ctx.fillRect(0,0,300,300); }

3 var gradient = ctx.createLinearGradient(x起點,y起點, x終點, y終點);返回一個填充漸變

實例gradient.addColorStop(0,"red"); ?gradient.addColorStop(0.5,"yellow"); gradient.addColorStop(1,"green"); ctx.fillStyle=gradient; ctx.fillRect(0,0,300,300);

4 var r= ctx.createRadialGradient(x, y, r1, x2, y2, r2)返回一個圓形漸變

實例 var gradient = ctx.createRadialGradient(150, 150, 50, 150, 150, 100)

gradient.addColorStop(0,"red"); ?gradient.addColorStop(0.5,"yellow");

gradient.addColorStop(0.7,"pink"); gradient.addColorStop(1,"green");

ctx.fillStyle=gradient; ?ctx.fillRect(0,0,300,300);

5?ctx.fillText(text, x, y) ?在指定的(x,y)位置填充指定的文本

6?ctx.strokeText(text, x, y) ?在指定的(x,y)位置繪制文本邊框

7 ctx.font = “10px sans-serif” 指定文字的字體大小??默認是10px sans-serif。在指定時栈雳，必須要有大小和字體 缺一不可

8?Ctx. textAlign=left左right右center居中; ?水平對齊方式根據(jù)填充的X位置

9?textBaseline=top頂部?middle中間bottom底部;??垂直對齊方式根據(jù)填充的Y位置

10?ctx.measureText(text)返回一個 TextMetrics 對象护奈，包含關(guān)于文本尺寸信息 例如文本的寬度

（8）canvas中的像素操作

1?ctx.getImageData(sx, sy, sw, sh):獲得一個包含畫布場景像素數(shù)據(jù)的ImageData對像,它代表了畫布區(qū)域的對象數(shù)據(jù)

sx:提取的圖像數(shù)據(jù)矩形區(qū)域的左上角 x 坐標。 ?sy:提取的圖像數(shù)據(jù)矩形區(qū)域的左上角 y 坐標哥纫。

sw:將要被提取的圖像數(shù)據(jù)矩形區(qū)域的寬度霉旗。 ?sh:將要被提取的圖像數(shù)據(jù)矩形區(qū)域的高度。

2?ImageData對象中存儲著canvas對象真實的像素數(shù)據(jù)，它包含以下幾個只讀屬性：

width:圖片寬度厌秒，單位是像素 ?height:圖片高度读拆，單位是像素 ?data:Uint8ClampedArray類型的一維數(shù)組，包含著RGBA格式的整型數(shù)據(jù)鸵闪，范圍在0至255之間（包括255）R:0 --> 255(黑色到白色)?G:0 --> 255(黑色到白色)?B:0 --> 255(黑色到白色)?A:0 --> 255(透明到不透明)

3?ctx.createImageData(width, height); 創(chuàng)建一個ImageData對象 默認創(chuàng)建出來的是透明的

4?ctx.putImageData(myImageData, dx, dy) 方法去對場景進行像素數(shù)據(jù)的寫入檐晕。

（9）canvas中的全局透明屬性與重疊屬性

1 ctx. globalAlpha = 0.5 這個屬性影響到canvas里所有圖形的透明度，范圍是 0.0到 1.0

2?ctx. globalCompositeOperation=”source-over(默認值)”; ?覆蓋合成屬性

source:新的圖像(源)??destination:已經(jīng)繪制過的圖形(目標)

1?source-over?源在上面,新的圖像層級比較高???(默認值)

2?source-out :只留下源超過目標的部分

3?source-in只留下源與目標的重疊部分(源的那一部分)??

4?source-atop:砍掉源溢出的部分

5?destination-over:目標在上面,舊的圖像層級比較高

6?destination-in:只留下源與目標的重疊部分(目標的那一部分)?

7?destination-out:只留下目標超過源的部分

8?destination-atop:砍掉目標溢出的部分

（10）canvas圖片導(dǎo)出與事件與透明度

1?ctx.isPointInPath(x,y) ?判斷x,y上是否繪制了canvas路勁

實例：canvas.onclick=function(ev){ ev = ev||event;

var x = ev.clientX - canvas.offsetLeft; ?var y = ev.clientY - canvas.offsetTop;

if(ctx.isPointInPath(x,y)){ ?alert(123); } }

2?canvas.toDataURL(type默認為image/png,encoderOptions可以從0到 1 的區(qū)間內(nèi)選擇圖片的質(zhì)量蚌讼。如果超出取值范圍棉姐，將會使用默認值0.92。其他參數(shù)會被忽略啦逆。?); 返回值是導(dǎo)出當前繪制的canvas繪制的圖片

3?ctx.globalAlpha=0.2; ?設(shè)置全局透明度?0-1之間

正則表達式（RegExp.prototype）

（捕獲時使用）注意：正則中每個（）代表一個分組?$1代表第一個分組$2代表第二個分組…

（1）正則.text(str); ??查看str這個字符串是否符合正則要求 返回值是（boolean）值

（2）正則.exec(str); ?捕獲字符串是否有正則規(guī)則相應(yīng)的字符，成功返回（[捕獲的內(nèi)容,下標,字符串內(nèi)容]）失敗返回（null）（每次只能捕獲一個滿足條件的笛洛，需要捕獲多個首先加個全局修飾符g再多次調(diào)用） 注意:如果有分組如(),返回的結(jié)果就是[捕獲的內(nèi)容,分組,下標,字符串內(nèi)容]

（3）str.match(正則); ?捕獲正則規(guī)則的字符串夏志，如果正則沒有加全局g?返回值是：[捕獲的內(nèi)容,下標,字符串內(nèi)容] ?如果加了全局g，正則規(guī)則匹配到的字符串返回（一個數(shù)組?）失敗返回（null）注意:如果有分組如(),并且沒加全局g?返回結(jié)果就是[捕獲的內(nèi)容,分組,下標,字符串內(nèi)容]

（4）str.search(正則); ?在字符串中查找正則匹配的內(nèi)容苛让，返回一個（index索引）位置

（5）str.replace(正則沟蔑，”指定字符串”);??在字符串中查找正則匹配的內(nèi)容，進行替換（返回新字符串）不加全局修飾符g則替換符合規(guī)則的一個狱杰，加了全局修飾符g則全部替換 ?

（5）str.replace的第二種正則用法是str.replace(正則,function(捕獲的內(nèi)容瘦材，分組，…分組仿畸，下標食棕，字符串內(nèi)容){});return是替換正則匹配的值。（注意：字符串有多個匹配的則函數(shù)調(diào)用N次错沽，正則匹配加了全局g則匹配多次）

/ \d=數(shù)字 / ?/\D=除了數(shù)字 \???

/\w=英文,數(shù)字,下劃線/??/\W=除了英文,數(shù)字,下劃線/

/\b/=匹配一個邊界（開頭簿晓，結(jié)尾，空格千埃，\n憔儿，都是邊界。）/\B/=匹配一個非邊界

/\s/=匹配一個空白符（空格放可，\n谒臼，換行，都是空白符）/\S/=匹配不是空白符任意一個

（2）量詞元字符不可以單獨使用耀里，加在元字符后面使用蜈缤，表示前面的元字符出現(xiàn)的次數(shù)

*?不出現(xiàn)或多次???+?出現(xiàn)一次或者多次???？不出現(xiàn)或一次???.表示除了\n以外任意一個字符

{n}出現(xiàn)n次???{n备韧，}出現(xiàn)n次與無數(shù)次 ??{n劫樟，m}出現(xiàn)n次到m次 ??|左邊或右邊一份為二

()優(yōu)先執(zhí)行，作用域(?:)前面加?:代表此分組不被捕獲???\1代表第一個()的分組字符串復(fù)制一次

有特殊意義的元字符進到[]中就變成本身的意義?比如（.+*? ?等特殊意義字符）(-)除外(-)放在最后面代表非特殊意義[xyz]（匹配其中一個即可）??[a-z]從字符a-z（中選一個即可）??[0-9a-zA-Z_]匹配0到9或a到z字母或大寫A-Z字母（中選一個即可）[^123] 非123即可返回真

g=查找全局 ?i=忽悠大小寫; ??

Node.js

當node在執(zhí)行模塊中的代碼時，它首先在代碼的最頂層叠艳，添加一個函數(shù)并傳入五個參數(shù)(function (exports,require,module="代表當前模塊本身",__filename=當前文件絕對路勁,__dirname=當前所在文件夾絕對路徑){})()

module.exports=變量;?導(dǎo)出模塊???require(“./a.js”);引入模塊

var nav=require('nav');//nav在根目錄不存在奶陈，去node_modules ，找到了nav文件夾附较。 nav文件夾下面有package.json 吃粒，//找 package.json 入口文件 "main": "nav.js",

npm -g install supervisor?安裝改代碼自動重啟web服務(wù)

supervisor“文件名“ 如：supervisor?app.js

url（解析url模塊）?let url = require('url');

url.parse("url",true); //解析URL第二個參數(shù)如為true返回query 則解析成對象

url.resolve('http://example.com/one', '/two')//'http://example.com/two'替換

?

?

fs（操作文件夾）let fs = require('fs');fs.readFileSync("pathName路徑","編碼格式utf-8","function(error,value){}") //同步讀取文件fs.readFile("pathName路徑","編碼格式utf-8") //異步讀取文件

fs.readdirSync("路勁") ?//同步讀取文件夾fs.readdir("路勁",(error,value)=>{}) ?//異步讀取文件夾

fs.writeFileSync("pathName路徑","內(nèi)容","編碼格式utf-8") //同步寫入fs.writeFile("pathName路徑","內(nèi)容","編碼格式utf-8","function(error,value){}") //異步寫入

var rs=fs.createReadStream("url");創(chuàng)建可讀流（適合大文件讀取,音頻，視頻等）

rs.on('data',(data) =>{ ?str+=data; })??//?每讀取一次觸發(fā)一次rs.on('end',(chunk) =>{ console.log("chunk:="+chunk) })?//?讀取完成rs.on('error',(err)=>{ console.log(err); })//讀取失敗

var ws=fs.createWriteStream("url");創(chuàng)建可寫流（適合大文件寫入,音頻,視頻等）ws.once('open',function () {console.log('流打開了~~~');}); ?//監(jiān)聽流打開ws.once('close',function () {console.log('流關(guān)閉了~~~');}); //監(jiān)聽流關(guān)閉ws.write('data流寫入拒课，可以寫入多次','utf8'); //往文件寫入內(nèi)容ws.end(); //標記寫入完成

writerStream.on('finish',()=>{}{ console.log('寫入完成');})//寫入完成后觸發(fā)readStream.on('error',(err)=>{ console.log(err); })??//讀取失敗后觸發(fā)

rs.pipe(ws); //將可讀流寫入可寫流路徑里

fs.openSync("./pathName",'w=可寫r=可讀'); ???//同步打開文件fs.open("./pathName",'w=可寫r=可讀',(error,value)=>{}); ???//異步打開文件fs.closeSync('變量'); ????//同步關(guān)閉文件fs.close('變量',()=>{}); ????//異步關(guān)閉文件

fs.existsSync('path'); ?//檢查文件是否存在fs.stat('path',(error,stats)=>{}); //異步獲取文件狀態(tài)fs.unlink('path',(error)=>{}); ??//刪除文件fs.mkdir('path',(error)=>{}); ???//創(chuàng)建一個目錄fs.rmdir('path',(error)=>{}); ???//刪除一個目錄fs.rename('oldPath','newPath',(error)=>{}); ?//對文件重新命名fs.watchFile('filename[,options]',(prev,curr)=>{}) ?//監(jiān)聽文件修改（包括內(nèi)容改動和名字徐勃、時間戳等的任何變化）fs.watch('filename[,options]',(prev,curr)=>{}) ?//監(jiān)聽文件修改（包括內(nèi)容改動和名字、時間戳等的任何變化）

http.createServer(創(chuàng)建服務(wù)器) let http = require('http');

http.createServer((req,res)=>{ ????let {pathname,query} = url.parse(req.url); ????let rsult = null;????try {????????if(pathname=="/"){????????????result = fs.readFileSync("./index.html","utf-8");?????????????res.end(result);????????????return;????????}????????if(/\.[a-zA-Z0-9]+/i.test(pathname)){如果pathname有后綴說明請求的不是(ajax)資源文件????????????if(/\.(html|js|css)$/i.test(pathname)){ //如果后綴名是html|js|css這些結(jié)尾的 讀取的時候加上utf-8????????????????result = fs.readFileSync("."+pathname,"utf-8");????????????}????????????else { ?//否則就是請求 img 音頻 視頻等文件不需要加后綴名????????????????result = fs.readFileSync("."+pathname);????????????}????????}else { //處理請求ajax早像，請求本地文件等????????????var data = "";????????????if(pathname=='/userInfo'){ ????????????????req.on('data',(chunk)=>{ ?//當ajax請求發(fā)送過來的post參數(shù)時就執(zhí)行????????????????????console.log(chunk); ????????????????});????????????????req.on('end',()=>{ ?//當ajax請求發(fā)送過來的參數(shù)結(jié)束時就執(zhí)行????????????????????// console.log(typeof data,typeof JSON.parse(data));????????????????})????????????}????????????result = fs.readFileSync("./data.json","utf-8");????????}????}catch (e) {????????result = 'not fond'????}????res.end(result)

res.writeHead(200,{"Content-Type":"text/html;charset='utf-8'"});?//重寫響應(yīng)頭res.write('你好 nodejs'); // 向服務(wù)器發(fā)送數(shù)據(jù)res.end(`req ${req}`); /*結(jié)束響應(yīng)*/

}).listen(4444);

var events=require('events'); //引入廣播接收器模塊

var EventEmitter=new events.EventEmitter();

EventEmitter.on('to_mime',(data)=>{?console.log(data)?})?//接收廣播

EventEmitter.emit(' to_mime ','發(fā)送的數(shù)據(jù)')??//發(fā)送廣播

Mongodb

基本連接數(shù)據(jù)庫與（切換庫和表）

[if !supportLists]1.?[endif]mongod （在相應(yīng)文件目錄下啟動命令）

[if !supportLists]2.?[endif]mongod --dbpath 數(shù)據(jù)庫路徑 --port (端口號默認：27017)如： mongod --dbpath C:\data\db --port 27017 (在其他文件目錄下啟動)

[if !supportLists]3.?[endif]在打開一個cmd窗口 （用來操作連接數(shù)據(jù)庫下的json文件）- 輸入mongo 連接mongodb 僻肖，出現(xiàn) >?連接遠程：mongo 127.0.0.1

show dbs 與 show databases - 顯示當前的所有數(shù)據(jù)庫use 數(shù)據(jù)庫名 如：user init - 進入到指定的數(shù)據(jù)庫中show collections - 顯示數(shù)據(jù)庫中所有的集合（表）db表示的是當前所處的數(shù)據(jù)庫

MongoDB的CRUD的操作

-向數(shù)據(jù)庫中插入文檔

- db.collection.insert({“name”:”xiaoming”},{“name”:”wa”}) ?可以向集合中插入一個或多個文檔

- db.collection.insertOne() -向集合中插入一個文檔

- db.collection.insertMany() -向集合中插入多個文檔

-查詢數(shù)據(jù)庫中的文檔

- db.collection.find() 可以根據(jù)指定條件從集合中查詢所有符合條件的文檔-返回的是一個數(shù)組

- db.collection.findOne({"age": 22})-查詢第一個符合條件的文檔- 返回的是一個對象

- db.collection.find().count()-查詢符合條件的文檔的數(shù)量

-修改數(shù)據(jù)庫中的文檔

- db.collection.update({"na":"小"},{$set:{"age":1}}) -可以修改、替換集合中的一個或多個文檔

- db.collection.updateOne() -修改集合中的一個文檔

- db.collection.updateMany() -修改集合中的多個文檔

- db.collection.replaceOne() -替換集合中的一個文檔

-刪除集合中的文檔

- db.collection.remove({ "bgh": "Man" }) -刪除集合中的一個或多個文檔（默認刪除多個）

- db.collection.deleteOne() -刪除集合中的一個文檔

- db.collection.deleteMany() -刪除集合中的多個文檔

-?db.collection.remove({}) -清空一個集合

-?db.collection.drop() -刪除一個集合

- db.dropDatabase() -刪除一個數(shù)據(jù)庫

?MongoDB的CRUD的操作（實戰(zhàn)復(fù)習）

[if !supportLists]1.?[endif]db.student.insert({“name”:”xiaoming”}); ?//插入一個數(shù)據(jù)卢鹦。

[if !supportLists]2.?[endif]db.userInfo.distinct("name"); ??//查詢?nèi)サ艉蟮漠斍熬奂现械哪沉械闹貜?fù)數(shù)據(jù)

[if !supportLists]3.?[endif]db.userInfo.find({"age": 22}); ??/查詢 age = 22 的記錄

[if !supportLists]4.?[endif]db.userInfo.find({age: {$gt: 22}}); ?//查詢 age > 22 的記錄

[if !supportLists]5.?[endif]db.userInfo.find({age: {$lt: 22}}); ??//查詢 age < 22 的記錄

[if !supportLists]6.?[endif]db.userInfo.find({age: {$gte: 25}}); ??//查詢 age >= 25 的記錄

[if !supportLists]7.?[endif]db.userInfo.find({age: {$lte: 25}}); ??//查詢 age <= 25 的記錄

[if !supportLists]8.?[endif]db.userInfo.find({name:{$ne:”wang”}}); ??//查詢不等于 wang的數(shù)據(jù)

[if !supportLists]9.?[endif]db.userInfo.find({age: {$gte: 23, $lte: 26}}); ??//查詢 age >= 23 并且 age <= 26

[if !supportLists]10.?[endif]db.userInfo.find({name: /mongo/}); ??//模糊查詢 name 中包含 mongo 的數(shù)據(jù)

[if !supportLists]11.?[endif]db.userInfo.find({name: /^mongo/}); ??//模糊查詢 name 中以 mongo 開頭的

[if !supportLists]12.?[endif]db.userInfo.find({}, {name: 1, age: 1}); ??//查詢指定列 name臀脏、age 數(shù)據(jù)（設(shè)為0則隱藏）

[if !supportLists]13.?[endif]db.userInfo.find({age: {$gt: 25}}, {name: 1, age: 1}); ??//查詢指定列name?age 與age > 25

[if !supportLists]14.?[endif]db.userInfo.find().sort({age: 1}); //按照年齡排序1升序 -1 降序

[if !supportLists]15.?[endif]db.userInfo.find({name: 'zhangsan', age: 22}); ??//查詢name = zhangsan, age = 22的數(shù)據(jù)

[if !supportLists]16.?[endif]db.userInfo.find().limit(5); ??//查詢前5條數(shù)據(jù)

[if !supportLists]17.?[endif]db.userInfo.find().skip(10); ??//查詢10條以后的數(shù)據(jù)

[if !supportLists]18.?[endif]db.userInfo.find().limit(10).skip(5); ??//查詢在5-10之間的數(shù)據(jù)

[if !supportLists]19.?[endif]db.userInfo.find({$or: [{age: 22}, {age: 25}]}); ??//or與 查詢

[if !supportLists]20.?[endif]db.userInfo.find( {age:{ $in:[1,3,5] }} ); ??//查詢 age?等于1或3或5的數(shù)據(jù)

[if !supportLists]21.?[endif]db.userInfo.find( {age:{ $nin:[1,3,5] }} ); ??//查詢 age?不等于1或3或5的數(shù)據(jù)

[if !supportLists]22.?[endif]db.userInfo.find( {age:{ $size:3 }} ); ??//查詢 age(數(shù)組)等于三個個數(shù)。

[if !supportLists]23.?[endif]db.userInfo.find( {age:{ $exists:true }} ); ??//查詢 age這個鍵值存在就返回該條數(shù)據(jù)冀自。

[if !supportLists]24.?[endif]db.userInfo.findOne(); ???//findOne查詢第一條數(shù)據(jù)

[if !supportLists]25.?[endif]db.userInfo.find({age: {$gte: 25}}).count(); ??//查詢某個結(jié)果集的記錄條數(shù)（統(tǒng)計數(shù)量）如果要返回限制之后的記錄數(shù)量揉稚，要使用count(true)或者 count(非 0) db.users.find().skip(10).limit(5).count(true);

[if !supportLists]26.?[endif]db.student.update({"name":"小明"},{$set:{"age":16}}); ??//查找名字叫做小明的，把年齡更改為16歲：

[if !supportLists]27.?[endif]1 db.student.update({"name":"小明"},{"name":"大明","age":16}); ?//完整替換熬粗，不出現(xiàn)$set關(guān)鍵字了：

[if !supportLists]28.?[endif]db.collectionsNames.remove( { "borough": "Manhattan" } ) ?//刪除符合的所有條件數(shù)據(jù)

[if !supportLists]29.?[endif]db.restaurants.remove( { "borough": "Queens" }, { justOne: true } ) ??//刪除一條數(shù)據(jù)（不管有多少條符合條件）

聚合（aggregate）

常用管道

$group：將集合中的文檔分組搀玖，可用于統(tǒng)計結(jié)果

$match：過濾數(shù)據(jù)，只輸出符合條件的文檔

$project：修改輸入文檔的結(jié)構(gòu)驻呐，如重命名灌诅、增加、刪除字段暴氏、創(chuàng)建計算結(jié)果

$sort：將輸入文檔排序后輸出

$limit：限制聚合管道返回的文檔數(shù)

$skip：跳過指定數(shù)量的文檔延塑，并返回余下的文檔

$unwind：將數(shù)組類型的字段進行拆分

分組-聚合函數(shù) （$group）

$sum：計算總和，$sum:1同count表示計數(shù)

$avg：計算平均值

$min：獲取最小值

$max：獲取最大值

$push：在結(jié)果文檔中插入值到一個數(shù)組中

$first：根據(jù)資源文檔的排序獲取第一個文檔數(shù)據(jù)

$last：根據(jù)資源文檔的排序獲取最后一個文檔數(shù)據(jù)

1) 核心語法db.集合名.aggregate([????{管道1: {表達式} },????{管道2: {表達式} },????{管道3: {表達式} }]);注：如果只有一個管道答渔，可以不寫中括號2) $limit 限制輸出db.集合名.aggregate(????{$limit: 限制輸出的條數(shù)});3) $group 管道关带，分組db.集合名.aggregate(????{$group:????????????{????????????????_id: '$字段名', ??//標識分組的依據(jù)，根據(jù)某個字段進行分組????????????????別名: {$聚合函數(shù):'$字段名'}????????????}????})//select * from student group by 字段;示例1：統(tǒng)計男生沼撕、女生的總?cè)藬?shù)db.singer.aggregate({????$group:{????????_id:'$sex',????????count: {$sum:1}????}});示例2：求學(xué)生總?cè)藬?shù)宋雏、平均年齡db.singer.aggregate({????$group:{????????_id:null,????????總?cè)藬?shù): {$sum:1},????????平均年齡: {$avg: '$age'}????}});示例3：根據(jù)性別統(tǒng)計所有同學(xué)的名單db.singer.aggregate({????$group:{????????_id:'$sex',????????人數(shù):{$sum:1},????????名單:{$push:'$name'} ?//相當于拼接字段 group_concat()????}});db.singer.aggregate({????$group:{????????_id:'$sex',????????總?cè)藬?shù):{$sum:1}, //統(tǒng)計總個數(shù)????????//總年齡:{$sum:'$age'}, ?//累加????????//平均年齡:{$avg:'$age'}, //平均數(shù)????????//最大年齡:{$max:'$age'}, //最大值????????//最小年齡:{$min:'$age'}, //最小值????????//名單:{$push:'$name'}, //將同組的名字進行拼接????????小組第一:{$first:'$name'},????????小組最后:{$last:'$name'}????}});4) $match 管道，匹配條件db.集合名.aggregate({????$match:{"鍵名":{$gt:30}}});示例：找出年齡大于50的歌手db.singer.aggregate({????$match:{????????"age":{$gt:40}????}});對年齡大于40的歌手進行性別分組統(tǒng)計db.singer.aggregate([????{$match:{????????????"age":{$gt:40}????????}????},????{$group:{????????????_id:'$sex',????????????總?cè)藬?shù):{$sum:1}????????}????}]);5) $project 管道务豺，限定輸出字段相當于SQL：selectname,age from student;db.集合名.aggregate({????$project:{????????name:1 | 0 //1表示顯示磨总，0表示不顯示????}});示例：找出年齡大于50的歌手，只顯示姓名和年齡db.singer.aggregate([????{$match:{"age":{$gt:40}}},????{$project:{_id:0,name:1,age:1}}]);6) $sort 排序管道db.集合名.aggregate({????$sort:{????????"鍵名":1 | -1????}});示例：db.singer.aggregate([????{$match:{"age":{$gt:40}}},????{$project:{_id:0,name:1,age:1}},????{$sort:{'age':1}},????{$limit:3}]);7) $skip 管道笼沥，跳過n條db.集合名.aggregate({????$skip:n});示例：db.singer.aggregate([????{$match:{"age":{$gt:40}}},????{$project:{_id:0,name:1,age:1}},????{$sort:{'age':1}},????{$skip:3},????{$limit:3}]);8) $unwind 管道蚪燕，將數(shù)組字段進行拆分db.集合名.aggregate({????$unwind:'鍵名'});示例：拆分works字段db.singer.aggregate([????{$match:{"age":{$gt:50}}},????{$unwind:'$works'}]);

explain索引（用來提升數(shù)據(jù)庫的查詢時間和優(yōu)化）

[if !supportLists]1)?[endif]db.user.ensureIndex({"username":1}) ??//創(chuàng)建索引的命令：

[if !supportLists]2)?[endif]db.user.getIndexes() ??//獲取當前集合的索引：

[if !supportLists]3)?[endif]db.user.dropIndex({"username":1}) ??//刪除索引的命令是：

[if !supportLists]4)?[endif]db.user.ensureIndex({"username":1, "age":-1}) ??//復(fù)合索引?數(shù)字1表示 username 鍵的索引按升序存儲娶牌，-1 表示 age 鍵的索引按照降序方式存儲。??（對于上面示例中的查詢條件馆纳，MongoDB在檢索之前將會動態(tài)的調(diào)整查詢條件文檔的順 序诗良，以使該查詢可以用到剛剛創(chuàng)建的復(fù)合索引。）

[if !supportLists]5)?[endif]db.user.ensureIndex({"username":1},{"name":"userindex"}) ??//創(chuàng)建索引時為其指定索引名

[if !supportLists]6)?[endif]db.user.ensureIndex({"userid":1},{"unique":true}) ??//創(chuàng)建唯一索引如果再次插入userid重復(fù)的文檔時鲁驶，MongoDB 將報錯鉴裹，以提示插入重復(fù)鍵，如：db.user.insert({"userid":5}) db.user.insert({"userid":5})

[if !supportLists]7)?[endif]db. user.find().explain( "executionStats" ) ?//查詢具體的執(zhí)行時間

Nodejs連接 MongoDb 數(shù)據(jù)庫

npm install mongodb --save-dev ||?cnpm install mongodb --save-dev 2.x

npm?install mongodb –save ?||??npm?install mongodb –save 3.x

http://mongodb.github.io/node-mongodb-native/2.2/quick-start/quick-start/

http://mongodb.github.io/node-mongodb-native/3.0/quick-start/quick-start/

2.x和3.x的操作方法完全一樣钥弯，只有獲取db對象的時候有點區(qū)別 （本筆記做的3.x版本）

https://docs.mongodb.com/manual/tutorial/getting-started/?（MongoDb英文文檔）

http://www.mongoing.com （MingoDB 中文文檔）

var express = require("express"); ?//引入express框架

var MongoClient = require('mongodb').MongoClient; ???//數(shù)據(jù)庫引用

var app = express(); //使用express框架

var DBurl= ?'mongodb://localhost:27017; //數(shù)據(jù)庫連接的地址径荔，var DBName = 'users'; ???//連接操作數(shù)據(jù)庫集合（表）名字

Node（連接數(shù)據(jù)庫）?

app.get("/",function(req,res){ ??//連接數(shù)據(jù)庫，這是一個異步的操作????MongoClient.connect(DBurl, function(err, db) {????????res.writeHead(200,{"Content-Type":"text/html;charset=UTF8"});????????if(err){ res.send("數(shù)據(jù)庫連接失敗"); return; }????????db.close(); //關(guān)閉數(shù)據(jù)庫????});});

Node?MongoDb（修改數(shù)據(jù)）

app.get('/edit',function(req,res){????MongoClient.connect(DBurl,function(err,db){????????if(err){????????????console.log(err);????????????console.log('數(shù)據(jù)庫連接失敗');????????????return;????????}

let DB = db.db(DBName); ???/* 數(shù)據(jù)庫名 */????????DB.collection('user').updateOne({"name":"lisi"},{$set:{????????????"age":666????????}},function(error,data){????????????if(error){????????????????console.log('修改數(shù)據(jù)失敗');????????????????return;????????????}????????????console.log(data);????????????res.send('修改數(shù)據(jù)成功');????????????db.close();/*關(guān)閉數(shù)據(jù)庫*/????????})????})})

Node?MongoDb（增加數(shù)據(jù)）

app.get('/add',function(req,res){????MongoClient.connect(DBurl,function(err,db){ ?/*連接數(shù)據(jù)庫*/????????if(err){????????????console.log(err);????????????console.log('數(shù)據(jù)庫連接失敗');????????????return;????????}

let DB = db.db(DBName); ???/* 數(shù)據(jù)庫名 */????????//增加數(shù)據(jù)????????DB.collection('user').insertOne({????????????"name":"大地",????????????"age":10????????},function(error,result){????????????if(error){????????????????console.log('增加數(shù)據(jù)失敗');????????????????return;????????????}????????????res.send('增加數(shù)據(jù)成功');????????????db.close();/*關(guān)閉數(shù)據(jù)庫*/????????})????????????})})

Node?MongoDb（刪除數(shù)據(jù)）

app.get('/delete',function(req,res){?????//delete?name=lisi????//console.log(url.parse(req.url,true));????var query=url.parse(req.url,true).query;????//console.log(query.name);????var name=query.name;????MongoClient.connect(DBurl,function(err,db){????????if(err){????????????console.log(err);????????????console.log('數(shù)據(jù)庫連接失敗');????????????return;????????}

let DB = db.db(DBName); ???/* 數(shù)據(jù)庫名 */????????DB.collection('user').deleteOne({"name":name},function(error,data){????????????if(error){????????????????console.log('刪除失敗');????????????????return;????????????}????????????console.log(data);????????????res.send('刪除數(shù)據(jù)成功');????????????db.close();????????})????})})

Node?MongoDb（查詢數(shù)據(jù)）

app.get('/query',function(req, res) {????MongoClient.connect(dbURL,function(err, db) {

let DB = db.db(DBName); ???/* 數(shù)據(jù)庫名 */????????DB.collection('user').find({}).toArray(function(error, docs) {????????????res.send(docs);????????????res.end();????????????db.close();????????})????})})

app.listen(8020);

Node（Express）框架

（簡單使用案例）

npm install express –save

express --view=pug myapp //安裝express腳手架脆霎。

var express=require('express'); /*引入 express*/var app=new express(); /*實例化 express 賦值給 app*///配置路由 匹配 URl 地址實現(xiàn)不同的功能app.get('/',function(req,res){????res.send('首頁');})app.get('/login',function(req,res){????res.send('登錄');})app.get('/register',function(req,res){????res.send('注冊');})app.listen(3000,"127.0.0.1");

（應(yīng)用中間件）

/*應(yīng)用級中間件*/

app.use(function(req,res,next){ /*匹配任何路由*/????//res.send('中間件');????console.log(new Date());????next(); /*表示匹配完成這個中間件以后程序繼續(xù)向下執(zhí)行*/})

//動態(tài)路由 ?http://localhost:3000/newscontent/213app.get("/user/:id",function(req,res){????var id = req.params["id"]; //?獲取動態(tài)路由的參數(shù)????res.send(id);});

/*?中間件相應(yīng)404*?需要放在路由最后一個?*/app.use(function(req,res){????//res.render('404',{});????res.status(404).render('404',{});})

/*?第三方中間件*/

npm install body-parser --savevar express = require('express')var bodyParser = require('body-parser')app.use(bodyParser.urlencoded({ extended: false })) //配置body-parser中間件app.use(bodyParser.json()) 轉(zhuǎn)換json對象● GET請求的參數(shù)在 URL 中总处，在原生 Node 中，需要使用 url 模塊來識別參數(shù)字符串睛蛛。在 Express 中辨泳，不需要使用 url 模塊了【猎海可以直接使用 req.query 對象〉卺● POST請求在 express 中不能直接獲得难菌，可以使用 body-parser 模塊。使用后蔑滓，將可以用 req.body 得到參數(shù)郊酒。但是如果表單中含有文件上傳，那么還是需要使用 formidable 模塊

1.（安裝）npm instlal cookie-parser –save2.（引入）var cookieParser = require('cookie-parser');3.（設(shè)置中間件）app.use(cookieParser("cookie jiami"));4.（設(shè)置cookie）res.cookie("name",'zhangsan',{maxAge: 900000, httpOnly: true});??//HttpOnly 默認 false 不允許 客戶端腳本訪問

maxAge ?過期時間domain:'.aaa.com' 多個二級域名共享cookiepath ?表示在哪個路由下面可以訪問cookiehttpOnly:true 設(shè)置為true,表示只有在nodejs服務(wù)端可以操作cookie 键袱，沒法用js腳本語言操作cookiesigned屬性設(shè)置成true 表示加密cookie信息5.（獲取cookie）req.cookies.name

5.（刪除?cookie）res.cookie('rememberme', '', { expires: new Date(0)});res.cookie('username','zhang',{domain:'.ccc.com',maxAge:0,httpOnly:true});

（靜態(tài)資源配置）

Express.static 托管靜態(tài)文件 列如：app.use(express.static('public'));

<link rel="stylesheet" href="css/style.css"/>就會去尋找 public下的靜態(tài)文件 http://localhost:3000/public/css/style.css

Express.static 配置虛擬路勁 app.use('/static',express.static('public'));

<link rel="stylesheet" href="css/style.css"/>就會去尋找public下的靜態(tài)文件http://localhost:3000/static/css/style.css