前端面試題整理 1

塊級元素： div，section，ul，dl，ol，li，dt，dd，p，h1-h6, n**…… 行內元素（又叫內聯、內嵌元素）：

span, em, time, mark, strong, a……

5 個 html5 新增的元素： section，n**，time，mark，header, footer…… 5 個 css3 新增屬性：

box-shadow， text-shadow，background-size，background-clip，mask， transform，filter……

data 自定義屬性作用： 1. data 自定義屬性，本質就是給元素新增了個自定義屬性，本來沒有什麼特殊的，只是乙個官方化的自定義屬性的新增方式，在 js 中可以通過 dataset 統一管理； 2. 通常的作用，一般我們會在 data 中儲存一些和當前元素關聯度比較大的資料；

3. 一般也會用來做元素關聯，比如給元素加索引。

id > class > tag > *
但請注意，這道題有坑，例如：
標籤如發生巢狀，相應的樣式繼承優先順序又是怎樣的規律？
字型樣式的繼承和盒模型的樣式繼承有何不同？它們的優先順序有何影響？
樣式表中如果設定了同樣的樣式，它們的排列順序不同的話，優先順序又是遵循何種規律？
……等等諸如此類。

-- css --
.left 
.right 
.center 
-- html --
< div class="left" >
< div class="center" >
< div class="right" >

當頁面中某個元素的事件被觸發以後，比如點選了頁面中的某個按鈕，就觸發了當前按鈕的點選事件，但是 j**ascript 並不是簡單就直接觸發該元素的相應事件，而是會首先從 dom 樹的最頂層（window）依次的去觸發目標（被直接點選的）元素所有父級的同類事件，直到觸發到目標元素，然後又會再一次的從目標元素開始觸發其所有父級的所有同類事件直到window，也就是同型別事件的目標元素與 window 之間觸發乙個來回， window 到目標的觸發階段，我們稱為捕獲階段，目標觸發事件的時候我們稱為目標階段，而最後目標到 window 的觸發階段，我們稱為冒泡階段。

這種機制我們稱為事件流（event flow），冒泡機制其實就是事件流機制中的冒泡階段規則。

又是乙個經典問題，可能夠真正說出原理的人，應該不多。 1. 相同的是：== 和 === 都是比較等值比較運算子，返回的布林型別的比較結果。 2. 不同的是： 1) == 是等值比較運算子，使用的是抽象等值比較演算法。 === 是嚴格等值比較運算子，使用的嚴格等值比較演算法。 2) == 運算子在比較值的時候，會根據兩者型別是否相同而做不同的處理，在兩者不同型別的時候，會轉換型別後進行比較：基本型別會轉成數字，引用型別會轉成物件原始值，然後再進行比較。

而 === 首先也會判斷型別是否一致，不同的是如果型別不一致則直接返回 false。

"bar" 分析：|| 又稱為短路或，短路：如果左側為真，則不再進行右側運算，同時返回左側表示式運算結果。如果左側為假則執行右側表示式運算，並返回右側計算結果。上面window.foo是不存在的，所有結果為undefined，轉成boolean就是false，那麼就會運算 window.foo = "bar"，把 "bar" 賦值給 window.foo 的同時，

返回值也是 "foo"，所以列印返回結果是 "bar"

會寫 jq 和會用 jq，這兩者有何分別？？ $("#bar")

分析：因為有 id 選擇器，所以前面的 .foo div 是沒有必要的。

返回當前jq物件的上級jq物件
分析：1. 當我們通過$()會得到乙個物件
$jq1 = $('#div1');
2. jq物件下有一系列的方法，有的方法會返回乙個新的物件
// 通過$jq1的find返回了乙個新的jquery物件
var $jq2 = $jq1.find('p');
3. 這個時候在$jq2下面有乙個屬性 prevobject，該屬性儲存的就是 $jq1，通過比較 $jq2.prevobject == $jq1，會發現返回true。
4. 通過 prevobject 屬性會產生乙個類似原型鏈的引用，
而 .end() 方法就是返回就是當前 jq 物件的 prevobject 物件，
也就是當我們 $jq2.end() 的時候，返回的就是上層的 $jq1。

/^[a-za-z]\w+$/

1. 減少實際載入時間 1. 減少 http 請求（合併檔案、合併） 2. 壓縮 j**ascript、css ** 3. 啟用伺服器壓縮傳輸（如 gzip） 2. 減少感知時間

1. script 外部指令碼載入放到 html 最後進行

goh angasal m'i
分析：1. split("")，拆分字串，得到陣列：
["i", "'", "m", " ", "l", "a", "s", "a", "g", "n", "a", " ", "h", "o", "g"]
2. 對陣列使用.reverse()，翻轉陣列，得到：
["g", "o", "h", " ", "a", "n", "g", "a", "s", "a", "l", " ", "m", "'", "i"]
3. 最後使用join("")，把陣列再次拼接成字串，得到字串：goh angasal m'i

問：上面**執行結果是什麼？能否詳細說明原因？

先輸出1，再輸出2

分析：這裡重點是：jq 的 $(function(){}) 和 window.onload = function(){}，並不等同

1. window.onload 是頁面資源載入完成後觸發的事件，

比如頁面中有需要載入，那麼onload是等載入完成以後才觸發的。

2. 而 jq 中 $(function) 監聽的是 domcontentloaded 事件，而該事件只需要把 html 結構載入完成就會觸發

（一般我們js操作的就是頁面元素，所以只需要等結構載入完成能操作頁面元素就可以了）

所以該事件會比 onload 事件要先觸發，所以 1 先執行。

1. bind：把函式直接繫結到指定元素的指定事件上。

2. live：把函式繫結到document上，接收選擇器和事件型別作為引數，

當觸發乙個元素的事件的時候，會利用事件冒泡到document上這一特性，

判斷事件目標元素和繫結引數中的選擇器是否匹配，

如果匹配則執行繫結函式的執行。

3. delegate：和live有點類似，但是可以指定繫結元素，而不是document，

其他和live一致，但是比live更加靈活。

內容包括：姓名、性別、住址（包括城市、街道、門牌號、地鐵線）

[},}
]

實現 a、b、c 三個非同步介面，a 介面需傳參 user_name、mobi（使用者姓名和手機號碼），請求成功返回該使用者此手機號碼的消費清單資訊，user_name 可通過介面 b 獲取，mobi 可通過介面 c 獲取，請使用 jquery 寫出具體的實現方法？

function getusername()

function getmobi()

$.when(getusername(), getmobi()).then(function(data1, data2)

}).success(function(consumerlist) );

}, function() );

前端面試題整理 1

前端面試題整理

前端面試題整理

前端面試題整理

相關推薦