WEB前端面試題全套

1、什么是響應(yīng)式網(wǎng)頁(yè)?通過(guò) CSS3 Media Query 實(shí)現(xiàn)響應(yīng)式 Web 設(shè)計(jì)響應(yīng)式 Web 設(shè)計(jì)(Responsive Web design)的理念是，頁(yè)面的設(shè)計(jì)與開(kāi)發(fā)應(yīng)當(dāng)根據(jù)用戶行為以及設(shè)備環(huán)境(系統(tǒng)平臺(tái)、屏幕尺寸、屏幕定向等)進(jìn)行相應(yīng)的響應(yīng)和調(diào)整。具體的實(shí)踐方式由多方面組成，包括彈性網(wǎng)格和布局、圖片、CSS media query 的使用等。無(wú)論用戶正在使用筆記本還是 iPad，我們的頁(yè)面都應(yīng)該能夠自動(dòng)切換分辨率、圖片尺寸及相關(guān)腳本功能等，以適應(yīng)不同設(shè)備；換句話說(shuō)，頁(yè)面應(yīng)該有能力去自動(dòng)響應(yīng)用戶的設(shè)備環(huán)境。這樣，我們就可以不必為不斷到來(lái)的新設(shè)備做專門(mén)的版本設(shè)計(jì)和開(kāi)發(fā)了。Doctype?

2、 嚴(yán)格模式與混雜模式-如何觸發(fā)這兩種模式，區(qū)分它們有何意義?聲明位于文檔中的最前面的位置，處于 標(biāo)簽之前。此標(biāo)簽可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規(guī)范。標(biāo)準(zhǔn)模式和混雜模式（quirks mode）。在標(biāo)準(zhǔn)模式中，瀏覽器根據(jù)規(guī)范呈現(xiàn)頁(yè)面；在混雜模式中，頁(yè)面以一種比較寬松的向后兼容的方式顯示。混雜模式通常模擬老式瀏覽器（比如 Microsoft IE 4 和 Netscape Navigator 4）的行為以防止老站點(diǎn)無(wú)法工作。在 IE 6 出現(xiàn)時(shí)，在標(biāo)準(zhǔn)模式中使用的是正確的盒模型，在混雜模式中使用的則是老式的專有盒模型。為了維持對(duì) IE 5 和更低版本的向后兼容性，Opera

3、7 和更高版本也在混雜模式中使用有缺點(diǎn)的 IE 盒模型。前端頁(yè)面有哪三層構(gòu)成，分別是什么？作用是什么？網(wǎng)頁(yè)的結(jié)構(gòu)層（structural layer）由 HTML 或 XHTML 之類的標(biāo)記語(yǔ)言負(fù)責(zé)創(chuàng)建。標(biāo)簽，也就是那些出現(xiàn)在尖括號(hào)里的單詞，對(duì)網(wǎng)頁(yè)內(nèi)容的語(yǔ)義含義做出了描述，但這些標(biāo)簽不包含任何關(guān)于如何顯示有關(guān)內(nèi)容的信息。例如，P 標(biāo)簽表達(dá)了這樣一種語(yǔ)義：“這是一個(gè)文本段?！本W(wǎng)頁(yè)的表示層（presentation layer） 由 CSS 負(fù)責(zé)創(chuàng)建。 CSS 對(duì)“如何顯示有關(guān)內(nèi)容”的問(wèn)題做出了回答。網(wǎng)頁(yè)的行為層（behavior layer）負(fù)責(zé)回答“內(nèi)容應(yīng)該如何對(duì)事件做出反應(yīng)”這一問(wèn)題。這是

4、Javascript 語(yǔ)言和 DOM 主宰的領(lǐng)域。使用 (X)HTML 去搭建文檔的結(jié)構(gòu)。使用 CSS 去設(shè)置文檔的呈現(xiàn)效果。使用 DOM 腳本去實(shí)現(xiàn)文檔的行為如何居中一個(gè)浮動(dòng)元素?方法一：讓最外面的層相對(duì)定位，left 等于 50%，然后內(nèi)部嵌套層也使用相對(duì)定位且 left 設(shè)為-50%，這樣的效果就是內(nèi)層相對(duì)整行為水平居中；方法二：使用 display: table;方法三：直接使用 table 布局（使用太多 table 容易讓結(jié)構(gòu)看起來(lái)比較混亂，其實(shí)頁(yè)面中使用少量的 table，只要不要嵌套使用，還是可以實(shí)現(xiàn)使用少量 CSS，達(dá)到最好的效果的），這種方法這里就不舉例演示了。如何讓 ie

5、6,7,8，兼容 html5 的標(biāo)簽？我一直使用公司里的提供的 jqside 插件，里面就是把 html5 的標(biāo)簽放到字符串，用字符串的 split 的方法變?yōu)閿?shù)組，用 while 的方法，變量減減，用 dom 的createElement 方法進(jìn)行再 ie678 里創(chuàng)建標(biāo)簽。if( $.isIE678 )Var html5="abbr,article,aside,audio,canvas,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progres

6、s,section,time,vid eo".split(','),i = html5.length;while(i-) document.createElement(html5i);在 Css 中那個(gè)屬性會(huì)影響 dom 讀取文檔流的順序？Float行內(nèi)元素有哪些？塊級(jí)元素有哪些？CSS 的盒模型？Css 的盒模型：從外到里，margin，border，padding，content。塊元素在頁(yè)面里，占一行，可以設(shè)定寬和高，可以容納塊元素和行內(nèi)元素。常見(jiàn)的塊元素有 div，p，h1-h6，ul 等。行內(nèi)元素沒(méi)有寬和高的屬性但可以與其他元素同一行，一般不可以包含塊元素，

