原生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年历

和上一题差很少，只是此次把修改类名换成修改数据而已。