3月1日

1. 你做的頁面在哪些瀏覽器測試過，它們的內(nèi)核分別是什么？

• IE：trident內(nèi)核
• Firefox：gecko內(nèi)核
• Safari：webkit內(nèi)核
• Chrome：Blink內(nèi)核

2. DOCTYPE的作用是什么？

<!DOCTYPE>位于文檔的最頂部，它可以告訴瀏覽器按何種規(guī)范解析頁面。

3. Quirks模式是什么？它和Standards模式有什么區(qū)別？

IE6開始對CSS提供了更好的兼容，為了保證原來的一些頁面顯示正常，它將DTD視為參數(shù)，如果寫了則開啟Quirks模式（怪癖模式，詭異模式，怪異模式，向后兼容模式），IE6將用IE5.5的內(nèi)核來解析頁面。

在Quirks模式下，和Standards模式相比會(huì)有布局、樣式解析和腳本執(zhí)行三個(gè)方面的區(qū)別：

• Quirks模式下，設(shè)置一個(gè)元素的寬度和高度會(huì)包含padding和border。
• Quirks模式下，可以給span等行內(nèi)元素設(shè)置width和height。
• Quirks模式下，margin:0auto;無法使元素水平居中。

4. div+css的布局較table布局有什么優(yōu)點(diǎn)？

• 改版的時(shí)候更方便，只要改css文件。
• 頁面加載速度更快、結(jié)構(gòu)化清晰、頁面顯示簡潔。
• 表現(xiàn)與結(jié)構(gòu)相分離。
• 易于優(yōu)化（seo）搜索引擎更友好，排名更容易靠前。

5. img的alt與title有何異同？strong與em的異同？

• alt屬性是用來設(shè)置在圖片無法顯示時(shí)的替換文字，title屬性設(shè)置的是鼠標(biāo)懸停在圖片上時(shí)所顯示的提示信息，在IE瀏覽器下會(huì)在沒有設(shè)置title時(shí)把a(bǔ)lt當(dāng)成title顯示。

• strong：粗體強(qiáng)調(diào)標(biāo)簽，強(qiáng)調(diào)，表示內(nèi)容的重要性。

  em：斜體強(qiáng)調(diào)標(biāo)簽，更強(qiáng)烈強(qiáng)調(diào)，表示內(nèi)容的強(qiáng)調(diào)點(diǎn)。

6. 你能描述一下漸進(jìn)增強(qiáng)和優(yōu)雅降級之間的不同嗎?

漸進(jìn)增強(qiáng)：針對低版本瀏覽器進(jìn)行構(gòu)建頁面，保證最基本的功能，然后再針對高級瀏覽器進(jìn)行效果、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗(yàn)。

優(yōu)雅降級：一開始就構(gòu)建完整的功能，然后再針對低版本瀏覽器進(jìn)行兼容。

區(qū)別：優(yōu)雅降級是從復(fù)雜的現(xiàn)狀開始，并試圖減少用戶體驗(yàn)的供給，而漸進(jìn)增強(qiáng)則是從一個(gè)非?；A(chǔ)的，能夠起作用的版本開始，并不斷擴(kuò)充，以適應(yīng)未來環(huán)境的需要。降級（功能衰減）意味著往回看；而漸進(jìn)增強(qiáng)則意味著朝前看，同時(shí)保證其根基處于安全地帶。

7. 為什么利用多個(gè)域名來存儲(chǔ)網(wǎng)站資源會(huì)更有效？

• CDN緩存更方便
• 突破瀏覽器并發(fā)限制
• 節(jié)約cookie帶寬
• 節(jié)約主域名的連接數(shù)，優(yōu)化頁面響應(yīng)速度
• 防止不必要的安全問題

8. 請談一下你對網(wǎng)頁標(biāo)準(zhǔn)和標(biāo)準(zhǔn)制定機(jī)構(gòu)重要性的理解。

網(wǎng)頁標(biāo)準(zhǔn)和標(biāo)準(zhǔn)制定機(jī)構(gòu)都是為了能讓web發(fā)展的更“健康”，開發(fā)者遵循統(tǒng)一的標(biāo)準(zhǔn)，降低開發(fā)難度，開發(fā)成本，SEO也會(huì)更好做，也不會(huì)因?yàn)闉E用代碼導(dǎo)致各種BUG、安全問題，最終提高網(wǎng)站易用性。

9. 請描述一下cookies、sessionStorage和localStorage的區(qū)別？

• sessionStorage用于本地存儲(chǔ)一個(gè)會(huì)話（session）中的數(shù)據(jù)，這些數(shù)據(jù)只有在同一個(gè)會(huì)話中的頁面才能訪問并且當(dāng)會(huì)話結(jié)束后數(shù)據(jù)也隨之銷毀。因此sessionStorage不是一種持久化的本地存儲(chǔ)，僅僅是會(huì)話級別的存儲(chǔ)。
• localStorage用于持久化的本地存儲(chǔ)，除非主動(dòng)刪除數(shù)據(jù)，否則數(shù)據(jù)是永遠(yuǎn)不會(huì)過期的。
• Cookie的大小是受限的，并且每次你請求一個(gè)新的頁面的時(shí)候Cookie都會(huì)被發(fā)送過去，這樣無形中浪費(fèi)了帶寬，另外cookie還需要指定作用域，不可以跨域調(diào)用。WebStorage擁有setItem、getItem、removeItem、clear等方法，不像cookie需要前端開發(fā)者自己封裝setCookie、getCookie。但是Cookie也是不可以或缺的：Cookie的作用是與服務(wù)器進(jìn)行交互，作為HTTP規(guī)范的一部分而存在，而WebStorage僅僅是為了在本地“存儲(chǔ)”數(shù)據(jù)而生。

10. 簡述一下src與href的區(qū)別。

src用于替換當(dāng)前元素，href用于在當(dāng)前文檔和引用資源之間確立聯(lián)系。

• src是source的縮寫，指向外部資源的位置，指向的內(nèi)容將會(huì)嵌入到文檔中當(dāng)前標(biāo)簽所在位置；在請求src資源時(shí)會(huì)將其指向的資源下載并應(yīng)用到文檔內(nèi)，例如js腳本，img圖片和frame等元素。

  當(dāng)瀏覽器解析到該元素時(shí)，會(huì)暫停其他資源的下載和處理，直到將該資源加載、編譯、執(zhí)行完畢，圖片和框架等元素也如此，類似于將所指向資源嵌入當(dāng)前標(biāo)簽內(nèi)。這也是為什么將js腳本放在底部而不是頭部。

