言情小说君子以泽,有声小说打包下载

摘要：事件如何使用事件，以及和標(biāo)準(zhǔn)事件模型之間存在的差別以及常用的事件委托。模擬老式瀏覽器的行為以防止站點(diǎn)無(wú)法工作。首先，巧妙的使用這一標(biāo)記，將游覽器從所有情況中分離出來(lái)。搜索引擎的爬蟲(chóng)依賴于標(biāo)記來(lái)確定上下文和各個(gè)關(guān)鍵字的權(quán)重，利于。

面試題目：根據(jù)你的等級(jí)和職位變化，入門(mén)級(jí)到專家級(jí)：范圍↑、深度↑、方向↑、新技術(shù)↑。

題目類型：技術(shù)視野、項(xiàng)目細(xì)節(jié)、理論知識(shí)題，算法題，開(kāi)放性題，案例題。

進(jìn)行追問(wèn)：可以確保問(wèn)到你開(kāi)始不懂或面試官開(kāi)始不懂為止，這樣可以大大延展題目的區(qū)分度和深度，知道你的實(shí)際能力。因?yàn)檫@種關(guān)聯(lián)知識(shí)是長(zhǎng)時(shí)間的學(xué)習(xí)，絕對(duì)不是臨時(shí)抱佛腳得來(lái)的。

言語(yǔ)態(tài)度：回答問(wèn)題再棒，面試官（可能是你的直接領(lǐng)導(dǎo)面試），會(huì)考慮我要不要這個(gè)人做我的同事？做我的員工？所以態(tài)度很重要。（感覺(jué)更像是相親）

硬知識(shí)才能：資深的工程師能把a(bǔ)bsolute和relative弄混，這樣的人不要也罷，因?yàn)閳F(tuán)隊(duì)需要的你這個(gè)人具有可以依靠的才能（靠譜）。

css:層疊樣式表(Cascading Style Sheets)對(duì)Web標(biāo)準(zhǔn)的理解、瀏覽器內(nèi)核差異、兼容性、hack、CSS基本功：布局、盒子模型、浮動(dòng)和定位、選擇器優(yōu)先級(jí)及使用、HTML5、CSS3、移動(dòng)端適應(yīng)

ECMAScript標(biāo)準(zhǔn)規(guī)范，描述這門(mén)語(yǔ)言的實(shí)現(xiàn)細(xì)節(jié)和標(biāo)準(zhǔn)。

基礎(chǔ)部分
數(shù)據(jù)類型、運(yùn)算符、結(jié)構(gòu)語(yǔ)句、面向?qū)ο?、函?shù)、正則表達(dá)式。

應(yīng)用部分
window對(duì)象、document對(duì)象、繼承、閉包、插件、作用域、跨域、原型鏈、模塊化、自定義事件、內(nèi)存泄漏、事件機(jī)制、異步裝載回調(diào)、模板引擎、Nodejs、JSON、ajax等

3、jQuery
對(duì)象的結(jié)構(gòu)、jQuery的方法掛在哪里、插件制作、jQuery的常用方法、選擇器、jQuery的事件用法

HTTP、安全、正則、優(yōu)化、重構(gòu)、響應(yīng)式、移動(dòng)端、團(tuán)隊(duì)協(xié)作、后臺(tái)相關(guān)、編輯器和自動(dòng)化工具、新技術(shù)、前端自動(dòng)化、可維護(hù)、SEO、UED、架構(gòu)、職業(yè)生涯等

作為一名前端工程師，無(wú)論工作年頭長(zhǎng)短都應(yīng)該必須掌握的知識(shí)點(diǎn)：

DOM結(jié)構(gòu) —— 兩個(gè)節(jié)點(diǎn)之間可能存在哪些關(guān)系以及如何在節(jié)點(diǎn)之間任意移動(dòng)。

DOM操作 ——如何添加、移除、移動(dòng)、復(fù)制、創(chuàng)建和查找節(jié)點(diǎn)等。

事件 —— 如何使用事件，以及IE和標(biāo)準(zhǔn)DOM事件模型之間存在的差別,以及常用的事件委托。

XMLHttpRequest —— 這是什么、怎樣完整地執(zhí)行一次GET請(qǐng)求、怎樣檢測(cè)錯(cuò)誤。

嚴(yán)格模式與混雜模式 —— 如何觸發(fā)這兩種模式，區(qū)分它們有何意義。

盒模型 —— 外邊距、內(nèi)邊距和邊框之間的關(guān)系，及IE8以下版本的瀏覽器中的盒模型

