前端面試題

HTML CSS 部分

1、什麼是盒子模型?

所有HTML元素都可以視爲一個盒子,在CSS中談論設計和佈局時會經常使用術語“盒子模型”。盒子模型本質上就是一個包裝HTML元素的盒子。它包括:padding(邊距),border(邊框),margin(外邊距)和content(實際內容)。

2、簡述src與href的區別

href(Hypertext Reference的縮寫)超文本引用,在link、a元素中使用,常用於指定超鏈接。src(source的縮寫)資源,在img,script,iframe上使用,常用於指定本地資源文件。

3、行內元素有哪些?塊級元素有哪些? 空(void)元素有那些?

行內元素:a、b、span、img、input、strong、select、label、em、button、textarea

塊級元素:div、ul、li、dl、dt、dd、p、h1-h6、blockquote

空元素:br、meta、hr、link、input、img

4、px和em的區別

px是絕對長度單位,px定義的長度是固定的,計算比較容易。

em是相對長度單位,em定義的長度不是固定的,em會繼承父級元素的字體大小(瀏覽器的默認字體高都是16px,所以1em==16px,0.5em==8px)

5、div和span的區別?

div是塊級標籤,span是行級標籤

6、在html中,position取值有哪幾種,默認值是什麼?

值:static(默認值)、relative、fixed、absolute

7、清除浮動的幾種方式,各自的優缺點?

  1. 父元素添加樣式 overflow:hidden
  2. 父元素添加樣式 overflow:auto
  3. 浮動元素後加空標籤並設置樣式 clear:both(添加了無意義的標籤)
  4. 父元素設置寬高
  5. 父元素添加樣式 display:table
  6. 父元素添加樣式:

.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}

.clearfloat{zoom:1}

8、CSS選擇器有哪些?
元素選擇器、類選擇器、ID選擇器、通配符選擇器、屬性選擇器、相鄰兄弟選擇器、普通兄弟選擇器、子選擇器、後代選擇器、僞類選擇器

9、CSS選擇器優先級算法如何計算?

標籤的權重爲1,class的權重爲10,id的權重爲100,如果權重相同則最後定義的樣式會起作用,但是應該避免這種情況出現。以下例子是演示各種定義的權重

div{} 權重爲1

.class1{} 權重爲10

#id1{} 權重爲100

#id1 div{} 權重爲100+1=101

.class1 div{} 權重爲10+1=11

.class1 .class2 div{} 權重爲10+10+1=21

11、內聯樣式和important哪個優先級高?

important

12、css的基本語句構成是?
選擇器{屬性1:值1;屬性2:值2;…}

13、<img>標籤上title與alt屬性的區別是什麼?
alt 如果無法顯示圖像,瀏覽器將顯示的替代文本
title 全局屬性,鼠標移到元素上時顯示一段工具提示文本

14、link 和@import 的區別是?

(1) link屬於HTML標籤,而@import是CSS提供的;

(2) 頁面被加載的時,link會同時被加載,而@import引用的CSS會等到頁面被加載完再加載;

(3) @import只在IE5以上才能識別,而link是HTML標籤,無兼容問題;

(4) link方式的樣式的權重高於@import的權重

15、列出display的值並說明它們的作用。position的值, relative和absolute定位原點是?

 display常用的值有:

 inline(默認值),此元素會被顯示爲內聯元素。

 block 此元素將顯示爲塊級元素

 none 此元素不會被顯示。

 inline-block 行內塊元素

position常用的值有:

 static  默認值。靜態定位元素不受頂部,底部,左側和右側屬性的影響。

 absolute 絕對定位,相對於最近定位的祖先元素進行定位。

 fixed  相對於瀏覽器窗口進行定位。

 relative 相對定位,相對於其正常位置進行定位。

16、列出常見的HTML標籤,並簡單介紹這些標籤用在什麼場景?

<header>、<section>、<footer>語義化更強的佈局節點

<div>、<span>傳統佈局節點

<article>文章</article>