• href是HypertextReference的縮寫，指向網(wǎng)絡(luò)資源所在位置，建立和當(dāng)前元素（錨點(diǎn)）或當(dāng)前文檔（鏈接）之間的鏈接，如果我們在文檔中添加<link href='common.css' rel='stylesheet' />，那么瀏覽器會(huì)識(shí)別該文檔為css文件，就會(huì)并行下載資源并且不會(huì)停止對當(dāng)前文檔的處理。這也是為什么建議使用link方式來加載css，而不是使用@import方式。

11. 知道的網(wǎng)頁制作會(huì)用到的圖片格式有哪些？

• png-8，png-24，jpeg，gif，svg。

• WebP格式，谷歌（google）開發(fā)的一種旨在加快圖片加載速度的圖片格式。圖片壓縮體積大約只有JPEG的2/3，并能節(jié)省大量的服務(wù)器帶寬資源和數(shù)據(jù)空間。Facebook Ebay等知名網(wǎng)站已經(jīng)開始測試并使用WebP格式。

  在質(zhì)量相同的情況下，WebP格式圖像的體積要比JPEG格式圖像小40%。

12. 知道什么是微格式嗎？談?wù)劺斫?。在前端?gòu)建中應(yīng)該考慮微格式嗎？

微格式（Microformats）是一種讓機(jī)器可讀的語義化XHTML詞匯的集合，是結(jié)構(gòu)化數(shù)據(jù)的開放標(biāo)準(zhǔn)。是為特殊應(yīng)用而制定的特殊格式。

優(yōu)點(diǎn)：將智能數(shù)據(jù)添加到網(wǎng)頁上，讓網(wǎng)站內(nèi)容在搜索引擎結(jié)果界面可以顯示額外的提示。（應(yīng)用范例：豆瓣）

13. 在css/js代碼上線之后開發(fā)人員經(jīng)常會(huì)優(yōu)化性能，從用戶刷新網(wǎng)頁開始，一次js請求一般情況下有哪些地方會(huì)有緩存處理？

• dns緩存
• cdn緩存
• 瀏覽器緩存
• 服務(wù)器緩存

14. 一個(gè)頁面上有大量的圖片（大型電商網(wǎng)站），加載很慢，你有哪些方法優(yōu)化這些圖片的加載，給用戶更好的體驗(yàn)。

• 圖片懶加載，在頁面上的未可視區(qū)域可以添加一個(gè)滾動(dòng)條事件，判斷圖片位置與瀏覽器頂端的距離與頁面的距離，如果前者小于后者，優(yōu)先加載。
• 如果為幻燈片、相冊等，可以使用圖片預(yù)加載技術(shù)，將當(dāng)前展示圖片的前一張和后一張優(yōu)先下載。
• 如果圖片為css圖片，可以使用CSSsprite，SVGsprite，Iconfont、Base64等技術(shù)。
• 如果圖片過大，可以使用特殊編碼的圖片，加載時(shí)會(huì)先加載一張壓縮的特別厲害的縮略圖，以提高用戶體驗(yàn)。
• 如果圖片展示區(qū)域小于圖片的真實(shí)大小，則因在服務(wù)器端根據(jù)業(yè)務(wù)需要先行進(jìn)行圖片壓縮，圖片壓縮后大小與展示一致。

15. 你如何理解HTML結(jié)構(gòu)的語義化？

• 去掉或樣式丟失的時(shí)候能讓頁面呈現(xiàn)清晰的結(jié)構(gòu)。
• 屏幕閱讀器（如果訪客有視障）會(huì)完全根據(jù)你的標(biāo)記來“讀”你的網(wǎng)頁。
• 搜索引擎的爬蟲也依賴于標(biāo)記來確定上下文和各個(gè)關(guān)鍵字的權(quán)重。
• 便于團(tuán)隊(duì)開發(fā)和維護(hù)。

3月2日

1. 談?wù)勔郧岸私嵌瘸霭l(fā)，做好SEO需要考慮什么？

• 了解搜索引擎如何抓取網(wǎng)頁和如何索引網(wǎng)頁，以及如何對搜索結(jié)果進(jìn)行排序等。
• Meta標(biāo)簽優(yōu)化：主要包括主題（Title)，網(wǎng)站描述(Description)，和關(guān)鍵詞（Keywords）。還有一些其它的隱藏文字比如Author（作者），Category（目錄），Language（編碼語種）等。
• 如何選取關(guān)鍵詞并在網(wǎng)頁中放置關(guān)鍵詞，關(guān)鍵詞分析和選擇是SEO最重要的工作之一。首先要給網(wǎng)站確定主關(guān)鍵詞（一般在5個(gè)上下），然后針對這些關(guān)鍵詞進(jìn)行優(yōu)化，包括關(guān)鍵詞密度（Density），相關(guān)度（Relavancy），突出性（Prominency）等等。
• 了解主要的搜索引擎，不同的搜索引擎對頁面的抓取和索引、排序的規(guī)則都不一樣。
• 按點(diǎn)擊付費(fèi)的搜索引擎里面也大有優(yōu)化和排名的學(xué)問，你得學(xué)會(huì)用最少的廣告投入獲得最多的點(diǎn)擊。
• 發(fā)外鏈。
• 合理的標(biāo)簽使用。

2. 有哪些方式可以對一個(gè)DOM設(shè)置它的CSS樣式？

• 外部樣式表，引入一個(gè)外部css文件。
• 內(nèi)部樣式表，將css代碼放在<head>標(biāo)簽內(nèi)部。
• 內(nèi)聯(lián)樣式，將css樣式直接定義在HTML元素內(nèi)部。

3. CSS都有哪些選擇器？它們的權(quán)重如何計(jì)算？

!important > 行內(nèi)樣式 > id選擇器 > 類選擇器 > 標(biāo)簽選擇器 > 通配符 > 瀏覽器默認(rèn)樣式 > 繼承

4. CSS中可以通過哪些屬性定義，使得一個(gè)DOM元素不顯示在瀏覽器可視范圍內(nèi)？

• display:none;（隱藏后不占位置）
• visibility:hidden;（隱藏后依然占位置）
• overflow:hidden;
• 設(shè)置寬高為0

5. 超鏈接訪問過后hover樣式就不出現(xiàn)的問題是什么？如何解決？

