1.cookies，sessionStorage 和 localStorage 的區(qū)別

- cookie在瀏覽器和服務(wù)器間來回傳遞道批。 sessionStorage和localStorage不會(huì)

- sessionStorage和localStorage的存儲(chǔ)空間更大错英；

- sessionStorage和localStorage有更多豐富易用的接口；

- sessionStorage和localStorage各自獨(dú)立的存儲(chǔ)空間隆豹；

- 關(guān)閉窗口后椭岩，sessionStorage即被銷毀

2.實(shí)現(xiàn)瀏覽器內(nèi)多個(gè)標(biāo)簽頁之間的通信

- 調(diào)用localstorge、cookies等本地存儲(chǔ)方式

3.CSS隱藏元素的幾種方法

- Opacity:元素本身依然占據(jù)它自己的位置并對(duì)網(wǎng)頁的布局起作用璃赡。它也將響應(yīng)用戶交互;

- Visibility:與 opacity 唯一不同的是它不會(huì)響應(yīng)任何用戶交互判哥。此外，元素在讀屏軟件中也會(huì)被隱藏;

- Display:display 設(shè)為 none 任何對(duì)該元素直接打用戶交互操作都不可能生效碉考。此外塌计，讀屏軟件也不會(huì)讀到元素的內(nèi)容。這種方式產(chǎn)生的效果就像元素完全不存在;

- Position:不會(huì)影響布局侯谁，能讓元素保持可以操作;

- Clip-path:clip-path 屬性還沒有在 IE 或者 Edge 下被完全支持锌仅。如果要在你的 clip-path 中使用外部的 SVG 文件，瀏覽器支持度還要低;

CSS清除浮動(dòng)的幾種方法

- 使用帶clear屬性的空元素

- 使用CSS的overflow屬性墙贱；

- 使用CSS的:after偽元素热芹；

- 使用鄰接元素處理；

頁面導(dǎo)入樣式時(shí)惨撇，使用link和@import有什么區(qū)別伊脓？

- link屬于XHTML標(biāo)簽，除了加載CSS外串纺，還能用于定義RSS, 定義rel連接屬性等作用丽旅；而@import是CSS提供的，只能用于加載CSS;

- 頁面被加載的時(shí)纺棺，link會(huì)同時(shí)被加載榄笙，而@import引用的CSS會(huì)等到頁面被加載完再加載;

- import是CSS2.1 提出的，只在IE5以上才能被識(shí)別祷蝌，而link是XHTML標(biāo)簽茅撞，無兼容問題;

介紹一下CSS的盒子模型

-? IE 盒子模型、標(biāo)準(zhǔn) W3C 盒子模型巨朦；IE的content部分包含了 border 和 pading;

- 盒模型： 內(nèi)容(content)米丘、填充(padding)、邊界(margin)糊啡、 邊框(border).

- IE對(duì)盒模型的解析出現(xiàn)一些問題拄查，跟其它瀏覽器不同，將border與padding都包含在width之內(nèi)棚蓄。而另外一些瀏覽器則與它相反堕扶，是不包括border和padding的。

- box-sizing:content-box 瀏覽器對(duì)盒模型的解釋遵從我們之前認(rèn)識(shí)到的W3C標(biāo)準(zhǔn)梭依，當(dāng)它定義width和height時(shí)稍算，它的寬度不包括border和padding。

- box-sizing:border-box 瀏覽器對(duì)盒模型的解釋與IE6之前的版本相同役拴，當(dāng)它定義width和height時(shí)糊探，border和padding則是被包含在寬高之內(nèi)的。內(nèi)容的寬和高可以通過定義的“width”和“height”減去相應(yīng)方向的“padding”和“border”的寬度得到河闰。內(nèi)容的寬和高必須保證不能為負(fù)科平，必要時(shí)將自動(dòng)增大該元素border box的尺寸以使其內(nèi)容的寬或高最小為0。

.javascript的typeof返回哪些數(shù)據(jù)類型

- Ｏbject number function boolean underfind;

數(shù)組方法pop() push() unshift() shift()

- Push()尾部添加 pop()尾部刪除

- Unshift()頭部添加 shift()頭部刪除

ajax請(qǐng)求的時(shí)候get 和post方式的區(qū)別?

- 一個(gè)在url后面 一個(gè)放在虛擬載體里面

有大小限制

- 安全問題

應(yīng)用不同 一個(gè)是論壇等只需要請(qǐng)求的姜性，一個(gè)是類似修改密碼的;

ajax請(qǐng)求時(shí)匠抗，如何解釋json數(shù)據(jù)

事件委托是什么

- 讓利用事件冒泡的原理，讓自己的所觸發(fā)的事件污抬，讓他的父元素代替執(zhí)行汞贸！

