WEB前端面試題全套_第1頁
WEB前端面試題全套_第2頁
WEB前端面試題全套_第3頁
WEB前端面試題全套_第4頁
WEB前端面試題全套_第5頁
已閱讀5頁,還剩26頁未讀 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

1、什么是響應(yīng)式網(wǎng)頁?通過 CSS3 Media Query 實(shí)現(xiàn)響應(yīng)式 Web 設(shè)計(jì)響應(yīng)式 Web 設(shè)計(jì)(Responsive Web design)的理念是,頁面的設(shè)計(jì)與開發(fā)應(yīng)當(dāng)根據(jù)用戶行為以及設(shè)備環(huán)境(系統(tǒng)平臺、屏幕尺寸、屏幕定向等)進(jìn)行相應(yīng)的響應(yīng)和調(diào)整。具體的實(shí)踐方式由多方面組成,包括彈性網(wǎng)格和布局、圖片、CSS media query 的使用等。無論用戶正在使用筆記本還是 iPad,我們的頁面都應(yīng)該能夠自動(dòng)切換分辨率、圖片尺寸及相關(guān)腳本功能等,以適應(yīng)不同設(shè)備;換句話說,頁面應(yīng)該有能力去自動(dòng)響應(yīng)用戶的設(shè)備環(huán)境。這樣,我們就可以不必為不斷到來的新設(shè)備做專門的版本設(shè)計(jì)和開發(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)頁面;在混雜模式中,頁面以一種比較寬松的向后兼容的方式顯示。混雜模式通常模擬老式瀏覽器(比如 Microsoft IE 4 和 Netscape Navigator 4)的行為以防止老站點(diǎn)無法工作。在 IE 6 出現(xiàn)時(shí),在標(biāo)準(zhǔn)模式中使用的是正確的盒模型,在混雜模式中使用的則是老式的專有盒模型。為了維持對 IE 5 和更低版本的向后兼容性,Opera

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

4、Javascript 語言和 DOM 主宰的領(lǐng)域。使用 (X)HTML 去搭建文檔的結(jié)構(gòu)。使用 CSS 去設(shè)置文檔的呈現(xiàn)效果。使用 DOM 腳本去實(shí)現(xiàn)文檔的行為如何居中一個(gè)浮動(dòng)元素?方法一:讓最外面的層相對定位,left 等于 50%,然后內(nèi)部嵌套層也使用相對定位且 left 設(shè)為-50%,這樣的效果就是內(nèi)層相對整行為水平居中;方法二:使用 display: table;方法三:直接使用 table 布局(使用太多 table 容易讓結(jié)構(gòu)看起來比較混亂,其實(shí)頁面中使用少量的 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)元素有哪些?塊級元素有哪些?CSS 的盒模型?Css 的盒模型:從外到里,margin,border,padding,content。塊元素在頁面里,占一行,可以設(shè)定寬和高,可以容納塊元素和行內(nèi)元素。常見的塊元素有 div,p,h1-h6,ul 等。行內(nèi)元素沒有寬和高的屬性但可以與其他元素同一行,一般不可以包含塊元素,

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

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

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

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

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

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

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

14、的更新。border-image 原理?1.調(diào)用邊框圖片border-image 的 url 屬性,通過相對或絕對路徑鏈接圖片。2,邊框圖片的建裁border-image 的數(shù)值參數(shù)剪裁邊框圖片,形成九宮格。3.剪裁圖片的邊框邊框圖片被切割成 9 部分,以一一對應(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)聽的方式通過 a 標(biāo)簽的描點(diǎn)進(jìn)行 view 動(dòng)態(tài)切換頁面,只要把 a 標(biāo)簽帶有 id 的 href 屬性的值指到錨點(diǎn),用 CSS3 的動(dòng)畫進(jìn)行切換頁面.HTML5 都有哪些新的 JS API?

