Java -- Web前端面試題及答案(需更深入了解)


Web前端方面

1、CSS引入的方式有哪些?

1)外聯:<link>標簽

2)內聯:<style>標簽

3)元素內嵌:元素的style屬性

2、CSS選擇符有哪些?

標簽選擇符、類選擇符、id選擇符、組合選擇符

3、你做的頁面在哪些流覽器測試過?這些瀏覽器的內核分別是什么?

Ie(Ie內核) 火狐(Gecko) 谷歌(webkit) opear(Presto)

4、”==”和“===”的不同

==只比較值,===比較值和數據類型

5、什么是盒子模型?

在網頁中,一個元素占有空間的大小由幾個部分構成,其中包括元素的內容(content),元素的內邊距(padding),元素的邊框(border),元素的外邊距(margin)四個部分。這四個部分占有的空間中,有的部分可以顯示相應的內容,而有的部分只用來分隔相鄰的區域或區域。4個部分一起構成了css中元素的盒模型。

6、$(this) 和 this 關鍵字在 jQuery 中有何不同?

前者是jQuery對象,使用jQuery方法和屬性;后者是JavaScript對象,使用JavaScript方法和屬性。

7、jQuery 里的 each() 是什么函數?你是如何使用它的?

each() 函數就像是 Java 里的一個 Iterator,它允許你遍歷一個元素集合。你可以傳一個函數給 each() 方法,被調用的 jQuery 對象會在其每個元素上執行傳入的函數。

8、$(document).ready() 是個什么函數?為什么要用它?

ready() 函數用於在文檔進入ready狀態時執行代碼。當DOM 完全加載(例如HTML被完全解析DOM樹構建完成時),jQuery允許你執行代碼。

1)第一種:

$(document).ready(function(){

});

$(document)把原生的document這個dom對象轉換為JQuery對象,轉換完成后才能調用ready方法。

ready(fn)表示的是頁面結構被加載完畢后執行傳入函數fn 

2)第二種:

$(function(){

});

當頁面加載完畢后執行里面的函數。這一種相對簡單,用的最多。 

3)window.onload的區別

JQuery中的頁面加載完畢事件,表示頁面結構被加載完畢;

window.onload表示的是頁面被加載完畢;必須等頁面中的圖片、聲音、圖像等遠程資源被加載完畢后才調用而JQuery中只需要頁面架構加載完畢

9、網頁上有 5 個 <div> 元素,如何使用 jQuery來選擇它們?

jQuery 代碼:$("div"),這樣會返回一個包含所有 5 個 div 標簽的 jQuery 對象。

10、列舉常用的幾種jQuery選擇器

1)基本選擇器:包括id選擇器、class選擇器和元素選擇器。

2)層次選擇器:也叫做路徑選擇器,可以根據路徑層次來選擇相應的DOM元素。

3)過濾選擇器:在前面的基礎上過濾相關條件,得到匹配的dom元素:如屬性選擇器、表單選擇器等等

ID選擇器:通過ID獲取一個元素

Class選擇器:通過類獲取元素

標簽選擇器:通過標簽獲取元素

通用選擇器(*):獲取所有元素

層次選擇器:

兒子選擇器> 獲取下面的子元素

后代選擇器 空格 獲取下面的后代,包括兒子、孫子等后代 

屬性選擇器:

tag[arrName=”test”] 獲取屬性名為xxx並且屬性的值為test的所有標簽

<input type=”checkbox” name=”body”/> 吃飯<br/>

<input type=”checkbox” name=”body”/> 睡覺<br/>

$(“input[name='body']”),表示獲取屬性名為name並且name屬性值body的所有input標簽。

11、AJAX應用和傳統Web應用有什么不同?

在傳統的Javascript編程中,如果想得到服務器端數據庫或文件上的信息,或者發送客戶端信息到服務器,需要建立一個HTML form然后GET或者POST數據到服務器端。用戶需要點擊”Submit”按鈕來發送或者接受數據信息,然后等待服務器響應請求,頁面重新加載。因為服務器每次都會返回一個新的頁面, 所以傳統的web應用有可能很慢而且用戶交互不友好。使用AJAX技術, 就可以使Javascript通過XMLHttpRequest對象直接與服務器進行交互。通過HTTP Request, 一個web頁面可以發送一個請求到web服務器並且接受web服務器返回的信息(不用重新加載頁面),展示給用戶的還是同一個頁面,用戶感覺不到頁面刷新,也看不到到Javascript后台進行的發送請求和接受響應。

12、AJAX的全稱是什么? 介紹一下AJAX

AJAX的全稱是Asynchronous JavaScript And XML(異步的JavaScript和XML).。AJAX是2005年由Google發起並流行起來的編程方法, AJAX不是一個新的編程語言,但是它是一個使用已有標准的新的編程技術。使用AJAX可以創建更好,更快,更用戶界面友好的Web應用。AJAX技術基於Javascript和HTTP Request。

使用場景?

--》登錄失敗時不跳轉頁面,注冊時提示用戶名是否存在,二級聯動等等使用場景 

13、AJAX的優缺點都有什么?

優點:

1)最大的一點是頁面無刷新,用戶的體驗非常好。

2)使用異步方式與服務器通信,具有更加迅速的響應能力。

3)可以把以前一些服務器負擔的工作轉嫁到客戶端,利用客戶端閑置的能力來處理,減輕服務器和帶寬的負擔,節約空間和寬帶租用成本。並且減輕服務器的負擔,ajax的原則是“按需取數據”,可以最大程度的減少冗余請求,和響應對服務器造成的負擔。