添加 刪除 替換 插入到某個(gè)接點(diǎn)的方法

obj.appendChidl()

obj.innersetBefore

obj.replaceChild

obj.removeChild

如何阻止事件冒泡和默認(rèn)事件

性能優(yōu)化的方法

（1） 減少http請(qǐng)求次數(shù)：CSS Sprites, JS、CSS源碼壓縮印机、圖片大小控制合適矢腻；網(wǎng)頁Gzip，CDN托管射赛，data緩存 多柑，圖片服務(wù)器。

（2）前端模板 JS+數(shù)據(jù)楣责，減少由于HTML標(biāo)簽導(dǎo)致的帶寬浪費(fèi)竣灌，前端用變量保存AJAX請(qǐng)求結(jié)果聂沙，每次操作本地變量，不用請(qǐng)求初嘹，減少請(qǐng)求次數(shù)

（3） 用innerHTML代替DOM操作及汉，減少DOM操作次數(shù)，優(yōu)化javascript性能屯烦。

（4） 當(dāng)需要設(shè)置的樣式很多時(shí)設(shè)置className而不是直接操作style坷随。

（5） 少用全局變量、緩存DOM節(jié)點(diǎn)查找的結(jié)果驻龟。減少IO讀取操作温眉。

（6） 避免使用CSS Expression（css表達(dá)式)又稱Dynamic properties(動(dòng)態(tài)屬性)。

（7） 圖片預(yù)加載翁狐，將樣式表放在頂部类溢，將腳本放在底部 加上時(shí)間戳。

（8） 避免在頁面的主體布局中使用table露懒，table要等其中的內(nèi)容完全下載之后才會(huì)顯示出來豌骏，顯示div+css布局慢。對(duì)普通的網(wǎng)站有一個(gè)統(tǒng)一的思路隐锭，就是盡量向前端優(yōu)化窃躲、減少數(shù)據(jù)庫(kù)操作、減少磁盤IO钦睡。向前端優(yōu)化指的是蒂窒，在不影響功能和體驗(yàn)的情況下，能在瀏覽器執(zhí)行的不要在服務(wù)端執(zhí)行荞怒，能在緩存服務(wù)器上直接返回的不要到應(yīng)用服務(wù)器洒琢，程序能直接取得的結(jié)果不要到外部取得，本機(jī)內(nèi)能取得的數(shù)據(jù)不要到遠(yuǎn)程取褐桌，內(nèi)存能取到的不要到磁盤取衰抑，緩存中有的不要去數(shù)據(jù)庫(kù)查詢。減少數(shù)據(jù)庫(kù)操作指減少更新次數(shù)荧嵌、緩存結(jié)果減少查詢次數(shù)呛踊、將數(shù)據(jù)庫(kù)執(zhí)行的操作盡可能的讓你的程序完成（例如join查詢），減少磁盤IO指盡量不使用文件系統(tǒng)作為緩存啦撮、減少讀寫文件次數(shù)等谭网。程序優(yōu)化永遠(yuǎn)要優(yōu)化慢的部分，換語言是無法“優(yōu)化”的赃春。

3.http狀態(tài)碼有那些愉择？分別代表是什么意思？

100-199 用于指定客戶端應(yīng)相應(yīng)的某些動(dòng)作。

200-299 用于表示請(qǐng)求成功锥涕。

300-399 用于已經(jīng)移動(dòng)的文件并且常被包含在定位頭信息中指定新的地址信息衷戈。

400-499 用于指出客戶端的錯(cuò)誤。400 1层坠、語義有誤殖妇，當(dāng)前請(qǐng)求無法被服務(wù)器理解。401 當(dāng)前請(qǐng)求需要用戶驗(yàn)證 403 服務(wù)器已經(jīng)理解請(qǐng)求窿春，但是拒絕執(zhí)行它。

500-599 用于支持服務(wù)器錯(cuò)誤采盒。 503 – 服務(wù)不可用

4.一個(gè)頁面從輸入 URL 到頁面加載顯示完成旧乞，這個(gè)過程中都發(fā)生了什么？（流程說的越詳細(xì)越好）

- 查找瀏覽器緩存

- DNS解析磅氨、查找該域名對(duì)應(yīng)的IP地址尺栖、重定向（301）、發(fā)出第二個(gè)GET請(qǐng)求

- 進(jìn)行HTTP協(xié)議會(huì)話

- 客戶端發(fā)送報(bào)頭(請(qǐng)求報(bào)頭)

- 文檔開始下載

- 文檔樹建立烦租，根據(jù)標(biāo)記請(qǐng)求所需指定MIME類型的文件

- 文件顯示