7、行內(nèi)元素的高度一般由元素內(nèi)部的字體大小決定，寬度由內(nèi)容的長(zhǎng)度控制。常見(jiàn)的行內(nèi)元素有 a，b，span，strong，em 等。CSS 引入的方式有哪些? link 和import 的區(qū)別是?內(nèi)聯(lián)引用 CSS。可靈巧應(yīng)用樣式於各標(biāo)簽中。方便于編寫(xiě)代碼時(shí)的使用。沒(méi)有整篇文件的“統(tǒng)一性”，在需要修改某樣式的時(shí)候也變的比較困難。內(nèi)部引用 CSS將樣式規(guī)則寫(xiě)在<STYLE>.</STYLE>標(biāo)簽之中。外部引用 link 標(biāo)簽引用 CSS將樣式規(guī)則寫(xiě)在.css 的樣式文件中，再以<link>標(biāo)簽引入。這樣引入該 css 樣式表文件以后，就可以直接套用該樣式檔案中所制定的

8、樣式了。外部引用 import 引用 CSS跟 link 方法很像，但必須放在<STYLE>.</STYLE> 中： <STYLE TYPE="text/css"><!-import url(引入的樣式表的位址、路徑與檔名);-> </STYLE>可以靈活的引入 css 文件對(duì) xhtml 元素進(jìn)行控制。有時(shí)候也用來(lái)編寫(xiě)某些 css hack。這種方法的缺點(diǎn)：在個(gè)別文件或元素的靈活度不足老祖宗的差別。link 屬于 XHTML 標(biāo)簽，而import 完全是 CSS 提供的一種方式。加載順序的差別。當(dāng)一個(gè)頁(yè)面被加載的

9、時(shí)候（就是被瀏覽者瀏覽的時(shí)候），link 引用的 CSS 會(huì)同時(shí)被加 載，而import 引用的 CSS 會(huì)等到頁(yè)面全部被下載完再被加載。兼容性的差別。由于import 是 CSS2.1 提出的所以老的瀏覽器不支持，import 只有在 IE5 以上的才能識(shí)別，而 link 標(biāo)簽無(wú)此問(wèn)題。使用 dom 控制樣式時(shí)的差別。當(dāng)使用 javascript 控制 dom 去改變樣式的時(shí)候，只能使用 link 標(biāo)簽，因?yàn)閕mport 不是 dom 可以控制的。CSS 選擇符有哪些？哪些屬性可以繼承？?jī)?yōu)先級(jí)算法如何計(jì)算？?jī)?nèi)聯(lián)和 important 哪個(gè)優(yōu)先級(jí)高？ID和CLASSClass可繼承;偽類 A

10、標(biāo)簽可以繼承;列表UL,LI,DL,DD,DT可繼承優(yōu)先級(jí)就近原則，樣式定義最近者為準(zhǔn)載入樣式以最后載入的定位為準(zhǔn)優(yōu)先級(jí)為:!important>id>class>tag;Important比內(nèi)聯(lián)優(yōu)先級(jí)高CSS 層疊是什么?介紹一下？CSS 翻譯過(guò)來(lái)叫做層疊樣式表。運(yùn)用到層疊的時(shí)候，主要就是靠 CSS 的組合與子選擇器。去編輯樣式。它的作用是定義網(wǎng)頁(yè)的外觀（例如字體，顏色等等），它也可以和 javascript 等瀏覽器端腳本語(yǔ)言合作做出許多動(dòng)態(tài)的效果。CSS 指層疊樣式表 (Cascading Style Sheets)樣式定義如何顯示 HTML 元素樣式通常存儲(chǔ)在樣式表中

11、把樣式添加到 HTML 4.0 中，是為了解決內(nèi)容與表現(xiàn)分離的問(wèn)題外部樣式表可以極大提高工作效率外部樣式表通常存儲(chǔ)在 CSS 文件中多個(gè)樣式定義可層疊為一html 的意義？HTML 指的是超文本標(biāo)記語(yǔ)言 (Hyper Text Markup Language)HTML 不是一種編程語(yǔ)言，而是一種標(biāo)記語(yǔ)言 (markup language)標(biāo)記語(yǔ)言是一套標(biāo)記標(biāo)簽 (markup tag)HTML 使用標(biāo)記標(biāo)簽來(lái)描述網(wǎng)頁(yè)HTML 標(biāo)記標(biāo)簽通常被稱為 HTML 標(biāo)簽 (HTML tag)HTML 標(biāo)簽是由尖括號(hào)包圍的關(guān)鍵詞，比如 <html>HTML 標(biāo)簽通常是成對(duì)出現(xiàn)的，比如 <

12、b> 和 </b>標(biāo)簽對(duì)中的第一個(gè)標(biāo)簽是開(kāi)始標(biāo)簽，第二個(gè)標(biāo)簽是結(jié)束標(biāo)簽開(kāi)始和結(jié)束標(biāo)簽也被稱為開(kāi)放標(biāo)簽和閉合標(biāo)簽介紹 HTML5 和 CSS3(對(duì)比)?HTML5還包含了新的語(yǔ)義化的元素標(biāo)簽，比如：<nav>,<header>,<footer>，<aside>以及 <figure> 等等 。拖放（Drag和drop）是HTML5標(biāo)準(zhǔn)的組成部分。canvas元素用于在網(wǎng)頁(yè)上繪制圖形。HTML5支持內(nèi)聯(lián)SVG（矢量圖形）Canvas和SVG都允許您在瀏覽器中創(chuàng)建圖形，但是它們?cè)诟旧鲜遣煌?。HTML5 Geolocati

13、on（地理定位）用于定位用戶的位置。在谷歌地圖上顯示您的位置。HTML5引入了應(yīng)用程序緩存，這意味著web應(yīng)用可進(jìn)行緩存，并可在沒(méi)有因特網(wǎng)連接時(shí)進(jìn)行訪問(wèn)。webworker是運(yùn)行在后臺(tái)的JavaScript，獨(dú)立于其他腳本，不會(huì)影響頁(yè)面的性能。您可以繼續(xù)做任何愿意做的事情：點(diǎn)擊、選取內(nèi)容等 等，而此時(shí)webworker在后臺(tái)運(yùn)行。在客戶端存儲(chǔ)數(shù)據(jù)HTML5 提供了兩種在客戶端存儲(chǔ)數(shù)據(jù)的新方法：localStorage - 沒(méi)有時(shí)間限制的數(shù)據(jù)存儲(chǔ)sessionStorage - 針對(duì)一個(gè) session 的數(shù)據(jù)存儲(chǔ)HTML5服務(wù)器發(fā)送事件（server-sentevent）允許網(wǎng)頁(yè)獲得來(lái)自服務(wù)器