<h1>、<h2>、<h3>、<h4>、<h5>、<h6>標題

<p>段落

<a>超鏈接

<ul>、<li>無序列表

<ol>、<li>有序列表

<dl>、<dd>

<img>圖片

<audio>音頻

<video>視頻

<table>、<thead>、<tbody>、<tr>、<th>、<td>表格

<form>、<input>、<label>、<select>、<button>、<textarea>表單

<br>換行

<hr>水平線

<strong>,<em>強調

17、iframe有哪些缺點?

① iframe會阻塞主頁面的Onload事件;

② 搜索引擎的檢索程序無法解讀這種頁面,不利於SEO;

③ 會影響頁面的並行加載。

18、簡單說明什麼是HTML5?

HTML5是HTML最新的修訂版本,由萬維網聯盟(W3C)於2014年10月完成標準制定。目標是取代1999年所制定的HTML 4.01和XHTML 1.0標準,以期能在互聯網應用迅速發展的時候,使網絡標準達到匹配當代的網絡需求。廣義論及HTML5時,實際指的是包括HTML、CSS和JavaScript在內的一套技術組合。它希望能夠減少網頁瀏覽器對於需要插件的豐富性網絡應用服務(Plug-in-Based Rich Internet Application,RIA),例如:Adobe Flash、Microsoft Silverlight與Oracle JavaFX的需求,並且提供更多能有效加強網絡應用的標準集。[更多]

1、前端頁面由哪三層構成,分別是什麼?作用是什麼?

前端頁面構成:結構層、表示層、行爲層

結構層(structural layer)

由 HTML 或 XHTML之類的標記語言負責創建。標籤,也就是那些出現在尖括號裏的單詞,對網頁內容的語義含義做出了描述,但這些標籤不包含任何關於如何顯示有關內容的信息。例如,P標籤表達了這樣一種語義:“這是一個文本段。”

表示層(presentation layer)

由 CSS 負責創建。 CSS對“如何顯示有關內容”的問題做出了回答。

行爲層(behaviorlayer)- 

2、對WEB標準以及W3C的理解與認識?

w3c(World Wide Web Consortium 萬維網聯盟)提倡所有的標記都必須要有一個相應的結束標記、所有標籤的元素和屬性的名字都必須使用小寫、所有的標記都必須合理嵌套 、html(結構層)CSS(表示層)JavaScript(行爲層)的分離等;

結構層(structural layer)由 HTML 或 XHTML之類的標記語言負責創建。HTML標籤對網頁內容的語義含義做出了描述,但這些標籤不包含任何關於如何顯示有關內容的信息。例如,P標籤表達了這樣一種語義:“這是一個文本段。”

表示層(presentation layer)由 CSS 負責創建。 CSS對“如何顯示有關內容”的問題做出了回答。

行爲層(behavior layer)負責回答“內容應該如何對事件做出反應”這一問題。這是 Javascript 語言和 DOM主宰的領域。

3、什麼叫優雅降級和漸進增強?

優雅降級(Graceful Degradation):一開始就構建站點的完整功能,然後針對瀏覽器測試和修復。比如一開始使用 CSS3 的特性構建了一個應用,然後逐步針對各大瀏覽器進行 hack 使其可以在低版本瀏覽器上正常瀏覽。

漸進增強(Progressive Enhancement):一開始就針對低版本瀏覽器進行構建頁面,完成基本的功能,然後再針對高級瀏覽器進行效果、交互、追加功能達到更好的體驗。

4、常見的瀏覽器有哪些?都是什麼內核?

瀏覽器(內核):Chrome(WebKit)、Mozilla(Gecko)、Safari(Webkit)、Opera(Webkit)、IE(Trident)。

20、瀏覽器本地儲存有哪幾種類型?都有什麼區別?

21、前端與後臺數據交互都有哪些方式?

22、對前端界面工程師這個職位是怎樣理解的?

23、列舉最近最流行的一些技術?常去哪些網站?

24、HTML中<img>標籤上title屬性與alt屬性的區別是什麼?