- 瀏覽器這邊做的工作大致分為以下幾步：

- 加載：根據(jù)請(qǐng)求的URL進(jìn)行域名解析延赌，向服務(wù)器發(fā)起請(qǐng)求，接收文件（HTML叉橱、JS挫以、CSS、圖象等）窃祝。

- 解析：對(duì)加載到的資源（HTML掐松、JS、CSS等）進(jìn)行語法解析粪小，建議相應(yīng)的內(nèi)部數(shù)據(jù)結(jié)構(gòu)（比如HTML的DOM樹大磺，JS的（對(duì)象）屬性表，CSS的樣式規(guī)則等等）

使用XHTML的局限有哪些探膊？

XHTML 與HTML的區(qū)別為：

- XHTML 元素必須被正確地嵌套杠愧。

- XHTML 元素必須被關(guān)閉。

- 標(biāo)簽名必須用小寫字母逞壁。

- XHTML 文檔必須擁有根元素流济。

CSS sprites

CSS Sprites其實(shí)就是把網(wǎng)頁中一些背景圖片整合到一張圖片文件中，再利用CSS的“background-image”腌闯，“background-repeat”袭灯，“background-position”的組合進(jìn)行背景定位，background-position可以用數(shù)字能精確的定位出背景圖片的位置绑嘹。

HTTP請(qǐng)求方法

【GET：獲取資源】

? ? GET方法用來請(qǐng)求已被URI識(shí)別的資源

【POST：傳輸實(shí)體文本】

? ? POST方法用來傳輸實(shí)體的主體稽荧。

GET方法和POST方法本質(zhì)上的區(qū)別：

1. get提交，數(shù)據(jù)放在url里面，所以數(shù)據(jù)是在瀏覽器可見的姨丈，不安全畅卓，而post提交是放在請(qǐng)求頭中，用戶不可見蟋恬，所以比較安全翁潘；

2. 請(qǐng)求數(shù)據(jù)的大小，get有一定限制歼争，而post可發(fā)送的數(shù)據(jù)沒有限制

3. get一般用來請(qǐng)求數(shù)據(jù)拜马，不會(huì)對(duì)數(shù)據(jù)進(jìn)行更改，而post用于發(fā)送數(shù)據(jù)沐绒，會(huì)對(duì)數(shù)據(jù)進(jìn)行修改

　　1俩莽、GET方法用于信息獲取，它是安全的（安全：指非修改信息乔遮，如數(shù)據(jù)庫(kù)方面的信息）扮超，而POST方法是用于修改服務(wù)器上資源的請(qǐng)求；

　　2蹋肮、GET請(qǐng)求的數(shù)據(jù)會(huì)附在URL之后出刷，而POST方法提交的數(shù)據(jù)則放置在HTTP報(bào)文實(shí)體的主體里，所以POST方法的安全性比GET方法要高坯辩；

　　3馁龟、GET方法傳輸?shù)臄?shù)據(jù)量一般限制在2KB，其原因在于：GET是通過URL提交數(shù)據(jù)漆魔，而URL本身對(duì)于數(shù)據(jù)沒有限制屁柏，但是不同的瀏覽器對(duì)于URL是有限制的，比如IE瀏覽器對(duì)于URL的限制為2KB有送，而Chrome淌喻，F(xiàn)ireFox瀏覽器理論上對(duì)于URL是沒有限制的，它真正的限制取決于操作系統(tǒng)本身雀摘；POST方法對(duì)于數(shù)據(jù)大小是無限制的裸删，真正影響到數(shù)據(jù)大小的是服務(wù)器處理程序的能力。

HEAD：獲得報(bào)文首部】

? ? HEAD方法和GET方法一樣阵赠，知識(shí)不返回豹紋的主體部分涯塔，用于確認(rèn)URI的有效性及資源更新的日期時(shí)間等。

? ? 具體來說：1清蚀、判斷類型匕荸； 2、查看響應(yīng)中的狀態(tài)碼枷邪，看對(duì)象是否存在（響應(yīng)：請(qǐng)求執(zhí)行成功了榛搔，但無數(shù)據(jù)返回）； 3、測(cè)試資源是否被修改過

? ? HEAD方法和GET方法的區(qū)別： GET方法有實(shí)體践惑，HEAD方法無實(shí)體腹泌。

【PUT：傳輸文件】

? ? PUT方法用來傳輸文件，就像FTP協(xié)議的文件上傳一樣尔觉，要求在請(qǐng)求報(bào)文的主體中包含文件內(nèi)容凉袱，然后保存在請(qǐng)求URI指定的位置。但是HTTP/1.1的PUT方法自身不帶驗(yàn)證機(jī)制侦铜，任何人都可以上傳文件专甩，存在安全問題，故一般不用钉稍。

【DELETE：刪除文件】

? ? 指明客戶端想讓服務(wù)器刪除某個(gè)資源涤躲，與PUT方法相反，按URI刪除指定資源

【OPTIONS：詢問支持的方法】

? ? OPTIONS方法用來查詢針對(duì)請(qǐng)求URI指定資源支持的方法（客戶端詢問服務(wù)器可以提交哪些請(qǐng)求方法）

【TRACE：追蹤路徑】

? ? 客戶端可以對(duì)請(qǐng)求消息的傳輸路徑進(jìn)行追蹤嫁盲，TRACE方法是讓W(xué)eb服務(wù)器端將之前的請(qǐng)求通信還給客戶端的方法

【CONNECT：要求用隧道協(xié)議連接代理】

? ? CONNECT方法要求在與代理服務(wù)器通信時(shí)建立隧道篓叶，實(shí)現(xiàn)用隧道協(xié)議進(jìn)行TCP通信烈掠。主要使用SSL（安全套接層）和TLS（傳輸層安全）協(xié)議把通信內(nèi)容加密后經(jīng)網(wǎng)絡(luò)隧道傳輸羞秤。

JSON.stringify(obj)? ? ? 將JSON對(duì)象轉(zhuǎn)為字符串。

JSON.parse(string)? ? ? 將字符串轉(zhuǎn)為JSON對(duì)象格式左敌。

eval('(' + jsonstr + ')'); //可以將json字符串轉(zhuǎn)換成json對(duì)象,注意需要在json字符外包裹一對(duì)小括號(hào)

如何獲取瀏覽器URL中查詢字符串中的參數(shù)

split() 方法用于把一個(gè)字符串分割成字符串?dāng)?shù)組瘾蛋。

function showWindowHref(){

var sHref = window.location.href;

var args = sHref.split('?');

if(args[0] == sHref){

return "";

}

var arr = args[1].split('&');

var obj = {};

for(var i = 0;i< arr.length;i++){

var arg = arr[i].split('=');

obj[arg[0]] = arg[1];

}

return obj;

}

var href = showWindowHref(); // obj

console.log(href['name']); // xiaoming

js 字符串操作函數(shù)

concat() – 將兩個(gè)或多個(gè)字符的文本組合起來，返回一個(gè)新的字符串矫限。

indexOf() – 返回字符串中一個(gè)子串第一處出現(xiàn)的索引哺哼。如果沒有匹配項(xiàng)，返回 -1 叼风。

charAt() – 返回指定位置的字符取董。

lastIndexOf() – 返回字符串中一個(gè)子串最后一處出現(xiàn)的索引，如果沒有匹配項(xiàng)无宿，返回 -1 茵汰。

match() – 檢查一個(gè)字符串是否匹配一個(gè)正則表達(dá)式。

substr() 函數(shù) -- 返回從string的startPos位置孽鸡，長(zhǎng)度為length的字符串

substring() – 返回字符串的一個(gè)子串蹂午。傳入?yún)?shù)是起始位置和結(jié)束位置。

slice() – 提取字符串的一部分彬碱，并返回一個(gè)新字符串豆胸。

replace() – 用來查找匹配一個(gè)正則表達(dá)式的字符串，然后使用新字符串代替匹配的字符串巷疼。

search() – 執(zhí)行一個(gè)正則表達(dá)式匹配查找晚胡。如果查找成功，返回字符串中匹配的索引值。否則返回 -1 搬泥。

split() – 通過將字符串劃分成子串桑寨，將一個(gè)字符串做成一個(gè)字符串?dāng)?shù)組。

length – 返回字符串的長(zhǎng)度忿檩，所謂字符串的長(zhǎng)度是指其包含的字符的個(gè)數(shù)尉尾。

toLowerCase() – 將整個(gè)字符串轉(zhuǎn)成小寫字母。

toUpperCase() – 將整個(gè)字符串轉(zhuǎn)成大寫字母燥透。

添加沙咏、移除、移動(dòng)班套、復(fù)制肢藐、創(chuàng)建和查找節(jié)點(diǎn)

1）創(chuàng)建新節(jié)點(diǎn)

　　createDocumentFragment() //創(chuàng)建一個(gè)DOM片段

　　createElement() //創(chuàng)建一個(gè)具體的元素

　　createTextNode() //創(chuàng)建一個(gè)文本節(jié)點(diǎn)

2）添加、移除吱韭、替換吆豹、插入

　　appendChild() //添加

　　removeChild() //移除

　　replaceChild() //替換

　　insertBefore() //插入

3）查找

　　getElementsByTagName() //通過標(biāo)簽名稱