14、的更新。border-image 原理？1.調(diào)用邊框圖片border-image 的 url 屬性，通過(guò)相對(duì)或絕對(duì)路徑鏈接圖片。2，邊框圖片的建裁border-image 的數(shù)值參數(shù)剪裁邊框圖片，形成九宮格。3.剪裁圖片的邊框邊框圖片被切割成 9 部分，以一一對(duì)應(yīng)的關(guān)系放到 div 邊框的九宮格中，然后再壓縮（或拉伸）至邊框（border-width 或 border-image-width）的寬度大小。4.執(zhí)行重復(fù)屬性被填充至邊框九宮格四個(gè)角落的的邊框圖片是不執(zhí)行重復(fù)屬性的。上下的九宮格執(zhí)行水平方向的重復(fù)屬性（拉伸或平鋪），左右的格子執(zhí)行垂直方向的重復(fù)屬性，而中間的那個(gè)格子則水平重復(fù)和垂直方

15、向的重復(fù)都要執(zhí)行。5、完成繪制，實(shí)現(xiàn)效果自定義手機(jī) UI 組件？如何實(shí)現(xiàn)的？Input,button,radio,checkbox.把本身的 input 隱藏掉，給后面的 label 進(jìn)行樣式，并且用 label 的 for 屬性，去指定 input 的 id。去點(diǎn)擊 label 的時(shí)候，css3 的：chcked 和：disabled 去確定狀態(tài)，樣式用 css 精靈去排版。圖片切換的實(shí)現(xiàn)思路?以全局監(jiān)聽(tīng)的方式通過(guò) a 標(biāo)簽的描點(diǎn)進(jìn)行 view 動(dòng)態(tài)切換頁(yè)面，只要把 a 標(biāo)簽帶有 id 的 href 屬性的值指到錨點(diǎn)，用 CSS3 的動(dòng)畫(huà)進(jìn)行切換頁(yè)面.HTML5 都有哪些新的 JS API?

16、二維繪圖 API，可以用在一個(gè)新的畫(huà)布（Canvas）元素上以呈現(xiàn)圖像、游戲圖形或者其他運(yùn)行中的可視圖形。一個(gè)允許 web 應(yīng)用程序?qū)⒆陨碜?cè)為某個(gè)協(xié)議或 MIME 類型的 API。一個(gè)引入新的緩存機(jī)制以支持脫機(jī) web 應(yīng)用程序的 API。一個(gè)能夠播放視頻和音頻的 API，可以使用新的 video 和 audio 元素。一個(gè)歷史紀(jì)錄 API，它可以公開(kāi)正在瀏覽的歷史紀(jì)錄，從而允許頁(yè)面更好地支持AJAX 應(yīng)用程序中實(shí)現(xiàn)對(duì)后退功能。跨文檔/跨域的消息傳遞，它提供了一種方式，使得文檔可以互相通信而不用考慮它們的來(lái)源域，在某種程度上，這樣的設(shè)計(jì)是為了防止跨站點(diǎn)的腳本攻擊。一個(gè)支持拖放操作的 API，

17、用它可以與 draggable 特性相關(guān)聯(lián)。一個(gè)支持編輯操作的 API，用它可以與一個(gè)新的全局 contenteditable 特性相關(guān)聯(lián)。一個(gè)新的網(wǎng)絡(luò) API，它支持 web 應(yīng)用程序在本地網(wǎng)絡(luò)上互相通信，并在它們的源服務(wù)器上維持雙向的通信。使用 JavaScript API 的鍵/值對(duì)實(shí)現(xiàn)客戶端的持久化存儲(chǔ)，同時(shí)支持嵌入的 SQL 數(shù)據(jù)庫(kù)。服務(wù)器發(fā)送的事件，通過(guò)它可以與新的事件源（event-source）元素關(guān)聯(lián)，新的事件源元素有利于與遠(yuǎn)程數(shù)據(jù)源的持久性連接，而且極大地消除了在 Web 應(yīng)用程序中對(duì)輪詢的需求。AMD和CMD是什么？它們的區(qū)別有哪些？AMD和CMD是二種模塊定義規(guī)范?，F(xiàn)在

18、都使用模塊化編程，AMD，異步模塊定義；CMD，通用模塊定義。AMD依賴前置，CMD依賴就近。CMD的API職責(zé)單一，沒(méi)有全局require，AMD的一個(gè)API可以多用。MVC BFCmvc是模型(model)視圖(view)控制器(controller)的縮寫(xiě)，一種軟件設(shè)計(jì)典范使用MVC的目的是將M和V的實(shí)現(xiàn)代碼分離，從而使同一個(gè)程序可以使用不同的表現(xiàn)形式。MVC對(duì)應(yīng)Html，CSS，js。BFC全稱”Block Formatting Context”, 中文為“塊級(jí)格式化上下文”。流體特性：塊狀水平元素，如div元素（下同），在默認(rèn)情況下（非浮動(dòng)、絕對(duì)定位等），水平方向會(huì)自動(dòng)填滿外部的容器

19、；BFC元素特性表現(xiàn)原則就是，內(nèi)部子元素不會(huì)影響外部的元素。HTML 5 增加了一項(xiàng)新功能是 自定義數(shù)據(jù)屬性 ，也就是  data- 自定義屬性。在HTML5中我們可以使用以 data- 為前綴來(lái)設(shè)置我們需要的自定義屬性，來(lái)進(jìn)行一些數(shù)據(jù)的存放。<div id = "user" data-uid = "12345" data-uname = "愚人碼頭"></div>/ 使用getAttribute獲取 data- 屬性var use

20、r = document . getElementById ( 'user' ) ;var userName =user . getAttribute ( 'data-uname' ) ; / userName = '愚人碼頭'var userId = user . getAttribute ( 'data-uid' ) ; / userId = '12345'使用setAttribute設(shè)置 data- 屬性u(píng)ser . setAttribute ( 'data-site' , ''

21、; ) ;Position的四個(gè)屬性詳解Position的四個(gè)屬性：static，fixed，absolute，relativestatic，是position屬性的默認(rèn)值，也就是無(wú)特殊定位，遵循h(huán)tml定位規(guī)則。fixed，是相對(duì)于瀏覽器窗口進(jìn)行定位，不隨頁(yè)面的上下翻動(dòng)而移動(dòng)，比如固定在頁(yè)面末端的二維碼等。absolute，它是相對(duì)于它的第一個(gè)父元素進(jìn)行定位，如果你想讓這個(gè)div#demo里的一個(gè)子div#sub相對(duì)于#demo定位在右上角的某個(gè)地方，應(yīng)該給#demo相對(duì)定位，#sub絕對(duì)定位。此時(shí)，它的第一個(gè)父元素就是id=demo的div；否則它的父元素就是body，這樣它的位置在頁(yè)面中

22、保持不變，但是隨著頁(yè)面移動(dòng)會(huì)發(fā)生變化（區(qū)別fixed）。 relative，relative是相對(duì)于自己來(lái)定位的，相對(duì)于其正常位置進(jìn)行定位。例如：#demoposition:relative;top:-50px;,這時(shí)#demo會(huì)在相對(duì)于它原來(lái)的位置上移50px。  P.S:采用左列l(wèi)eft浮動(dòng)，右列不浮動(dòng)，采用margin-left定位的方式。css中box和flex首先'box'吶是比較早的語(yǔ)法，使用它時(shí)需要帶上前綴，比如display: -webkit-box; / Chrome 4+, Safari 3.1, iOS Safari 3.2+ 

23、;/，而"flex"是2012年的語(yǔ)法，是css3新規(guī)定的，也將是以后標(biāo)準(zhǔn)的語(yǔ)法。將父元素的display屬性設(shè)置為-webkit-box（box），然后子元素通過(guò)屬性-webkit-box-flex來(lái)指定一個(gè)框的子元素是否是靈活的或固定的大小，如上，定義兩個(gè)靈活的p元素。如果父級(jí)box的總寬度為300px，P1將有一個(gè)100px的寬度，P2將有一個(gè)200px的寬度，也就是呈固定比例劃分。當(dāng)然了，也可以這樣寫(xiě)：<div style="background-color: pink;width: 500px;height:500px;display:flex&q

24、uot;><p style="background-color: orange;flex:1.0;border:1px solid red;">111</p><p style="background-color: orangered;flex:2.0;border:1px solid blue;">222</p></div>當(dāng)然了css3規(guī)定了，一系列的有關(guān)box的屬性，比如 box-shadow。JQ 常見(jiàn)選擇器？，號(hào)選擇器，分組選擇器?？崭瘢娓高x擇器。>大于號(hào)，父子選

25、擇器。+號(hào)選擇器，緊接下一個(gè)兄弟選擇器。號(hào)，元素之后所有的 siblings 元素。：first，：last，：not，：first-child，:last-child,:animated.：checkedjQuery 插件實(shí)現(xiàn)方式，分別介紹？jQuery.fn.extend 封裝直接在$下面的方法，就是根下面，擴(kuò)展 jQuery 元素集來(lái)提供新的方法（通常用來(lái)制作插件）。$.extend 用來(lái)在 jQuery 命名空間上增加新函數(shù)。用一個(gè)或多個(gè)其他對(duì)象來(lái)擴(kuò)展一個(gè)對(duì)象，返回被擴(kuò)展的對(duì)象批量的方法用 fn，靜態(tài)的用$.extend（），不建議用擴(kuò)展到根下面。bind 和 live 的區(qū)別?liv

26、e 方法其實(shí)是 bind 方法的變種，其基本功能就同 bind 方法的功能是一樣的，都是為一個(gè)元素綁定某個(gè)事件，但是 bind 方法只能給當(dāng)前存在的元素綁定事件，對(duì)于事后采用 JS 等方式新生成的元素?zé)o效，而 live 方法則正好彌補(bǔ)了 bind 方法的這個(gè)缺陷，它可以對(duì)后 生成的元素也可以綁定相應(yīng)的事件. js 和 jq 如何轉(zhuǎn)換？jQuery 對(duì)象是通過(guò) jQuery 包裝 DOM 對(duì)象后產(chǎn)生的對(duì)象。jQuery 對(duì)象是 jQuery 獨(dú)有的，其可以使用 jQuery 里的方法，但是不能使用 DOM 的方法；例如：$("#img").attr("src&quo

27、t;,"test.jpg"); 這里的 $("#img")就是 jQuery 對(duì)象。DOM 對(duì)象就是 Javascript 固有的一些對(duì)象操作。DOM 對(duì)象能使用 Javascript 固有的方法，但是不能使用 jQuery 里的方法。例如：document.getElementById("img").src = “test.jpg"；這里的 document.getElementById("img") 就是 DOM 對(duì)象。$("#img").attr("src",

28、"test.jpg"); 和 document.getElementById("img").src = "test.jpg" 是等價(jià)的，是正確的，但是 $("#img").src = "test.jpg" ；或者 document.getElementById("img").attr("src","test.jpg"); 都是錯(cuò)誤的。DOM 對(duì)象轉(zhuǎn)成 jQuery 對(duì)象對(duì)于已經(jīng)是一個(gè) DOM 對(duì)象，只需要用 $() 把 DOM 對(duì)象包裝

29、起來(lái)，就可以獲得一個(gè)jQuery 對(duì)象了，$(DOM 對(duì)象)如：var v = document.getElementById("v");/DOM 對(duì)象var $v = $(v);/jQuery 對(duì)象轉(zhuǎn)換后，就可以任意使用 jQuery 的方法。jQuery 對(duì)象轉(zhuǎn)成 DOM 對(duì)象兩種轉(zhuǎn)換方式講一個(gè) jQuery 對(duì)象轉(zhuǎn)換成 DOM 對(duì)象： index 和 .get(index)；(1) jQuery 對(duì)象是一個(gè)數(shù)據(jù)對(duì)象，可以通過(guò) index 的方法，來(lái)得到相應(yīng)的 DOM 對(duì)象。如： var $v = $("#v");/jQuery 對(duì)象var v =