被點(diǎn)擊訪問過的超鏈接樣式不再具有hover和active了，解決方法是改變CSS屬性的排列順序：L-V-H-A（link,visited,hover,active）。

6. 什么是CSS Hack？ie6,7,8的hack分別是什么？

由于不同廠商的瀏覽器，或是同一廠商的瀏覽器的不同版本，對CSS的解析認(rèn)識(shí)不完全一樣，針對不同的瀏覽器寫不同的CSS的過程就是CSS Hack。

_background-color:orange;           /*ie6*/
+background-color:pink;                 /*ie7*/
background-color:yellow;                /*ie8*/
:root #test { background-color:purple\9; } /*ie9*/
background-color:red\9;                 /*all ie*/

7. 行內(nèi)元素和塊級元素的具體區(qū)別是什么？行內(nèi)元素的padding和margin可設(shè)置嗎？

• 塊級元素特性：總是獨(dú)占一行，表現(xiàn)為另起一行開始，而且其后的元素也必須另起一行顯示；寬度(width)、高度(height)、內(nèi)邊距(padding)和外邊距(margin)都可控制；

  行內(nèi)元素特性：和相鄰的行內(nèi)元素在同一行；寬度(width)、高度(height)、內(nèi)邊距的top/bottom(padding-top/padding-bottom)和外邊距的top/bottom(margin-top/margin-bottom)都不可改變（也就是padding和margin的left和right是可以設(shè)置的），就是里面文字或圖片的大小。

• 行內(nèi)塊級元素：<input> 、<img> 、<button> 、<texterea> 、<label>。

8. 什么是外邊距重疊？重疊的結(jié)果是什么？

外邊距重疊就是margin-collapse

在CSS當(dāng)中，相鄰的兩個(gè)盒子（可能是兄弟關(guān)系也可能是祖先關(guān)系）的外邊距可以結(jié)合成一個(gè)單獨(dú)的外邊距。這種合并外邊距的方式被稱為折疊，并且因而所結(jié)合成的外邊距稱為折疊外邊距。

折疊結(jié)果遵循下列計(jì)算規(guī)則：

• 兩個(gè)相鄰的外邊距都是正數(shù)時(shí)，折疊結(jié)果是它們兩者之間較大的值。
• 兩個(gè)相鄰的外邊距都是負(fù)數(shù)時(shí)，折疊結(jié)果是兩者絕對值的較大值。
• 兩個(gè)外邊距一正一負(fù)時(shí)，折疊結(jié)果是兩者的相加的和。

9. rgba()和opacity的透明效果有什么不同？

• opacity作用于元素，以及元素內(nèi)的所有內(nèi)容的透明度。
• rgba()只作用于元素的顏色或其背景色。（設(shè)置rgba透明的元素的子元素不會(huì)繼承透明效果）

10. CSS中可以讓文字在垂直和水平方向上重疊的兩個(gè)屬性是什么？

• 垂直方向：line-heigh
• 水平方向：letter-spacing（可以用于消除inline-block元素間的換行符空格間隙問題）

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

• 已知元素的高寬：

  #div1{
  background-color:red;
  width:200px;
  height:200px;
  position: absolute;       //父元素需要相對定位
  top: 50%;
  left: 50%;
  margin-top:-100px;        //二分之一的height，width
  margin-left: -100px;
  }
  

• 未知元素的高寬：

  #div1{
  width: 200px;
  height: 200px;
  background-color: red;
  
  margin:auto;
  position: absolute; //父元素需要相對定位
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  }
  

• 如何垂直居中一個(gè)<img>?（用更簡便的方法）

  #container //<img>的容器設(shè)置如下
  {
  display:table-cell;
  text-align:center;
  vertical-align:middle;
  }
  

12. 請簡述px和em的區(qū)別。

px和em都是長度單位，區(qū)別是，px的值是固定的，指定是多少就是多少，計(jì)算比較容易。em的值不是固定的，并且em會(huì)繼承父級元素的字體大小。

瀏覽器的默認(rèn)字體高都是16px。所以未經(jīng)調(diào)整的瀏覽器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。

13. 描述一個(gè)'reset'的CSS文件并如何使用它。知道normalize.css嗎？你了解他們的不同之處？

重置樣式非常多，凡是一個(gè)前端開發(fā)人員肯定有一個(gè)常用的重置CSS文件并知道如何使用它們。他們是盲目的在做還是知道為什么這么做呢？原因是不同的瀏覽器對一些元素有不同的默認(rèn)樣式，如果你不處理，在不同的瀏覽器下會(huì)存在必要的風(fēng)險(xiǎn)，或者更有戲劇性的性發(fā)生。

你可能會(huì)用Normalize來代替你的重置樣式文件。它沒有重置所有的樣式風(fēng)格，但僅提供了一套合理的默認(rèn)樣式值。既能讓眾多瀏覽器達(dá)到一致和合理，但又不擾亂其他的東西（如粗體的標(biāo)題）。

在這一方面，無法做每一個(gè)復(fù)位重置。它也確實(shí)有些超過一個(gè)重置，它處理了你永遠(yuǎn)都不用考慮的怪癖，像HTML的audio元素不一致或line-height不一致。

14. SASS、LESS是什么？大家為什么要使用他們？

• 他們是CSS預(yù)處理器。他是CSS上的一種抽象層。他們是一種特殊的語法/語言編譯成CSS。

  例如Less是一種動(dòng)態(tài)樣式語言. 將CSS賦予了動(dòng)態(tài)語言的特性，如變量，繼承，運(yùn)算， 函數(shù)。LESS 既可以在客戶端上運(yùn)行 (支持IE 6+, Webkit, Firefox)，也可以在服務(wù)端運(yùn)行 (借助 Node.js)。

• 為什么要使用它們？

  1. 結(jié)構(gòu)清晰，便于擴(kuò)展。
  2. 可以方便地屏蔽瀏覽器私有語法差異。這個(gè)不用多說，封裝對瀏覽器語法差異的重復(fù)處理，減少無意義的機(jī)械勞動(dòng)。
  3. 可以輕松實(shí)現(xiàn)多重繼承。
  4. 完全兼容 CSS 代碼，可以方便地應(yīng)用到老項(xiàng)目中。LESS 只是在 CSS 語法上做了擴(kuò)展，所以老的 CSS 代碼也可以與 LESS 代碼一同編譯。

15. CSS中l(wèi)ink和@import的區(qū)別是？