塊級(jí)元素與行內(nèi)元素 —— 怎么用CSS控制它們、以及如何合理的使用它們

浮動(dòng)元素——怎么使用它們、它們有什么問(wèn)題以及怎么解決這些問(wèn)題。

HTML與XHTML——二者有什么區(qū)別，你覺(jué)得應(yīng)該使用哪一個(gè)并說(shuō)出理由。

備注：
根據(jù)自己需要選擇性閱讀，面試題是對(duì)理論知識(shí)的總結(jié)，讓自己學(xué)會(huì)應(yīng)該如何表達(dá)。資料答案不夠正確和全面，歡迎補(bǔ)充答案、題目；最好是現(xiàn)在網(wǎng)上沒(méi)有的。格式不斷修改更新中。

標(biāo)簽閉合、標(biāo)簽小寫(xiě)、不亂嵌套、使用外鏈css和js、結(jié)構(gòu)行為表現(xiàn)的分離。

xhtml和html有什么區(qū)別?

一個(gè)是功能上的差別
主要是XHTML可兼容各大瀏覽器、手機(jī)以及PDA，并且瀏覽器也能快速正確地編譯網(wǎng)頁(yè)。

另外是書(shū)寫(xiě)習(xí)慣的差別。
XHTML 元素必須被正確地嵌套，閉合，區(qū)分大小寫(xiě)，文檔必須擁有根元素

聲明位于文檔中的最前面，處于標(biāo)簽之前。告知瀏覽器的解析器，用什么文檔類型規(guī)范來(lái)解析這個(gè)文檔

嚴(yán)格模式的排版和 JS 運(yùn)作模式是以該瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行。

在混雜模式中，頁(yè)面以寬松的向后兼容的方式顯示。模擬老式瀏覽器的行為以防止站點(diǎn)無(wú)法工作。 DOCTYPE不存在或格式不正確會(huì)導(dǎo)致文檔以混雜模式呈現(xiàn)。

CSS規(guī)范規(guī)定，每個(gè)元素都有display屬性，確定該元素的類型，每個(gè)元素都有默認(rèn)的display值，比如div默認(rèn)display屬性值為“block”，成為“塊級(jí)”元素； span默認(rèn)display屬性值為“inline”，是“行內(nèi)”元素。

行內(nèi)元素有：a b span img input select strong（強(qiáng)調(diào)的語(yǔ)氣）

頁(yè)面被加載的時(shí)，link會(huì)同時(shí)被加載，而@import引用的CSS會(huì)等到頁(yè)面被加載完再加載;

import只在IE5以上才能識(shí)別，而link是XHTML標(biāo)簽，無(wú)兼容問(wèn)題;

IE瀏覽器的內(nèi)核Trident、Mozilla的Gecko、Chrome的Blink（WebKit的分支）、Opera內(nèi)核原為Presto，現(xiàn)為Blink。

常見(jiàn)兼容性問(wèn)題？

png24位的圖片在iE6瀏覽器上出現(xiàn)背景，解決方案是做成PNG8。

瀏覽器默認(rèn)的margin和padding不同。解決方案是加一個(gè)全局的*{margin:0;padding:0;}來(lái)統(tǒng)一,，但是全局效率很低，一般是如下這樣解決：

IE6雙邊距bug:塊屬性標(biāo)簽float后，又有橫行的margin情況下，在ie6顯示margin比設(shè)置的大。
浮動(dòng)ie產(chǎn)生的雙倍距離#box{ float:left; width:10px; margin:0 0 0 100px;}這種情況之下IE會(huì)產(chǎn)生20px的距離，解決方案是在float的標(biāo)簽樣式控制中加入 ——_display:inline;將其轉(zhuǎn)化為行內(nèi)屬性。(_這個(gè)符號(hào)只有ie6會(huì)識(shí)別)漸進(jìn)識(shí)別的方式，從總體中逐漸排除局部。首先，巧妙的使用“9”這一標(biāo)記，將IE游覽器從所有情況中分離出來(lái)。接著，再次使用“+”將IE8和IE7、IE6分離開(kāi)來(lái)，這樣IE8已經(jīng)獨(dú)立識(shí)別。

IE下,可以使用獲取常規(guī)屬性的方法來(lái)獲取自定義屬性,也可以使用getAttribute()獲取自定義屬性;Firefox下,只能使用getAttribute()獲取自定義屬性.解決方法:統(tǒng)一通過(guò)getAttribute()獲取自定義屬性.