　　getElementsByName() //通過元素的Name屬性的值

　　getElementById() //通過元素Id，唯一性

比較typeof與instanceof理盆？

相同點(diǎn)：JavaScript 中 typeof 和 instanceof 常用來判斷一個(gè)變量是否為空痘煤，或者是什么類型的。

typeof的定義和用法：返回值是一個(gè)字符串猿规，用來說明變量的數(shù)據(jù)類型衷快。

細(xì)節(jié)：

(1)、typeof 一般只能返回如下幾個(gè)結(jié)果：number,boolean,string,function,object,undefined姨俩。

(2)蘸拔、typeof 來獲取一個(gè)變量是否存在，如 if(typeof a!="undefined"){alert("ok")}环葵，而不要去使用 if(a) 因?yàn)槿绻?a 不存在（未聲明）則會(huì)出錯(cuò)调窍。

(3)、對(duì)于 Array,Null 等特殊對(duì)象使用 typeof 一律返回 object张遭，這正是 typeof 的局限性邓萨。

Instanceof定義和用法：instanceof 用于判斷一個(gè)變量是否屬于某個(gè)對(duì)象的實(shí)例。

判斷一個(gè)字符串中出現(xiàn)次數(shù)最多的字符帝璧，統(tǒng)計(jì)這個(gè)次數(shù)

var str = 'asdfssaaasasasasaa';

var json = {};

for (var i = 0; i < str.length; i++) {

if(!json[str.charAt(i)]){

json[str.charAt(i)] = 1;

}else{

json[str.charAt(i)]++;

}

};

var iMax = 0;

var iIndex = '';

for(var i in json){

if(json[i]>iMax){

iMax = json[i];

iIndex = i;

}

}

console.log('出現(xiàn)次數(shù)最多的是:'+iIndex+'出現(xiàn)'+iMax+'次');

JavaScript 數(shù)組(Array)對(duì)象

1先誉、Array相關(guān)的屬性和方法

這里只是做了相關(guān)的列舉，具體的使用方法的烁，請(qǐng)參考網(wǎng)址褐耳。

Array 對(duì)象屬性

constructor 返回對(duì)創(chuàng)建此對(duì)象的數(shù)組函數(shù)的引用。

length 設(shè)置或返回?cái)?shù)組中元素的數(shù)目渴庆。

prototype 使您有能力向?qū)ο筇砑訉傩院头椒ā?/p>

Array 對(duì)象方法

concat() 連接兩個(gè)或更多的數(shù)組铃芦，并返回結(jié)果雅镊。

join() 把數(shù)組的所有元素放入一個(gè)字符串。元素通過指定的分隔符進(jìn)行分隔刃滓。

pop() 刪除并返回?cái)?shù)組的最后一個(gè)元素仁烹。

shift() 刪除并返回?cái)?shù)組的第一個(gè)元素

push() 向數(shù)組的末尾添加一個(gè)或更多元素，并返回新的長(zhǎng)度咧虎。

unshift() 向數(shù)組的開頭添加一個(gè)或更多元素卓缰，并返回新的長(zhǎng)度。

reverse() 顛倒數(shù)組中元素的順序砰诵。

slice() 從某個(gè)已有的數(shù)組返回選定的元素

sort() 對(duì)數(shù)組的元素進(jìn)行排序

splice() 刪除元素征唬，并向數(shù)組添加新元素。

toSource() 返回該對(duì)象的源代碼茁彭。

toString() 把數(shù)組轉(zhuǎn)換為字符串总寒，并返回結(jié)果。

toLocaleString() 把數(shù)組轉(zhuǎn)換為本地?cái)?shù)組理肺，并返回結(jié)果摄闸。

valueOf() 返回?cái)?shù)組對(duì)象的原始值

2、編寫一個(gè)方法 去掉一個(gè)數(shù)組的重復(fù)元素

方法一：

var arr = [0,2,3,4,4,0,2];

var obj = {};

var tmp = [];

for(var i = 0 ;i< arr.length;i++){

if( !obj[arr[i]] ){

obj[arr[i]] = 1;

tmp.push(arr[i]);

}

}

console.log(tmp);

結(jié)果如下： [0, 2, 3, 4]

方法二：

var arr = [2,3,4,4,5,2,3,6],

arr2 = [];

for(var i = 0;i< arr.length;i++){

if(arr2.indexOf(arr[i]) < 0){

arr2.push(arr[i]);

}

}

console.log(arr2);

結(jié)果為：[2, 3, 4, 5, 6]

方法三：

var arr = [2,3,4,4,5,2,3,6];

var arr2 = arr.filter(function(element,index,self){

return self.indexOf(element) === index;

});