• Link屬于html標(biāo)簽，而@import是CSS中提供的。
• 在頁面加載的時(shí)候，link會(huì)同時(shí)被加載，而@import引用的CSS會(huì)在頁面加載完成后才會(huì)加載引用的CSS。
• @import只有在ie5以上才可以被識(shí)別，而link是html標(biāo)簽，不存在瀏覽器兼容性問題。
• Link引入樣式的權(quán)重大于@import的引用（@import是將引用的樣式導(dǎo)入到當(dāng)前的頁面中）

3月3日

1. 簡介盒子模型。

• CSS的盒子模型有兩種：IE盒子模型、標(biāo)準(zhǔn)的W3C盒子模型。

• 盒模型：內(nèi)容、內(nèi)邊距、外邊距（一般不計(jì)入盒子實(shí)際寬度）、邊框。

• IE盒子模型：width：content+padding+border

  W3C盒子模型：width：content

2. 為什么要初始化樣式？

由于瀏覽器兼容的問題，不同的瀏覽器對標(biāo)簽的默認(rèn)樣式值不同，若不初始化會(huì)造成不同瀏覽器之間的顯示差異。

但是初始化CSS會(huì)對搜索引擎優(yōu)化造成小影響。

3.BFC是什么?

BFC（塊級格式化上下文），一個(gè)創(chuàng)建了新的BFC的盒子是獨(dú)立布局的，盒子內(nèi)元素的布局不會(huì)影響盒子外面的元素。在同一個(gè)BFC中的兩個(gè)相鄰的盒子在垂直方向發(fā)生margin重疊的問題。

BFC是指瀏覽器中創(chuàng)建了一個(gè)獨(dú)立的渲染區(qū)域，該區(qū)域內(nèi)所有元素的布局不會(huì)影響到區(qū)域外元素的布局，這個(gè)渲染區(qū)域只對塊級元素起作用。

4. 如何解決IE的雙邊距BUG：塊級元素float后設(shè)置橫向margin，ie6顯示的margin比設(shè)置的較大。

加入display：inline

5. HTML與XHTML有什么區(qū)別？

• 所有的標(biāo)記都必須要有一個(gè)相應(yīng)的結(jié)束標(biāo)記
• 所有標(biāo)簽的元素和屬性的名字都必須使用小寫
• 所有的 XML 標(biāo)記都必須合理嵌套
• 所有的屬性必須用引號(hào) "" 括起來
• 把所有 < 和 & 特殊符號(hào)用編碼表示
• 給所有屬性賦一個(gè)值
• 不要在注釋內(nèi)容中使用 "--"
• 圖片必須有說明文字

6. html常見兼容性問題有哪些？

• IE的雙邊距bug
• 3px的問題
• 超鏈接hove后點(diǎn)擊失效
• 無法定義1px左右的寬度容器（IE6默認(rèn)的行高造成的，使用overflow:hidden,zoom:0.08 line-height:1px）
• IE5-8不支持opacity，解決辦法：

  .opacity {
      opacity: 0.4
      filter: alpha(opacity=60); /* for IE5-7 */
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* for IE 8*/
  }
  

• IE6不支持PNG透明背景，解決辦法: IE6下使用gif圖片

7. 談?wù)勀銓eb標(biāo)準(zhǔn)及w3c的理解與認(rèn)識(shí)。

標(biāo)簽閉合，標(biāo)簽小寫，不亂嵌套，提高搜索機(jī)器人搜索幾率，使用外鏈css和js腳本，結(jié)構(gòu)行為表現(xiàn)的分離，頁面下載與加載速度更快，內(nèi)容能被更多的用戶和更廣泛的設(shè)備訪問，更少的代碼和組件，容易維護(hù)，改版方便，不需要改變頁面內(nèi)容，提供打印版不需要復(fù)制頁面內(nèi)容，提高網(wǎng)站的易用性。

8. 行內(nèi)元素有哪些，塊級元素有哪些，css的盒模型包括什么？

• 行內(nèi)元素：span input b u i s select
• 塊級元素：div p h1-h6 form ul
• css盒模型：內(nèi)容content + 內(nèi)邊距padding + 邊框border + 外邊距 margin

9. 前端頁面由哪三層構(gòu)成，它們的作用分別是什么？

HTML負(fù)責(zé)頁面結(jié)構(gòu)，CSS負(fù)責(zé)樣式，JS負(fù)責(zé)行為

10. 列出display的值，說明它們的作用。position的值，relative和absolute的定位原點(diǎn)分別是？

• display：
  1. inline：按照行內(nèi)元素樣式顯示
  2. block：按照塊級元素樣式顯示
  3. inline-block：按照行內(nèi)塊級元素樣式顯示
  4. none：隱藏元素
• position：
  1. static：靜態(tài)定位，默認(rèn)值，標(biāo)準(zhǔn)流中的元素都是靜態(tài)定位
  2. relation：相對定位，相對于原來的位置移動(dòng)，依然占據(jù)著原來的位置
  3. absolute：絕對定位，若元素沒有父元素，或者父元素沒有定位，則相對body定位，若父元素有定位（非static），則相對父元素定位，絕對定位的元素脫離標(biāo)準(zhǔn)流
  4. fixed：固定定位，相對瀏覽器邊框定位，固定定位的元素也脫離標(biāo)準(zhǔn)流

11. 瀏覽器標(biāo)準(zhǔn)模式和怪異模式之間的區(qū)別是什么?

盒子模型 渲染模式的不同

使用 window.top.document.compatMode 可顯示為什么模式

12. 哪些css屬性是可以繼承的？

color、以font-開頭的、以text-開頭的、以line-開頭的屬性可以繼承。

13. 行高的單位有哪些？它們有什么區(qū)別？

• 行高的單位有：
  1. 具體像素值
  2. em
  3. 百分號(hào)
  4. 不帶單位
• 區(qū)別：
  1. em、百分號(hào)、不帶單位均是以當(dāng)前標(biāo)簽字體大小為基數(shù)計(jì)算
  2. 在行高繼承時(shí)，如果單位是em或者百分號(hào)，那么行高會(huì)先計(jì)算再繼承給子元素；如果無單位，則會(huì)先繼承，再計(jì)算。

14. 如何解決margin的塌陷現(xiàn)象？

• 給大盒子設(shè)置一個(gè)border或者border-top
• 給大盒子設(shè)置一個(gè)overflow：hidden屬性
• 浮動(dòng)