IE下,even對(duì)象有x,y屬性,但是沒(méi)有pageX,pageY屬性;Firefox下,event對(duì)象有pageX,pageY屬性,但是沒(méi)有x,y屬性.

解決方法：（條件注釋）缺點(diǎn)是在IE瀏覽器下可能會(huì)增加額外的HTTP請(qǐng)求數(shù)。

Chrome 中文界面下默認(rèn)會(huì)將小于 12px 的文本強(qiáng)制按照 12px 顯示,可通過(guò)加入 CSS 屬性-webkit-text-size-adjust: none;?解決.超鏈接訪問(wèn)過(guò)后hover樣式就不出現(xiàn)了被點(diǎn)擊訪問(wèn)過(guò)的超鏈接樣式不在具有hover和active了解決方法是改變CSS屬性的排列順序:L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}

HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集，主要是關(guān)于圖像，位置，存儲(chǔ)，多任務(wù)、畫(huà)布、強(qiáng)后臺(tái)相關(guān)技術(shù)等功能的增加。他的新的定義為：一套新的javascriptAPI和若干小的對(duì)html結(jié)構(gòu)的改動(dòng)。

繪畫(huà) canvas
用于媒介回放的 video 和 audio 元素。本地離線存儲(chǔ) localStorage 長(zhǎng)期存儲(chǔ)數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失；sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除。語(yǔ)意化更好的內(nèi)容元素，比如 article、footer、header、nav、section。表單控件，calendar、date、time、email、url、search。新的技術(shù)webworker, websockt, Geolocation

移除的元素
純表現(xiàn)的元素：basefont，big，center，font, s，strike，tt，u；對(duì)可用性產(chǎn)生負(fù)面影響的元素：frame，frameset，noframes；支持HTML5新標(biāo)簽：

IE8/IE7/IE6支持通過(guò)document.createElement方法產(chǎn)生的標(biāo)簽，
可以利用這一特性讓這些瀏覽器支持HTML5新標(biāo)簽，瀏覽器支持新標(biāo)簽后，還需要添加標(biāo)簽?zāi)J(rèn)的樣式：

當(dāng)然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

html語(yǔ)義化就是讓頁(yè)面的內(nèi)容結(jié)構(gòu)化，便于對(duì)瀏覽器、搜索引擎解析；

在沒(méi)有樣式CCS情況下也以一種文檔格式顯示，并且是容易閱讀的。

搜索引擎的爬蟲(chóng)依賴于標(biāo)記來(lái)確定上下文和各個(gè)關(guān)鍵字的權(quán)重，利于 SEO。

使閱讀源代碼的人對(duì)網(wǎng)站更容易將網(wǎng)站分塊，便于閱讀維護(hù)理解。

localStorage 長(zhǎng)期存儲(chǔ)數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失；

sessionStorage 數(shù)據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除。

(寫(xiě))描述一段語(yǔ)義的html代碼
（HTML5中新增加的很多標(biāo)簽（如：

、

和

等）就是基于語(yǔ)義化設(shè)計(jì)原則）

< div id="header"> 
    < h1>標(biāo)題< /h1> 
    < h2>專注Web前端技術(shù)< /h2> 
 < /div>

iframe有那些缺點(diǎn)？

*iframe會(huì)阻塞主頁(yè)面的Onload事件；

*iframe和主頁(yè)面共享連接池，而瀏覽器對(duì)相同域的連接有限制，所以會(huì)影響頁(yè)面的并行加載。使用iframe之前需要考慮這兩個(gè)缺點(diǎn)。如果需要使用iframe，最好是通過(guò)javascript 動(dòng)態(tài)給iframe添加src屬性值，這樣可以可以繞開(kāi)以上兩個(gè)問(wèn)題。

請(qǐng)描述一下 cookies，sessionStorage 和 localStorage 的區(qū)別？

cookie在瀏覽器和服務(wù)器間來(lái)回傳遞。

sessionStorage和localStorage不會(huì) sessionStorage和localStorage的存儲(chǔ)空間更大；

sessionStorage和localStorage有更多豐富易用的接口；

sessionStorage和localStorage各自獨(dú)立的存儲(chǔ)空間；

如何實(shí)現(xiàn)瀏覽器內(nèi)多個(gè)標(biāo)簽頁(yè)之間的通信? (阿里)

調(diào)用localstorge、cookies等本地存儲(chǔ)方式

webSocket如何兼容低瀏覽器？(阿里)

Adobe Flash Socket 、 ActiveX HTMLFile (IE) 、基于 multipart 編碼發(fā)送 XHR 、基于長(zhǎng)輪詢的 XHR