4)基於標准化的並被廣泛支持的技術,不需要下載插件或者小程序。

缺點:

1)不支持瀏覽器back按鈕。

2)安全問題 AJAX暴露了與服務器交互的細節。

3)對搜索引擎的支持比較弱。

4)破壞了程序的異常機制。

5)不容易調試。

14、簡述Ajax的工作原理?

Ajax的核心是JavaScript對象XmlHttpRequest。該對象在Internet Explorer 5中首次引入,它是一種支持異步請求的技術。簡而言之,XmlHttpRequest使您可以使用JavaScript向服務器提出請求並處理響應,而不阻塞用戶。在創建Web站點時,在客戶端執行屏幕更新為用戶提供了很大的靈活性。

15、請介紹一下XmlHttpRequest對象

Ajax的核心是JavaScript對象XmlHttpRequest。該對象在Internet Explorer 5中首次引入,它是一種支持異步請求的技術。簡而言之,XmlHttpRequest使您可以使用JavaScript向服務器提出請求並處理響應,而不阻塞用戶。通過XMLHttpRequest對象,Web開發人員可以在頁面加載以后進行頁面的局部更新。

16.簡單說一下HTML,CSS,javaScript在網頁開發中的定位?

HTML:超文本標記語言,定義網頁的結構

CSS:層疊樣式表,用來美化頁面

JavaScript:主要用來驗證表單,做動態交互(其中AJAX)

17.JS和JQuery的關系

JQuery是一個JS框架,封裝了JS的屬性和方法,並且增強了JS的功能,讓用戶使用起來更加方便,

原來使用js是要處理很多兼容性的問題(注冊事件),由於Jquery封裝了底層,就不用處理兼容性問題(注冊事件等)。

原生的js的dom和事件綁定Ajax等操作非常麻煩,JQuery等裝以后非常方便。

18.JQuery的AJAX和原生js實現有什么關系

JQuery中的AJAX也是通過原生的js封裝的,封裝完成后讓我們使用更加便利,不用考慮底層實現和兼容性等處理。

如果采用原生js實現AJAX是非常麻煩的,並且每次都是一樣的,如果我們不使用JQuery,我們也要封裝ajax對象的方法和屬性,有像jquery這些已經封裝完成,並且經過很多企業實際的框架,比較可靠並且開源,我們就不需要等裝,直接使用成熟的框架(jquery)即可;

19.簡單說一下html5?你對哪些現在哪些新技術有了解

html5是最新版本的html,是在原來html4的基礎上增強類一些標簽。

html5增加了一些像畫板、聲音、視頻、web存儲方面等高級功能,但是html5有一個不好的地方,那就是html5太強調語義了,導致開發者都不知道要選擇哪個標簽。在頁面布局時,無論頭部、主體、導航等模塊都使用div來表示,但是html5的規范,需要使用不同不同的標簽。(header,footer)

你對新技術有哪些了解:html5 css3。 

20.簡單說一下css3。

css3是最新版本的css,是對原來的css2的功能增強

css3中提供一些css2中實現起來比較困難或者不能實現的功能。

1)盒子圓角邊框

2)盒子和文字的陰影

3)漸變

4)裝換、移動、縮放、旋轉等

5)過渡、動畫都可以使用動畫

6)可以使用媒體查詢實現響應式網站

css3最大的缺點就是要根據不同的瀏覽器處理兼容性,對應有一些處理兼容性的工具,不用擔心

21.bootstrap是什么

bootstrap是一個移動設備優先的UI框架,我們可以不用寫任何css、js代碼就能實現比較漂亮的有交互性的頁面,我們程序員對頁面的編寫是有硬傷的,所有要自己寫頁面的話就要使用類似於bootstrap這樣的UI框架

平時用的很多:

1)模態框

2)表單、表單項

3)布局

4)刪格系統

22.請描述一下cookie,sessionStorage和localStorage的區別?

答:cookies兼容所有的瀏覽器,Html5提供的storage存儲方式。

•       Document.cookie

•       Window.localstorage

•       Window.sessionstorage

cookie數據始終在同源的http請求中攜帶(即使不需要),即cookie在瀏覽器和服務器間來回傳遞。而sessionStorage和localStorage不會自動把數據發給服務器,僅在本地保存。

存儲大小限制也不同,cookie數據不能超過4k,同時因為每次http請求都會攜帶cookie,所以cookie只適合保存很小的數據,如會話標識。sessionStorage和localStorage 雖然也有存儲大小的限制,但比cookie大得多,可以達到5M或更大。

數據有效期不同,sessionStorage:僅在當前瀏覽器窗口關閉前有效,自然也就不可能持久保持;localStorage:始終有效,窗口或瀏覽器關閉也一直保存,因此用作持久數據;cookie只在設置的cookie過期時間之前一直有效,即使窗口或瀏覽器關閉。

作用域不同,sessionStorage不在不同的瀏覽器窗口中共享,即使是同一個頁面;localStorage 在所有同源窗口中都是共享的;cookie也是在所有同源窗口中都是共享的。

23.如何區分靜態頁面和動態頁面?

答:要區分這兩個,最簡單的方法就是看后綴了,動態網頁網址中有兩個標志性的符號“?”和“&”(有的可能沒有&),這個問號和&就是用來帶參數的。

現在幾乎愛所有的網頁都是動態網頁。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM