前端研發筆試題

時間 2019-11-16

標籤前端研發筆試欄目快樂工作简体版

原文原文鏈接

備註：請將答案寫在答題紙上javascript

1、選擇題css

1．下面標籤嵌套正確的是（D）html

A. <ul><p>趕集網</p></ul> 前端

B. <a href="#"><a href="#">趕集網</a></a> java

C. <dl><li>趕集網</li></dl> node

D.<ol><li>趕集網</li></ol> web

2. 在HTML中，（C）能夠在網頁上經過連接直接打開郵件客戶端發送郵件。api

A.<a href=」telnet:zhou@126.com」>發送郵件</a>數組

B. <a href=」mail:zhou@126.com」>發送郵件</a> 瀏覽器

C.<a href=」mailto:zhou@126.com」>發送郵件</a>

D.<a href=」ftp:zhou@126.com」>發送郵件</a>

3. 請選出全部的置換元素（ABCD）(多選)

A. img

B. input

C. textarea

D. select

4．下面哪條聲明能固定背景圖片（A）

A. background-attachment:fixed;

B. background-attachment:scroll;

C. background-origin: initial;

D. background-clip: initial;

5．下列說法正確的是（AB）（多選）

A.display: none；不爲被隱藏的對象保留其物理空間；

B.visibility:hidden;所佔據的空間位置仍然存在,僅爲視覺上的徹底透明；

C.visibility:hidden;產生reflow和repaint(迴流與重繪)；

D.visibility:hidden;與display: none;二者沒有本質上的區別；

6．如下關於盒子模型描述正確的是（A）

A.標準盒子模型中：盒子的總寬度＝左右margin + 左右border + 左右padding + width

B.IE盒子模型中：盒子總寬度＝左右margin + 左右border + width

C.標準盒子模型中：盒子的總寬度＝左右margin + 左右border + width

D.IE盒子模型中：盒子總寬度＝width

7．英文字母所有轉爲大寫正確的是（C）

A. text-transform: capitalize;

B. text-transform: lowercase;

C. text-transform: uppercase;

D. font-weight: bold;

頁面有一個按鈕button id爲button1，經過原生的js如何禁用？（A B C D）(多選)

A.document.getElementById("button1").readolny= true;

B.document.getElementById("button1").setAttribute("readolny","true");

C.document.getElementById("button1").disabled = true;

D.document.getElementById("button1").setAttribute("disabled","true");

9．頁面有一個按鈕button id爲button1，經過原生的js 設置背景色爲紅色？（ A ）

A. document.getElementById('button1').style.backgroundColor="red";

B. document.getElementById('button1').style.backgroundcolor="red";

C. document.getElementById('button1').style.backGroundColor="red";

D. document.getElementById('button1').style.bgcolor="red";

10．使用CSS來格式化網頁，共有三種方式，如下哪種不是( D ).

A. 在HEAD中引用

B. 做爲標記來引用

C. 在BODY中引用

D. 做爲文件來引用

11.下述有關border:none以及border:0的區別，描述錯誤的是？( C D )(多選)

A. border:none表示邊框樣式無

B. border:0表示邊框寬度爲0

C. 當定義了border:none，即隱藏了邊框的顯示，實際就是邊框寬度爲0

D. 當定義邊框時，僅設置邊框寬度也能夠達到顯示的效果

12．iframe的使用場景有？(A B D C)

A. 與第三方域名下的頁面共享cookie

B. 上傳圖片，避免當前頁刷新

C. 左邊固定右邊自適應的佈局

D. 資源加載

13．一般咱們在瀏覽器內容區看到的內容，都是放入在( D ) 之間

A. <!doctype html>

B. <html></html>

C. <head></head>

D. <body></body>

14. 在網站上添加連接使用的標籤是(D)

A. title標籤

B. img標籤

C. meta標籤

D. a標籤

15．經過分析以下HTML代碼，能夠得出( B C D )（多選）

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

A. 該表格共有2行3列

B. 該表格中的文字均居中顯示

C. 該表格的邊框寬度爲10毫米

D. "員工號"單元個跨2列

2、填空題

16．CSS中的_____margin___屬性可爲元素設置外邊距，改變元素的內填充用___padding___屬性。

17．對ul li的樣式設成無，應該是用什麼屬性_____list-style: none_________。

18．合理的頁面佈局中常聽過結構與表現分離，那麼結構是___html_____，表現是___css_____。

19．在Table中，TR是___行_____，TD是____列____。

3、問答題

20．寫出三個javascript中使用this關鍵字的典型應用場景。

1.全局環境中的this指向全局對象

2.對象內部函數的this指向調用函數的當前對象

3.全局環境函數的this指向全局對象

4.匿名函數中的this指向全局對象

5.setInterval和setTimeout定時器中的this指向全局對象

21．寫一段JS代碼：判斷字符串是不是這樣組成的，第一個必須是字母，後面能夠是字母、

數字、下劃線，總長度爲5-20。

var reg = /^[a-zA-Z]\w{5,20}$/;

22．AJAX的全稱是什麼，AJAX技術體系的組成部分有哪些？

AJAX的全稱是：Asynchronous Javascript And XML」（異步JavaScript和XML）

主要包含了如下幾種技術：
Ajax（Asynchronous JavaScript + XML）的定義
基於web標準（standards-based presentation）XHTML+CSS的表示；
使用 DOM（Document Object Model）進行動態顯示及交互；
使用 XML 和 XSLT 進行數據交換及相關操做；
使用 XMLHttpRequest 進行異步數據查詢、檢索；
使用 JavaScript 將全部的東西綁定在一塊兒。

23．請介紹一下XMLhttprequest對象。

XMLHttpRequest 對象用於在後臺與服務器交換數據。

XMLHttpRequest 對象是開發者的夢想，由於您可以：

在不從新加載頁面的狀況下更新網頁
在頁面已加載後從服務器請求數據
在頁面已加載後從服務器接收數據
在後臺向服務器發送數據

全部現代瀏覽器（IE7+、Firefox、Chrome、Safari 和 Opera）都有內建的 XMLHttpRequest 對象。

24．請列舉五個經常使用的Javascript DOM方法。

　　getElementsByTagName() 經過標籤名字，獲取節點對象的數組

　　getAttribute() 獲取對象的某個屬性

　　setAttribute() 設置對象的某個屬性

一些經常使用的 HTML DOM 方法：

getElementById(id) - 獲取帶有指定 id 的節點（元素）
appendChild(node) - 插入新的子節點（元素）
removeChild(node) - 刪除子節點（元素）

一些經常使用的 HTML DOM 屬性：

innerHTML - 節點（元素）的文本值
parentNode - 節點（元素）的父節點
childNodes - 節點（元素）的子節點
attributes - 節點（元素）的屬性節點

25．Javascript經常使用的庫有哪些，你的開發經歷中使用過哪些？

jQuery
jQuery 是目前最受歡迎的JavaScript 框架。它使用 CSS 選擇器來訪問和操做網頁上的HTML元素（DOM 對象）。jQuery 同時提供 companion UI（用戶界面）和插件。Google、Microsoft、IBM和Netflix等大公司都在網站上使用 jQuery。

requirejs

requirejs是一個JavaScript文件和模塊加載器。requireJS容許你把你的javascript代碼獨立成文件和模塊，同時管理每一個模塊間的依賴關係。RequireJS的目標是鼓勵代碼的模塊化，它使用了不一樣於傳統<script>標籤的腳本加載步驟。使用RequireJS加載模塊化腳本將提升代碼的加載速度和質量。

AngularJS

AngularJS[1] 誕生於2009年，由Misko Hevery 等人建立，後爲Google所收購。是一款優秀的前端JS框架，已經被用於Google的多款產品當中。AngularJS有着諸多特性，最爲核心的是：MVC、模塊化、自動化雙向數據綁定、語義化標籤、依賴注入等等。

MooTools
MooTools是一個簡潔，模塊化，面向對象的JavaScript框架。它可以幫助你更快，更簡單地編寫可擴展和兼容性強的JavaScript代碼。 Mootools從Prototype.js中汲取了許多有益的設計理念，語法也和其極其相似。但它提供的功能要比Prototype.js多，總體設計也比Prototype.js要相對完善，功能更強大，好比增長了動畫特效、拖放操做等。

YUI Library
UI Library (YUI) 是一個開放源代碼的 JavaScript 函數庫。UI Library (YUI)的直觀的、豐富的API可幫助你構建高性能的desktop、服務器和移動應用程序。爲了能創建一個高互動的網頁，它採用了AJAX, DHTML 和 DOM 等程式碼技術。此外，UI Library (YUI)還包含了許多CSS 資源。

DevExtreme
DevExtreme包含了功能強大的HTML5,CSS和JavaScript開發框架。若是你想建立漂亮的跨平臺和多設備（不管是Windows8設備仍是iPad，仍是iPhone,Android等智能手機）應用程序，DevExtreme將爲你提供了一個全新的解決方案！

Bookmarklet Generator
正如您所料想的，Bookmarklet Generator是一個書籤生成器：簡單地粘貼常規的JavaScript代碼，按下按鈕，您會獲得一個書籤 ——準備安裝在您的瀏覽器欄。 Protorype Protorype 是一個很獨特的JavaScript 庫，逐漸成爲Web引用開發者的代碼基礎，被一些大型媒體公司和組織使用。隨着版本的更新，Protorype 在性能，用戶自定義事件以及同現代瀏覽器兼容方面愈來愈完善。 Dojo ToolkitDojo 的內核小巧，快速，精深，可用來建立反應靈敏的Web程序，擁有很出色的UI工具，在可訪問性，本地化方面也作得很好。 ModernizrModernizr是一個開源的JS庫，它使得那些基於訪客瀏覽器的不一樣（指對新標準支持性的差別）而開發不一樣級別體驗的設計師的工做變得更爲簡單。它使得設計師能夠在支持HTML5和CSS3的瀏覽器中充分利用HTML5和 CSS3的特性進行開發，同時又不會犧牲其餘不支持這些新技術的瀏覽器的控制。VectorDraw web library (JavaScript)VectorDraw web library (javascript)是一個矢量圖形庫，關鍵是它不但可以打開CAD繪圖，並且還能在任何支持HTML5的瀏覽器中顯示通用的矢量對象，包括如今的移動設備Android和 IOS系統上。VectorDraw web library徹底採用Javascript編寫，並在客戶端運行，另外還包含了一個相似DXF和.Net VectorDraw Framework組件的對象模型。 Ligature.jsLigature.js是一個腳本，能爲任何類型的文章增添漂亮的連體字。這是全部排版愛好者必須擁有的！