CSS

介紹一下CSS的盒子模型？

（1）有兩種， IE 盒子模型、標(biāo)準(zhǔn) W3C 盒子模型；IE的content部分包含了 border 和 pading;
（2）盒模型：內(nèi)容(content)、填充(padding)、邊界(margin)、邊框(border).

CSS 選擇符有哪些？哪些屬性可以繼承？?jī)?yōu)先級(jí)算法如何計(jì)算？ CSS3新增偽類有那些？

1.id選擇器（ # myid）
2.類選擇器（.myclassname）
3.標(biāo)簽選擇器（div, h1, p）
4.相鄰選擇器（h1 + p）
5.子選擇器（ul > li）
6.后代選擇器（li a）
7.通配符選擇器（ * ）
8.屬性選擇器（a[rel = “external”]）
9.偽類選擇器（a: hover, li: nth – child）

可繼承的樣式： font-size font-family color ul li dl dd dt;

不可繼承的樣式：border padding margin width height ;
優(yōu)先級(jí)為:
!important > id > class > tag
important 比內(nèi)聯(lián)優(yōu)先級(jí)高

優(yōu)先級(jí)就近原則，同權(quán)重情況下樣式定義最近者為準(zhǔn);

載入樣式以最后載入的定位為準(zhǔn);

CSS3新增偽類舉例

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

元素的每個(gè)

元素。

p:last-of-type 選擇屬于其父元素的最后

元素的每個(gè)

元素。

p:only-of-type 選擇屬于其父元素唯一的

元素的每個(gè)

?元素。

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

元素。

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

?元素。

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

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

如何居中div？

// 給div設(shè)置一個(gè)寬度，然后添加margin:0 auto屬性
div{
  width:200px;
  margin:0 auto;
}

前端頁(yè)面由哪三層構(gòu)成，分別是什么？作用是什么？

結(jié)構(gòu)層 Html 表示層 CSS 行為層 js

清除浮動(dòng)的幾種方式，各自的優(yōu)缺點(diǎn)

1.使用空標(biāo)簽清除浮動(dòng)clear:both（缺點(diǎn)，增加無(wú)意義的標(biāo)簽,讓人感覺(jué)很不爽）
2.使用overflow:auto（使用zoom:1用于兼容IE，缺點(diǎn)：內(nèi)部寬高超過(guò)父級(jí)div時(shí)，會(huì)出現(xiàn)滾動(dòng)條）
3.是用afert偽元素清除浮動(dòng)(IE8以上和非IE瀏覽器才支持，目前：大型網(wǎng)站都有使用，如：騰迅，網(wǎng)易，新浪等等)

如何居中一個(gè)浮動(dòng)元素？

1.確定容器的寬高寬500 高 300 的層
2.設(shè)置層的外邊距

 .div { 
  Width:500px ; 
 height:300px;//高度可以不設(shè)
  Margin: -150px 0 0 -250px;
  position:relative;相對(duì)定位
  background-color:pink;//方便看效果
  left:50%;
  top:50%;
}

列出display的值，說(shuō)明他們的作用。

block 象塊類型元素一樣顯示。

none 缺省值。象行內(nèi)元素類型一樣顯示。

inline-block 象行內(nèi)元素一樣顯示，但其內(nèi)容象塊類型元素一樣顯示。

list-item 象塊類型元素一樣顯示，并添加樣式列表標(biāo)記。

position的值， relative和absolute定位原點(diǎn)是？

*absolute：生成絕對(duì)定位的元素，相對(duì)于 static 定位以外的第一個(gè)父元素進(jìn)行定位。

*fixed：生成絕對(duì)定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位。

*relative：生成相對(duì)定位的元素，相對(duì)于其正常位置進(jìn)行定位。

static 默認(rèn)值。沒(méi)有定位，元素出現(xiàn)在正常的流中

（忽略 top, bottom, left, right z-index 聲明）。

inherit 規(guī)定從父元素繼承 position 屬性的值。

CSS3有哪些新特性？

CSS3實(shí)現(xiàn)圓角（border-radius:8px），陰影（box-shadow:10px），
對(duì)文字加特效（text-shadow、），線性漸變（gradient），旋轉(zhuǎn)（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋轉(zhuǎn),縮放,定位,傾斜
增加了更多的CSS選擇器多背景 rgba

為什么要初始化CSS樣式?

