哪吒人生信條：如果你所學(xué)的東西 處于喜歡 才會(huì)有強(qiáng)大的動(dòng)力支撐。

把你的前端拿捏得死死的，每天學(xué)習(xí)得爽爽的，關(guān)注這個(gè)不一樣的程序員，如果你所學(xué)的東西 處于喜歡 才會(huì)有強(qiáng)大的動(dòng)力支撐。

感謝不負(fù)每一份熱愛(ài)前端的程序員，不論前端技能有多奇葩，歡迎關(guān)注加我入群vx:xiaoda0423

前言

希望可以通過(guò)這篇文章，能夠給你得到幫助。(感謝一鍵三連)

1.css3有哪些新特性

圓角border-radius，陰影box-shadow，對(duì)文字加特效text-shadow，線性漸變gradient，變化transform，偽元素::selection，媒體查詢，多欄布局，圖片邊框border-image。

p:first-of-type，選擇屬于其父元素的首個(gè)<p>元素的每個(gè)<p>元素

p:last-of-type，選擇屬于其父元素的最后一個(gè)<p>元素的每個(gè)<p>元素

p:only-of-type，選擇屬于其父元素的唯一<p>元素的每個(gè)<p>元素

p:only-child，選擇屬于其父元素的唯一子元素的每個(gè)<p>元素

p:nth-child(2)，選擇屬于其父元素的第二個(gè)子元素的每個(gè)<p>元素

:enabled:disabled，控制表單控件的禁用狀態(tài)

:checked，單選框或復(fù)選框被選中

2.first-child與first-of-type的區(qū)別是

first-child匹配的是父元素的第一個(gè)子元素，可以說(shuō)是結(jié)構(gòu)上的第一個(gè)子元素

first-of-type匹配的是該類型的第一個(gè)元素，類型就是指冒號(hào)前面匹配到的元素。（只要是該類型的元素第一個(gè)即可，不限制是第一子元素）

<div><p></p><span></span> </div>

• p:first-child匹配到p元素，因?yàn)閜元素是div的第一個(gè)子元素
• span:first-child匹配不到span元素，因?yàn)閟pan是div的第二個(gè)子元素
• p:first-of-type匹配到p元素，因?yàn)閜是div所有為p的子元素中的第一個(gè)
• span:first-of-type匹配到span元素，因?yàn)閟pan是div所有未span的子元素中的第一個(gè)。

3.解決使用transform:translate屬性時(shí)會(huì)出現(xiàn)閃爍現(xiàn)象

-webkit-backface-visibility: hidden; // 隱藏轉(zhuǎn)換的元素的背面 -webkit-transform-style: preserve-3d; // 使被轉(zhuǎn)換的元素的子元素保留其3d轉(zhuǎn)換 -webkit-transform: translated3d(0,0,0); // 開(kāi)啟gpu硬件加速模式，使用gpu代替cpu渲染動(dòng)畫(huà)

4.如何使用@keyframes使div元素移動(dòng)200像素

div {widht:100px;height:100px;background: red;animation: move 3s; } @keyframes move{from{margin-left: 0px;}to{margin-left: 100px;} }

5.如何實(shí)現(xiàn)文本換行

使用word-wrap屬性：normal只在允許的斷字點(diǎn)換行；break-word在長(zhǎng)單詞或url地址內(nèi)部進(jìn)行換行。

6.超出文本省略

使用text-overflow:ellopsis：文本溢出時(shí)，為了不顯示省略標(biāo)記...，通過(guò)clip直接將溢出的部分裁剪掉。

7.css3動(dòng)畫(huà)如何在動(dòng)作結(jié)束時(shí)保持狀態(tài)不變

使用animation-fill-mode，值為none，表示不改變默認(rèn)行為；值為forwards，當(dāng)動(dòng)畫(huà)完成后，保持最后一個(gè)屬性值；backwards，在animation-delay所指定的一段時(shí)間內(nèi)，在動(dòng)畫(huà)顯示之前，應(yīng)用開(kāi)始屬性值；both，向前和向后填充模式都可以應(yīng)用。

css3動(dòng)畫(huà)的優(yōu)點(diǎn)：在性能上會(huì)稍微好一些，瀏覽器會(huì)對(duì)css3的動(dòng)畫(huà)做一些優(yōu)化，代碼相對(duì)簡(jiǎn)單；css3動(dòng)畫(huà)的缺點(diǎn)：在動(dòng)畫(huà)控制上不夠靈活，兼容性不好，部分動(dòng)畫(huà)功能無(wú)法實(shí)現(xiàn)。

8.實(shí)現(xiàn)某div元素以每秒50px的速度左移100px

$('div'),animate({'left': 100}, 2000); div {transition: all 2s linear; } div.style.left = {div.offsetLeft+100)+'px';

9.說(shuō)說(shuō)box-sizing屬性

box-sizing屬性用來(lái)控制元素盒模型的解析模式，默認(rèn)是content-box

content-box讓元素維持w3c的標(biāo)準(zhǔn)盒模型，元素的寬度/高度由border+padding+content的寬度/高度決定，設(shè)置width/height屬性指的是指定content部分的寬度/高度。

border-box讓元素維持ie傳統(tǒng)盒模型，設(shè)置width/height屬性指的是指定border+padding+content的寬度/高度。標(biāo)準(zhǔn)瀏覽器下，按照w3c規(guī)范解析盒模型，一旦修改了元素的邊框或內(nèi)距，就會(huì)影響元素的盒子尺寸，就不得不重新計(jì)算元素的盒子尺寸，從而影響整個(gè)頁(yè)面的布局。

content-box盒模型：

布局所占寬度：

width=width + padding-left + paddiing-right + border-left + border-right

布局所占高度：

Height = height + padding-top + padding-bottom + border-top + border-bottom

padding-box盒模型：

布局所占寬度：

width = widht（包含padding-left + padding-right） + border-top + border-bottom

布局所占高度：

Height = height(包含padding-top + padding-bottom) + border-top + border-bottom

border-box盒模型：

布局所占寬度：

width = widht（包含padding-left + padding-right + border-left + border-right）

布局所占高度：

height = height(包含padding-top + padding-bottom + border-top + border-bottom)

10.如何實(shí)現(xiàn)把文本分隔為4列并使兩列之間間隔30像素

div {-moz-column-count: 3;-webkit-column-count: 3;column-count: 3;-moz-column-gap: 40px;-webkit-column-gap: 40px;column-gap: 40px;width: 600px; }

11.background-clip和background-orgin的區(qū)別

• background-clip規(guī)定背景，背景顏色和背景圖片的繪制區(qū)域。

它有三個(gè)屬性：

1. border-box表示背景從邊框開(kāi)始繪制 2. padding-box表示背景在邊框內(nèi)部繪制 3. content-box表示背景從內(nèi)容部分繪制

• background-origin規(guī)定背景圖片的定位區(qū)域

它有三個(gè)屬性：border-box，padding-box，content-box（它只能對(duì)背景做樣式上的操作）

12.css3中transition屬性值以及含義是

transition屬性是一個(gè)簡(jiǎn)寫(xiě)屬性：

transition-property哪個(gè)屬性需要實(shí)現(xiàn)過(guò)渡

transition-duration完成過(guò)渡效果需要多少秒/毫秒

transition-timing-function速度效果的運(yùn)動(dòng)曲線，如linear,ease-in,ease,ease-out,ease-in-out,cube-bezier

transition-delay規(guī)定過(guò)渡開(kāi)始前的延遲時(shí)間

13.當(dāng)元素不面向屏幕時(shí)其可見(jiàn)性如何定義

backface-visibility: visible | hidden

14.如何實(shí)現(xiàn)css3倒影

-webkit-box-reflect設(shè)置方向，距離。方向可以設(shè)置為below,above,left,right。

.demo { height: 100px;widht: 100px;background: url(logo.png);-webkit-box-reflect: below 10px; }

15.css3實(shí)現(xiàn)背景顏色線性漸變

div{background: -webkit-linear-gradient(left,red,green 50%, blue) }

16.為盒子添加蒙版

.demo {height: 100px;width: 100px;-webkit-mask-image: url(shadow.png);-webkit-mask-position: 50% 50%;-webkit-mask-repeat: no-repeat; }

17.animation屬性值有哪些

animation-name就是動(dòng)畫(huà)名稱；animation-duration就是動(dòng)畫(huà)持續(xù)時(shí)間；animation-play-state是播放狀態(tài)(running表示播放，paused表示暫停)，可以用來(lái)控制動(dòng)畫(huà)暫停;animation-delay就是動(dòng)畫(huà)延遲時(shí)間;animation-timing-function就是動(dòng)畫(huà)運(yùn)動(dòng)形式，animation-iteration-count就是重復(fù)次數(shù)；animation-direction就是播放前重置。

18.rem的原理是什么

在做響應(yīng)式布局時(shí)，通過(guò)調(diào)整html的字體大小，頁(yè)面上所有使用rem單位的元素都會(huì)做相應(yīng)的調(diào)整。

19.如何設(shè)置css3文本陰影