15. 清除浮動(dòng)有哪些方法？

• 額外標(biāo)簽法（會(huì)增加標(biāo)簽，一般不用）：在浮動(dòng)的盒子之下再放一個(gè)標(biāo)簽，在這個(gè)標(biāo)簽中使用clear:both，以此來清除浮動(dòng)。

• 使用overflow:hidden屬性：找到浮動(dòng)盒子的父元素，給它添加overflow:hidden屬性，即可清除浮動(dòng)的影響。（一般也不用此方法清除浮動(dòng)，因?yàn)橐绯龅脑貢?huì)被隱藏）

• 使用偽元素清楚浮動(dòng)：

  .clearfix:after {
    content: '';
    height: 0;
    line-height: 0;
    display: block;
    overflow: hidden;
    clear: both;
  }
  

3月4日

1. javascript的typeof返回哪些數(shù)據(jù)類型？

alert(typeof[1,2]);//object
alert(typeof'leipeng');//string
vari=true;
alert(typeofi);//boolean
alert(typeof1);//number
vara;
alert(typeofa);//undefined
functiona(){};
alert(typeofa)//function

2. 列舉你知道的強(qiáng)制類型轉(zhuǎn)換和隱式類型轉(zhuǎn)換。

• 強(qiáng)制轉(zhuǎn)換：parseInt()、parseFloat()、Number()、String()、.toString()、Boolean()
• 隱式轉(zhuǎn)換：加（例外：不能是算式中，而需要加在變量前）減乘除及取余，!!

3. split() 、join() 的區(qū)別。

前者是切割成數(shù)組的形式，后者是將數(shù)組轉(zhuǎn)換成字符串。

4. 數(shù)組方法pop() push() unshift() shift()

push()尾部添加、pop()尾部刪除、unshift()頭部添加、shift()頭部刪除

5. 事件綁定和普通事件有什么區(qū)別。

• 普通事件：

  var btn = document.getElementById("hello");
  btn.onclick = function(){
    alert(1);
  }
  btn.onclick = function(){
    alert(2);
  }
  //執(zhí)行上面的代碼只會(huì)alert 2
  

• 事件綁定：

  var btn = document.getElementById("hello");
  btn.addEventListener("click",function(){
    alert(1);
  },false);
  btn.addEventListener("click",function(){
    alert(2);
  },false);
  //執(zhí)行上面的代碼會(huì)先alert 1 再 alert 2
  

• 區(qū)別：

  1. 普通添加事件的方法不支持添加多個(gè)事件，最下面的事件會(huì)覆蓋上面的，而事件綁定（addEventListener）方式添加事件可以添加多個(gè)。
  2. addEventListener不兼容低版本IE
  3. 普通事件無法取消
  4. addEventLisntener還支持事件冒泡+事件捕獲

6. IE和DOM事件流的區(qū)別

• 執(zhí)行順序不一樣
• 參數(shù)不一樣
• 事件加不加on
• this指向問題

7. call和apply的區(qū)別

• call：
  1. 語法：call(thisObj，Object1,Object2...)
  2. 定義：調(diào)用一個(gè)對象的一個(gè)方法，以另一個(gè)對象替換當(dāng)前對象。
  3. 說明：call 方法可以用來代替另一個(gè)對象調(diào)用一個(gè)方法。call 方法可將一個(gè)函數(shù)的對象上下文從初始的上下文改變?yōu)橛?thisObj 指定的新對象。如果沒有提供 thisObj 參數(shù)，那么 Global 對象被用作 thisObj。
• apply：
  1. 語法：apply(thisObj，[argArray])
  2. 定義：應(yīng)用某一對象的一個(gè)方法，用另一個(gè)對象替換當(dāng)前對象。
  3. 說明：如果 argArray 不是一個(gè)有效的數(shù)組或者不是 arguments 對象，那么將導(dǎo)致一個(gè) TypeError。
     如果沒有提供 argArray 和 thisObj 任何一個(gè)參數(shù)，那么 Global 對象將被用作 thisObj， 并且無法被傳遞任何參數(shù)。

8. b繼承a的方法。

function A( age, name ){ 
  this.age = age; 
  this.name = name; 
} 

A.prototype.show = function(){ 
  alert('父級方法'); 
} 

function B(age,name,job){ 
  A.apply( this, arguments ); 
  this.job = job; 
} 

B.prototype = new A();
var b = new A(14,'俠客行'); 
var a = new B(15,'狼俠','俠客');

9. 如何阻止事件冒泡和默認(rèn)事件?

canceBubble()只支持IE、return false、stopPropagation()

10. 添加 刪除 替換 插入到某個(gè)節(jié)點(diǎn)的方法。

obj.appendChid()
obj.insertBefore()
obj.replaceChild()
obj.removeChild()

11. javascript的本地對象，內(nèi)置對象和宿主對象分別是什么？

• 本地對象為array、obj、regexp 等可以new實(shí)例化
• 內(nèi)置對象為gload、Math 等不可以實(shí)例化的
• 宿主為瀏覽器自帶的document、window 等

12. window.onload和document.ready的區(qū)別？

window.onload 是在dom文檔樹加載完和所有文件加載完之后執(zhí)行一個(gè)函數(shù)document.ready原生中沒有這個(gè)方法，jquery中有 $().ready(function)，在dom文檔樹加載完之后執(zhí)行一個(gè)函數(shù)（注意，這里面的文檔樹加載完不代表全部文件加載完）。
$(document).ready要比window.onload先執(zhí)行。
window.onload只能出來一次，$(document).ready可以出現(xiàn)多次。

13. "=="和"==="的不同。

• 前者只比較值，會(huì)自動(dòng)轉(zhuǎn)換類型。
• 后者比較值和類型。

14. javascript的同源策略。

一段腳本只能讀取來自于同一來源的窗口和文檔的屬性，這里的同一來源指的是主機(jī)名、協(xié)議和端口號(hào)的組合。

15. JavaScript是一門什么樣的語言，它有哪些特點(diǎn)？

javaScript一種直譯式腳本語言，是一種動(dòng)態(tài)類型、弱類型、基于原型的語言，內(nèi)置支持類型。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用于客戶端的腳本語言，最早是在HTML網(wǎng)頁上使用，用來給HTML網(wǎng)頁增加動(dòng)態(tài)功能。JavaScript兼容于ECMA標(biāo)準(zhǔn)，因此也稱為ECMAScript。

基本特點(diǎn)：