因?yàn)闉g覽器的兼容問(wèn)題，不同瀏覽器對(duì)有些標(biāo)簽的默認(rèn)值是不同的，如果沒(méi)對(duì)CSS初始化往往會(huì)出現(xiàn)瀏覽器之間的頁(yè)面顯示差異。

當(dāng)然，初始化樣式會(huì)對(duì)SEO有一定的影響，但魚(yú)和熊掌不可兼得，但力求影響最小的情況下初始化。最簡(jiǎn)單的初始化方法就是：?{padding: 0; margin: 0;} （不建議）
淘寶的樣式初始化：

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, 5b8b4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }

absolute的containing block計(jì)算方式跟正常流有什么不同？ position跟display、margin collapse、overflow、float這些特性相互疊加后會(huì)怎么樣？

（他們之間優(yōu)先級(jí)的關(guān)系）

綜上所述，1、可以把它看作是一個(gè)類似優(yōu)先級(jí)的機(jī)制， "position:absolute" 和 "position:fixed" 優(yōu)先級(jí)最高，有它存在的時(shí)候，浮動(dòng)不起作用，"display" 的值也需要調(diào)整； 2、元素的 "float" 特性的值不是 "none" 的時(shí)候或者它是根元素的時(shí)候，調(diào)整 "display" 的值； 3、非根元素，并且非浮動(dòng)元素，并且非絕對(duì)定位的元素，"display" 特性值同設(shè)置值。

這從另一個(gè)側(cè)面說(shuō)明了一個(gè)問(wèn)題：浮動(dòng)或絕對(duì)定位的元素，只能是塊元素或表格。

對(duì)BFC規(guī)范的理解？

（W3C CSS 2.1 規(guī)范中的一個(gè)概念,它決定了元素如何對(duì)其內(nèi)容進(jìn)行定位,以及與其他元素的關(guān) 系和相互作用。）

使用 CSS 預(yù)處理器嗎？喜歡那個(gè)？

SASS、LESS

如果需要手動(dòng)寫(xiě)動(dòng)畫(huà)，你認(rèn)為最小時(shí)間間隔是多久，為什么？（阿里）

多數(shù)顯示器默認(rèn)頻率是60Hz，即1秒刷新60次，所以理論上最小間隔為1/60＊1000ms ＝ 16.7ms

display:inline-block 什么時(shí)候會(huì)顯示間隙？(攜程)

移除空格、使用margin負(fù)值、使用font-size:0、letter-spacing、word-spacing

JavaScript

eval是做什么的？

它的功能是把對(duì)應(yīng)的字符串解析成JS代碼并運(yùn)行；應(yīng)該避免使用eval，不安全，非常耗性能（2次，一次解析成js語(yǔ)句，一次執(zhí)行）。

null，undefined 的區(qū)別？

目前，null和undefined基本是同義的，只有一些細(xì)微的差別。
null表示"沒(méi)有對(duì)象"，即該處不應(yīng)該有值。典型用法是：
（1）作為函數(shù)的參數(shù)，表示該函數(shù)的參數(shù)不是對(duì)象。
（2）作為對(duì)象原型鏈的終點(diǎn)。

Object.getPrototypeOf(Object.prototype)
// null

undefined表示"缺少值"，就是此處應(yīng)該有一個(gè)值，但是還沒(méi)有定義。典型用法是：
（1）變量被聲明了，但沒(méi)有賦值時(shí)，就等于undefined。
（2) 調(diào)用函數(shù)時(shí)，應(yīng)該提供的參數(shù)沒(méi)有提供，該參數(shù)等于undefined。
（3）對(duì)象沒(méi)有賦值的屬性，該屬性的值為undefined。
（4）函數(shù)沒(méi)有返回值時(shí)，默認(rèn)返回undefined。

var i;
i // undefined

function f(x){console.log(x)}
f() // undefined

var  o = new Object();
o.p // undefined

var x = f();
x // undefined