25、CSS中px、em、rem的區別?

26、JavaScript如何理解閉包?

27、JavaScript中如何檢測一個變量是一個String類型?請寫出函數實現。

28、JavaScript如何獲取瀏覽器URL中查詢字符串中的參數?

29、列舉JavaScript字符串和Array操作函數?

30、jQuery有幾種選擇器?

31、jQuery中$.get()提交和$.post()提交有什麼區別?

32、請指出document.load和document.ready的區別?

33、JavaScript常用的調試方法?

34、return 1===1===1 返回的結果是什麼?

35、列舉JavaScript的幾種ES6新特性?

4. 如何居中一個浮動元素?

   方式1:設置容器的浮動方式爲相對定位,然後確定容器的寬高比如寬500 高 300 的層,然後設置層的外邊距。

  div{ 
    
           width: 500px; 
            height: 300px; 
            margin: -150px 0 0 -250px; 
            position: absolute; 
            left: 50%; 
            top: 50%; 
            background-color: yellow;  
        } 
<div> 元素居中 </div>

方式2:需要position:absolute;絕對定位。而層的定位點,使用外補丁margin負值的方法。負值的大小爲層自身寬度高度除以二。

div {
    position:absolute;
    top:50%;
    left:50%;
    margin:-150px 0 0 -200px;
    width:400px;
    height:300px;
    border:1px solid #008800;
}
<div>讓層垂直居中於瀏覽器窗口</div>

5. 請簡述HTML和XHTML最重要的4點不同?

不同:

XHTML要求正確嵌套
XHTML 所有元素必須關閉
XHTML 區分大小寫
XHTML 屬性值要用雙引號
XHTML 用 id 屬性代替 name 屬性
XHTML 特殊字符的處理

6. 頁面佈局中常聽說的“結構與表現”分離,“結構”是指?“表現”是指?

“結構”:HTML

“表現”:CSS

JavaScript 部分

1、簡述同步和異步的區別

同步就是指一個進程在執行某個請求的時候,若該請求需要一段時間才能返回信息,那麼這個進程將會一直等待下去,直到收到返回信息才繼續執行下去;

異步是指進程不需要一直等下去,而是繼續執行下面的操作,不管其他進程的狀態。當有消息返回時系統會通知進程進行處理,這樣可以提高執行的效率。

2、JavaScript中哪些方法獲取元素?

getElementById

getElementsByClassName

getElementsByTagName

getElementsByName

3、xml和json哪一種更易於開發和維護?

json相比xml可讀性和可擴張性好、編碼及解碼難度較低、在數據交互中帶寬佔用少,並且在當下是最流行的數據交互格式。

4、JS的typeof返回哪些數據類型?

string、number、object、boolean、function、undefined

5、 HTTP請求有哪幾種?

post、get

6、閉包是什麼?有什麼特性?請簡單書寫一個簡單事例?

7、用JS截取字符串asdfgh,要fgh?

方式1:'asdfgh'.substr(3,3);

方式2:'asdfgh'.substring(3,5) ;

方式3:'asdfgh'.substring(3);

8、JS怎麼創建一個類?

方式1:var Obj = new Object();

方式2:var Obj = {};

9、ajax請求的時候get 和post方式的區別?

  • GET 請求可被緩存
  • GET 數據在 URL 中對所有人都是可見的。
  • GET 請求保留在瀏覽器歷史記錄中
  • GET 請求可被收藏爲書籤
  • GET 請求不應在處理敏感數據時使用
  • GET 請求有長度限制
  • GET 請求只應當用於取回數據
  • POST 請求不會被緩存
  • POST 請求不會保留在瀏覽器歷史記錄中
  • POST 不能被收藏爲書籤
  • POST 請求對數據長度沒有要求

10、”==”和“===”的不同?
JavaScript 有兩種比較方式:嚴格比較運算符和轉換類型比較運算符。對於嚴格比較運算符(===)來說,僅當兩個操作數的類型相同且值相等爲 true,而對於被廣泛使用的比較運算符(==)來說,會在進行比較之前,將兩個操作數轉換成相同的類型。對於關係運算符(比如 <=)來說,會先將操作數轉爲原始值,使它們類型相同,再進行比較運算。

11、談談對this對象的理解?

this是js的一個關鍵字,隨着函數使用場合不同,this的值會發生變化。

但是總有一個原則,那就是this指的是調用函數的那個對象。

this一般情況下:是全局對象Global。 作爲方法調用,那麼this就是指這個對象

12、JSON 的瞭解?

JSON 是一種語法,用來序列化對象、數組、數值、字符串、布爾值和 null 。JSON對象包含兩個方法: 用於解析 JavaScript Object Notation  (JSON) 的 parse() 方法,以及將對象/值轉換爲 JSON字符串的 stringify() 方法。除了這兩個方法, JSON這個對象本身並沒有其他作用,也不能被調用或者作爲構造函數調用。

13、當一個DOM節點被點擊時候,我們希望能夠執行一個函數,應該怎麼做?

直接在DOM裏綁定事件:<div οnclick=”fn()”></div>

在JS裏通過onclick綁定:element.onclick = fn()

通過事件監聽進行綁定:addEventListener(‘click’, fn())

14、看下列代碼輸出爲何?解釋原因。

var a;

alert(typeof a);

alert(b);

alert(typeof a)彈出undefined

alert(b) 會報錯

解釋:尚未賦值的變量的類型爲undefined,在使用var聲明變量但並未對其賦初始化值時,這個變量的值就是undefined。而b由於未聲明將報錯。

15、已知數組var stringArray = [“This”, “is”, “Baidu”, “Campus”],Alert出”This is Baidu Campus”。

alert(stringArray.join(“ ”));

16、事件綁定和普通事件有什麼區別?

普通事件的不支持添加多個事件,最下面的事件會覆蓋上面的事件。

事件綁定(addEventListener)可以添加多個事件。

17.述ajax原理,什麼是同步異步(主觀題,答案不唯一)?

Ajax的工作原理:相當於在用戶和服務器之間加了—箇中間層,使用戶操作與服務器響應異步化。這樣把以前的一些服務器負擔的工作轉嫁到客戶端,利於客戶端閒置的處理能力來處理,減輕服務器和帶寬的負擔,從而達到節約ISP的空間及帶寬租用成本的目的。

14. 平時有沒有使用xml和json,在ajax交互中,哪一種更易於開發和維護,js中怎麼序列化JSON字符串?有,json相比xml可讀性和可擴張性好、編碼及解碼難度較低、在數據交互中帶寬佔用少,並且在當下是最流行的數據交互格式。序列化JSON字符串:eval() 或者 JSON.parse()

網絡

9、http狀態碼有那些?分別代表是什麼意思?

   100-199 用於指定客戶端應相應的某些動作。

   200-299 用於表示請求成功。

   300-399 用於已經移動的文件並且常被包含在定位頭信息中指定新的地址信息。

   400-499 用於指出客戶端的錯誤。400    1、語義有誤,當前請求無法被服務器理解。401   當前請求需要用戶驗證 403  服務器已經理解請求,但是拒絕執行它 404 頁面不存在。

   500-599 用於支持服務器錯誤。 503 – 服務不可用

11、一個頁面從輸入URL 到頁面加載顯示完成,這個過程中都發生了什麼?

  1. 瀏覽器會開啓一個線程來處理這個請求,對URL 分析判斷如果是 http 協議就按照 Web 方式來處理;
  2. 調用瀏覽器內核中的對應方法,比如 WebView 中的 loadUrl 方法;
  3. 通過DNS解析獲取網址的IP地址,設置 UA 等信息發出第二個GET請求;
  4. 進行HTTP協議會話,客戶端發送報頭(請求報頭);
  5. 進入到web服務器上的 WebServer,如 Apache、Tomcat、Node.js 等服務器;
  6. 進入部署好的後端應用,如PHPJavaJavaScriptPython 等,找到對應的請求處理;
  7. 處理結束回饋報頭,此處如果瀏覽器訪問過,緩存上有對應資源,會與服務器最後修改時間對比,一致則返回304;
  8. 瀏覽器開始下載html文檔(響應報頭,狀態碼200),同時使用緩存;
  9. 文檔樹建立,根據標記請求所需指定MIME類型的文件(比如css、js),同時設置了cookie;
  10. 頁面開始渲染DOM,JS根據DOM API操作DOM,執行事件綁定等,頁面顯示完成。