h1 {text-shadow: 水平陰影，垂直陰影，模糊距離，陰影顏色}

20.如何把元素從左側(cè)移動(dòng)50像素，從頂端移動(dòng)100像素

div{transform: translate(50px,100px);-ms-transform: translate(50px,100px);-webkit-transform: translate(50px,100px);-o-transform: translate(50px,100px);-moz-transform: translate(50px,100px); }

21.如何把一個(gè)元素旋轉(zhuǎn)30°

div{transform:rotate(30deg);-ms-transform: rotate(30deg); //ie9-webkit-transform: rotate(30deg); //safari,chrome-o-transform: rotate(30deg); // opera-moz-transform: rotate(30deg); // firebox }

22.利用css3制作淡入淡出的動(dòng)畫(huà)效果

@-webkit-keyframes daIn{from {opacity: 0;}to {opacity: 1;} }@-webkit-keyframes daOut {from{opacity: 1;}to{opacity: 0;} }div {-webkit-animation-name: daIn; // 動(dòng)畫(huà)名稱-webkit-animation-duration: 3s; // 動(dòng)畫(huà)持續(xù)時(shí)間-webkit-animation-iteration-count: 1; // 動(dòng)畫(huà)次數(shù)-webkit-animation-delay: 0s; // 延遲時(shí)間 }

23.在使用Bootstrap的同時(shí)使用地圖api，可能會(huì)造成Bootstrap與地圖沖突，地圖顯示不出來(lái)，如何解決

主要是在使用Bootstrap的變體zui.css的時(shí)候出現(xiàn)的，首先，打開(kāi)瀏覽器的開(kāi)發(fā)者工具，查看控制臺(tái)有無(wú)錯(cuò)誤，如沒(méi)有，查看網(wǎng)絡(luò)中的資源，并確認(rèn)與地圖相關(guān)的圖片資源有無(wú)加載，若加載了，將地圖調(diào)用的代碼從項(xiàng)目中獨(dú)立出來(lái)，看能否正常顯示，若能顯示，在項(xiàng)目中，使用二分法一半一半地刪除引用的JavaScript,css代碼，看這些JavaScript或css代碼是否對(duì)地圖api造成了影響，把問(wèn)題鎖定在zui.css中，然后，在elements里核對(duì)地圖div下面的一些css。

24.jquery中的deferred的功能

實(shí)現(xiàn)鏈?zhǔn)讲僮?/li>

指定同一操作的多個(gè)回調(diào)函數(shù)

為多個(gè)操作指定回調(diào)函數(shù)

提供普通操作的回調(diào)函數(shù)接口

25.什么是deferred對(duì)象

開(kāi)發(fā)網(wǎng)站過(guò)程中，會(huì)遇到某些耗時(shí)很長(zhǎng)的javascript操作，有異步操作，如ajax讀取服務(wù)器數(shù)據(jù)，有同步操作，如遍歷一個(gè)大型數(shù)組，它們都不能立即得到結(jié)果。

可以為它們指定回調(diào)函數(shù)callback，就是事先規(guī)定，一旦運(yùn)行結(jié)束，調(diào)用那些函數(shù)，但是，在回調(diào)函數(shù)方面，jquery的功能非常弱，為了改變這一點(diǎn)，jquery開(kāi)發(fā)設(shè)計(jì)了deferred對(duì)象。

26.jquery和jquery ui的區(qū)別

jquery是一個(gè)javascript庫(kù)，主要提供選擇器，屬性修改和事件綁定等功能。jquery ui則是在jquery的基礎(chǔ)上對(duì)jquery的擴(kuò)展，是jquery的插件。jquery ui提供了一些常用的界面元素，如對(duì)話框，拖動(dòng)行為，改變大小行為等。

27.如何用原生JavaScript實(shí)現(xiàn)jquery的ready方法

$(document).ready()在dom繪制完畢后就執(zhí)行，而不必等到頁(yè)面加載完畢。

// 實(shí)現(xiàn)ready方法 var DOMReady = (function() {// 回調(diào)函數(shù)隊(duì)列var fnList = [];// 頁(yè)面是否已經(jīng)繪制完成var ready = false;var fnEvent = null;// 事件回調(diào)函數(shù)function handler(e) {// 確保事件回調(diào)函數(shù)只執(zhí)行一次if(ready){return;}// 如果發(fā)生了`onreadystatechange事件，但是狀態(tài)不是complete,說(shuō)明dom沒(méi)有繪制完成if(e.type==='onreadystatechange' && document.readyState !== 'complete') {return;}// 運(yùn)行所有回調(diào)函數(shù)，為了防止運(yùn)動(dòng)時(shí)候注冊(cè)更多的事件回調(diào)函數(shù)，每次都要重新判斷fnList的長(zhǎng)度f(wàn)or(var i = 0; i<fnList.length; i++){// 在document作用域下執(zhí)行回調(diào)函數(shù)，并傳遞事件對(duì)象fnList[i].call(document,e)}// 執(zhí)行完畢，切換ready狀態(tài)ready = true;// 移除所有回調(diào)函數(shù)fnList = null;fnEvent = e; } // 注冊(cè)事件 // 能力檢查 if(document.addEventListener){document.addEventListener('DOMContentLoaded',handler,false)document.addEventListener('readystatechange',handler,false)window.addEventListener('load',handler,false); }else if(document.attachEvent){document.attachEvent('onreadystatechange', handler);window.attachEvent('onload', handler) } // 返回真正的DOMReady方法 return function(fn) {if(ready) {fn.call(document,fnEvent)}else {fnList.push(fn)} } })() // 測(cè)試 // 訂閱load事件 window.onload = function() {console.log('load') } // 訂閱ready事件 DOMReady(function(){ console.log('ready') })

28.jquery中的attr和prop區(qū)別

對(duì)于html元素本身就帶有的固定屬性，在處理時(shí)，使用prop方法；對(duì)于html元素自定義的dom屬性時(shí)，在處理時(shí)，使用attr方法。

29.$.map()和$.each()區(qū)別

$.map()方法用來(lái)遍歷操作數(shù)組和對(duì)象，返回的是一個(gè)新的數(shù)組； $.map()方法適用于將數(shù)組或?qū)ο蟮拿總€(gè)項(xiàng)目映射到一個(gè)新數(shù)組中。

$.each()用于遍歷jquery對(duì)象，返回的是原來(lái)的數(shù)組，并不會(huì)返回一個(gè)新數(shù)組。

30. jquery中如何將一個(gè)jquery對(duì)象轉(zhuǎn)化為dom對(duì)象

jquery對(duì)象是一個(gè)數(shù)據(jù)對(duì)象， 可以用[index]的方法來(lái)得到相應(yīng)的dom對(duì)象

var $v = $('#v'); // jquery對(duì)象 console.log($v[0]); // dom對(duì)象

使用get(index)方法：

var $v = $("#v"); console.log($v.get(0)); // dom對(duì)象

31.jquery中監(jiān)聽(tīng)事件有幾種方式

4中事件監(jiān)聽(tīng)方式：bind(),live(),delegate(),on()；解除事件對(duì)應(yīng)的4種：unbind(),die(),undelegate(),off()。

32.jquery中個(gè)get和eq區(qū)別

• get()取得其中一個(gè)匹配的元素，num表示取得第幾個(gè)匹配的元素,get()多針對(duì)集合元素，返回的是dom對(duì)象組成的數(shù)組
• eq()獲取第n個(gè)元素，下標(biāo)都從0開(kāi)始，返回的是一個(gè)jquery對(duì)象。

33.jquery中的事件冒泡，怎么執(zhí)行，如何停止冒泡事件

事件冒泡從里面往外面開(kāi)始傳遞。在jquery中stopPropagation()方法用于停止冒泡，兼容所有瀏覽器

34.jquery中的hover和toggle區(qū)別

hover()和toggle()都是jquery中的兩個(gè)合成事件。

• hover()方法用于模擬光標(biāo)懸停事件
• toggle()方法用于連續(xù)交替單擊事件

35. 你使用過(guò)哪些數(shù)據(jù)格式

html格式，json格式，xml格式：html片段提供外部數(shù)據(jù)，一般來(lái)說(shuō)是最簡(jiǎn)單的；如果數(shù)據(jù)需要復(fù)用，那么在性能和文件大小方面具有優(yōu)勢(shì)的是json；當(dāng)遠(yuǎn)程應(yīng)用程序未知時(shí)，xml能為數(shù)據(jù)的操作性提供最可靠的保證。

36.選擇器中id，class有什么區(qū)別

• id，在網(wǎng)頁(yè)中每個(gè)id名稱只能有一次，class可以重復(fù)使用

37.為了將單選按鈕組的第二個(gè)選框設(shè)置為選中狀態(tài)，如何設(shè)置

$('input[name=items]').get(1).checked = true

38.$.getScript()方法和$.getJson()方法有什么區(qū)別

• $.getScript()方法可以直接加載javascript文件，并且不需要對(duì)javascript文件進(jìn)行處理，javascript文件會(huì)自動(dòng)執(zhí)行。
• $.getJson()是用于加載json文件的，用法和$.getScript()一樣。