寫(xiě)一個(gè)通用的事件偵聽(tīng)器函數(shù)

    // event(事件)工具集，來(lái)源：github.com/markyun
  markyun.Event = {
      // 頁(yè)面加載完成后
      readyEvent : function(fn) {
          if (fn==null) {
              fn=document;
          }
          var oldonload = window.onload;
          if (typeof window.onload != "function") {
              window.onload = fn;
          } else {
              window.onload = function() {
                  oldonload();
                  fn();
              };
          }
      },
      // 視能力分別使用dom0||dom2||IE方式 來(lái)綁定事件
      // 參數(shù)： 操作的元素,事件名稱 ,事件處理程序
      addEvent : function(element, type, handler) {
          if (element.addEventListener) {
              //事件類型、需要執(zhí)行的函數(shù)、是否捕捉
              element.addEventListener(type, handler, false);
          } else if (element.attachEvent) {
              element.attachEvent("on" + type, function() {
                  handler.call(element);
              });
          } else {
              element["on" + type] = handler;
          }
      },
      // 移除事件
      removeEvent : function(element, type, handler) {
          if (element.removeEnentListener) {
              element.removeEnentListener(type, handler, false);
          } else if (element.datachEvent) {
              element.detachEvent("on" + type, handler);
          } else {
              element["on" + type] = null;
          }
      }, 
      // 阻止事件 (主要是事件冒泡，因?yàn)镮E不支持事件捕獲)
      stopPropagation : function(ev) {
          if (ev.stopPropagation) {
              ev.stopPropagation();
          } else {
              ev.cancelBubble = true;
          }
      },
      // 取消事件的默認(rèn)行為
      preventDefault : function(event) {
          if (event.preventDefault) {
              event.preventDefault();
          } else {
              event.returnValue = false;
          }
      },
      // 獲取事件目標(biāo)
      getTarget : function(event) {
          return event.target || event.srcElement;
      },
      // 獲取event對(duì)象的引用，取到事件的所有信息，確保隨時(shí)能使用event；
      getEvent : function(e) {
          var ev = e || window.event;
          if (!ev) {
              var c = this.getEvent.caller;
              while (c) {
                  ev = c.arguments[0];
                  if (ev && Event == ev.constructor) {
                      break;
                  }
                  c = c.caller;
              }
          }
          return ev;
      }
  };

Node.js的適用場(chǎng)景？

高并發(fā)、聊天、實(shí)時(shí)消息推送

介紹js的基本數(shù)據(jù)類型

number,string,boolean,object,undefined

Javascript如何實(shí)現(xiàn)繼承？

通過(guò)原型和構(gòu)造器

[“1″, “2”, “3”].map(parseInt) 答案是多少？

[1, NaN, NaN] 因?yàn)?parseInt 需要兩個(gè)參數(shù) (val, radix)，其中 radix 表示解析時(shí)用的基數(shù)。map 傳了 3 個(gè) (element, index, array)，對(duì)應(yīng)的 radix 不合法導(dǎo)致解析失敗。

注明：今天先更新到這里，有一些問(wèn)題沒(méi)有給出答案提示，大家可以先自行思考一下，明天會(huì)繼續(xù)更面試要點(diǎn)，期待你的到來(lái)！真心希望這些知識(shí)點(diǎn)可以幫到有需要的人。

注：原文有較大改動(dòng)

使用 keyframes, animation屬性，例如timing, delay,play state, animation-count, iteration count, direction,fill mode以及will-change等等創(chuàng)造動(dòng)畫(huà)魔法
作為設(shè)計(jì)者、開(kāi)發(fā)人員，除去精簡(jiǎn)的用戶界面，更好的頁(yè)面加載速度外，我們發(fā)現(xiàn)通過(guò)給界面添加動(dòng)畫(huà)效果，可以增加用戶與網(wǎng)站的互動(dòng)率，能夠更好的吸引用戶使用我們的產(chǎn)品。CSS3 相對(duì)于原先的基于 JavaScript 操作 Dom 實(shí)現(xiàn)動(dòng)畫(huà)的方式而已，CSS如今擁有更好的兼容性。所以本文就介紹CSS動(dòng)畫(huà)的一些基本知識(shí)。

keyframes

通過(guò)逐漸改變對(duì)象的運(yùn)動(dòng)狀態(tài)的方式，我們可以將動(dòng)畫(huà)應(yīng)用到到頁(yè)面上的任何對(duì)象上。然而利用keyframes特性，我們便可以控制動(dòng)畫(huà)對(duì)象每一階段的狀態(tài)。

@keyframes pulse {
0% {

transform: scale3d(1, 1, 1);

}
50%{

transform: scale3d(1.1, 1.1, 1.1);

}
100% {

transform: scale3d(1, 1, 1);

}
}
我們嘗試思考以下這個(gè)例子:

動(dòng)畫(huà)名（Animation name): pulse
3個(gè)步驟：0%（state time), 50%（x time）, 100% （end time）
CSS值：scale3d(x, y, z)

當(dāng)動(dòng)畫(huà)已經(jīng)在(@keyframes)中定義好后，我們可以控制以下幾樣?xùn)|西：