30、$v0;/DOM 對(duì)象alert(v.checked);/檢測(cè)這個(gè) checkbox 是否被選中(2) jQuery 本身提供，通過(guò).get(index) 方法得到相應(yīng)的 DOM 對(duì)象如：var$v = $("#v");/jQuery 對(duì)象var v = $v.get(0);/DOM 對(duì)象 ( $v.get()0 也可以 )alert(v.checked);/檢測(cè)這個(gè) checkbox 是否被選中通過(guò)以上方法，可以任意的相互轉(zhuǎn)換 jQuery 對(duì)象和 DOM 對(duì)象，需要再?gòu)?qiáng)調(diào)的是：DOM 對(duì)象才能使用 DOM 中的方法，jQuery 對(duì)象是不可以使用中的方法給出一個(gè)數(shù)組如何

31、去掉重復(fù)的項(xiàng)？實(shí)現(xiàn)一個(gè)把數(shù)組里面的重復(fù)元素去除的方法：主要的是 Array 的 prototype 的方法。var arr=1,3,5,3,6,9,1,2,2var arr='a','b','a','c','c','ab','bc' function removeRepeat(arr)var i,tmpArr=; for(i in arr)if(tmpArr.join(',').indexOf(arri)=-1) tmpArr.push(arri);return tm

32、pArr;var r=(arremoveRepeatr); console.log(r);二方法：Atotype.unique=function() var i,tmpArr=;for(i in this)if(typeof thisi!='function') if(tmpArr.join(',').indexOf(thisi)=-1)tmpArr.push(thisi);return tmpArr;var arr='a','b','a','c','c','

33、ab','bc' var r=arr.unique(); console.log(r);js 如何實(shí)現(xiàn)面向?qū)ο?？var name = 'Chen Hao'var email = 'haoel()' var website = ''var chenhao = name : 'Chen Hao',email : 'haoel()',website : ''/以成員的方式 ; chenhao.email; chenhao.website; /以 hash m

34、ap 的方式 chenhao"name" chenhao"email" chenhao"website"/我們可以看到， 其用 function 來(lái)做 class。 var Person = function(name, email, website) = name; this.email = email; this.website = website; this.sayHello = function()var hello = "Hello, I'm "+ + &qu

35、ot;， n" + "my email is: " + this.email + "， n" + "my website is: " + this.website;alert(hello);var chenhao = new Person("Chen Hao", "haoel", "");chenhao.sayHello();Javascript 的數(shù)據(jù)和成員封裝很簡(jiǎn)單。沒(méi)有類完全是對(duì)象操作。純動(dòng)態(tài)！Javascript function 中的 this 指針很關(guān)鍵

36、，如果沒(méi)有的話，那就是局部變量或局部函數(shù)。去找最緊跟的上一個(gè) function。Javascript 對(duì)象成員函數(shù)可以在使用時(shí)臨時(shí)聲明，并把一個(gè)全局函數(shù)直接賦過(guò)去就好了。Javascript 的成員函數(shù)可以在實(shí)例上進(jìn)行修改，也就是說(shuō)不同實(shí)例相同函數(shù)名的行為不一定一樣。js 如何實(shí)現(xiàn)繼承?繼承是指一個(gè)對(duì)象直接使用另一對(duì)象的屬性和方法實(shí)現(xiàn)方法：對(duì)象冒充，及call（）Apply（）參見(jiàn)上述call和apply的用法。原型鏈方式：js中每個(gè)對(duì)象均有一個(gè)隱藏的_proto_屬性，一個(gè)實(shí)例化對(duì)象的_proto_屬性指向其類的prototype方法，而這個(gè)prototype方法又可以被賦值成另一個(gè)實(shí)例化對(duì)

37、象，這個(gè)對(duì)象的_proto_又需要指向其類，由此形成一條鏈。那么_proto_是什么？每個(gè)對(duì)象都會(huì)在其內(nèi)部初始化一個(gè)屬性，就是_proto_，當(dāng)我們?cè)L問(wèn)一個(gè)對(duì)象的屬性 時(shí)，如果這個(gè)對(duì)象內(nèi)部不存在這個(gè)屬性，那么他就會(huì)去_proto_里找這個(gè)屬性，這個(gè)_proto_又會(huì)有自己的_proto_，于是就這樣 一直找下去，也就是我們平時(shí)所說(shuō)的原型鏈的概念。定義一個(gè) Dog 對(duì)象，并增加一個(gè) name 屬性，該屬性可以在新建對(duì)象時(shí)通過(guò)參數(shù)傳入function Dog( name ) = name;/ 通過(guò)原型方式擴(kuò)展 Dog 對(duì)象Dtotype = / 重新覆蓋構(gòu)造函數(shù)讓其

38、指向 Dog constructor:Dog, Wow:function()console.group();("I am: "+ ); ("WangWang."); console.groupEnd();,yelp:function()this.Wow();function MadDog(name) Dog.apply( this, name);MadDtotype=new Dog();/ 重新覆蓋構(gòu)造函數(shù)，讓其指向 MadDogMadDtotype.constru

39、ctor=MadDog;MadDtotype.yelp=function()self=this;setInterval(function()self.Wow();,5000);var xiaoXian=new Dog("xiaoXian"); xiaoXian.yelp();var xiaoMang=new MadDog("xiaoMang"); xiaoMang.yelp();console.log( xiaoXian.constructor = xiaoMang.constructor );如果擴(kuò)展 js 中原生的 String 對(duì)象?s

40、tring 的方法？S= function()Slice 從字符串的第一個(gè)參數(shù)提取第二個(gè)參數(shù)，也可以截取數(shù)組。返回的結(jié)果類型：string/objectSubstring 從字符串的第一個(gè)參數(shù)提取第二個(gè)參數(shù)，返回的結(jié)果類型，string。Indexof 返回短字符串在長(zhǎng)字符串出現(xiàn)的位置。Lastindexof 返回最后一個(gè)短字符串出現(xiàn)的位置。Replace 字符串的替換方法，Split 字符串分割方法，能轉(zhuǎn)換為數(shù)組，數(shù)組轉(zhuǎn)換字符串，用 json（）方法。document.ready()和 window.onload 的區(qū)別?Document.ready(

41、)是 jQuery 中準(zhǔn)備出發(fā)的事件，當(dāng)加載到當(dāng)前元素就執(zhí)行了，Window.onload 是整個(gè)頁(yè)面加載之后才執(zhí)行閉包是什么？閉包是有權(quán)訪問(wèn)另一個(gè)函數(shù)作用域中的變量的函數(shù)。閉包是個(gè)函數(shù)，而它“記住了周圍發(fā)生了什么”。表現(xiàn)為由“一個(gè)函數(shù)”體中定義了“另一個(gè)函數(shù)”“閉包”是一個(gè)表達(dá)式（一般是函數(shù)），它具有自由變量以及綁定這些變量的環(huán)境（該環(huán)境“封閉了”這個(gè)表達(dá)式）。1.閉包有權(quán)訪問(wèn)函數(shù)內(nèi)部的所有變量。2.當(dāng)函數(shù)返回一個(gè)閉包時(shí)，這個(gè)函數(shù)的作用域?qū)?huì)一直在內(nèi)存中保存到閉包不存在為止。function f() var rs = ;for (var i=0; i <10; i+) rsi = fu

42、nction() return i;return rs;var fn = f();for (var i = 0; i < fn.length; i+) console.log('函數(shù) fn' + i + '()返回值:' + fni();介紹 jQuery easyUI？jQuery easyUI 組件使用?jQuery EasyUI 是一組基于 jQuery 的 UI 插件集合，而 jQuery EasyUI 的目標(biāo)就是幫助 web 開(kāi)發(fā)者更輕松的打造出功能豐富并且美觀的 UI 界面。開(kāi)發(fā)者不需要編寫(xiě)復(fù)雜的 javascript，也不需要對(duì) css 樣式

43、有深入的了解，開(kāi)發(fā)者需要了解的只有一些簡(jiǎn)單的 html 標(biāo)簽。布局 layout，上南，下北，左西右東，中間內(nèi)容，左邊的組件是：tree，手風(fēng)琴，中間的有 tab，tab 里有 datagrid 數(shù)據(jù)表格，還有數(shù)據(jù)表格的 toolbar 工具欄。對(duì)話框 dialog；什么是 DOM，什么是 DOM？以及它們的用法？BOM 即瀏覽器對(duì)象模型，瀏覽器對(duì)象模型(BOM)使JavaScript有能力與瀏覽器“對(duì)話”，由于現(xiàn)代瀏覽器已經(jīng)（幾乎）實(shí)現(xiàn)了JavaScript交互性方面的相同方法和屬性，因此常被認(rèn)為是BOM的方法和屬性。所有瀏覽器都支持 window 對(duì)象。它表示瀏覽器窗口。所有 JavaSc

44、ript 全局對(duì)象、函數(shù)以及變量均自動(dòng)成為 window 對(duì)象的成員。全局變量是 window 對(duì)象的屬性。全局函數(shù)是 window 對(duì)象的方法。甚至 HTML DOM 的 document 也是 window 對(duì)象的屬性之一：Window 對(duì)象其實(shí)是 DOM 中所有的對(duì)象都源自 window 對(duì)象，有 location 對(duì)象， history 對(duì)象，方法有.Resize（）alert( ) .confirm( ).prompt( ).open().close().setInterval().setTimeout()。window.open() - 打開(kāi)新窗口window.close() -

45、關(guān)閉當(dāng)前窗口window.moveTo() - 移動(dòng)當(dāng)前窗口window.resizeTo() - 調(diào)整當(dāng)前窗口的尺寸DOM 的文檔對(duì)象模型，最頂級(jí)的對(duì)象是 document?？梢?js 通過(guò)操作 DOM，就是一個(gè)接口，可以訪問(wèn) html 的標(biāo)準(zhǔn)方法。要改變頁(yè)面的某個(gè)東西，JavaScript就需要獲得對(duì)HTML文檔中所有元素進(jìn)行訪問(wèn)的入口。這個(gè)入口，連同對(duì)HTML元 素進(jìn)行添加、移動(dòng)、改變或移除的方法和屬性，都是通過(guò)文檔對(duì)象模型來(lái)獲得的（DOM）。JSON 和 JSONP 的區(qū)別？JSONP 的原理？JSON(JavaScriptObjectNotation)和 JSONP(JSONwith

46、Padding)雖然只有一個(gè)字母的差別，但其實(shí)他們根本不是一回事兒：JSON 是一種數(shù)據(jù)交換格式，而JSONP 是一種依靠開(kāi)發(fā)人員的聰明才智創(chuàng)造出的一種非官方跨域數(shù)據(jù)交互協(xié)議。1、 一個(gè)眾所周知的問(wèn)題，Ajax 直接請(qǐng)求普通文件存在跨域無(wú)權(quán)限訪問(wèn)的問(wèn)題，甭管你是靜態(tài)頁(yè)面、動(dòng)態(tài)網(wǎng)頁(yè)、web 服務(wù)、WCF，只要是跨域請(qǐng)求，一律不準(zhǔn)；2、不過(guò)我們又發(fā)現(xiàn)，Web 頁(yè)面上調(diào)用 js 文件時(shí)則不受是否跨域的影響（不僅如此，我們還發(fā)現(xiàn)凡是擁有”src”這個(gè)屬性的標(biāo)簽都擁有跨域的能力，比如<script>、<img>、<iframe>）；3、于是可以判斷，當(dāng)前階段如果想通過(guò)

47、純 web 端（ActiveX 控件、服務(wù)端代理、屬于未來(lái)的 HTML5 之 Websocket 等方式不算）跨域訪問(wèn)數(shù)據(jù)就只有一種可能，那就是在遠(yuǎn)程服務(wù)器上設(shè)法把數(shù)據(jù)裝進(jìn) js 格式的文件里，供客戶端調(diào)用和進(jìn)一步處理；4、恰巧我們已經(jīng)知道有一種叫做 JSON 的純字符數(shù)據(jù)格式可以簡(jiǎn)潔的描述復(fù)雜數(shù)據(jù)，更妙的是 JSON 還被 js 原生支持，所以在客戶端幾乎可以隨心所欲的處理這種格式的數(shù)據(jù)；5、這樣子解決方案就呼之欲出了，web 客戶端通過(guò)與調(diào)用腳本一模一樣的方式，來(lái)調(diào)用跨域服務(wù)器上動(dòng)態(tài)生成的 js 格式文件（一般以 JSON 為后綴），顯而易見(jiàn)，服務(wù)器之所以要?jiǎng)討B(tài)生成 JSON 文件，目的就

48、在于把客戶端需要的數(shù)據(jù)裝入進(jìn)去。6、客戶端在對(duì) JSON 文件調(diào)用成功之后，也就獲得了自己所需的數(shù)據(jù)，剩下的就是按照自己需求進(jìn)行處理和展現(xiàn)了，這種獲取遠(yuǎn)程數(shù)據(jù)的方式看起來(lái)非常像 AJAX，但其實(shí)并不一樣。7、為了便于客戶端使用數(shù)據(jù)，逐漸形成了一種非正式傳輸協(xié)議，人們把它稱作JSONP，該協(xié)議的一個(gè)要點(diǎn)就是允許用戶傳遞一個(gè) callback 參數(shù)給服務(wù)端，然后服務(wù)端返回?cái)?shù)據(jù)時(shí)會(huì)將這個(gè) callback 參數(shù)作為函數(shù)名來(lái)包裹住 JSON 數(shù)據(jù)，這樣客戶端就可以隨意定制自己的函數(shù)來(lái)自動(dòng)處理返回?cái)?shù)據(jù)了。如何解析 json？用 ajax 去請(qǐng)求 json 數(shù)據(jù)，在回調(diào)函數(shù)里，把數(shù)據(jù)傳過(guò)到函數(shù)里。通過(guò)用一

49、個(gè) for 循環(huán)，用 innerHTML 和 jQuery 的方法 html（）的方法，渲染到頁(yè)面里。手機(jī)瀏覽器獨(dú)有的三個(gè)事件？touchstart事件：當(dāng)手指觸摸屏幕時(shí)候觸發(fā)，即使已經(jīng)有一個(gè)手指放在屏幕上也會(huì)觸發(fā)。touchmove事件：當(dāng)手指在屏幕上滑動(dòng)的時(shí)候連續(xù)地觸發(fā)。在這個(gè)事件發(fā)生期間，調(diào)用preventDefault()事件可以阻止?jié)L動(dòng)。touchend事件：當(dāng)手指從屏幕上離開(kāi)的時(shí)候觸發(fā)。touchcancel事件：當(dāng)系統(tǒng)停止跟蹤觸摸的時(shí)候觸發(fā)。關(guān)于這個(gè)事件的確切出發(fā)時(shí)間，文檔中并沒(méi)有具體說(shuō)明，咱們只能去猜測(cè)了。為什么要用 Zepto?jquery 適用于 PC 端桌面環(huán)境，桌面環(huán)境

50、更加復(fù)雜，jquery 需要考慮的因素非常多，尤其表現(xiàn)在兼容性上面，相對(duì)于 PC 端，移動(dòng)端的發(fā)雜都遠(yuǎn)不及 PC 端,手機(jī)上的帶寬永遠(yuǎn)比不上 pc 端。pc 端下載 jquery 到本地只需要 13 秒（90+K），但是移動(dòng)端就慢了很多，2G 網(wǎng)絡(luò)下你會(huì)看到一大片空白網(wǎng)頁(yè)在加載，相信用戶第二次就沒(méi)打開(kāi)的欲望了。zepto 解決了這個(gè)問(wèn)題，只有不到 10K 的大小，2G 網(wǎng)絡(luò)環(huán)境下也毫無(wú)壓力，表現(xiàn)不遜色于 jquery。所以移動(dòng)端開(kāi)發(fā)首選框架，個(gè)人推薦 zepto.js。jq mobi，zepoto 手機(jī)跨平臺(tái)的手機(jī)框架。如何區(qū)分多個(gè)終端（zepto）？detece 來(lái)判斷：/generalde

51、vicetype$.os.phone $.os.tablet/specificOS $.os.ios $.os.android $.os.webos $.os.blackberry $.os.bb10 $.os.rimtabletos/specificdevicetype $.os.iphone$.os.ipad $.os.touchpad $.os.kindle/specificbrowser $.browser.chrome $.browser.firefox $.browser.silk $.browser.playbook/Additionally,versioninformation

52、isavailableaswell. /Here's what's returnedforaniPhonerunning iOS6.1. !$.os.phone/=>true!$.os.iphone/=>true !$.os.ios/=>true !$.os.version/=>"6.1"!$.browser.version/=>"536.26"簡(jiǎn)述下 cookie 的操作，還有 cookie 的屬性都知道哪些？Session 是由應(yīng)用服務(wù)器維持的一個(gè)服務(wù)器端的存儲(chǔ)空間，用戶在連接服務(wù)器時(shí)，會(huì)由服務(wù)器生成一個(gè)