39.jquery或zepto源碼有哪些地方覺(jué)得不錯(cuò)

jquery源碼封裝在一個(gè)匿名函數(shù)的自執(zhí)行環(huán)境中，有助于防止變量的全局污染。

通過(guò)傳入window對(duì)象參數(shù)，可以使window對(duì)象作為局部變量使用。

好處是當(dāng)jquery訪問(wèn)window對(duì)象的時(shí)候，就不用將作用域鏈退回到頂層作用域了，從而可以更快地訪問(wèn)window對(duì)象，同樣，傳入undefined參數(shù)，可以降低undefined被重定義的風(fēng)險(xiǎn)。

(function (window, undefined) {window.jQuery = window.$ = jQuery })(window);

jquery將一些原型屬性和方法封裝在了jQuery.prototype中，為了方便對(duì)jQuery.prototype的訪問(wèn)，將jQuery.prototype賦值給jQuery.fn。一些數(shù)組或?qū)ο蟮姆椒ń?jīng)常能使用到，jQuery將其保存為局部變量以提高訪問(wèn)速度。jQuery實(shí)現(xiàn)的鏈?zhǔn)秸{(diào)用可以節(jié)約代碼，所返回的都是同一個(gè)對(duì)象，可以提高開(kāi)發(fā)效率。

40.jQuery中的美元符號(hào)

$(document).ready(function(){//... }); jQuery(document).ready(function(){//... });

41.onload()函數(shù)和ready()函數(shù)的區(qū)別

• 可以在頁(yè)面中使用多個(gè)ready(),但只能使用一次onload()
• ready()函數(shù)在頁(yè)面dom元素加載完以后就會(huì)調(diào)用，而onload()函數(shù)則要在所有的關(guān)聯(lián)資源加載完畢后才會(huì)調(diào)用，要晚于ready()函數(shù)。

42.jQuery中有哪幾種常見(jiàn)的選擇器

基本選擇器；層次選擇器；過(guò)濾選擇器；屬性選擇器；子元素選擇器；表單選擇器；內(nèi)容選擇器；可見(jiàn)選擇器

43.使用jQuery將頁(yè)面上所有元素邊框設(shè)置為2px寬的虛線

<script language="javascript" type="text/javascript">$("*").css("border", "2px dotted red"); </script>

44.使用jQuery實(shí)現(xiàn)單擊按鈕時(shí)彈出一個(gè)對(duì)話框

<button class="btn">打開(kāi)彈框</button> jQuery: <script type="text/javascript">$(function(){$('.btn').click(function(){alert('success')})}) </script>

45.如何使用jquery編碼和解碼url

編碼時(shí)使用encodeURIComponent(url)，解碼時(shí)使用decodeURIComponent(url)

46.jquery中的delegate()函數(shù)有什么作用

delegate()是jquery中事件委托的語(yǔ)義化方法，會(huì)在以下兩種情況中使用到。

如果有一個(gè)父元素，需要給其下的子元素添加事件，這時(shí)可以使用delegate()了。

$("ul").delegate("li", "click", function(){$(this).hide(); });

當(dāng)元素在當(dāng)前頁(yè)面中不可用時(shí)，使用delegate()

47.如何禁用瀏覽器的前進(jìn)和后退按鈕

<script type="text/javascript" language="javascript">$(document).ready(function() {//前進(jìn)window.history.forward();//后退window.history.back();}); </script>

48.網(wǎng)頁(yè)上有5個(gè)<div>元素，如何使用jquery來(lái)選擇它們

可以使用標(biāo)簽選擇器來(lái)選擇所有的div元素，$("div")會(huì)返回一個(gè)包含5個(gè)div標(biāo)簽的jQuery對(duì)象。

49.如何在單擊一個(gè)按鈕時(shí)使用jQuery隱藏一副圖片

$('.demo-img').click(function() {$('.img').hide(); });

50. $(document).ready()是什么函數(shù)

ready()函數(shù)用于在文檔進(jìn)入ready狀態(tài)時(shí)執(zhí)行代碼。當(dāng)dom完全加載時(shí)，jquery允許你執(zhí)行代碼，使用$(document).ready()最大的好處在于它適用于所有瀏覽器，jQuery有助于解決跨瀏覽器兼容性問(wèn)題。

51.如何找到所有多選下拉框內(nèi)的選中項(xiàng)

可以用jquery選擇器獲取所有滿足multiple=true的<select>標(biāo)簽的選中項(xiàng)。

$('[multiple] :selected')

52.如何獲取頁(yè)面中所有多（復(fù)）選框內(nèi)選中選項(xiàng)的內(nèi)容

$('[multiple] :selected').each(function(index, dom){alert($(dom).text()) // text()方法返回選項(xiàng)的文本 })

53.$(this)和this關(guān)鍵字在jquery中的不同

$(this)返回一個(gè)jQuery對(duì)象，可以對(duì)它調(diào)用多個(gè)jQuery方法，比如用text()獲取文本，用on()綁定事件等。而this代表當(dāng)前元素，表示上下文中的當(dāng)前dom元素。

54.提取鏈接的href

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

55.能用jquery代碼選擇所有在段落內(nèi)部的超鏈接嗎

來(lái)選擇所有嵌套在段落p標(biāo)簽內(nèi)部的超鏈接a:

$('p a')

56.jquery中的detach()和remove()方法的區(qū)別

detach()和remove()方法都可以移除一個(gè)dom元素：

• remove()將元素自身移除的同時(shí)，也會(huì)移除元素內(nèi)部的一切，包括綁定的事件以及與該元素相關(guān)的jquery數(shù)據(jù)
• detach()雖然可以將元素自身移除，但是它不會(huì)刪除數(shù)據(jù)和綁定事件

57.如何利用jquery，來(lái)向一個(gè)元素添加或移除css類

用addClass()和removeClass()方法動(dòng)態(tài)地改變?cè)氐腸lass

58.使用cdn加載jquery庫(kù)的主要優(yōu)勢(shì)是什么

• 可以節(jié)省服務(wù)器帶寬
• 可以更快地下載jquery文件
• 如果瀏覽器已經(jīng)從同一個(gè)cdn上下載了jquery文件，再次打開(kāi)頁(yè)面時(shí)，不會(huì)再次下載

59.jQuery.ajax()和jQuery.get()方法之間的區(qū)別

• ajax()方法更強(qiáng)大，可配置性更強(qiáng)，可以指定等待多久，以及如何處理錯(cuò)誤
• get()方法只是ajax()方法中g(shù)et請(qǐng)求的簡(jiǎn)化方法

60.要是在一個(gè)jQuery事件處理程序里返回了false會(huì)怎么樣

這將會(huì)阻止事件向上冒泡以及默認(rèn)行為。

61.document.getElementbyId("myId")和$("#myId")哪個(gè)更高效

第一個(gè)，因?yàn)樗褂迷椒?#xff1b;而二是jQuery封裝的方法，要處理其外部的判斷邏輯

62.jQuery中的方法鏈?zhǔn)?#xff0c;使用的好處

方法鏈就是執(zhí)行完的方法返回的結(jié)果是當(dāng)前jQuery的實(shí)例化對(duì)象，可以繼續(xù)調(diào)用另一個(gè)方法。

63.如何用jquery將一個(gè)html元素添加到dom樹(shù)中

appendTo()方法，將一個(gè)html元素添加到dom樹(shù)中，使用它可以在指定的dom元素末尾添加一個(gè)現(xiàn)存的元素或者一個(gè)新的html元素。

append,appendTo,prepend,prependTo,after,insertAfter,before,insertBefore

64.你是如何使用jquery中的ajax的

使用load(),$.get(),$.post()，如果需要設(shè)定beforeSend提交前回調(diào)函數(shù)，error失敗后處理，success成功后處理以及complete請(qǐng)求完成后處理回調(diào)函數(shù)等，要使用$.ajax()

65.頁(yè)面導(dǎo)入樣式時(shí)，使用link和@import有什么區(qū)別？

區(qū)別：

link是HTML標(biāo)簽，@import是css提供的。

link引入的樣式頁(yè)面加載時(shí)同時(shí)加載，@import引入的樣式需等頁(yè)面加載完成后再加載。

link沒(méi)有兼容性問(wèn)題，@import不兼容ie5以下。

link可以通過(guò)js操作DOM動(dòng)態(tài)引入樣式表改變樣式，而@import不可以。

66.HTML全局屬性(global attribute)有哪些（包含H5）？

全局屬性：用于任何HTML5元素的屬性

accesskey:設(shè)置快捷鍵 class:為元素設(shè)置類標(biāo)識(shí) contenteditable:指定元素內(nèi)容是否可編輯 contextmenu:自定義鼠標(biāo)右鍵彈出上下文菜單內(nèi)容（僅firefox支持） data-*:為元素增加自定義屬性 dir：設(shè)置元素文本方向（默認(rèn)ltr；rtl） draggable:設(shè)置元素是否可拖拽 dropzone:設(shè)置元素拖放類型（copy|move|link,H5新屬性，主流均不支持） hidden:規(guī)定元素仍未或不在相關(guān) id:元素id，文檔內(nèi)唯一 lang:元素內(nèi)容的語(yǔ)言 spellcheck:是否啟動(dòng)拼寫(xiě)和語(yǔ)法檢查 style:行內(nèi)css樣式 tabindex:設(shè)置元素可以獲得焦點(diǎn)，通過(guò)tab導(dǎo)航 title:規(guī)定元素有關(guān)的額外信息 translate:元素和子孫節(jié)點(diǎn)內(nèi)容是否需要本地化（均不支持）

67.寫(xiě)一個(gè)方法去掉字符串中的空格

var str = ' abc d e f g '; function trim(str) {var reg = /\s+/g;if (typeof str === 'string') {var trimStr = str.replace(reg,'');}console.log(trimStr) } trim(str)

68.CSS3有哪些新增的特性？

邊框(borders):border-radius 圓角 box-shadow 盒陰影 border-image 邊框圖像背景:background-size 背景圖片的尺寸 background_origin 背景圖片的定位區(qū)域 background-clip 背景圖片的繪制區(qū)域漸變：linear-gradient 線性漸變 radial-gradient 徑向漸變文本效果;word-break word-wrap text-overflow text-shadow text-wrap text-outline text-justify轉(zhuǎn)換：2D轉(zhuǎn)換屬性transform transform-origin2D轉(zhuǎn)換方法translate(x,y) translateX(n) translateY(n) rotate(angle) scale(n) scaleX(n) scaleY(n) rotate(angle) matrix(n,n,n,n,n,n)3D轉(zhuǎn)換：3D轉(zhuǎn)換屬性transform transform-origin transform-style3D轉(zhuǎn)換方法translate3d(x,y,z) translateX(x) translateY(y) translateZ(z)scale3d(x,y,z) scaleX(x) scaleY(y) scaleZ(z)rotate3d(x,y,z,angle) rotateX(x) rotateY(y) rotateZ(z)perspective(n)過(guò)渡transition動(dòng)畫(huà)@Keyframes規(guī)則 animation彈性盒子(flexbox)多媒體查詢@media

69.用遞歸算法實(shí)現(xiàn)，數(shù)組長(zhǎng)度為5且元素的隨機(jī)數(shù)在2-32間不重復(fù)的值

var arr = new Array(5); var num = randomNumber(); var i = 0; randomArr(arr,num); function randomArr(arr,num) {if (arr.indexOf(num)< 0){arr[i] = num;i++;} else {num = randomNumber();}if (i>=arr.length){console.log(arr);return;}else{randomArr(arr,num)} } function randomNumber() {return Math.floor(Math.random()*31 + 2) }

70.寫(xiě)一個(gè)加密字符串的方法

僅支持瀏覽器端：function encode (str) {return btoa(encodeURIComponent(str)); }function decode (str) {return decodeURIComponent(atob(str)); }

71.瀏覽器內(nèi)多個(gè)標(biāo)簽頁(yè)之間的通信方式有哪些？

1.WebSocket （可跨域） 2.postMessage（可跨域） 3.SharedWorker 4.Server-Sent Events 5.localStorage 6.BroadcastChannel IE不支持 7.Cookies

72.簡(jiǎn)述下你理解的優(yōu)雅降級(jí)和漸進(jìn)增強(qiáng)

優(yōu)雅降級(jí)，先做好一個(gè)完善的具備完整體驗(yàn)的版本，再向下做兼容。

漸進(jìn)增強(qiáng)，先做好一個(gè)可以基本正常使用的版本，再慢慢豐富體驗(yàn)和內(nèi)容。

73.viewport常見(jiàn)設(shè)置都有哪些？

width 設(shè)置 layout viewport 的寬度，為一個(gè)正整數(shù)，或字符串"width-device" initial-scale 設(shè)置頁(yè)面的初始縮放值，為一個(gè)數(shù)字，可以帶小數(shù) minimum-scale 允許用戶的最小縮放值，為一個(gè)數(shù)字，可以帶小數(shù) maximum-scale 允許用戶的最大縮放值，為一個(gè)數(shù)字，可以帶小數(shù) height 設(shè)置 layout viewport 的高度，這個(gè)屬性對(duì)我們并不重要，很少使用 user-scalable 是否允許用戶進(jìn)行縮放，值為"no"或"yes", no 代表不允許，yes 代表允許

viewport 是在 meta 標(biāo)簽內(nèi)進(jìn)行控制。

// width=device-width, initial-scale=1.0 是為了兼容不同瀏覽器 <metaname="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

74.對(duì)比下px、em、rem有什么不同？

默認(rèn)情況下: 1em = 10px; 1rem = 16px

px是css中的邏輯像素，和移動(dòng)端的物理像素之間會(huì)有一個(gè)比值dpr
em是指相對(duì)于父元素的大小
rem中的r就是root，也就是相對(duì)于root元素的大小（html標(biāo)簽）

75.簡(jiǎn)要描述下什么是回調(diào)函數(shù)并寫(xiě)一個(gè)例子出來(lái)

dom.addEventerlisten('click',function(){// do something })

76.你對(duì)標(biāo)簽語(yǔ)義化的理解是什么？

見(jiàn)名知意，方便多人認(rèn)識(shí)，且命名統(tǒng)一，簡(jiǎn)潔，易于重構(gòu)代碼

77.在頁(yè)面上隱藏元素的方法有哪些？

display: none opacity: 0 visibility: hidden z-index: -9999999999999 transform: scale(0) margin-left: -100% position: relative; left: -100% width: 0; height: 0;

78.去除字符串中最后一個(gè)指定的字符

function trim(str) { if(typeof str === 'string'){ var trimStr = str.substring(0,str.length-1) } return trimStr; }

79.HTML5的文件離線儲(chǔ)存怎么使用，工作原理是什么？

localstorge 利用瀏覽器的本地存儲(chǔ)可以緩存信息 ，在創(chuàng)建數(shù)據(jù)的時(shí)候引入創(chuàng)建好的數(shù)據(jù)

//增加 localStorage.setItem('myCat', 'Tom'); //獲取 let cat = localStorage.getItem('myCat'); //刪除所有 localStorage.clear();

80.CSS選擇器有哪些？哪些屬性可以繼承？

選擇器 通配符 id class 標(biāo)簽 后代選擇器 子選擇器 兄弟選擇器 屬性選擇器 偽類選擇器 偽元素選擇器可以繼承的屬性font-size font-weight font-style font-family color

81.簡(jiǎn)述超鏈接target屬性的取值和作用

<a> 標(biāo)簽的 target 屬性規(guī)定在何處打開(kāi)鏈接文檔。

語(yǔ)法：<a target="value">

屬性值：

_blank 在新窗口中打開(kāi)被鏈接文檔。 _self 默認(rèn)。在相同的框架中打開(kāi)被鏈接文檔。 _parent 在父框架集中打開(kāi)被鏈接文檔。 _top 在整個(gè)窗口中打開(kāi)被鏈接文檔。 framename 在指定的框架中打開(kāi)被鏈接文檔。

82.CSS3新增偽類有哪些并簡(jiǎn)要描述

83.label都有哪些作用

<label for="hobby">愛(ài)好</label> <input id="hobby" type="checkbox" value="0">

<label>的作用

表示用戶界面中某個(gè)元素的說(shuō)明

增加命中區(qū)域，屏幕閱讀器可以讀出標(biāo)簽。使用輔助技術(shù)的用戶更容易理解輸入 哪些數(shù)據(jù)

利用label"模擬"button來(lái)解決不同瀏覽器原生button樣式不同的問(wèn)題

結(jié)合checkbox、radio表單元素實(shí)現(xiàn)純CSS狀態(tài)切換，這樣的實(shí)例就太多了。比如控制CSS動(dòng)畫(huà)播放和停止

input的focus事件會(huì)觸發(fā)錨點(diǎn)定位，我們可以利用label當(dāng)觸發(fā)器實(shí)現(xiàn)選項(xiàng)卡切換效果

84.用css創(chuàng)建一個(gè)三角形，并簡(jiǎn)述原理

width: 0; height: 0; margin: 100px auto; border-top: 50px solid transparent; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 50px solid red;

原理是寬高是兩邊固定，border不一樣，有顏色，且有top、right、bottom、left的選項(xiàng)進(jìn)行修改。在使用的時(shí)候需要寬高為零。三角形就需要數(shù)學(xué)知識(shí)（勾股定理），去考慮為等邊、全等。

<div class='rect'></div> <style>.rect {width: 0;height: 0;background-color: #fff;border-right: 100px solid rgb(34, 230, 220);border-left: 100px solid rgb(202, 146, 25);border-top: 100px solid rgb(29, 156, 194);border-bottom: 100px solid rgb(16, 204, 101);} </style>

創(chuàng)建一個(gè)div，寬高都為0，實(shí)現(xiàn)效果如下，發(fā)現(xiàn)border的四個(gè)邊都是一個(gè)三角形，要實(shí)現(xiàn)三角形只需將其中幾個(gè)邊background設(shè)置為transparent，即可得到三角形

<style>.rect {width: 0;height: 0;background-color: #fff;border-right: 100px solid transparent;border-left: 100px solid transparent;border-top: 100px solid rgb(29, 156, 194);border-bottom: 100px solid transparent;} </style>

85.Iframe 有什么好處，有什么壞處？國(guó)內(nèi)還有哪些知名網(wǎng)站仍用Iframe，為什么？有哪些原來(lái)用的現(xiàn)在拋棄了？又是為什么？

iframe原本的用法在現(xiàn)在看來(lái)是不合時(shí)宜的，問(wèn)題太多了，但是它的其他功能卻是不錯(cuò)的黑魔法。

• 用來(lái)實(shí)現(xiàn)長(zhǎng)連接
• 跨域通信
• 歷史記錄管理，解決ajax化網(wǎng)站響應(yīng)瀏覽器前進(jìn)后退按鈕的方案，在html5的history api不可用時(shí)作為一種替代。
• 純前端的utf8和gbk編碼互轉(zhuǎn)

現(xiàn)在，應(yīng)該使用 iframe 的例子如：

沙箱隔離。

引用第三方內(nèi)容。

獨(dú)立的帶有交互的內(nèi)容，比如幻燈片。

需要保持獨(dú)立焦點(diǎn)和歷史管理的子窗口，如復(fù)雜的Web應(yīng)用。

注：登錄彈窗用 iframe 未必合適。HTML標(biāo)準(zhǔn)新增了dialog元素，可能更適合。

86.簡(jiǎn)述你對(duì)BFC規(guī)范的理解

BFC 全稱“塊級(jí)格式化上下文”(Block Formatting Context)，對(duì)應(yīng)的還有 IFC。BFC 類似一個(gè)“結(jié)界”，如果一個(gè) DOM 元素具有 BFC，那么它內(nèi)部的子元素不會(huì)影響外面的元素；外面的元素也不會(huì)影響到其內(nèi)部元素。

最常見(jiàn)的例子就是清除 float 的 overflow: hidden; 屬性。overflow: hidden;會(huì)觸發(fā)元素的 BFC，因此其內(nèi)部的 float 元素不會(huì)影響到外部元素的布局。

觸發(fā) BFC 的條件：

<html> 根元素 float 不為 none overflow 為 auto,scroll,hidden display 的值為 table-cell, table-caption,inline-block 中任何一個(gè) position 的值不為 static 和 relativeBFC 可以實(shí)現(xiàn)更加健壯的自適應(yīng)布局。

參考文章：《CSS 世界》

87.統(tǒng)計(jì)某一字符或字符串在另一個(gè)字符串中出現(xiàn)的次數(shù)

var childInNums = parent.split(child).length - 1 function strCount(str, target) {let count = 0if (!target) return countwhile(str.match(target)) {str = str.replace(target, '')count++}return count }console.log(strCount('abcdef abcdef a', 'abc'))

88.清除浮動(dòng)的方式有哪些及優(yōu)缺點(diǎn)？

通過(guò)設(shè)置父標(biāo)簽overflow: auto

通過(guò)after偽類: {display: block; content: ''; clear: both;}

觸發(fā)BFC 或 clear: both

CSS盒子塌陷問(wèn)題解決方案解決方案

89.簡(jiǎn)要描述下JS有哪些內(nèi)置的對(duì)象

時(shí)間對(duì)象Date 字符串對(duì)象String 數(shù)學(xué)對(duì)象Math 數(shù)值對(duì)象Number 數(shù)組對(duì)象Array 函數(shù)對(duì)象Function 函數(shù)參數(shù)集合arguments 布爾對(duì)象Boolean 錯(cuò)誤對(duì)象Error 基礎(chǔ)對(duì)象Object

90.常見(jiàn)的瀏覽器內(nèi)核都有哪些？

內(nèi)核按功能可以分為渲染引擎和JS引擎。

我們常說(shuō)的瀏覽器內(nèi)核指代的是瀏覽器的渲染引擎。

IE : Trident safari（蘋果公司自帶瀏覽器）: webkit FireFox : Gecko Chrome : Blink ，JS引擎為V8引擎 Opera : Blink

91.盒模型的理解

盒模型主要有以下幾部分組成：

內(nèi)容（content） 內(nèi)邊距（padding） 邊框（border） 外邊框（margin）

盒模型分為兩種：

標(biāo)準(zhǔn)盒模型(w3c 盒模型) 標(biāo)準(zhǔn)盒模型的 width = content

IE 盒模型 IE 盒模型的 width = padding + border + content

默認(rèn)的情況下，盒子都是基于標(biāo)準(zhǔn)盒模型的盒子。

在 css3 中出現(xiàn)了 box-sizing 屬性，該屬性會(huì)改變默認(rèn)盒子的盒模型。該屬性的兩個(gè)屬性值分別表示為：content-box（標(biāo)準(zhǔn)盒模型）和 border-box（IE 盒模型）。

盒模型的理解

92.html5中的form怎么關(guān)閉自動(dòng)完成？

設(shè)置form的autocomplete屬性為off

93.::before和:after中單冒號(hào)和雙冒號(hào)的區(qū)別是什么

區(qū)別：偽元素在css1中已經(jīng)存在當(dāng)時(shí)用單冒號(hào)，css3時(shí)做了修訂用雙冒號(hào) ::before ::after表示偽元素用來(lái)區(qū)別偽類。作用：在元素前面（::before）和后面（::after）加內(nèi)容

【CSS】屬性content有什么作用呢？有哪些場(chǎng)景可以用到？

94.說(shuō)說(shuō)你對(duì)javascript的作用域的理解

1：全局作用域
2：局部作用域

在 ES5 之前，javascript 只有函數(shù)作用域而沒(méi)有塊級(jí)作用域的。在 if 或者 for 花括號(hào)中的變量實(shí)際在外層是可以被訪問(wèn)的。

for(var i = 0; i < 10; i++){var j=123} console.log(j) // 123;

不過(guò)使用 ES6 的 let 和 const 之后，就可以實(shí)現(xiàn)塊級(jí)作用域了。

var a = 1; function b(){var b = 2;console.log(a);function c(){// 內(nèi)部可以訪問(wèn)外部，而外層訪問(wèn)不到內(nèi)部var a = 4;var c = 3;console.log(a); // 4 不會(huì)污染console.log(b); // 2}c(); }console.log(b()); console.log(a);

95.http都有哪些狀態(tài)碼？

200 成功 301 重定向 304 (未修改) 自從上次請(qǐng)求后，請(qǐng)求的網(wǎng)頁(yè)未修改過(guò)。 服務(wù)器返回此響應(yīng)時(shí)，不會(huì)返回網(wǎng)頁(yè)內(nèi)容。 400 (錯(cuò)誤請(qǐng)求) 服務(wù)器不理解請(qǐng)求的語(yǔ)法。 403 (禁止) 服務(wù)器拒絕請(qǐng)求。 404 (未找到) 服務(wù)器找不到請(qǐng)求的網(wǎng)頁(yè)。 500 (服務(wù)器內(nèi)部錯(cuò)誤) 服務(wù)器遇到錯(cuò)誤，無(wú)法完成請(qǐng)求。 501 (尚未實(shí)施) 服務(wù)器不具備完成請(qǐng)求的功能。 例如，服務(wù)器無(wú)法識(shí)別請(qǐng)求方法時(shí)可能會(huì)返回此代碼。 502 (錯(cuò)誤網(wǎng)關(guān)) 服務(wù)器作為網(wǎng)關(guān)或代理，從上游服務(wù)器收到無(wú)效響應(yīng)。 503 (服務(wù)不可用) 服務(wù)器目前無(wú)法使用(由于超載或停機(jī)維護(hù))。 通常，這只是暫時(shí)狀態(tài)。 504 (網(wǎng)關(guān)超時(shí)) 服務(wù)器作為網(wǎng)關(guān)或代理，但是沒(méi)有及時(shí)從上游服務(wù)器收到請(qǐng)求。 505 (HTTP 版本不受支持) 服務(wù)器不支持請(qǐng)求中所用的 HTTP 協(xié)議版本。

96.為什么HTML5只需要寫(xiě)<!DOCTYPE HTML>就可以

因?yàn)?HTML5 與 HTML4 基于的基準(zhǔn)不同。

HTML4 基于 SGML 因此需要除了 DOCTYPE 外還需要引入 DTD 來(lái)告訴瀏覽器用什么標(biāo)準(zhǔn)進(jìn)行渲染。DTD 還分為標(biāo)準(zhǔn)模式、嚴(yán)格模式。如果什么都不寫(xiě)，就完全讓瀏覽器自我發(fā)揮，會(huì)變成怪異模式。

HTML5 不基于 SGML，因此后面就不要跟 DTD，但是需要 DOCTYPE 來(lái)規(guī)范瀏覽器的渲染行為。

注：SGML 是通用標(biāo)記語(yǔ)言的集合。其中有 HTML、XML，因此需要用 DTD 來(lái)指定使用那種規(guī)范。

97.什么是閉包？優(yōu)缺點(diǎn)分別是什么？

• 閉包：在局部作用域引用上層作用域（非全局）的變量
• 優(yōu)點(diǎn)：防止變量污染作用域
• 缺點(diǎn)：不釋放則會(huì)導(dǎo)致內(nèi)存泄漏

98.寫(xiě)一個(gè)數(shù)組去重的方法

一維

new set(...arr)

二維

arr.reduce((a,b)=>{return new set(...a.concat(b)) },[])

99.元素的alt和title有什么區(qū)別？

title屬性是一個(gè)標(biāo)記，它向每個(gè)元素添加補(bǔ)充信息。當(dāng)鼠標(biāo)指針?lè)旁谠厣蠒r(shí)，主要作用是顯示工具提示。

alt是為圖片指定替代文字的屬性

alt是在<img>中指定的屬性標(biāo)簽，表示圖像。

正如我寫(xiě)為替代文本一樣，它用于需要文本而不是圖像的情況。

• 如果盲人使用語(yǔ)音閱讀功能，則會(huì)大聲朗讀圖像的alt屬性中的文本。
• 當(dāng)由于鏈接斷開(kāi)而無(wú)法顯示圖像時(shí)，將顯示它。
• Google和Yahoo!等機(jī)器人抓取圖片的提示。

100.table的作用和優(yōu)缺點(diǎn)是什么呢？

table 用于表格數(shù)據(jù)的展示，并且很符合人們的直觀認(rèn)知。

在 div+css 布局流行之前，普遍使用 table 進(jìn)行布局。

table 布局的好處在于樣式好控制，特別是居中、對(duì)齊。缺點(diǎn)在于會(huì)多處非常多的 DOM 節(jié)點(diǎn)，會(huì)導(dǎo)致頁(yè)面加載變慢、不利于 SEO。也因此，在 CSS 成熟之后，table 布局馬上就變成歷史了。

101. typeof('abc')和typeof 'abc'都是string, 那么typeof是操作符還是函數(shù)？

假設(shè)typeof是函數(shù),則調(diào)用typeof(typeof)應(yīng)該返回一個(gè)字符串'function',但是實(shí)際操作會(huì)報(bào)錯(cuò),所以typeof不是函數(shù)

typeof 是操作符，明確定義在MDN當(dāng)中,作用是對(duì)后方表達(dá)式的返回做類型定義。

102.說(shuō)說(shuō)你對(duì)SVN和GIT的理解和區(qū)別

SVN是集中式，GIT是分布式

103.什么是FOUC？你是如何避免FOUC的？

FOUC：加載時(shí)樣式突然變化

原因：由于在渲染HTML時(shí)，遇到CSS樣式表會(huì)重新渲染HTML

樣式表沒(méi)有放到head里面,使用了@import導(dǎo)入樣式

解決：盡量把樣式表放到body標(biāo)簽上面

104.css的屬性content有什么作用呢？

content屬性與 ::before 及 ::after 偽元素配合使用生成文本內(nèi)容

105."attribute"和"property"有什么不同？

• property是DOM中的屬性，是JavaScript里的對(duì)象
• attribute是HTML標(biāo)簽上的特性，它的值只能夠是字符串

106.寫(xiě)一個(gè)驗(yàn)證身份證號(hào)的方法

地址碼6位+年份碼4位+月份碼2位+日期碼2位+順序碼3位+校驗(yàn)碼1位

107.對(duì)于HTML表單輸入字段，disabled =“ disabled”和readonly =“ readonly”有什么區(qū)別？

相同點(diǎn)：都會(huì)使文本框變成只讀，不可編輯

disabled屬性在將input文本框變成只讀不可編輯的同時(shí)，還會(huì)使文本框變灰，但是readonly不會(huì)。

設(shè)置了readonly屬性的input元素依然可以獲取焦點(diǎn)，但是設(shè)置了disabled屬性的input元素沒(méi)有辦法獲取焦點(diǎn)

readonly只針對(duì)input和textarea有效，而disabled對(duì)于所有的表單元素都有效。

readonly：不可編輯、可復(fù)制、可選擇、可以接收焦點(diǎn)但不能被修改，后臺(tái)會(huì)接收到傳值

disabled：不可編輯、不可復(fù)制、不可選擇、不能接收焦點(diǎn)，后臺(tái)也不會(huì)接收到傳值

108.說(shuō)說(shuō)你對(duì)line-height是如何理解的？

line-height，又稱行高，指的是兩行文字基線之間的距離，又可以稱為這行文字所占的高度。

如圖紅色線即為基線

基線（baseline），指的是一行字橫排時(shí)下沿的基礎(chǔ)線，基線并不是漢字的下端沿，而是英文字母x的下端沿。

109.說(shuō)說(shuō)你對(duì)重繪和重排的理解，以及如何優(yōu)化？

瀏覽器加載網(wǎng)頁(yè)時(shí)會(huì)生成DOM樹(shù)和CSSOM樹(shù)

重繪：

當(dāng)盒子的位置、大小以及其他屬性，例如顏色、字體大小等都確定下來(lái)之后，瀏覽器便把這些原色都按照各自的特性繪制一遍，將內(nèi)容呈現(xiàn)在頁(yè)面上。重繪是指一個(gè)元素外觀的改變所觸發(fā)的瀏覽器行為，瀏覽器會(huì)根據(jù)元素的新屬性重新繪制，使元素呈現(xiàn)新的外觀。

觸發(fā)重繪的條件：改變?cè)赝庥^屬性。如：color，background-color，font-size等。

重排(回流)：

當(dāng)渲染樹(shù)中的一部分(或全部)因?yàn)樵氐囊?guī)模尺寸，布局，隱藏等改變而需要重新構(gòu)建, 這就稱為回流(reflow)。每個(gè)頁(yè)面至少需要一次回流，就是在頁(yè)面第一次加載的時(shí)候。

重繪和重排的關(guān)系：在回流的時(shí)候，瀏覽器會(huì)使渲染樹(shù)中受到影響的部分失效，并重新構(gòu)造這部分渲染樹(shù)，完成回流后，瀏覽器會(huì)重新繪制受影響的部分到屏幕中，該過(guò)程稱為重繪。

所以，重排必定會(huì)引發(fā)重繪，但重繪不一定會(huì)引發(fā)重排。

觸發(fā)重排的條件：任何頁(yè)面布局和幾何屬性的改變都會(huì)觸發(fā)重排

比如：

1、頁(yè)面渲染初始化(無(wú)法避免)

2、添加或刪除可見(jiàn)的DOM元素；

3、元素位置的改變，或者使用動(dòng)畫(huà)；

4、元素尺寸的改變——大小，外邊距，邊框；

5、瀏覽器窗口尺寸的變化（resize事件發(fā)生時(shí)）；

6、填充內(nèi)容的改變，觸發(fā)重排的條件：改變?cè)氐拇笮?位置 等如：width、height、pading、margin、position等，　添加刪除DOM操作等

重繪重排的代價(jià)：耗時(shí)，導(dǎo)致瀏覽器卡慢。

110.0.1 + 0.2、0.1 + 0.3和0.1 * 0.2分別等于多少？并解釋下為什么？

111.new操作符的理解是什么？手動(dòng)實(shí)現(xiàn)一個(gè)new方法

new 運(yùn)算符創(chuàng)建一個(gè)用戶定義的對(duì)象類型的實(shí)例或具有構(gòu)造函數(shù)的內(nèi)置對(duì)象類型之一

new Object()舉例:

• 創(chuàng)建一個(gè)新對(duì)象
• 把新對(duì)象的原型指向構(gòu)造函數(shù)的prototype
• 把構(gòu)造函數(shù)里的this指向新對(duì)象
• 返回這個(gè)新對(duì)象

112.jquery中是如何操作類的

用addClass()來(lái)追加類，用removeClass()來(lái)刪除類，用toggle()來(lái)切換類。

如何給jQuery動(dòng)態(tài)添加新的元素，如何給新生產(chǎn)的元素綁定事件

jQuery的html()可以給當(dāng)前元素添加新的元素。直接在元素還未生成前就綁定事件肯定是無(wú)效的，因?yàn)樗壎ǖ脑啬壳案静淮嬖凇Ｋ钥梢杂胠ive方法來(lái)動(dòng)態(tài)綁定事件。

113.使用jQuery中的動(dòng)畫(huà)

• hide()和show()可以同時(shí)修改多個(gè)樣式屬性，如高度，寬度，不透明度。
• fadeIn()和fadeOut()，fadeTo()只能改變不透明度。
• slideUp()和slideDown()，slideToggle()只能改變高度。
• animate()屬于自定義動(dòng)畫(huà)的方法，可以自定義屬性。

114.單擊超鏈接后自動(dòng)跳轉(zhuǎn)，單擊“提交”按鈕后表單會(huì)提交等，有時(shí)候，為了阻止默認(rèn)行為，怎么辦

使用event.preventDefault()或在事件處理函數(shù)中返回false，即是return false

115.你使用什么方法提交數(shù)據(jù)

一般使用$.post()方法，如果需要設(shè)定beforeSend提交前回調(diào)函數(shù)，error失敗后處理，success成功后處理complete請(qǐng)求完成后處理回調(diào)函數(shù)等，就會(huì)使用$.ajax()。

116.在ajax中獲取數(shù)據(jù)的主要有幾種方式

三種：html拼接的query數(shù)據(jù)，json數(shù)組對(duì)象數(shù)據(jù)，serialize()方法序列化后的表單數(shù)據(jù)。

117.jquery中使用過(guò)哪些插入節(jié)點(diǎn)的方法

內(nèi)部插入方法：append(), appendTo(), prepend(), prependTo()

外部插入方法：after(), insertAfter()，before(), insertBefore()

118.在jquery中，如何獲取或者設(shè)置屬性？如何刪除屬性

jquery中可以用attr()方法來(lái)獲取和設(shè)置元素屬性，可以用removeAttr()方法來(lái)刪除元素屬性。

119.如何設(shè)置和獲取html以及文本的值

使用html()方法，類似于innerHTML屬性，可以用它讀取或設(shè)置某個(gè)元素中的HTML內(nèi)容。

html()方法可以用于XHTML文檔，不能用于XML文檔。

text()方法可以用來(lái)讀取或設(shè)置某個(gè)元素中的文本內(nèi)容

val()方法可以用來(lái)設(shè)置或獲取元素的值

120.說(shuō)說(shuō)<script>、<script async>和<script defer>的區(qū)別

<script>標(biāo)簽，它具有兩個(gè)屬性的，async異步加載和defer延遲加載

<script>

當(dāng)script標(biāo)簽放在head中，并且這個(gè)script標(biāo)簽只有scr屬性引入外部js文件的情況下，HTML文件開(kāi)始渲染，直到命中script標(biāo)簽，此時(shí)解析將停止，并發(fā)現(xiàn)一個(gè)請(qǐng)求獲取該文件并執(zhí)行。執(zhí)行結(jié)束之前繼承渲染HTML標(biāo)簽。

<script async>

async表示的意思是異步加載JavaScript文件。

使用async會(huì)在HTML解析期間下載文件，并在下載完成后暫停HTML的解析，執(zhí)行下載的外部js文件，執(zhí)行后繼續(xù)解析HTML。

<script defer>

defer表示的意思是在HTML文檔解析之后在執(zhí)行加載完成的JavaScript文件。

它和async的區(qū)別是，同樣在HTML解析期間下載外部的js文件，但是下載完成后不會(huì)立即執(zhí)行js腳本文件，而是等到HTML解析完成后才執(zhí)行它。即在DOMContentLoaded之間執(zhí)行已下載的外部js文件

121.說(shuō)說(shuō)你對(duì)z-index的理解

z-index 屬性設(shè)定了一個(gè)定位元素及其后代元素或 flex 項(xiàng)目的 z-order。 當(dāng)元素之間重疊的時(shí)候， z-index 較大的元素會(huì)覆蓋較小的元素在上層進(jìn)行顯示。

122.包裹節(jié)點(diǎn)的方法有哪些？用包裹節(jié)點(diǎn)方法的好處？

包裹節(jié)點(diǎn)的方法：wrapAll()，wrap(), wrapInner()，在文檔中插入額外的結(jié)構(gòu)化標(biāo)記時(shí)可以使用這些包裹的方法，因?yàn)樗粫?huì)破壞原始文檔的語(yǔ)義。

123.如何實(shí)現(xiàn)自適應(yīng)布局

• 可以使用媒體查詢做響應(yīng)式頁(yè)面
• 用Bootstrap的柵格系統(tǒng)
• 使用彈性盒模型

124.在移動(dòng)端如何做好用戶體驗(yàn)

• 清晰的視覺(jué)縱線
• 信息的分組
• 極致的減法
• 利用選擇代替輸入
• 標(biāo)簽以及文字的排布方式
• 依靠明文確認(rèn)密碼
• 合理地利用鍵盤

125.如何解決長(zhǎng)時(shí)間按住頁(yè)面出現(xiàn)閃退的問(wèn)題

element {-webkit-touch-callout: none; }

126.解決iPhone以及iPad輸入框的默認(rèn)內(nèi)陰影的問(wèn)題

element {-webkit-appearance: none; }

127.如何解決安卓手機(jī)圓角失效問(wèn)題

通過(guò)background-clip:padding-box為失效的元素設(shè)置樣式

128.如何解決ios設(shè)置中input按鈕樣式會(huì)被默認(rèn)樣式覆蓋的問(wèn)題

input, textarea {border: 0;-webkit-appearance: none; }

129.如何解決移動(dòng)端click事件有300ms延遲問(wèn)題

300ms延遲導(dǎo)致用戶體驗(yàn)不好，為了解決這個(gè)問(wèn)題，一般在移動(dòng)端用touchstart, touchend, touchmove, tap模擬的事件來(lái)取代click事件。

130.如何解決移動(dòng)端html5中的date類型的input標(biāo)簽不支持placeholder屬性的問(wèn)題

<input placeholder="請(qǐng)輸入日期" type="text" onfocus="(this.type='date')" name="date">

131.如何禁止復(fù)制或選中文本

Element {-webkit-user-select: none;-moz-user-select: none;-khtml-user-select: none;user-select: none; }

132.解決上下拖動(dòng)滾動(dòng)條時(shí)的卡頓問(wèn)題

body {-webkit-overflow-scrolling: touch;overflow-scrolling: touch; }

133.說(shuō)說(shuō)XHTML

• 所有的 XHTML 元素必須被嵌套于 根元素中。
• XHTML 標(biāo)簽必須關(guān)閉
• XHTML 所有標(biāo)簽必須小寫(xiě)
• XHTML 標(biāo)簽必須正確嵌套

134.為什么10.toFixed(10)會(huì)報(bào)錯(cuò)？

原因是js解釋器對(duì).的解釋發(fā)生了歧義導(dǎo)致。它既可以理解為小數(shù)點(diǎn)，也可以理解為對(duì)方法的調(diào)用。按照規(guī)范，解釋器就把它判斷為一個(gè)小數(shù)點(diǎn)。

135.DOM和BOM有什么區(qū)別？

BOM指 瀏覽器對(duì)象模型

DOM指 文檔對(duì)象模型

注意: 只有 JS 的宿主環(huán)境是瀏覽器的時(shí)候才有 DOM 和 BOM ，在 Node 中是沒(méi)有這兩個(gè)對(duì)象的。

關(guān)系說(shuō)明如圖：

136.驗(yàn)證碼是為了解決什么問(wèn)題？

• 防止機(jī)器行為，確定是人為操作，比如登陸、發(fā)帖等。
• 保護(hù)服務(wù)器，比如12306買票的時(shí)候，各種搶購(gòu)的時(shí)候。

驗(yàn)證碼的類型：

圖形驗(yàn)證碼;手機(jī)驗(yàn)證碼

137.寫(xiě)一個(gè)獲取數(shù)組的最大值、最小值的方法

Math.max.apply(Array,[25,62,91,78,34,62]) // 91Math.min.apply(Array,[27,64,90,78,34,62]) // 27Array.prototype.max = function() {return Math.max.apply(null, this) }let arr = [1,2,3,4] Math.max(...arr) Math.min(...arr)

138.css的權(quán)重計(jì)算規(guī)則

139.輸入 URL 到頁(yè)面展示

可以帶出 緩存、DNS 解析、TCP 連接、HTTP 請(qǐng)求、重排重繪 等等非常多的子問(wèn)題.

140.rgba()和opacity

• opacity 是屬性，rgba()是函數(shù)，計(jì)算之后是個(gè)屬性值
• opacity 作用于元素和元素的內(nèi)容，內(nèi)容會(huì)繼承元素的透明度，取值0-1
• rgba() 一般作為背景色 background-color 或者顏色 color 的屬性值，透明度由其中的 alpha 值生效，取值0-1

141.對(duì)arguments的理解，它是數(shù)組嗎？

arguments是一個(gè)類數(shù)組對(duì)象，只能在非箭頭函數(shù)內(nèi)部訪問(wèn)，可以通過(guò)Array.from(arguments)將arguments轉(zhuǎn)化為數(shù)組，它和數(shù)組的區(qū)別是除了length和索引訪問(wèn)跟數(shù)組一樣之外沒(méi)有push和pop等方法。

142.說(shuō)說(shuō)bind、call、apply的區(qū)別？并手寫(xiě)實(shí)現(xiàn)一個(gè)bind的方法

call和apply都是為了解決改變this的指向; 作用都是相同的，只是傳參的方式不同。call可以接收一個(gè)參數(shù)列表，apply只接受一個(gè)參數(shù)數(shù)組

bind綁定完之后返回一個(gè)新的函數(shù)，不執(zhí)行。

Function.prototype.myCall = function (context = window) {context.fn = this;var args = [...arguments].slice(1);var result = context.fn(...args);delete context.fn;return result; }Function.prototype.myApply = function (context = window) {context.fn = this;var result// 判斷 arguments[1] 是不是 undefinedif (arguments[1]) {result = context.fn(...arguments[1])} else {result = context.fn()}delete context.fnreturn result; }Function.prototype.myBind = function (context) {if (typeof this !== 'function') {throw new TypeError('Error')}var _this = thisvar args = [...arguments].slice(1)return function F() {if (this instanceof F) {return new _this(...args, ...arguments)}return _this.apply(context, args.concat(...arguments))} }

143.說(shuō)說(shuō)你對(duì)this的理解

全局this 是window;函數(shù)this 是調(diào)用者;構(gòu)造函數(shù)的this 是new 之后的新對(duì)象,call 和 apply bind的this第一個(gè)參數(shù)

144.如何解決塊屬性標(biāo)簽浮動(dòng)后，在設(shè)置水平margin的情況下，在ie6中顯示的margin比設(shè)置的大的問(wèn)題。

在float的標(biāo)簽樣式控制中加入display:inline，將其轉(zhuǎn)化為行內(nèi)屬性。

145.頁(yè)面中的圖片元素為什么默認(rèn)具有間距。

因?yàn)閕mg標(biāo)簽是行內(nèi)屬性標(biāo)簽，所以只要不超出容器的寬度，img標(biāo)簽都會(huì)排在一行里，但是部分瀏覽器的img標(biāo)簽之間會(huì)有個(gè)間距。

出現(xiàn)間距時(shí)的解決方法：

• 可以使用float屬性讓img浮動(dòng)布局
• 可以通過(guò)font-size屬性將空白字符大小設(shè)置成0
• 可以將圖片的display屬性設(shè)置成block

146.怎么實(shí)現(xiàn)盒模型

Element {// 標(biāo)準(zhǔn)盒模型 margin>border>padding>width(content)box-sizing: border-box;// ie盒模型 margin>width(border>padding>content)box-sizing: content-box; }

147.如何解決li元素內(nèi)出現(xiàn)浮動(dòng)元素時(shí)產(chǎn)生間隙的問(wèn)題

通過(guò)設(shè)置vertical-align：top/middle/bottom來(lái)解決

148.如何讓長(zhǎng)單詞以及較長(zhǎng)的url轉(zhuǎn)換

用word-break:break-all在詞內(nèi)換行。

149.如何解決display:inine-block在ie6，ie7下不兼容的問(wèn)題

設(shè)置float:left屬性

150.如何解決ie6不支持position:fixed屬性的問(wèn)題

ie6下用position:absolute和javascript來(lái)模擬，或者完全不用fixed屬性。

151.如何獲取自定義屬性數(shù)據(jù)

在ie下，可以使用獲取常規(guī)屬性的方法來(lái)獲取自定義屬性數(shù)據(jù)，也可以使用getAttribute()獲取自定義屬性數(shù)據(jù)。

在Firefox下，只能使用getAttribute()獲取自定義屬性數(shù)據(jù)。

所以要統(tǒng)一用getAttribute()獲取自定義屬性數(shù)據(jù)。

152.說(shuō)說(shuō)event.srcElement兼容問(wèn)題

在ie下，even對(duì)象有srcElement屬性，但是沒(méi)有target屬性。

在Firefox下，even對(duì)象有target屬性，但是沒(méi)有srcElement屬性。

通過(guò)使用srcObj = event.srcElement ? event.srcElement:event.target 這種方式兼容所有瀏覽器。

153.說(shuō)說(shuō)body載入問(wèn)題

• Firefox的body對(duì)象在body標(biāo)簽沒(méi)有被字體完全讀入之前就存在。

• ie的body對(duì)象則必須在body標(biāo)簽被瀏覽器完全讀入之后才存在。

154.如何實(shí)現(xiàn)元素水平居中

塊元素：

margin: 0 auto;

行內(nèi)元素：使用父元素選擇器{text-align:center;}

155.如何讓p元素垂直居中

用vertical-align:middle將行距增加到和整個(gè)p一樣高，然后插入文字，就垂直居中了。

156.margin的加倍問(wèn)題

設(shè)置為float的p在id下設(shè)置的margin會(huì)加倍，這是ie6中都存在的一個(gè)bug。解決：在p里面加上：display:inline

.demo {float: left;margin: 5px;display: inline; }

157.如何解決ie6下圖片有空隙的問(wèn)題

可以改變html的排版，設(shè)置img為display:block，或者設(shè)置vertical-align屬性為vertical-align:top/bottom/middle/text-bottom

158.如何讓文本與文本輸入框?qū)R

可以為輸入框添加vertical-algin: middle屬性。

159.解決ie無(wú)法設(shè)置滾動(dòng)條顏色的問(wèn)題

將body換成html

160.解決form標(biāo)簽邊距兼容性問(wèn)題

ul, form {margin: 0;padding: 0; }

161.構(gòu)造函數(shù)的特點(diǎn)

構(gòu)造函數(shù)的函數(shù)名首字母大寫(xiě)，構(gòu)造函數(shù)類似于一個(gè)模板，可以使用new關(guān)鍵字執(zhí)行構(gòu)造函數(shù)，創(chuàng)建實(shí)例化對(duì)象。

162.javascript中繼承的實(shí)現(xiàn)方法

子類的實(shí)例可以共享父類的方法，子類可以覆蓋從父類擴(kuò)展來(lái)的方法。

163.如何通過(guò)new構(gòu)造對(duì)象。

創(chuàng)建一個(gè)新的對(duì)象，這個(gè)對(duì)象的類型是object,將this變量指向該對(duì)象；將對(duì)象的原型指向該構(gòu)造函數(shù)的原型；執(zhí)行構(gòu)造函數(shù)，通過(guò)this對(duì)象，為實(shí)例化對(duì)象添加自身屬性方法；將this引用的新創(chuàng)建的對(duì)象返回。

function demo(dada) {var obj = {};// this = obj;obj.__proto__ = dada.prototype;Work.call(obj);return obj }

164.面向?qū)ο蟮奶匦?/h3>

抽象；封裝；繼承；多態(tài)

165.面向?qū)ο缶幊倘筇攸c(diǎn)概述

封裝：將描述同一個(gè)對(duì)象的屬性和方法定義在一個(gè)對(duì)象中。

繼承：父對(duì)象中的屬性和方法被子對(duì)象使用。

多態(tài)，同一個(gè)對(duì)象在不同情況下呈現(xiàn)不同的形態(tài)：重載（同一方法名，根據(jù)傳入的參數(shù)不同，而執(zhí)行不同操作）；重寫(xiě)（子對(duì)象在繼承父對(duì)象的 屬性或方法后，重新定義一個(gè)新的屬性或方法，來(lái)覆蓋從父對(duì)象中繼承的屬性或方法）

166.this通常的指向

在運(yùn)行時(shí)，this關(guān)鍵字指向正在調(diào)用該方法的對(duì)象

167.實(shí)現(xiàn)對(duì)象的繼承

Object.setPrototypeOf(子對(duì)象，父對(duì)象) 構(gòu)造函數(shù).prototype = 對(duì)象 var demo = Object.create(obj)

168.JSONP實(shí)現(xiàn)跨域

在html中，動(dòng)態(tài)插入script標(biāo)簽，通過(guò)script標(biāo)簽引入一個(gè)javascript文件，這個(gè)javascript文載入成功后會(huì)執(zhí)行在url參數(shù)中指定的函數(shù)，并且會(huì)把需要的json數(shù)據(jù)作為參數(shù)傳入。