• 是一種解釋性腳本語言（代碼不進(jìn)行預(yù)編譯）
• 主要用來向HTML（標(biāo)準(zhǔn)通用標(biāo)記語言下的一個(gè)應(yīng)用）頁面添加交互行為。?
• 可以直接嵌入HTML頁面，但寫成單獨(dú)的js文件有利于結(jié)構(gòu)和行為的分離。
• 跨平臺(tái)特性，在絕大多數(shù)瀏覽器的支持下，可以在多種平臺(tái)下運(yùn)行（如Windows、Linux、Mac、Android、iOS等）。

3月5日

1. JavaScript的數(shù)據(jù)類型都有哪些？

• 基本數(shù)據(jù)類型：String、boolean、Number、undefined、null
• 引用數(shù)據(jù)類型：Object(Array、Date、RegExp、Function)

那么，如何判斷某變量是否為數(shù)組數(shù)據(jù)類型？

• 方法一：判斷其是否具有“數(shù)組性質(zhì)”，如slice()方法?？勺约航o該變量定義slice方法，故有時(shí)會(huì)失效。

• 方法二：obj instanceof Array，在某些IE版本中不正確。

• 方法三：方法一二皆有漏洞，在ECMA Script5中定義了新方法Array.isArray()， 保證其兼容性，最好的方法如下：

  if(typeof Array.isArray==="undefined") {
      Array.isArray = function(arg){
        return Object.prototype.toString.call(arg)==="[object Array]"
      }; 
  }
  

2. 已知ID的Input輸入框，希望獲取這個(gè)輸入框的輸入值，怎么做？(不使用第三方框架)

document.getElementById('ID').value

3. 希望獲取到頁面中所有的checkbox怎么做？(不使用第三方框架)

var domList = document.getElementsByTagName('input')
var checkBoxList = [];
var len = domList.length;　　//緩存到局部變量
while (len--) {　　//使用while的效率會(huì)比for循環(huán)更高
　　if (domList[len].type == 'checkbox') {
　　    checkBoxList.push(domList[len]);
　　}
}

4. 設(shè)置一個(gè)已知ID的DIV的html內(nèi)容為xxxx，字體顏色設(shè)置為黑色(不使用第三方框架)

var dom = document.getElementById('ID');
dom.innerHTML = 'xxxx';
dom.style.color = '#000';

5. 當(dāng)一個(gè)DOM節(jié)點(diǎn)被點(diǎn)擊時(shí)候，我們希望能夠執(zhí)行一個(gè)函數(shù)，應(yīng)該怎么做？

• 直接在DOM里綁定事件：<div onclick='test()'></div>
• 在JS里通過onclick綁定：xxx.onclick=test()
• 通過事件添加進(jìn)行綁定：addEventListener(xxx,'click',test())

那么，Javascript的事件流模型都有什么？

• “事件冒泡”：事件開始由最具體的元素接收，然后逐級向上傳播。
• “事件捕捉”：事件由最不具體的節(jié)點(diǎn)先接收，然后逐級向下，一直到最具體的。
• “DOM事件流”：三個(gè)階段：事件捕捉，目標(biāo)階段，事件冒泡。

6. 下列代碼輸出為何？解釋原因。

var a;
alert(typeof a); // undefined
alert(b); // 報(bào)錯(cuò)

undefined是一個(gè)只有一個(gè)值的數(shù)據(jù)類型，這個(gè)值就是“undefined”，在使用var聲明變量但并未對其賦值進(jìn)行初始化時(shí)，這個(gè)變量的值就是undefined。而b由于未聲明將報(bào)錯(cuò)。注意未申明的變量和聲明了未賦值的是不一樣的。

7.下列代碼輸出為何？解釋原因。

var a = null;
alert(typeof a); //object

null是一個(gè)只有一個(gè)值的數(shù)據(jù)類型，這個(gè)值就是null。表示一個(gè)空指針對象，所以用typeof檢測會(huì)返回”object”。

8. 下列代碼輸出什么？解釋原因。

var undefined;
undefined == null; // true
1 == true; // true
2 == true; // false
0 == false; // true
0 == ''; // true
NaN == NaN; // false
[] == false; // true
[] == ![]; // true

undefined與null相等，但不恒等（===）

一個(gè)是number一個(gè)是string時(shí)，會(huì)嘗試將string轉(zhuǎn)換為number

嘗試將boolean轉(zhuǎn)換為number，0或1

嘗試將Object轉(zhuǎn)換成number或string，取決于另外一個(gè)對比量的類型

所以，對于0、空字符串的判斷，建議使用“===”?！?==”會(huì)先判斷兩邊的值類型，類型不匹配時(shí)為false。

那么，看下面的代碼，輸出什么，foo的值為什么？

var foo = "11"+2-"1";
console.log(foo);
console.log(typeof foo);

執(zhí)行完后foo的值為111，foo的類型為String。

9. 下列代碼輸出什么？

var a = new Object();
a.value = 1;
b = a;
b.value = 2;
alert(a.value);

輸出2，引用數(shù)據(jù)類型傳地址。

10. 已知數(shù)組var stringArray=['This','is','Baidu','Campus']，Alert出'ThisisBaiduCampus'。

alert(stringArray.join(""));

11. 已知有字符串foo='get-element-by-id',寫一個(gè)function將其轉(zhuǎn)化成駝峰表示法'getElementById'。

function combo(msg){
    var arr=msg.split("-");
    for(var i=1;i<arr.length;i++){
        arr[i]=arr[i].charAt(0).toUpperCase()+arr[i].substr(1,arr[i].length-1);
    }
    msg=arr.join("");
    return msg;
}

12. var numberArray=[3,6,2,4,1,5];

• 實(shí)現(xiàn)對該數(shù)組的倒排，輸出[5,1,4,2,6,3]

  numberArray.reverse();
  

• 實(shí)現(xiàn)對該數(shù)組的降序排列，輸出[6,5,4,3,2,1]

  numberArray.sort(function(a,b){return b-a})
  

13. 輸出今天的日期，以YYYY-MM-DD的方式，比如今天是2017年1月1日，則輸出2017-01-01。

var d = new Date();
// 獲取年，getFullYear()返回4位的數(shù)字
var year = d.getFullYear();
// 獲取月，月份比較特殊，0是1月，11是12月
var month = d.getMonth() + 1;
// 變成兩位
month = month < 10 ? '0' + month : month;
// 獲取日
var day = d.getDate();
day = day < 10 ? '0' + day : day;
alert(year + '-' + month + '-' + day);

14. 將字符串"<tr><td>{$id}</td><td>{$name}</td></tr>"中的{$id}替換成10，{$name}替換成Tony （使用正則表達(dá)式）

"<tr><td>{$id}</td><td>{$id}_{$name}</td></tr>".replace(/{\$id}/g,'10').replace(/{\$name}/g,'Tony');

15. 為了保證頁面輸出安全，我們經(jīng)常需要對一些特殊的字符進(jìn)行轉(zhuǎn)義，請寫一個(gè)函數(shù)escapeHtml，將<,>,&,“進(jìn)行轉(zhuǎn)義。

function escapeHtml(str) {
    return str.replace(/[<>"&]/g, function (match) {
        switch (match) {
            case '<':
                return '<';
            case '>':
                return '>';
            case '&':
                return '&';
            case '\"':
                return '"';
        }
    });
}

3月6日

1. foo = foo||bar ，這行代碼是什么意思？為什么要這樣寫？

if(!foo)foo=bar;//如果foo存在，值不變，否則把bar的值賦給foo。

短路表達(dá)式：作為”&&”和”||”操作符的操作數(shù)表達(dá)式，這些表達(dá)式在進(jìn)行求值時(shí)，只要最終的結(jié)果已經(jīng)可以確定是真或假，求值過程便告終止，這稱之為短路求值。

2. 看下列代碼，將會(huì)輸出什么?(變量聲明提升)

var foo = 1;
(function () {
    console.log(foo);
    var foo = 2;
    console.log(foo);
})()

輸出 undefined 和 2 。

3. 用js實(shí)現(xiàn)隨機(jī)選取10–100之間的10個(gè)數(shù)字，存入一個(gè)數(shù)組，并排序。

function randomNub(aArray, len, min, max) {
    //判斷要抽取的個(gè)數(shù)是不是超過了樣本總數(shù)
    if (len >= (max - min)) {
        return '超過' + min + '-' + max + '之間的個(gè)數(shù)范圍' + (max - min - 1) + '個(gè)的總數(shù)';
    }
    //如果抽取出的數(shù)組長度達(dá)到了抽取總數(shù)的個(gè)數(shù)，則對數(shù)組進(jìn)行排序
    if (aArray.length >= len) {
        aArray.sort(function (a, b) {
            return a - b
        });
        return aArray;
    }
    //從最小值之后開始，在區(qū)間范圍內(nèi)隨機(jī)取數(shù)
    var nowNub = parseInt(Math.random() * (max - min - 1)) + (min + 1);
    //循環(huán)判斷，如果隨機(jī)取的數(shù)字在數(shù)組中已存在，則舍棄重新取
    for (var j = 0; j < aArray.length; j++) {
        if (nowNub == aArray[j]) {
            randomNub(aArray, len, min, max);
            return;
        }
    }
    //取的數(shù)在數(shù)組中不存在則加入數(shù)組中
    aArray.push(nowNub);
    randomNub(aArray, len, min, max);
    //返回?cái)?shù)組
    return aArray;
}
var arr = [];
randomNub(arr, 10, 10, 100);

4. 把兩個(gè)數(shù)組合并，并刪除第二個(gè)元素。

var array1 = ['a','b','c'];
var bArray = ['d','e','f'];
var cArray = array1.concat(bArray);
cArray.splice(1,1);

5. 怎樣添加、移除、移動(dòng)、復(fù)制、創(chuàng)建和查找節(jié)點(diǎn)（原生JS，實(shí)在基礎(chǔ)，沒細(xì)寫每一步）

• 創(chuàng)建新節(jié)點(diǎn)：

  createDocumentFragment()//創(chuàng)建一個(gè)DOM片段
  createElement()           //創(chuàng)建一個(gè)具體的元素
  createTextNode()          //創(chuàng)建一個(gè)文本節(jié)點(diǎn)
  

• 添加、移除、替換、插入

  appendChild()     //添加
  removeChild()     //移除
  replaceChild()//替換
  insertBefore()//插入
  

• 查找：

  getElementsByTagName()    //通過標(biāo)簽名稱
  getElementsByName()   //通過元素的Name屬性的值
  getElementById()      //通過元素Id，唯一性
  

6. 有這樣一個(gè)URL：http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e，請寫一段JS程序提取URL中的各個(gè)GET參數(shù)(參數(shù)名和參數(shù)個(gè)數(shù)不確定)，將其按key-value形式返回到一個(gè)json結(jié)構(gòu)中，如{a:'1',b:'2',c:'',d:'xxx',e:undefined}。

function serilizeUrl(url) {
    var urlObject = {};
    if (/\?/.test(url)) {
        var urlString = url.substring(url.indexOf("?") + 1);
        var urlArray = urlString.split("&");
        for (var i = 0, len = urlArray.length; i < len; i++) {
            var urlItem = urlArray[i];
            var item = urlItem.split("=");
            urlObject[item[0]] = item[1];
        }
        return urlObject;
    }
    return null;
}

7. 正則表達(dá)式構(gòu)造函數(shù)var reg=new RegExp('xxx')與正則表達(dá)字面量var reg=//有什么不同？匹配郵箱的正則表達(dá)式？

• 當(dāng)使用RegExp()構(gòu)造函數(shù)的時(shí)候，不僅需要轉(zhuǎn)義引號(hào)（即\”表示”），并且還需要雙反斜杠（即\表示一個(gè)\）。使用正則表達(dá)字面量的效率更高。

• 郵箱的正則匹配：

  var regMail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/;
  

8. 看下面代碼，給出輸出結(jié)果。?

for (var i = 1; i <= 3; i++) {
    setTimeout(function () {
        console.log(i); //4 4 4
    }, 0);
}

原因：Javascript事件處理器在線程空閑之前不會(huì)運(yùn)行。

追問，如何讓上述代碼輸出1 2 3？

for (var i = 1; i <= 3; i++) {
    setTimeout((function (a) { //改成立即執(zhí)行函數(shù)
        console.log(a);
    })(i), 0);
}

9. 寫一個(gè)function，清除字符串前后的空格。（兼容所有瀏覽器）

if (!String.prototype.trim) {
    String.prototype.trim = function () {
        return this.replace(/^\s+/, "").replace(/\s+$/, "");
    }
}
// test the function 
var str = " \t\n test string ".trim();
alert(str == "test string"); // alerts "true"