動(dòng)畫(huà)的持續(xù)時(shí)間
延遲多久動(dòng)畫(huà)開(kāi)始
動(dòng)畫(huà)的重復(fù)頻率
動(dòng)畫(huà)的方向
以下是實(shí)現(xiàn)示例：

button {
animation-duration: 1s;
animation-name: pulse;
}
在以上示例中，我們給一個(gè)Button添加了動(dòng)畫(huà) pulse，定義了持續(xù)時(shí)長(zhǎng)(duration)為1秒。如果我們調(diào)整了這個(gè)持續(xù)時(shí)長(zhǎng)屬性的值，則可以看到這個(gè)Button就會(huì)出現(xiàn)一個(gè)還不錯(cuò)的效果。如圖：

Demo地址：http://codepen.io/phyesix/pen...

1.動(dòng)畫(huà)時(shí)間（Animation Timing)

動(dòng)畫(huà)時(shí)間函數(shù)是用于決定我們希望動(dòng)畫(huà)在移動(dòng)周期內(nèi)要進(jìn)行加速和減速效果的時(shí)間。所以，為了實(shí)現(xiàn)這個(gè)效果，我們需要定義動(dòng)畫(huà)將要移動(dòng)的速度。這里有一些我們常見(jiàn)的動(dòng)畫(huà)時(shí)間屬性的選項(xiàng)值，例如：initial,inherit, ease, ease-in, ease-out, 還有l(wèi)inear等等。

引用：https://i.stack.imgur.com/

動(dòng)畫(huà)時(shí)間函數(shù)：左（ease）右（linear）以上的選項(xiàng)是很直接的調(diào)整動(dòng)畫(huà)的方法。然而通過(guò)自定義貝塞爾曲線的值，可以滿足你具體的動(dòng)畫(huà)時(shí)間需求。

關(guān)于如何使用貝塞爾曲線的方法我們可以通過(guò)查看Mozilla的開(kāi)發(fā)者網(wǎng)站

2.動(dòng)畫(huà)延時(shí) （Animation Delay）

動(dòng)畫(huà)延時(shí)常常應(yīng)用于當(dāng)我們需要對(duì)動(dòng)畫(huà)進(jìn)行的延時(shí)操作的時(shí)候。即當(dāng)某個(gè)動(dòng)畫(huà)被觸發(fā)了，然后延時(shí)1S后開(kāi)始執(zhí)行。例如：我們對(duì)“Send FeedBack"按鈕添加了延時(shí)處理：

動(dòng)畫(huà)延時(shí)：左(1秒), 右(2秒)

3.動(dòng)畫(huà)播放狀態(tài)（Animation Play State）

動(dòng)畫(huà)播放狀態(tài)常常用來(lái)控制動(dòng)畫(huà)是否需要暫?；蛘呃^續(xù)。

運(yùn)行（running)：動(dòng)畫(huà)繼續(xù)
暫停（paused）: 動(dòng)畫(huà)停止

Demo地址：http://codepen.io/phyesix/pen...

4.動(dòng)畫(huà)的循環(huán)次數(shù)

循環(huán)次數(shù)指單位時(shí)間內(nèi)，動(dòng)畫(huà)所重復(fù)執(zhí)行的次數(shù)。

無(wú)限(infinite)：無(wú)限循環(huán)
指定值(x)：動(dòng)畫(huà)重復(fù)x次
繼承(inherit)：繼承父級(jí)的循環(huán)次數(shù)

Demo地址：http://codepen.io/phyesix/pen...

5.動(dòng)畫(huà)方向（Animation Direction）

動(dòng)畫(huà)方向是用于指定動(dòng)畫(huà)對(duì)象的移動(dòng)方向。例如是從尺寸0%到100%，還是從100%到%0，又或者是從0%到100%的大小，然后反轉(zhuǎn)從100%到0%。

順序的(Normal): 指動(dòng)畫(huà)從0%到100%順序執(zhí)行
倒序(Reverse): 動(dòng)畫(huà)從100%作為起點(diǎn)位置開(kāi)始到0%倒序執(zhí)行
交替(Alernate): 動(dòng)畫(huà)先從0%變化到100%，然后從100%返回到0%
反轉(zhuǎn)-交替(Alternate-reverse): 動(dòng)畫(huà)從100%到0%倒序，然后又從0%前進(jìn)到100%正序執(zhí)行

Demo地址：http://codepen.io/phyesix/pen...

6.動(dòng)畫(huà)填充模式（Animation Fill Mode）