169.ajax請(qǐng)求

function ajax(url,fn){var xhr = new XMLHttpRequest();xhr.onreadystatechange = function() {if(xhr.readyState === 4){if(xhr.status === 200){fn && fn(JSON.parse(xhr.responseText));}}}xhr.open('GET',url, true);xhr.send(null); }

170.異步加載的方式

• 設(shè)置defer屬性，延遲腳本執(zhí)行，只支持ie。
• 設(shè)置async屬性，異步加載腳本。
• 創(chuàng)建script標(biāo)簽，并插入DOM中，頁(yè)面渲染完成后，執(zhí)行回調(diào)函數(shù)。

點(diǎn)贊、收藏和評(píng)論

我是Jeskson(達(dá)達(dá)前端)，感謝各位人才的：點(diǎn)贊、收藏和評(píng)論，我們下期見(jiàn)！(如本文內(nèi)容有地方講解有誤，歡迎指出?謝謝，一起學(xué)習(xí)了)

我們下期見(jiàn)！

文章持續(xù)更新，可以微信搜一搜「 程序員哆啦A夢(mèng) 」第一時(shí)間閱讀，回復(fù)【資料】有我準(zhǔn)備的一線大廠資料，本文 http://www.dadaqianduan.cn/#/ 已經(jīng)收錄

github收錄，歡迎Star：https://github.com/webVueBlog/WebFamily

總結(jié)

以上是生活随笔為你收集整理的看不完的那种！前端170面试题+答案学习整理（良心制作）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。