jQuery部分

1、 jQuery 庫中的 $() 是什麼?

$() 函數是 jQuery() 函數的別稱,乍一看這很怪異,還使 jQuery 代碼晦澀難懂。一旦你適應了,你會愛上它的簡潔。$() 函數用於將任何對象包裹成 jQuery 對象,接着你就被允許調用定義在 jQuery 對象上的多個不同方法。你甚至可以將一個選擇器字符串傳入 $() 函數,它會返回一個包含所有匹配的 DOM 元素數組的 jQuery 對象。這個問題我已經見過好幾次被提及,儘管它非常基礎,它經常被用來區分一個開發人員是否瞭解 jQuery。

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

另一個重要的 jQuery 問題是基於選擇器的。jQuery 支持不同類型的選擇器,例如 ID 選擇器、class 選擇器、標籤選擇器。鑑於這個問題沒提到 ID 和 class,你可以用標籤選擇器來選擇所有的 div 元素。jQuery 代碼:$("div"),這樣會返回一個包含所有 5 個 div 標籤的 jQuery 對象。更詳細的解答參見上面鏈接的文章。

3、jQuery 裏的 ID 選擇器和 class 選擇器有何不同?

如果你用過 CSS,你也許就知道 ID 選擇器和 class 選擇器之間的差異,jQuery 也同樣如此。ID 選擇器使用 ID 來選擇元素,比如 #element1,而 class 選擇器使用 CSS class 來選擇元素。當你只需要選擇一個元素時,使用 ID 選擇器,而如果你想要選擇一組具有相同 CSS class 的元素,就要用 class 選擇器。在面試過程中,你有很大機率會被要求使用 ID 選擇器和 class 選擇器來寫代碼。下面的 jQuery 代碼使用了 ID 選擇器和 class 選擇器:

$('#LoginTextBox')  // Returns element wrapped as jQuery object with id='LoginTextBox'
$('.active') // Returns all elements with CSS class active.

  正如你所見,從語法角度來說,ID 選擇器和 class 選擇器的另一個不同之處是,前者用字符”#”而後者用字符”.”。更詳細的分析和討論參見上面的答案鏈接。

4. 如何在點擊一個按鈕時使用 jQuery 隱藏一個圖片?

這是一個事件處理問題。jQuery爲按鈕點擊之類的事件提供了很好的支持。你可以通過以下代碼去隱藏一個通過ID或class定位到的圖片。你需要知道如何爲按鈕設置事件並執行hide() 方法,代碼如下所示:

$('#btn').click(function(){
    $('#img').hide();
});

我喜歡這個問題,因爲很貼近實際使用,代碼也不復雜。

5、jQuery與jQuery UI 有啥區別?

   jQuery是一個js庫,主要提供的功能是選擇器,屬性修改和事件綁定等等。

   jQuery UI則是在jQuery的基礎上,利用jQuery的擴展性,設計的插件。提供了一些常用的界面元素,諸如對話框、拖動行爲、改變大小行爲等等

6、$(document).ready() 是個什麼函數?爲什麼要用它?

  這個問題很重要,並且常常被問到。 ready() 函數用於在文檔進入ready狀態時執行代碼。當DOM 完全加載(例如HTML被完全解析DOM樹構建完成時),jQuery允許你執行代碼。使用$(document).ready()的最大好處在於它適用於所有瀏覽器,jQuery幫你解決了跨瀏覽器的難題。需要進一步瞭解的用戶可以點擊 answer鏈接查看詳細討論。

