前端模擬試題_第1頁
前端模擬試題_第2頁
前端模擬試題_第3頁
前端模擬試題_第4頁
前端模擬試題_第5頁
免費預覽已結束，剩余12頁可下載查看

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

1、JavaScript 模擬試題一、單選題1. 我們可以在下列哪個HTML 元素中放置Javascript 代碼A. <script>B. <javascript>C. <js>D. <scripting>2. 寫 "Hello World" 的正確 Javascript 語法是A. ("Hello World")B. "Hello World"C. ("Hello World")D. ("Hello World")3. 插入 Javacript 的

2、正確位置是A. <body> 部分B. <head> 部分C. <body> 部分和 <head> 部分均可4. 引用名為 "" 的外部腳本的正確語法是A. <script src="">B. <script href="">C. <script name="">5. 外部腳本必須包含 <script> 標簽嗎A.是B.否6. 如何在警告框中寫入 "Hello World"A. alertBox=&q

3、uot;Hello World"B. msgBox("Hello World")C. alert("Hello World")D. alertBox("Hello World")7. 如何創建函數A. function:myFunction()B. function myFunction()C. function=myFunction()8. 如何調用名為"myFunction" 的函數A. call function myFunctionB. call myFunction()C. myFunction

4、()9. 如何編寫當 i 等于 5 時執行一些語句的條件語句A. if (i=5)B. if i=5 thenC. if i=5D. if i=5 then10. 如何編寫當 i 不等于 5 時執行一些語句的條件語句A. if =! 5 thenB. if <>5C. if (i <> 5)D. if (i != 5)11. 在 JavaScript 中，有多少種不同類型的循環A. 兩種。 for 循環和 while 循環。循環。B. 四種。 for 循環、 while 循環、do.while循環以及loop.untilC. 一種。 for 循環。12. for 循環如

5、何開始A. for (i <= 5; i+)B. for (i = 0; i <= 5; i+)C. for (i = 0; i <= 5)D. for i = 1 to 513. 如何在 JavaScript中添加注釋A. ' This is a commentB. <!-This is a comment->在圖片上添加onClick 事件B. 在圖片上添加onSubmit 事件C. 在事件中手動提交D. 在事件中自動提交14. 能夠返回鍵盤上的按鍵所對應字符的事件是(B)A. onKeyDownB. onKeyPressC. onKeyUpD. on