16、二維繪圖 API,可以用在一個(gè)新的畫布(Canvas)元素上以呈現(xiàn)圖像、游戲圖形或者其他運(yùn)行中的可視圖形。一個(gè)允許 web 應(yīng)用程序?qū)⒆陨碜詾槟硞€(gè)協(xié)議或 MIME 類型的 API。一個(gè)引入新的緩存機(jī)制以支持脫機(jī) web 應(yīng)用程序的 API。一個(gè)能夠播放視頻和音頻的 API,可以使用新的 video 和 audio 元素。一個(gè)歷史紀(jì)錄 API,它可以公開正在瀏覽的歷史紀(jì)錄,從而允許頁面更好地支持AJAX 應(yīng)用程序中實(shí)現(xiàn)對后退功能。跨文檔/跨域的消息傳遞,它提供了一種方式,使得文檔可以互相通信而不用考慮它們的來源域,在某種程度上,這樣的設(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 的鍵/值對實(shí)現(xiàn)客戶端的持久化存儲(chǔ),同時(shí)支持嵌入的 SQL 數(shù)據(jù)庫。服務(wù)器發(fā)送的事件,通過它可以與新的事件源(event-source)元素關(guān)聯(lián),新的事件源元素有利于與遠(yuǎn)程數(shù)據(jù)源的持久性連接,而且極大地消除了在 Web 應(yīng)用程序中對輪詢的需求。AMD和CMD是什么?它們的區(qū)別有哪些?AMD和CMD是二種模塊定義規(guī)范。現(xiàn)在

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

19、;BFC元素特性表現(xiàn)原則就是,內(nèi)部子元素不會(huì)影響外部的元素。HTML 5 增加了一項(xiàng)新功能是 自定義數(shù)據(jù)屬性 ,也就是  data- 自定義屬性。在HTML5中我們可以使用以 data- 為前綴來設(shè)置我們需要的自定義屬性,來進(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- 屬性user . setAttribute ( 'data-site' , ''

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

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

23、;/,而"flex"是2012年的語法,是css3新規(guī)定的,也將是以后標(biāo)準(zhǔn)的語法。將父元素的display屬性設(shè)置為-webkit-box(box),然后子元素通過屬性-webkit-box-flex來指定一個(gè)框的子元素是否是靈活的或固定的大小,如上,定義兩個(gè)靈活的p元素。如果父級box的總寬度為300px,P1將有一個(gè)100px的寬度,P2將有一個(gè)200px的寬度,也就是呈固定比例劃分。當(dāng)然了,也可以這樣寫:<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 常見選擇器?,號選擇器,分組選擇器。空格,祖父選擇器。>大于號,父子選

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

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

27、t;,"test.jpg"); 這里的 $("#img")就是 jQuery 對象。DOM 對象就是 Javascript 固有的一些對象操作。DOM 對象能使用 Javascript 固有的方法,但是不能使用 jQuery 里的方法。例如:document.getElementById("img").src = “test.jpg";這里的 document.getElementById("img") 就是 DOM 對象。$("#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 對象轉(zhuǎn)成 jQuery 對象對于已經(jīng)是一個(gè) DOM 對象,只需要用 $() 把 DOM 對象包裝

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

30、$v0;/DOM 對象alert(v.checked);/檢測這個(gè) checkbox 是否被選中(2) jQuery 本身提供,通過.get(index) 方法得到相應(yīng)的 DOM 對象如:var$v = $("#v");/jQuery 對象var v = $v.get(0);/DOM 對象 ( $v.get()0 也可以 )alert(v.checked);/檢測這個(gè) checkbox 是否被選中通過以上方法,可以任意的相互轉(zhuǎn)換 jQuery 對象和 DOM 對象,需要再強(qiáng)調(diào)的是:DOM 對象才能使用 DOM 中的方法,jQuery 對象是不可以使用中的方法給出一個(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ū)ο螅縱ar 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 來做 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ù)和成員封裝很簡單。沒有類完全是對象操作。純動(dòng)態(tài)!Javascript function 中的 this 指針很關(guān)鍵

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

37、象,這個(gè)對象的_proto_又需要指向其類,由此形成一條鏈。那么_proto_是什么?每個(gè)對象都會(huì)在其內(nèi)部初始化一個(gè)屬性,就是_proto_,當(dāng)我們訪問一個(gè)對象的屬性 時(shí),如果這個(gè)對象內(nèi)部不存在這個(gè)屬性,那么他就會(huì)去_proto_里找這個(gè)屬性,這個(gè)_proto_又會(huì)有自己的_proto_,于是就這樣 一直找下去,也就是我們平時(shí)所說的原型鏈的概念。定義一個(gè) Dog 對象,并增加一個(gè) name 屬性,該屬性可以在新建對象時(shí)通過參數(shù)傳入function Dog( name ) = name;/ 通過原型方式擴(kuò)展 Dog 對象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 對象?s

40、tring 的方法?S= function()Slice 從字符串的第一個(gè)參數(shù)提取第二個(gè)參數(shù),也可以截取數(shù)組。返回的結(jié)果類型:string/objectSubstring 從字符串的第一個(gè)參數(shù)提取第二個(gè)參數(shù),返回的結(jié)果類型,string。Indexof 返回短字符串在長字符串出現(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è)頁面加載之后才執(zhí)行閉包是什么?閉包是有權(quá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)訪問函數(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 開發(fā)者更輕松的打造出功能豐富并且美觀的 UI 界面。開發(fā)者不需要編寫復(fù)雜的 javascript,也不需要對 css 樣式

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

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

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

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

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

48、在于把客戶端需要的數(shù)據(jù)裝入進(jìn)去。6、客戶端在對 JSON 文件調(diào)用成功之后,也就獲得了自己所需的數(shù)據(jù),剩下的就是按照自己需求進(jìn)行處理和展現(xiàn)了,這種獲取遠(yuǎn)程數(shù)據(jù)的方式看起來非常像 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ù)名來包裹住 JSON 數(shù)據(jù),這樣客戶端就可以隨意定制自己的函數(shù)來自動(dòng)處理返回?cái)?shù)據(jù)了。如何解析 json?用 ajax 去請求 json 數(shù)據(jù),在回調(diào)函數(shù)里,把數(shù)據(jù)傳過到函數(shù)里。通過用一