7、JavaScript的window.onload 事件和 jQuery的ready()函數有何不同?

 這個問答是緊接着上一個的。JavaScript window.onload 事件和 jQuery ready 函數之間的主要區別是,前者除了要等待 DOM 被創建還要等到包括大型圖片、音頻、視頻在內的所有外部資源都完全加載。如果加載圖片和媒體內容花費了大量時間,用戶就會感受到定義在 window.onload 事件上的代碼在執行時有明顯的延遲。

  另一方面,jQuery ready() 函數只需對 DOM 樹的等待,而無需對圖像或外部資源加載的等待,從而執行起來更快。使用 jQuery $(document).ready() 的另一個優勢是你可以在網頁裏多次使用它,瀏覽器會按它們在 HTML 頁面裏出現的順序執行它們,相反對於 onload 技術而言,只能在單一函數裏使用。鑑於這個好處,用 jQuery ready() 函數比用 JavaScript window.onload 事件要更好些。

  另一方面,jQuery ready() 函數只需對 DOM 樹的等待,而無需對圖像或外部資源加載的等待,從而執行起來更快。使用 $(document).ready() 的另一個優勢是你可以在網頁裏多次使用它,瀏覽器會按它們在 HTML 頁面裏出現的順序執行它們,相反對於 onload 技術而言,只能在單一函數裏使用。鑑於這個好處,用 ready() 函數比用window.onload 事件要更好些。

8、如何找到所有 HTML select 標籤的選中項?

  這是面試裏比較棘手的 jQuery 問題之一。這是個基礎的問題,但是別期望每個 jQuery 初學者都知道它。你能用下面的 jQuery 選擇器獲取所有具備 multiple=true 的 <select > 標籤的選中項:

$('[name="users"] :selected')

  這段代碼結合使用了屬性選擇器和 :selected 選擇器,結果只返回被選中的選項。你可按需修改它,比如用 id 屬性而不是 name 屬性來獲取 <select> 標籤。

9、你是如何將一個 HTML 元素添加到 DOM 樹中的?

你可以用 jQuery 方法 appendTo() 將一個 HTML 元素添加到 DOM 樹中。這是 jQuery 提供的衆多操控 DOM 的方法中的一個。你可以通過 appendTo() 方法在指定的 DOM 元素末尾添加一個現存的元素或者一個新的 HTML 元素。

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

  $(this) 返回一個jQuery 對象,你可以對它調用多個 jQuery 方法,比如用 text() 獲取文本,用val() 獲取值等等。而 this 代表當前元素,它是 JavaScript 關鍵詞中的一個,表示上下文中的當前 DOM 元素。你不能對它調用 jQuery 方法,直到它被 $() 函數包裹,例如 $(this)。

12、你如何使用jQuery來提取一個HTML 元素的屬性 例如a標籤的href?

attr() 方法被用來提取任意一個HTML元素的一個屬性的值. 你首先需要利用jQuery選擇及選取到所有的鏈接或者一個特定的鏈接,然後你可以應用attr()方法來獲得他們的href屬性的值。下面的代碼會找到頁面中所有的鏈接並返回href值:

$("a").each(function(){
    alert($(this).attr("href"));
});

13、你如何使用jQuery設置一個屬性值?

例:給a標籤href屬性設置一個值

$("a").attr("href","https://www.baidu.com/")

14、jQuery中 detach() 和 remove() 方法的區別是什麼? 

remove() 和detach()都是將被選元素移出DOM。

區別是:

remove()將移除元素內部的一切,包括綁定的事件及與該元素相關的jQuery數據時使用。

detach()會保存所有jQuery數據和被移走的元素相關聯的事件。例如,當需要移走一個元素,不久又將該元素插入DOM時,這種方法很有用。

15、你如何利用jQuery來向一個元素中添加和移除CSS類?

通過利用 addClass() 和 removeClass() 這兩個 jQuery 方法。動態的改變元素的class屬性可以很簡單例如. 使用類“.active"來標記它們的未激活和激活狀態,等等.

16、使用 CDN 加載 jQuery 庫的主要優勢是什麼 ?

  這是一個稍微高級點兒的jQuery問題。好吧,除了報錯節省服務器帶寬以及更快的下載速度這許多的好處之外, 最重要的是,如果瀏覽器已經從同一個CDN下載類相同的 jQuery 版本, 那麼它就不會再去下載它一次. 因此今時今日,許多公共的網站都將jQuery用於用戶交互和動畫, 如果瀏覽器已經有了下載好的jQuery庫,網站就能有非常好的展示機會。

17、jQuery 中的方法鏈是什麼?使用方法鏈有什麼好處?

  方法鏈是對一個方法返回的結果調用另一個方法,這使得代碼簡潔明瞭,同時由於只對 DOM 進行了一輪查找,性能方面更加出色。

18、哪種方式更高效:document.getElementbyId("myId") 還是 $("#myId")?

  第一種,因爲它直接調用了 JavaScript 引擎。

19. jQuery 裏的 each() 是什麼函數?你是如何使用它的?(答案如下)

  each() 函數就像是 Java 裏的一個 Iterator,它允許你遍歷一個元素集合。你可以傳一個函數給 each() 方法,被調用的 jQuery 對象會在其每個元素上執行傳入的函數。有時這個問題會緊接着上面一個問題,舉個例子,如何在 alert 框裏顯示所有選中項。我們可以用上面的選擇器代碼找

出所有選中項,然後我們在 alert 框中用 each() 方法來一個個打印它們,代碼如下:

$('[name=NameOfSelectedTag] :selected').each(function(selected) {
    alert($(selected).text());
});

  其中 text() 方法返回選項的文本。

20.  jQuery.get() 和 jQuery.ajax() 方法之間的區別是什麼?

  ajax() 方法更強大,更具可配置性, 讓你可以指定等待多久,以及如何處理錯誤。get() 方法是一個只獲取一些數據的專門化方法。

21. 你要是在一個 jQuery 事件處理程序裏返回了 false 會怎樣?

  這通常用於阻止事件向上冒泡。

前端性能優化 部分

相關面試問題:

1、前端頁面性能優化和減少頁面加載時間的方法?