console.log(arr2);

結(jié)果為：[2, 3, 4, 5, 6]

回到頂部

jquery相關(guān)

1妹萨、 jQuery 庫(kù)中的 $() 是什么年枕？

　　$() 函數(shù)是 jQuery() 函數(shù)的別稱。$() 函數(shù)用于將任何對(duì)象包裹成 jQuery 對(duì)象眠副，接著你就被允許調(diào)用定義在 jQuery 對(duì)象上的多個(gè)不同方法画切。你可以將一個(gè)選擇器字符串傳入 $() 函數(shù)竣稽，它會(huì)返回一個(gè)包含所有匹配的 DOM 元素?cái)?shù)組的 jQuery 對(duì)象囱怕。

2、如何找到所有 HTML select 標(biāo)簽的選中項(xiàng)毫别？

$('[name=selectname] :selected')

3娃弓、$(this) 和 this 關(guān)鍵字在 jQuery 中有何不同？

$(this) 返回一個(gè) jQuery 對(duì)象岛宦，你可以對(duì)它調(diào)用多個(gè) jQuery 方法，比如用 text() 獲取文本，用val() 獲取值等等苹熏。

而 this 代表當(dāng)前元素翩蘸，它是 JavaScript 關(guān)鍵詞中的一個(gè)，表示上下文中的當(dāng)前 DOM 元素变汪。你不能對(duì)它調(diào)用 jQuery 方法侠坎，直到它被 $() 函數(shù)包裹，例如 $(this)裙盾。

4实胸、jquery怎么移除標(biāo)簽onclick屬性他嫡？

獲得a標(biāo)簽的onclick屬性: $("a").attr("onclick")

刪除onclick屬性：$("a").removeAttr("onclick");

設(shè)置onclick屬性：$("a").attr("onclick","test();");

5、jquery中addClass,removeClass,toggleClass的使用庐完。

$(selector).addClass(class)：為每個(gè)匹配的元素添加指定的類名

$(selector).removeClass(class)：從所有匹配的元素中刪除全部或者指定的類钢属，刪除class中某個(gè)值；

$(selector).toggleClass(class)：如果存在（不存在）就刪除（添加）一個(gè)類

$(selector).removeAttr(class);刪除class這個(gè)屬性门躯；

6淆党、JQuery有幾種選擇器?

(1)、基本選擇器：#id讶凉，class,element,*;

(2)宁否、層次選擇器：parent > child，prev + next 缀遍，prev ~ siblings

(3)慕匠、基本過濾器選擇器：:first，:last 域醇，:not 台谊，:even ，:odd 譬挚，:eq 锅铅，:gt ，:lt

(4)减宣、內(nèi)容過濾器選擇器： :contains 盐须，:empty ，:has 漆腌，:parent

(5)贼邓、可見性過濾器選擇器：:hidden ，:visible

(6)闷尿、屬性過濾器選擇器：[attribute] 塑径，[attribute=value] ，[attribute!=value] 填具，[attribute^=value] 统舀，[attribute$=value] ，[attribute*=value]

(7)劳景、子元素過濾器選擇器：:nth-child 誉简，:first-child ，:last-child 盟广，:only-child

(8)闷串、表單選擇器： :input ，:text 衡蚂，:password 窿克，:radio 骏庸，:checkbox ，:submit 等年叮；

(9)具被、表單過濾器選擇器：:enabled ，:disabled 只损，:checked 一姿，:selected

7、jQuery中的Delegate()函數(shù)有什么作用跃惫？

? delegate()會(huì)在以下兩個(gè)情況下使用到：

1叮叹、如果你有一個(gè)父元素，需要給其下的子元素添加事件爆存，這時(shí)你可以使用delegate()了蛉顽，代碼如下：

$("ul").delegate("li", "click", function(){ $(this).hide(); });

2、當(dāng)元素在當(dāng)前頁面中不可用時(shí)先较，可以使用delegate()

8携冤、$(document).ready()方法和window.onload有什么區(qū)別？

(1)闲勺、window.onload方法是在網(wǎng)頁中所有的元素(包括元素的所有關(guān)聯(lián)文件)完全加載到瀏覽器后才執(zhí)行的曾棕。

(2)、$(document).ready() 方法可以在DOM載入就緒時(shí)就對(duì)其進(jìn)行操縱菜循，并調(diào)用執(zhí)行綁定的函數(shù)翘地。

9、如何用jQuery禁用瀏覽器的前進(jìn)后退按鈕癌幕？

實(shí)現(xiàn)代碼如下：

<script type="text/javascript" language="javascript">

　　$(document).ready(function() {

　　　　window.history.forward(1);

　　　　//OR window.history.forward(-1);　　});

</script>

10衙耕、 jquery中$.get()提交和$.post()提交有區(qū)別嗎？

相同點(diǎn)：都是異步請(qǐng)求的方式來獲取服務(wù)端的數(shù)據(jù)序芦；

異同點(diǎn)：

1臭杰、請(qǐng)求方式不同：$.get() 方法使用GET方法來進(jìn)行異步請(qǐng)求的粤咪。$.post() 方法使用POST方法來進(jìn)行異步請(qǐng)求的谚中。

2、參數(shù)傳遞方式不同：get請(qǐng)求會(huì)將參數(shù)跟在URL后進(jìn)行傳遞寥枝，而POST請(qǐng)求則是作為HTTP消息的實(shí)體內(nèi)容發(fā)送給Web服務(wù)器的宪塔，這種傳遞是對(duì)用戶不可見的。

3囊拜、數(shù)據(jù)傳輸大小不同：get方式傳輸?shù)臄?shù)據(jù)大小不能超過2KB 而POST要大的多

4某筐、安全問題： GET 方式請(qǐng)求的數(shù)據(jù)會(huì)被瀏覽器緩存起來，因此有安全問題冠跷。

11南誊、寫出一個(gè)簡(jiǎn)單的$.ajax()的請(qǐng)求方式身诺？

$.ajax({

url:'http://www.baidu.com',

type:'POST',

data:data,

cache:true,

headers:{},

beforeSend：function(){},

success:function(){},

error:function(){},

complete:function(){}

});

12、jQuery的事件委托方法bind 抄囚、live霉赡、delegate、on之間有什么區(qū)別幔托？

(1)穴亏、bind 【jQuery 1.3之前】

定義和用法：主要用于給選擇到的元素上綁定特定事件類型的監(jiān)聽函數(shù)；

語法：bind(type,[data],function(eventObject))重挑；

特點(diǎn)：

　　(1)嗓化、適用于頁面元素靜態(tài)綁定。只能給調(diào)用它的時(shí)候已經(jīng)存在的元素綁定事件谬哀，不能給未來新增的元素綁定事件刺覆。

　　(2)、當(dāng)頁面加載完的時(shí)候史煎，你才可以進(jìn)行bind()隅津，所以可能產(chǎn)生效率問題。

實(shí)例如下：$( "#members li a" ).bind( "click", function( e ) {} );

(2)劲室、live 【jQuery 1.3之后】

定義和用法：主要用于給選擇到的元素上綁定特定事件類型的監(jiān)聽函數(shù)伦仍；

語法：live(type, [data], fn);

特點(diǎn)：

　　(1)、live方法并沒有將監(jiān)聽器綁定到自己(this)身上很洋，而是綁定到了this.context上了充蓝。

　　(2)、live正是利用了事件委托機(jī)制來完成事件的監(jiān)聽處理喉磁，把節(jié)點(diǎn)的處理委托給了document谓苟，新添加的元素不必再綁定一次監(jiān)聽器。

　　(3)协怒、使用live（）方法但卻只能放在直接選擇的元素后面涝焙，不能在層級(jí)比較深，連綴的DOM遍歷方法后面使用孕暇，即$(“ul”").live...可以仑撞，但$("body").find("ul").live...不行；

實(shí)例如下：$( document ).on( "click", "#members li a", function( e ) {} );

簡(jiǎn)述一下src與href的區(qū)別

href 是指向網(wǎng)絡(luò)資源所在位置妖滔，建立和當(dāng)前元素（錨點(diǎn)）或當(dāng)前文檔（鏈接）之間的鏈接隧哮，用于超鏈接。

src是指向外部資源的位置座舍，指向的內(nèi)容將會(huì)嵌入到文檔中當(dāng)前標(biāo)簽所在位置沮翔；在請(qǐng)求src資源時(shí)會(huì)將其指向的資源下載并應(yīng)用到文檔內(nèi)，例如js腳本曲秉，img圖片和frame等元素采蚀。

當(dāng)瀏覽器解析到該元素時(shí)疲牵，會(huì)暫停其他資源的下載和處理，直到將該資源加載榆鼠、編譯瑰步、執(zhí)行完畢，圖片和框架等元素也如此璧眠，類似于將所指向資源嵌入當(dāng)前標(biāo)簽內(nèi)缩焦。這也是為什么將js腳本放在底部而不是頭部。

5责静、簡(jiǎn)述同步和異步的區(qū)別

同步是阻塞模式袁滥，異步是非阻塞模式。

同步就是指一個(gè)進(jìn)程在執(zhí)行某個(gè)請(qǐng)求的時(shí)候灾螃，若該請(qǐng)求需要一段時(shí)間才能返回信息题翻，那么這個(gè)進(jìn)程將會(huì)一直等待下去，直到收到返回信息才繼續(xù)執(zhí)行下去腰鬼；

異步是指進(jìn)程不需要一直等下去嵌赠，而是繼續(xù)執(zhí)行下面的操作，不管其他進(jìn)程的狀態(tài)熄赡。當(dāng)有消息返回時(shí)系統(tǒng)會(huì)通知進(jìn)程進(jìn)行處理姜挺，這樣可以提高執(zhí)行的效率。

6彼硫、px和em的區(qū)別

相同點(diǎn)：px和em都是長(zhǎng)度單位炊豪；

異同點(diǎn)：px的值是固定的，指定是多少就是多少拧篮，計(jì)算比較容易词渤。em得值不是固定的，并且em會(huì)繼承父級(jí)元素的字體大小串绩。

瀏覽器的默認(rèn)字體高都是16px缺虐。所以未經(jīng)調(diào)整的瀏覽器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em礁凡。

7高氮、瀏覽器的內(nèi)核分別是什么?

IE: trident內(nèi)核

Firefox：gecko內(nèi)核

Safari：webkit內(nèi)核

Opera：以前是presto內(nèi)核，Opera現(xiàn)已改用Google Chrome的Blink內(nèi)核

Chrome：Blink(基于webkit把篓，Google與Opera Software共同開發(fā))

8纫溃、什么叫優(yōu)雅降級(jí)和漸進(jìn)增強(qiáng)？

漸進(jìn)增強(qiáng) progressive enhancement：

針對(duì)低版本瀏覽器進(jìn)行構(gòu)建頁面韧掩，保證最基本的功能，然后再針對(duì)高級(jí)瀏覽器進(jìn)行效果窖铡、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗(yàn)疗锐。

優(yōu)雅降級(jí) graceful degradation：

一開始就構(gòu)建完整的功能坊谁，然后再針對(duì)低版本瀏覽器進(jìn)行兼容。

區(qū)別：

a. 優(yōu)雅降級(jí)是從復(fù)雜的現(xiàn)狀開始滑臊，并試圖減少用戶體驗(yàn)的供給

b. 漸進(jìn)增強(qiáng)則是從一個(gè)非晨谏郑基礎(chǔ)的，能夠起作用的版本開始雇卷，并不斷擴(kuò)充鬓椭，以適應(yīng)未來環(huán)境的需要

c. 降級(jí)（功能衰減）意味著往回看；而漸進(jìn)增強(qiáng)則意味著朝前看关划，同時(shí)保證其根基處于安全地帶

web前端開發(fā)小染，如何提高頁面性能優(yōu)化？

內(nèi)容方面：

1.減少 HTTP 請(qǐng)求 (Make Fewer HTTP Requests)

2.減少 DOM 元素?cái)?shù)量 (Reduce the Number of DOM Elements)

3.使得 Ajax 可緩存 (Make Ajax Cacheable)

針對(duì)CSS：

1.把 CSS 放到代碼頁上端 (Put Stylesheets at the Top)

2.從頁面中剝離 JavaScript 與 CSS (Make JavaScript and CSS External)

3.精簡(jiǎn) JavaScript 與 CSS (Minify JavaScript and CSS)

4.避免 CSS 表達(dá)式 (Avoid CSS Expressions)

針對(duì)JavaScript ：

1. 腳本放到 HTML 代碼頁底部 (Put Scripts at the Bottom)

2. 從頁面中剝離 JavaScript 與 CSS (Make JavaScript and CSS External)

3. 精簡(jiǎn) JavaScript 與 CSS (Minify JavaScript and CSS)

4. 移除重復(fù)腳本 (Remove Duplicate Scripts)

面向圖片(Image)：

1.優(yōu)化圖片

2 不要在 HTML 中使用縮放圖片

3 使用恰當(dāng)?shù)膱D片格式

4 使用 CSS Sprites 技巧對(duì)圖片優(yōu)化

6贮折、瀏覽器是如何渲染頁面的裤翩？

渲染的流程如下：

1.解析HTML文件，創(chuàng)建DOM樹调榄。

? 自上而下踊赠，遇到任何樣式（link、style）與腳本（script）都會(huì)阻塞（外部樣式不阻塞后續(xù)外部腳本的加載）每庆。

2.解析CSS筐带。優(yōu)先級(jí)：瀏覽器默認(rèn)設(shè)置<用戶設(shè)置<外部樣式<內(nèi)聯(lián)樣式<HTML中的style樣式；

3.將CSS與DOM合并缤灵，構(gòu)建渲染樹（Render Tree）

4.布局和繪制烫堤，重繪（repaint）和重排（reflow）