10. Javascript中callee和caller的作用？

• caller是返回一個(gè)對函數(shù)的引用，該函數(shù)調(diào)用了當(dāng)前函數(shù)；
• callee是返回正在被執(zhí)行的function函數(shù)，也就是所指定的function對象的正文。

那么，請使用callee完成斐波那契數(shù)列。

var result = [];
function fn(n) {
    //典型的斐波那契數(shù)列
    if (n == 1) {
        return 1;
    } else if (n == 2) {
        return 1;
    } else {
        if (result[n]) {
            return result[n];
        } else {
            //argument.callee()表示fn()
            result[n] = arguments.callee(n - 1) + arguments.callee(n - 2);
            return result[n];
        }
    }
}

11. Javascript中, 以下哪條語句一定會(huì)產(chǎn)生運(yùn)行錯(cuò)誤？

A、var _變量=NaN

B、var 0bj= []

C、var obj = //

D、var obj = {}

答案：B C

12. 以下兩個(gè)變量a和b，a+b的哪個(gè)結(jié)果是NaN？

A、var a=undefined; b=NaN

B、var a='123'; b=NaN

C、var a=undefined , b=NaN

D、var a=NaN , b='undefined'

答案：A C

13. var a=10; b=20; c=4; ++b+c+a++以下哪個(gè)結(jié)果是正確的？

A、34 B、35 C、36 D、37

答案：B

14. 下面的JavaScript語句中，（ ）實(shí)現(xiàn)檢索當(dāng)前頁面中的表單元素中的所有文本框，并將它們?nèi)壳蹇铡?/h4>

A. for (var i = 0; i < form1.elements.length; i++) {
    if (form1.elements.type == "text")
        form1.elements.value = "";
    }
B. for (vari = 0; i < document.forms.length; i++) {
    if (forms[0].elements.type == "text")
        forms[0].elements.value = "";
    }
C. if (document.form.elements.type == "text")
    form.elements.value = "";
D. for (vari = 0; i < document.forms.length; i++) {
    for (var j = 0; j < document.forms.elements.length; j++) {
        if (document.forms.elements[j].type == "text")
            document.forms.elements[j].value = "";
        }
    }

答案：D

15. 要將頁面的狀態(tài)欄中顯示“已經(jīng)選中該文本框”，下列JavaScript語句正確的是？

A. window.status='已經(jīng)選中該文本框'

B. document.status='已經(jīng)選中該文本框'

C. window.screen='已經(jīng)選中該文本框'

D. document.screen='已經(jīng)選中該文本框'

答案：A

3月7日

1. 以下哪條語句會(huì)產(chǎn)生運(yùn)行錯(cuò)誤？

A.var obj = ();
B.var obj = [];
C.var obj = {};
D.var obj = //;

答案：A D

2. 以下哪個(gè)單詞不屬于javascript保留字？

A.with

B.parent

C.class

D.void

答案：B

3. 下列代碼的輸出結(jié)果是？

var User = { 
    count = 1，
    getCount：function（）{ 
        return this.count;
    }
}
console.log(User.getCount());
var func = User.getCount;
console.log(func());

1 undefined（因?yàn)槭莣indow對象執(zhí)行了func函數(shù)）

4.下列代碼的輸出結(jié)果是？

(function test(){
      var a=b=5;
      alert(typeof a);
      alert(typeof b);
})();
alert(typeof a);
alert(typeof b);

number

number

undefined

number

5. 下列JavaScript代碼執(zhí)行后，iNum的值是？

var iNum = 0;
for(var i = 1; i< 10; i++){
     if(i % 5 == 0){
         continue;
    }
    iNum++;
}

8

6.下列代碼的輸出結(jié)果是？

var a;
var b = a * 0;
if (b == b) {
          console.log(b * 2 + "2" - 0 + 4);
} else {
          console.log(!b * 2 + "2" - 0 + 4);
}

26

7.下列代碼的輸出結(jié)果是？

<script>
        var a = 1;
</script>
<script>
var a;
var b = a * 0;
if (b == b) {
        console.log(b * 2 + "2" - 0 + 4);
} else {
        console.log(!b * 2 + "2" - 0 + 4);
}
</script>

6

8.下列代碼的輸出結(jié)果是？

var t = 10;
function test(t) {
    var t = t++;
}
test(t);
console.log(t);

10

9. 下列代碼的輸出結(jié)果是？

var t = 10;
function test(test) {
    var t = test++;
}
test(t);
console.log(t);

10

10.下列代碼的輸出結(jié)果是？

var t = 10;
function test(test) {
    t = test++;
}
test(t);
console.log(t);

10

11.下列代碼的輸出結(jié)果是？

var t = 10;
function test(test) {
    t = t + test;
    console.log(t);
    var t = 3;
}
test(t);
console.log(t);

NaN 10

12.下列代碼的輸出結(jié)果是？

var a;
var b = a / 0;
if (b == b) {
        console.log(b * 2 + "2" - 0 + 4);
} else {
        console.log(!b * 2 + "2" - 0 + 4);
}

26

13.下列代碼的輸出結(jié)果是？

<script>
      var a = 1;
</script>
<script>
    var a;
    var b = a / 0;
    if (b == b) {
        console.log(b * 2 + "2" + 4);
    } else {
        console.log(!b * 2 + "2" + 4);
    }
</script>

Infinity24

14. 用程序?qū)崿F(xiàn)找到html中id名相同的元素？?

<body>
    <form id='form1'>
        <div id='div1'></div>
        <div id='div2'></div>
        <div id='div3'></div>
        <div id='div4'></div>
        <div id='div5'></div>
        <div id='div3'>id名重復(fù)的元素</div>
    </form>
</body>

var nodes=document.querySelectorAll("#form1>*");
for(var i=0,len=nodes.length;i<len;i++){
    var attr=nodes[i].getAttribute("id");
    var s=1;
    for(var j=i+1;j<len;j++){
        if(nodes[j].getAttribute("id")==attr){
            s++;
            alert("id為："+attr+"的元素出現(xiàn)"+s+"次");
        }
    }
}

15. 下列JavaScript代碼執(zhí)行后，運(yùn)行的結(jié)果是？

<button id='btn'>點(diǎn)擊我</button>
var btn = document.getElementById('btn');
var handler = {
    id: '_eventHandler',
    exec: function(){
        alert(this.id);
    }
}
btn.addEventListener('click', handler.exec);

"btn"