原生js練習題---第二課（上）

0x1百度輸入法

實現效果：
See the Pen 2-01百度輸入法

主要是切換的判斷條件，一開始我還用點擊次數的奇偶性來判斷-_-||，其實直接檢查菜單有沒有顯示便可。檢查的時候有個小trick，初始狀態菜單的style屬性爲空，由於咱們接下來要點按鈕顯示，因此把這種狀況和style.display爲none的狀況歸爲一類丟到else裏最省事。

0x2點擊Div，顯示其innerHTML

實現效果：
See the Pen 2-02點擊Div，顯示其innerHTML

這裏遍歷了div綁上事件，也能夠用事件代理來作。

0x3求出數組中全部數字的和

實現效果：
See the Pen 2-03求出數組中全部數字的和

簡單地的表單數據獲取和處理，注意對直接對字符串使用加號就是拼接，想用加法還得手動轉換爲數字。

0x4彈出層效果

實現效果：
See the Pen 2-04彈出層效果

經典的彈出層效果，關鍵在CSS上，js只監聽個樣式的顯示與否就ok。

0x5函數傳參，改變Div任意屬性的值

實現效果：
See the Pen 2-05函數傳參，改變Div任意屬性的值

依然是對style對象作文章，既可直接設置style對象，也能夠用DOM2的setProperty()方法。一樣，清空style對象裏的樣式既能夠直接將它置null，也可將其cssText屬性清空。

0x6圖片列表：鼠標移入移出改變圖片透明度

實現效果：
See the Pen 2-06圖片列表：鼠標移入移出改變圖片透明度

仍是用js模仿css的hover效果（何苦這樣-_-||），老套路，事件代理+增刪類名搞定。由於事件代理是掛在祖先元素上的，如今就只能監聽mouseover和mouseout事件了，由於mouseenter和mouseleave在光標進出子元素時是不會觸發的。因此這樣看來，mouseover和mouseout在子元素上也能觸發這個特色簡直就是爲事件代理而生的嘛。

0x7簡易選項卡

實現效果：
See the Pen 2-07簡易選項卡

繼續模仿hover效果，還要加上對另外一個div的樣式控制。可是此次光標離開也仍要保持hover的狀態，直到另外一選項被hover，因此不能借助mouseout事件、只能遍歷元素移除樣式了，順便也在遍歷過程當中取得另外一個div要激活的內容。

0x8簡易JS年曆

實現效果：
See the Pen 2-08簡易JS年曆

和上一題差很少，只是此次把修改類名換成修改數據而已。