6、MouseOver15. 要動態改變層中的內容可以使用下列哪些方法(A)A. 利用層的innerHTML 改變內容B. 利用層的innerText 改變內容C.可以通過設置層的隱藏和顯示來實現D.可以通過設置層的樣式屬性的display屬性來實現16.制作級聯菜單功能時調用的是下拉列表框的(B)事件。A. onClickB. onChangeC. selected60.在JavaScript 中Array對象擁有的方法不包括( B)A. sort() 數組排序B. length()計算數組長度C. concat() 數組合并D. reverse。數組元素反轉17.以下哪條語句會產生運行錯誤：(

7、A)A. varobj=();B. varobj=;C. varobj=;D. varobj=/；18 .以下哪個單詞不屬于javascript 保留字：(B)A. withB. parentC. classD. void19 .請選擇結果為真的表達式：(C)A. nullinstanceofObjectB. null= undefinedC. null= undefinedD. NaN = NaN、多選題20 . 請選擇對javascript理解有誤的：(ABCD)A. JScript 是 javascript的簡稱Java的開的支持不同(ACEB. javascript 是網景公司開發的一

8、種 Java腳本語言，其目的是為了簡化 發難度C. FireFox和IE存在大量兼容性問題的主要原因在于他們對javascript上D. AJAX技術一定要使用 javascript 技術21 . foo對象有att屬性，那么獲取att屬性的值，以下哪些做法是可以的：A.B. foo( “att ”)C. foo “att ” D. foo “att”E. foo “a" +“ t" +" t ” 22 .在不指定特殊屬性的，情況下，哪幾種HTML標簽可以手動輸入文本：(AB)A. <TEXTAREA></TEXTAREA>B. <I

9、NPUTtype=" text ” />C. <INPUTtype=" hidden” />D. <DIV></DIV>23 .以下哪些是javascript 的全局函數：(AB。A.escapeB. parseFloatC. evalD. setTimeoutE. alert24 .關于IFrame表述正確的有：(ABCD)A.通過IFrame ,網頁可以嵌入其他網頁內容，并可以動態更改B.在相同域名下，內嵌的IFrame可以獲取外層網頁的對象C.在相同域名下，外層網頁腳本可以獲取IFrame網頁內的對象D.可以通過腳本調整IFr

10、ame的大小25 .關于表格表述正確的有：(ABCDEA.表格中可以包含TBOD班素B.表格中可以包含 CAPTIONS素C.表格中可以包含多個 TBOD班素D.表格中可以包含 COLGROUP素E.表格中可以包含COL元素26 .關于IE的window對象表述正確的有：(ACDA.屬性本身就是指向 window對象B.()方法可以用來刷新當前頁面C.二" ”和的作用都是把當前頁面替換成頁面D.定義了全局變量g;可以用的方式來存取該變量三、程序題：27 .如何獲取表單<select>域的選擇部分的文本參考答案：<form name="a">

11、<select name="a" size="1" onchange="sel(this)"><option value="a">1</option>option value="b">2</option>option value="c">3</option></select></form><script>function _sel(obj)alert(" 顯示

12、文本："+ 口.text);alert(" 值："+ 口.value); </script>28 .在JavaScript中定時調用函數 foo() 如何寫參考答案：function foo()alert("aaaa");a = setTimeout(foo(),100); foo()；8:你做的頁面在哪些流覽器測試過這些瀏覽器的內核分別是什么經常遇到的瀏 覽器的兼容性有哪些怎么會出現解決方法是什么點評：css的兼容性也是大家關注的熱點。大家一定要注意多測試。Javascript多瀏覽器兼容性問題及解決方案兼容性處理要點1、DOCT

13、YP膨響CSS處理2、FF:設置padding 后，div 會增加height 和width , 但IE 不會， 故 需要用Important多設一個height 和width3、FF:支持important , IE 則忽略， 可用important 為FF特別設置樣4、div的垂直居中問題：vertical-align:middle;將行距增加到和整個DIV一樣高line-height:200px;然后插入文字，就垂直居中了。缺點是要控制內容不要換行5、在mozilla firefox 和IE中的BOX真型解釋不一致導致相差2Px解決方法：divmargin:30px!important;

14、margin:28px;注意這兩個margin的順序一定不能寫反，important這個屬性IE不能識別， 但別的瀏覽器可以識別。所以在IE下其實解釋成這樣：divmaring:30px;margin:28px重復定義的話按照最后一個來執行，所以不可以只寫 margin:XXpx!important;瀏覽器差異1、 ul 和 ol 列表縮進問題 消除 ul 、 ol 等列表的縮進時，樣式應寫成：list-style:none;margin:0px;padding:0px;其中 margin 屬性對 IE 有效， padding 屬性對 FireFox 有效。 注 經驗證，在IE 中，設置 ma

15、rgin:0px 可以去除列表的上下左右縮進、空白以及列表編號或圓點，設置padding 對樣式沒有影響；在Firefox 中，設置margin:0px 僅僅可以去除上下的空白，設置padding:0px 后僅僅可以去掉左右縮進，還必須設置list- style:none 才 能去除列表編號或圓點。也就是說，在IE 中僅僅設置margin:0px 即可達到最終效果，而在Firefox 中必須同時設置margin:0px 、 padding:0px 以及 list-style:none 三項才能達到最終效果。2、CSSS明問題IE ： filter:progid:。FF： opacity: 。

16、注 最好兩個都寫，并將opacity 屬性放在下面。3、CSS0角問題IE ： ie7 以下版本不支持圓角。FF： -moz-border-radius:4px ，或者 -moz-border-radius-topleft:4px;-moz-border- radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz-border- radius- bottomright:4px; 。注圓角問題是CSS中的經典問題，建議使用JQuery框架集來設置圓角，讓這些復雜的問題留給別人去想吧。 不過 jQuery 的圓角只看到支持整個區域的圓角，

17、沒有支持邊框的圓角， 不過這個邊框的圓角可以通過一些簡單的手段來實現， 下 次有機會介紹下。4、 cursor:hand VS cursor:pointer問題說明：firefox 不支持hand,但ie支持pointer ,兩者都是手形指示。解決方法：統一使用 pointer 。5、字體大小定義不同對字體大小 small 的定義不同， Firefox 中為 13px， 而 IE 中為 16px， 差別挺大。解決方法：使用指定的字體大小如 14px。并列排列的多個元素 （圖片或者鏈接） 的 div 和 div 之間， 代碼中的空格和回車在 firefox 中都會被忽略，而 IE 中卻默認顯示為

18、空格（約3px）。6、CSS®線凹凸邊框IE ： border:2px outset; 。FF： -moz-border-top-colors: #d4d0c8 white;-moz-border-left-colors:#d4d0c8 white;-moz-border-right-colors:#404040#808080;-moz-border-bottom-colors:#404040 #808080;瀏覽器 bug1、 IE 的雙邊距 bug設置為 float 的 div 在 ie 下設置的 margin 會加倍。 這是一個 ie6 都存在的 bug解決方案：在這個div

19、里面加上 display:inline;例如：<#div id= ” imfloat ” >相應的 css 為 以下為引用的內容：復制代碼代碼如下:#IamFloatfloat:left;margin:5px;/*IE 下理解為 10px*/display:inline;/*IE 下再理解為 5px*/#IamFloatfloat:left;margin:5px;/*IE 下理解為 10px*/display:inline;/*IE 下再理解為 5px*/關 于CSS中的問題實在太多了，甚至同樣的 CSS定義在不同的頁面標準中的顯 示效果都是不一樣的。一個合乎發展的建議是，頁面采用

20、標準XHTMIB準編寫，較少使用table , CSS定義盡量依照標準 DOM同時兼顧IE、Firefox、Opera等 主流瀏覽器。很多情況下，FF和Opera的CSS«釋標準更貼近CSSfe準，也更 具有規范性。2、 IE 選擇符空格 BUG原來一個空格也可以使樣今天在給博客的段落樣式設置首字符樣式的時候發現，式失效。請看以下代碼：復制代碼代碼如下:<!DOCTYPE html PUBLIC "- mozilla firefox 和IE中的BOX真型解釋不一致導致相差 2Px解決方法： divmargin:30px!important;margin:28px;注意

21、這兩個margin 的順序一定不能寫反， 據阿捷的說法!imPortant 這個屬性 IE不能識別，但別的瀏覽器可以識別。所以在 IE 下其實解釋成這樣：divmaring:30Px;margin:28Px重復定義的話按照最后一個來執行，所以不可以只寫 margin:XXPx!imPortant;和IE6的BOX早釋不一致IE5 下 divwidth:300Px;margin:0 10Px 0 10Px;div 的寬度會被解釋為 300Px-10Px（ 右填充 ）-10Px（ 左填充 ）最終 div 的寬度為280px,而在IE6和其他瀏覽器上寬度則是以300px+10px（右填充）+10px

22、（左填充 ）=320Px 來計算的。這時我們可以做如下修改divwidth:300px!important;width :340px;margin:0 10px 0 10px關于這個是什么我也不太明白， 只知道 IE5 和 firefox 都支持但 IE6 不支持， 如 果有人理解的話，請告訴我一聲，謝了！：）標簽在 Mozilla 中默認是有padding 值的 , 而在 IE 中只有 margin 有值所以先定義 ulmargin:0;padding:0;就能解決大部分問題注意事項：1、 float 的 div 一定要閉合。例如： （ 其中 floatA 、 floatB 的屬性已經設置為

23、 float:left;）<#div id="floatA" ><#div id="floatB" ><#div id="NOTfloatC" >這里的NOTfloatC 并不希望繼續平移，而是希望往下排。這段代碼在IE中毫無問題，問題出在FF。原因是NOTfloatC并非float標簽, 必須將float 標簽閉合。在 <#div class="floatB"><#div class="NOTfloatC">之間加上 <#div

24、 class="clear">這個 div 一定要注意聲明位置， 一定要放在最恰當的地方， 而且必須與兩個具有float 屬性的 div 同級，之間不能存在嵌套關系，否則會產生異常。并且將 clear 這種樣式定義為為如下即可： .clearclear:both;此外，為了讓高度能自動適應，要在 wrapper 里面加上 overflow:hidden;9. 如何居中一個浮動元素設置容器的浮動方式為相對定位然后確定容器的寬高 比如寬 500 高 300 的層然后設置層的外邊距DivWidth:500px ;height:300px;Margin: -150px 0 0

25、 -250px;position: absolute;left:50%;top:50%;10 .有沒有關注HTML體口 CSS及口有請簡單說一些您對它們的了解情況!在 HTML 5平臺上，視頻，音頻，圖象，動畫，以及同電腦的交互都被標準化。那么我們來看一下HTML5勺技術概覽有哪些：HTML珈增和移除的元素HTML珈增了很多多媒體和交互性元素如 video, audio,在HTML轉中如果要嵌入一個視頻或是音頻的話需要引入一大段的代碼，還有兼容各個瀏覽器，而HTML隊需要通過引入一個標簽就可以，就像 img標簽一樣方便。HTML5寸表單的支持HTML5®供了強大的控件類型如url,

26、email, date, tel等，強大的約束屬 性， 如 required 表示必填， 文件上傳的 accept 屬性， 以及一些表單重復元素模 型的支持，HTML班提交表單的時候還可 以設置提交的方式為XML交方式， 這樣服務器端接收到的數據將是XMLB式，HTML5勺表單被定義為“ Web Forms ”，目前+對 Web Forms 的支持較為完美。HTML5 DO疑化HTML5勺 Javascript APIsHTML5fc Javascript 上面新增了哪些API呢Video/Audio: HTML5 為 Video 和 Audio 提供了 API 來讓開發者控制他們自己的 用戶

27、界面，如可以播放或暫停媒體內容。CSS3CSS3寸于我們We加發者來說不只是新奇的技術，更重要的是這些全新概念的 web應用給我們帶來更多無限的可能性，也極大地提高了我們的開發效率。我們 將不必再依賴圖片或者Javascript 去完成圓角、多背景、用戶自定義字體、 3D動畫、漸變、盒陰影、文字陰影、透明度等提高Wet®計質量的特色應用。CSS3寸于動畫的支持CSS3支持的動畫類型有：transform(變換)、transition( 過渡)和 animation( 動畫 ) 。你可以對特定的屬性設置transition ， transiton 和animation 的區別不大， a

28、nimation 的動畫是自己定義的，面向的更多的是腳本 開發者，往往更加 復雜。11 .你怎么來實現下面這個設計圖 , 主要講述思路 (效果圖省略)13:如果讓你來制作一個訪問量很高的大型網站，你會如何來管理所有CSW件、JS與圖片14：你對前端界面工程師這個職位是怎么樣理解的它的前景會怎么樣Javascript1： js 是什么， js 和 html 的開發如何結合2. 怎樣添加、移除、移動、復制、創建和查找節點3. 怎樣使用事件以及IE和DO郵件模型之間存在哪些主要差別4. 面向對象編程:b 怎么繼承 a5. 看看下面 alert 的結果是什么view sourceprint b(x,

29、y, a) .arguments2 = 10;.alert(a);b(1, 2, 3);如果函數體改成下面，結果又會是什么a = 10;alert(arguments2 );6. 請編寫一個JavaScript函數parseQueryString ,它的用途是把URL參數解析為一個對象var obj = parseQueryString（url）;alert 瀏覽器問題2. 歷史后退狀態問題3. 跨域問題跨瀏覽器的問題因為現在有很多的開元的框架已經解決了，我們無需為 此而煩惱。歷史后退狀態問題我們可以使用一個數組來保存歷史紀錄，然后把這些數據村到歷史對象中去，中的也可以解決，并且還有很多的開元

30、框架給與支持， 這樣問題就不是很大。跨域的問題就不是很好的解決，但是還是有辦法的，一下給出一些基本的解決方案供大家選擇：1 .使用代理，你可以使用web端的程序編寫代理程序，把所有的ajax（動 態網站靜態化）請求的數據進行轉發，web程序可以使php（做為現在的主流開發 語言 ） ， jsp（SUN 企業級應用的首選） ， asp 等所有的編程語言。相信大家對這種方式一定很熟悉，這里就不詳細的介紹了。2 . 使用 iframe 的方式來定勢的刷新葉面，這種方式只是取得數據來顯示， 并不能真正的和求得的數據進行交互， 轉化成本頁面的動態數據， 不是很可 取，應用也不是很多，我也忽略不去討論了。

31、3 .使用apache（Unix平臺最流行的 WEE®務器平臺）的代理功能，主要就 是apache（Unix平臺最流行的WEES艮務器平臺）的方向代理，或者是url從定向， 你也可以把其他的站點直接的掛在自己的網站上， 這樣的方式可能會友邦權的問 題，多的九部介紹了，有興趣的本有可以自己實踐以下。4 . 使用 script 標簽的方式， 這樣的話就可以保正使用真正的 ajax（ 動 態網站靜態化 ） 來跨域，并且可以使用返回來的數據，發誓很簡單，在我們的后 臺程序處理后的到的結果都直接的用 javascript 的方式返回，在我們的 html 中直接的使用返回數據的變量就可以了一個簡

32、單的例子8. 什么是閉包下面這個ul ，如何點擊每一列的時候alert 其 index<ul id= ” test ” ><li> 這是第一條</li><li>這是第二條</li><li> 這是第三條</li></ul>9. 最近看的一篇Javascript 的文章是10. 常使用的庫有哪些常用的前端開發工具開發過什么應用或組件pageSpeed .Yslow,Fiddler 、 fireBug11. 說說YSlow（可以詳細一點）這個插件可以分析網站的頁面， 并告訴你為了提高網站性能， 如何基于某

33、些規則而進行優化。網頁制作方向的題目1. 什么是網站重構div+css 的布局較 table 布局有什么優點2. 如何理解 css 盒模型3. 平時做網頁經常使用哪些 hack4. 如何理解表現與內容相分離5. 如何解決 ie6 的雙邊距問題6. 如何定義高度為 1px 的容器 heigh ： 1px; width:10px; background:#000;overflow:hiddenie6 下這個問題是默認行高造成的，overflow:hidden | zoom: | line- height:1px 這樣也可以解決7. 如何實現一個層在瀏覽器中垂直左右居中 margin ： auto8

34、. 如何解決 ie6 的 3 像素問題 _zoom:1; margin-left: value; _margin-left: value-3px;9. 為什么 FF 下文本無法撐開容器的高度如何解決清楚浮動10. 怎么樣才能讓層顯示在FLASHY上呢 解決的辦法是給FLAS股置透明屬性<param name="wmode" value="transparent" /> 或者 <param name="wmode" value="opaque" />1、答：把"未采用CSS大量使用H

35、TMLS行定位、布局，或者雖然已經采 用CSS但是未遵循HTM結構化標準的站點“變成”讓標記回歸標記的原本意 義 通過在HTMLt檔中使用結構化的標記以及用 CSS空制頁面表現，使頁面的實際 內容與它們呈現的格式相分離的站點。" 的過程就是網站重構網站為什么要進行重構（網站重構的好處）a、使頁面加載得更快速；b、降低帶寬帶來的費用：節約成本；c、讓你在修改設計時更有效率而代價更低；d、幫助你的整個站點保持視覺的一致性；e、更利于搜索引擎的檢索（符合SEO的規范）；f、令站點更容易被各種瀏覽器和用戶訪問（包括手機、PDAffi殘障人士使用的文字瀏覽器）；g、兼容不容忽視的Mozilla

36、系瀏覽器(Firefox份額)；h、提高你的職場競爭實力(事實上也就是降低失業的風險)。div+css 的布局較 table 布局有什么優點 :1、改版的時候更方便只要改 css 文件。2、頁面加載速度更快、結構化清晰、頁面顯示簡潔。3、表現與結構相分離。4、易于優化(seo)搜索引擎更友 好，排名更容易靠前。答：2.如何理解css盒模型：每個HTME素都是長方形盒子外邊局 (margin) 、內邊距 (padding) 、邊框 (border);答： 3. 平時做網頁用的 css hackIe6 * _; ie7 *, *+,!important; ff !important.答：4.表現與

37、結構相分離簡單的說就是 HTM葉只有標簽元素表現完全是 由CSS文件控制的答： 5. 解決 ie6 雙邊距問題塊級元素就加 display ： inline ；行內元素轉塊 級元素 display ： inline 后面再加 display ： table6. 如何定義高度為 1px 的容器heigh ： 1px; width:10px; background:#000; overflow:hiddenie6 下這 個問題是默認行高造成的， overflow:hidden | zoom: | line-height:1px 這樣也可以解決7. 如何實現一個層在瀏覽器中垂直左右居中margin

38、： auto8. 如何解決 ie6 的 3 像素 問題_zoom:1; margin-left: value; _margin-left: value-3px;9. 為什么FF下文本無法撐開容器的高度如何解決消除浮動 .clear clear:both; height:0px; overflow:hidden;10.怎么樣才能讓層顯示在 FLASHY上呢解決的辦法是給FLASHY置透明屬性<param name="wmode" value="transparent” /> 或者 <param name="wmode value=&quo

39、t;opaque" />補充：1、margin-left:10Px在 FF和 IE6 下顯示問題。IE6 顯示 20px,FF 顯示 10px。用!important就可以解決了。margin-left:10Px !important;margin-left:5px;2、cursor:hand在FF不顯示小手，如何解決一句話：cursor;pointer;3、要求在FF顯示height為20px;IE6下顯示height為25px;IE7下顯示height 為 30Px.#testheight:20px;*html #testheight:25px;*+html #testhe

40、ight:30px;這個以前我們說過，請參考 【IE6的瘋狂Bug之九】解決CSS1容性 最常用的"Haker"三個就寫上，FF只認識第一個#test,IE6 只認識第二個*html #test , IE7 只認識第三個*+html #testPS: DTDW力口上 <!DOCTYPE HTML PUBLIC “-learclear:both;font-size:0px;height:1px,這樣解決有一個小小的問題，高度會多一個像素。還有一種解決方法，給當前層 加上一個偽類#test:after content: "." display: block;height: 0; clear: both;visibility: hidden;1 .超鏈接訪問過后hover樣式就不出現的問題被點擊訪問過的超鏈接樣式不在具有hover和active 了，解決方法是改變CSS屬性的排歹1順序:L-V-H-A的雙倍邊距BUG例如 :<style type="text/css">body margin:0div

溫馨提示

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

評論

0/150

提交評論