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

和上一题差不多，只是这次把修改类名换成修改数据而已。