我們需要知道，當(dāng)動(dòng)畫(huà)執(zhí)行結(jié)束后，在動(dòng)畫(huà)執(zhí)行期間給對(duì)象元素所添加的樣式并不是永久的。這個(gè)樣式僅僅是在動(dòng)畫(huà)期間被應(yīng)用然后即被移除。關(guān)于動(dòng)畫(huà)應(yīng)用的模式，我們可以使用以下屬性值來(lái)表示：

向后（Backward）: 在動(dòng)畫(huà)處于0%時(shí)，樣式會(huì)被應(yīng)用到元素上
向前（Forward）: 在動(dòng)畫(huà)處于100%時(shí)，樣式會(huì)被應(yīng)用到元素上
兼得（Both): 在動(dòng)畫(huà)開(kāi)始和結(jié)束時(shí)樣式會(huì)被應(yīng)用
初始值（Initial): 設(shè)置這個(gè)屬性為默認(rèn)值

Demo地址：http://codepen.io/phyesix/pen...

7.將要改變（Will-Change）

非常感謝 Will-Change 特性?？梢酝ㄟ^(guò) Will-Change 屬性，我們可以在動(dòng)畫(huà)執(zhí)行前，提前通知瀏覽器上我們將要執(zhí)行動(dòng)畫(huà)的對(duì)象元素。這就允許了我們可以一次性的對(duì)元素的多個(gè)屬性進(jìn)行動(dòng)畫(huà)操作。從而減少大部分動(dòng)畫(huà)執(zhí)行期間潛在的性能損耗問(wèn)題。

button {
will-change: transform, opacity;
}
下面的代碼我聲明了將會(huì)對(duì)所有元素的所有屬性執(zhí)行動(dòng)畫(huà)，即使是非動(dòng)畫(huà)區(qū)域。

, ::before, *::after {

will-change: all

}
很顯然，上面的這種使用方法會(huì)帶來(lái)一些沒(méi)有必要的系統(tǒng)資源的占用和性能損耗。所以，我們應(yīng)該盡可能在所需要的元素上使用CSS動(dòng)畫(huà)。更多關(guān)于 Will-Change 的特性的信息請(qǐng)看：https://dev.opera.com/article...

4個(gè)超級(jí)屬性

在keyframes里，我們幾乎可以使用任何的CSS屬性。在如今的大部分瀏覽器中，你可以放心的使用 position, scale, rotation, opacity 等等屬性值。并且這4個(gè)屬性可以給動(dòng)畫(huà)效果帶來(lái)更高效，更好的性能表現(xiàn)。

引用：https://www.html5rocks.com/en...

結(jié)語(yǔ)

以上列舉的都是些實(shí)現(xiàn)CSS動(dòng)畫(huà)的基本屬性，一旦了解了這些基礎(chǔ)，從而更方便的開(kāi)始進(jìn)行動(dòng)畫(huà)創(chuàng)作。關(guān)于很多你可能感興趣的CSS動(dòng)畫(huà)應(yīng)用和實(shí)例資源，可以查看Codepen的CSS動(dòng)畫(huà)單元。

翻譯地址：http://imziv.com/blog/article...

原文鏈接：https://stories.jotform.com/h...

本文原文：http://div.io/topic/1932

好了，下面是廣告時(shí)間。前端學(xué)習(xí)群，入群即送學(xué)習(xí)資料?，F(xiàn)在還不滿，從速哦！入群加笑笑微信：iamaixiaoxiao。

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

獻(xiàn)給前端求職路上的你們（上）

xhtml和html有什么區(qū)別?

常見(jiàn)兼容性問(wèn)題？

相關(guān)文章

獻(xiàn)給前端求職路上的你們（下)

獻(xiàn)給前端求職路上的你們（下)

獻(xiàn)給前端求職路上的你們（上）

獻(xiàn)給前端求職路上的你們（上）

發(fā)表評(píng)論

0條評(píng)論

jackzou

男|高級(jí)講師

TA的文章

Verilog HDL 快速入門(mén)FPGA超級(jí)干貨第一季

neironvps：1G內(nèi)存/1核/10gSSD/1T流量，洛杉磯vps/瑞士vps/德國(guó)vps，$

網(wǎng)絡(luò)安全—xss

獻(xiàn)給前端求職路上的你們（上）

如何科學(xué)的組織React組件樣式

美化文件上傳按鈕自定義input file樣式

Codepen 每日精選（2018-4-11）

CSS筆記

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

獻(xiàn)給前端求職路上的你們（上）

xhtml和html有什么區(qū)別?

常見(jiàn)兼容性問(wèn)題？

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

常見(jiàn)兼容性問(wèn)題？