2、怎麼樣從web前端方面優化性能?至少列舉5點?

  • 語義化HTML:好處在於可以使代碼簡潔清晰,支持不同設備,利於搜索引擎,便於團隊開發;
  • 減少DOM節點:加速頁面渲染;
  • 防止src屬性和link的href屬性爲空:當值爲空時,瀏覽器很可能會把當前頁面當成其屬性值加載;
  • 正確的閉合標籤:如避免使用<div/>,瀏覽器會多一個將它解析成<div\></div\>的過程;
  • 鏈接爲目錄或首頁的地址後面加”/”,如http://www.5icool.org/;
  • 避免在頁面的主體佈局中使用table,table要等其中的內容完全下載之後纔會顯示出來,顯示比div+css佈局慢。
  • 用link而不用@import方式導入樣式;
  • 減少http請求次數: 精簡壓縮JS、CSS代碼,減少文件大小、data緩存;
  • 縮小favicon.ico並緩存;
  • 給圖片加上正確的寬高值:這可以減少頁面重繪,同時防止圖片縮放;
  • 圖片儘量採取聚合技術(CSS Sprites)減少圖片請求,,圖片大小控制合適;
  • 圖片預加載,將樣式表放在頂部,將腳本放在底部  加上時間戳;
  • 減少查詢層級:如.header .logo 要好過 .header .top .logo;
  • 減少查詢範圍:如.header>li 要好過 .header li;
  • 避免TAG標籤與CLASS或ID並存:如a.top、button#submit;
  • 避免使用CSS Filter(CSS濾鏡);
  • 避免使用CSS Expressions(CSS表達式)又稱Dynamic properties(動態屬性)。如:background-color: expression( (newDate()).getHours()%2 ? “#B8D4FF” : “#F08A00″ ) ;
  • 少用全局變量、緩存DOM節點查找的結果。減少IO讀取操作;
  • 使用事件代理綁定事件,如將事件綁定在body上進行代理;
  • 減少對象查找,如a.b.c.d這種查找方式非常耗性能,儘可能把它定義在變量裏;
  • 類型轉換:把數字轉換成字符串使用”” + 1,浮點數轉換成整型使用Math.floor()或者Math.round();
  • 對字符串進行循環操作,譬如替換、查找,應使用正則表達式;
  • 資源文件按模塊進行放置,有利於團隊開發;
  • 類庫、媒體使用CDN加速,減輕服務器壓力;
  • 用innerHTML代替DOM操作,減少DOM操作次數,優化javascript性能;
  • 當需要設置的樣式很多時設置className而不是直接操作style;
  • 不使用eval()函數;
  • 優化工具:網頁Gzip,CDN託管,圖片服務器。
  •  服務器部分
  • u 儘量合併CSS、JS文件,或將其直接寫在頁面上,減少HTTP請求;

    u 壓縮CSS、JS文件,縮短文件傳輸時間;

    u 避免404錯誤:特別要避免給404指定一個停擺頁面,否則所有404錯誤都將會加載一次頁面;

    u 一般要求減少DNS查詢次數,如同一個頁面的請求資源儘量少的使用不同的主機名,這可以減少網站並行下載的數量,但很多網站爲了加速下載資源其實是特意用了多個主機名,這裏要做一個權衡;

    u 使用CDN加速,使用戶從離自己最近的服務器下載文件;

    u 減少Cookie的大小,使用無cookie的域,客戶端請求靜態文件的時候,減少 Cookie 的反覆傳輸對主域名的影響;

    u 爲文件頭指定Expires,使內容具有緩存性;

    u 使用gzip壓縮內容;
    --------------------- 
    作者:dkh_321 
    來源:CSDN 
    原文:https://blog.csdn.net/dkh_321/article/details/79311446 
    版權聲明:本文爲博主原創文章,轉載請附上博文鏈接!

6、描述css reset的作用和用途?
CSS Reset 重置樣式表的目標是減少瀏覽器在默認行高,邊距和標題字體大小等方面的不一致性。

7、頁面重構怎麼操作?

  • 設計稿的重構:設計師的設計稿可能不是特別符合頁面效果,當拿到設計稿時需要通過二次重構和修改達到預期效果。
  • 功能不全頁面的重構:頁面功能不符合用戶體驗、用戶交互。
  • 過時頁面的重構:使用的是過時的代碼和標籤,跟不上時代的發展。
  • 代碼重構:代碼質量、SEO優化、頁面性能、更好的語義化、瀏覽器兼容、CSS優化。

8、語義化的理解?

html語義化就是讓頁面的內容結構化,便於對瀏覽器、搜索引擎解析;

在沒有樣式CCS情況下也以一種文檔格式顯示,並且是容易閱讀的。

搜索引擎的爬蟲依賴於標記來確定上下文和各個關鍵字的權重,利於 SEO。

使閱讀源代碼的人對網站更容易將網站分塊,便於閱讀維護理解。

10、平時如何管理你的項目,如何設計突發大規模併發架構?

先期團隊必須確定好全局樣式(global.css),編碼模式(utf-8) 等

編寫習慣必須一致(例如都是採用繼承式的寫法,單樣式都寫成一行);

標註樣式編寫人,各模塊都及時標註(標註關鍵樣式調用的地方);

頁面進行標註(例如 頁面 模塊 開始和結束);

CSS跟HTML分文件夾並行存放,命名都得統一(例如style.css)

JS 分文件夾存放 命民以該JS 功能爲準英文翻譯;

圖片採用整合的 images.png png8 格式文件使用盡量整合在一起使用方便將來的管理

發佈了37 篇原創文章 · 獲贊 2 · 訪問量 1萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章