53、唯一的 SessionID,用該 SessionID為標(biāo)識(shí)符來(lái)存取服務(wù)器端的Session 存儲(chǔ)空間。Cookie 是客戶端的存儲(chǔ)空間，由瀏覽器來(lái)維持。如果不設(shè)置過(guò)期時(shí)間，則表示這個(gè) cookie 生命周期為瀏覽器會(huì)話期間，只要關(guān)閉瀏覽器窗口，cookie 就消失了。AJAX 是什么?AJAX 的交互模型(流程)?AJAX 跨域的解決辦法?同步和異步的區(qū)別?Asynchronous JavaScript and XML（異步 JavaScript 和 XML），是一種創(chuàng)建交互式網(wǎng)頁(yè)應(yīng)用的網(wǎng)頁(yè)開(kāi)發(fā)技術(shù)。簡(jiǎn)單的說(shuō)它是多種技術(shù)的組合，目的就是讓前臺(tái)的數(shù)據(jù)交互變得更快捷，不用刷新頁(yè)面就可以完成數(shù)據(jù)的更

54、新。優(yōu)點(diǎn)很明顯，利于用戶體驗(yàn)，不會(huì)打斷用戶的操作，在不刷新頁(yè)面的情況下更新內(nèi)容，減小服務(wù)器壓力也是它很硬性的一個(gè)優(yōu)點(diǎn)；而缺點(diǎn)，除了倍受追捧的 SEO 問(wèn)題，安全問(wèn)題、前進(jìn)后退（這個(gè)雖然可以用其他方法解決，但 AJAX 本身的機(jī)制還是沒(méi)變）、破壞程序的異常機(jī)制以及對(duì)新興手持設(shè)備支持不完美的問(wèn)題都是它現(xiàn)存的一些缺點(diǎn)。readyState 五種狀態(tài)：請(qǐng)求未初始化，還沒(méi)有調(diào)用open()。請(qǐng)求已經(jīng)建立，但是還沒(méi)有發(fā)送，還沒(méi)有調(diào)用 send()。請(qǐng)求已發(fā)送，正在處理中（通?，F(xiàn)在可以從響應(yīng)中獲取內(nèi)容頭）。請(qǐng)求在處理中；通常響應(yīng)中已有部分?jǐn)?shù)據(jù)可用了，沒(méi)有全部完成。響應(yīng)已完成；您可以獲取并使用服務(wù)器的響應(yīng)了。

55、status 常見(jiàn)的幾種狀態(tài)100客戶必須繼續(xù)發(fā)出請(qǐng)求101客戶要求服務(wù)器根據(jù)請(qǐng)求轉(zhuǎn)換 HTTP 協(xié)議版本200成功201提示知道新文件的 URL300請(qǐng)求的資源可在多處得到301刪除請(qǐng)求數(shù)據(jù)302-緩存問(wèn)題404沒(méi)有發(fā)現(xiàn)文件、查詢或 URl500服務(wù)器產(chǎn)生內(nèi)部錯(cuò)誤正則表達(dá)式有系統(tǒng)學(xué)習(xí)過(guò)嗎(看書(shū)或網(wǎng)上教程)?有的話就問(wèn)問(wèn)簡(jiǎn)單點(diǎn)的郵箱驗(yàn)證、URL 驗(yàn)證，或者問(wèn)問(wèn) 貪婪匹配與懶惰匹配 的理論知識(shí)？驗(yàn)證郵箱function isEmail(str)var reg = /(a-zA-Z0-9_-)+(a-zA-Z0-9_-)+(.a-zA-Z0-9_-)+/; return reg.test(str)

56、;驗(yàn)證日期格式function testReg(reg,str) return reg.test(str);var reg = /d4-d1,2-d1,2$/;字母和數(shù)字的組合function istrue(str)var reg=/(a-z+0-9+)|(0-9+a-z+)a-z0-9*$/i; return reg.test(str);正則匹配價(jià)格function checkPrice( me )if( !( /(?:d+|d+.d0,2)$/.test(me.value) ) )me.value = me.value.replace(/(d*.d0,2|d+).*$/,'$1&#

57、39;);電話號(hào)碼正則telReg = /d3,4-d7,8(-d3,4)?$/當(dāng)正則表達(dá)式中包含能接受重復(fù)的限定符時(shí)，通常的行為是（在使整個(gè)表達(dá)式能得到匹配的前提下）匹配盡可能多的字符。我們更需要懶惰匹配，也就是匹配盡可能少的字符。前面給出的限定符都可以被轉(zhuǎn)化為懶惰匹配模式，只要在它后面加上一個(gè)問(wèn)號(hào)?。這樣.*?就意味著匹配任意數(shù)量的重復(fù)，但是在能使整個(gè)匹配成功的前提下使用最少的重復(fù)。AJAX 同步和異步的區(qū)別？ajax 的交互流程？同步的時(shí)候，當(dāng)加載頁(yè)面的時(shí)候，它會(huì)等待后臺(tái)服務(wù)器響應(yīng)，會(huì)打斷用戶的操作，電腦也會(huì)變白一會(huì)，而異步，則不打斷用戶操作，自行加載數(shù)據(jù)。區(qū)別onmouseover和m

58、ouseoveronmouseover是Event 對(duì)象的一個(gè)屬性，Mouseover是jQuery中的一個(gè)事件。推薦使用jQuery，直接執(zhí)行方法$("#id").mouseover(function();完全使用js則是如下寫(xiě)法：document.getElementById("id").onmouseover=function();document.getElementsByTagName("body")0.style.backgroundColor="pink”; /注意不要忘了style，深刻理解DOM的本質(zhì)。Ja

59、vascript 的addEventListener()及attachEvent()區(qū)別分析addEventListener()和attachEvent()是一個(gè)偵聽(tīng)事件并處理相應(yīng)的函數(shù)，可以動(dòng)態(tài)的為網(wǎng)頁(yè)內(nèi)的元素添加一個(gè)或多個(gè)事件?？梢詫⑹录驮胤蛛x，這樣可編輯性就高了。addEventListener的使用方式：  target.addEventListener(type, listener, useCapture);  target：文檔節(jié)點(diǎn)、document、window 或 XMLHttpRequest。  type：字符串，事件名稱，不含“on”，比如“click”、“mouseover”、keydown”等。  listener ：實(shí)現(xiàn)了EventListener 接口或者是 JavaScript 中的函數(shù)。  useCapture ：是否使用捕捉，一般用 false 。例如：document.getElementById("testText").addEventListener("keydown", function (event) alert(event.keyCode); , false); attachEven