49、個(gè) for 循環(huán),用 innerHTML 和 jQuery 的方法 html()的方法,渲染到頁面里。手機(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)手指從屏幕上離開的時(shí)候觸發(fā)。touchcancel事件:當(dāng)系統(tǒng)停止跟蹤觸摸的時(shí)候觸發(fā)。關(guān)于這個(gè)事件的確切出發(fā)時(shí)間,文檔中并沒有具體說明,咱們只能去猜測了。為什么要用 Zepto?jquery 適用于 PC 端桌面環(huán)境,桌面環(huán)境

50、更加復(fù)雜,jquery 需要考慮的因素非常多,尤其表現(xiàn)在兼容性上面,相對于 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)頁在加載,相信用戶第二次就沒打開的欲望了。zepto 解決了這個(gè)問題,只有不到 10K 的大小,2G 網(wǎng)絡(luò)環(huán)境下也毫無壓力,表現(xiàn)不遜色于 jquery。所以移動(dòng)端開發(fā)首選框架,個(gè)人推薦 zepto.js。jq mobi,zepoto 手機(jī)跨平臺的手機(jī)框架。如何區(qū)分多個(gè)終端(zepto)?detece 來判斷:/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"簡述下 cookie 的操作,還有 cookie 的屬性都知道哪些?Session 是由應(yīng)用服務(wù)器維持的一個(gè)服務(wù)器端的存儲(chǔ)空間,用戶在連接服務(wù)器時(shí),會(huì)由服務(wù)器生成一個(gè)

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

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

55、status 常見的幾種狀態(tài)100客戶必須繼續(xù)發(fā)出請求101客戶要求服務(wù)器根據(jù)請求轉(zhuǎn)換 HTTP 協(xié)議版本200成功201提示知道新文件的 URL300請求的資源可在多處得到301刪除請求數(shù)據(jù)302-緩存問題404沒有發(fā)現(xiàn)文件、查詢或 URl500服務(wù)器產(chǎn)生內(nèi)部錯(cuò)誤正則表達(dá)式有系統(tǒng)學(xué)習(xí)過嗎(看書或網(wǎng)上教程)?有的話就問問簡單點(diǎn)的郵箱驗(yàn)證、URL 驗(yàn)證,或者問問 貪婪匹配與懶惰匹配 的理論知識?驗(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;);電話號碼正則telReg = /d3,4-d7,8(-d3,4)?$/當(dāng)正則表達(dá)式中包含能接受重復(fù)的限定符時(shí),通常的行為是(在使整個(gè)表達(dá)式能得到匹配的前提下)匹配盡可能多的字符。我們更需要懶惰匹配,也就是匹配盡可能少的字符。前面給出的限定符都可以被轉(zhuǎn)化為懶惰匹配模式,只要在它后面加上一個(gè)問號?。這樣.*?就意味著匹配任意數(shù)量的重復(fù),但是在能使整個(gè)匹配成功的前提下使用最少的重復(fù)。AJAX 同步和異步的區(qū)別?ajax 的交互流程?同步的時(shí)候,當(dāng)加載頁面的時(shí)候,它會(huì)等待后臺服務(wù)器響應(yīng),會(huì)打斷用戶的操作,電腦也會(huì)變白一會(huì),而異步,則不打斷用戶操作,自行加載數(shù)據(jù)。區(qū)別onmouseover和m

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

59、vascript 的addEventListener()及attachEvent()區(qū)別分析addEventListener()和attachEvent()是一個(gè)偵聽事件并處理相應(yīng)的函數(shù),可以動(dòng)態(tài)的為網(wǎng)頁內(nèi)的元素添加一個(gè)或多個(gè)事件。可以將事件和元素分離,這樣可編輯性就高了。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

溫馨提示

  • 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請與我們聯(lián)系,我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論