0x1setTimeout运用
完成效果：4-01setTimeout运用
又见导航条，先看下css，这里用的是雪碧图背景做出圆角的效果，虽然是典范的要领、兼容性好，但这类代码写起来着实是有点貌寝。因为须要三层嵌套，离别用背景图绘制左圆角、右圆角和中心背景，致使dom组织变庞杂了、更进一步影响js的代码简约。
而关于ui的动效，用的恰是这一系列题目里经常涌现的“hover父元素激活子元素”的要领来完成，因而自然又得用mouseover和mouseout这对兄弟了。然则我照样被这题坑了不少时候，因为有两个两点症结的题目想了良久才处置惩罚好：
首先得邃晓这题和前面题目标差别，前面那些题目着实都能够用css的hover伪类来完成，但这题不可，因为子选单和导航条的主体间是有间隙的，在鼠标从导航条到子选单的路上，子选单就会消逝，基础抵达不了。。。要处置惩罚这个bug，就须要题目提到的setTimeout上台了，脱离选单时，我们能够让它耽误消逝、给用户的鼠标抵达子选单或重回导航条的时候；等再回到导航条或子选单就取消掉这个延时即可。
紧接着第二个大坑涌现了，在前面的总结里也提到怎样用好mouseover和mouseout，因为这两个事宜会冒泡，同时因为他们只在跨界时触发，而且一旦元素占地太小就会被浏览器疏忽；为防备冒上来的事宜乱成一团、或许该触发的没触发，就应当做到削减元素嵌套，直接把事宜监听绑定在详细元素上。
但是题目是，这个法则在导航条的主体是可行的、然则子选单因为前面提到的三层嵌套组织圆角，已没法削减嵌套了，同时还得斟酌到子选单也是嵌套在导航条里的啊。。。如许一来某些元素撤除子元素的局限、占地就很小了，会涌现前面提到的该触发却没触发的题目。详细在这题里的表现，就是当你的鼠标脱离子选单时，因为子选单被子元素挤占得只剩一点处所了（详细能够按f12看一下），基础不能靠它触发mouseout了，若要处置惩罚这个题目，就不得不吸收里体面元素冒泡才会发生mouseout事宜，有了事宜才举行元素显隐的掌握嘛。
但这又致使前面提到的另一个题目：举例来说，鼠标脱离子选单时，只需鼠标一扫冒泡上来的mouseout、mouseover事宜就一大堆，而这时候只要鼠标脱离子选单谁人mouseout才是应当见效的。既然我们不能阻挠和挑选子元素上的mouseout事宜，那看来只要让它和mouseover的效果相抵消了，因为只要在导航条里才会触发这对事宜，脱离导航条后就没有mouseover来和mouseout抵消了。同理，反过来进入子选单时自然就用mouseout来抵消mouseover到达挑选的目标。
因而就可以总结出第二个坑的处置惩罚要领了：
首先要应用子元素的冒泡，这时候就不能运用事宜代办了（事宜代办函数自身就有挑选事宜泉源的功用，没法猎取子元素冒泡上来的事宜），只能退而求其次，用一个轮回来绑定事宜吧。
经由历程
mouseout和响应的mouseover事宜举行抵消，到达变相挑选出事宜的效果。但要注重，平常用这类抵消都邑引发闪灼的，所以抵消并非个通用的处置惩罚要领，只是因为恰好因为这题运用了延时和消除延时，显隐的效果不会马上展现，自然就防备了子选单闪个不断的效果涌现。
剩下的代码里还要处置惩罚几个小题目：如处置惩罚运用了延时带来的子选单切换卡顿、遵照盈余可占宽度决定子选单该往左照样往右定位、同时让箭头自动保持在中心等等；比拟上面两个坑都算简朴的啦。
写到这里才把解题思绪捋清了，可见这看似简朴的几行js要写出来得有多蛋疼，这里真得吐槽下这个ui的题目：把子选单搞成细细的横向便条着实还好，采纳hover作挑选原本也ok，但这时候你还特地让子选单和导航条主体间有间隙，致使完成起来比较难以外，用户也很轻易误操纵啊，那么点处所放那么多mouseout和响应的mouseover事宜的触发点，手一抖、鼠标一滑很轻易就选到别的处所去啊！！
0x2自动播放一幻灯片效果
完成效果：4-02自动播放一幻灯片效果
此次是做一个轮播图，差别于那种滑动的轮播效果，这里用的是只是将图片叠在一同然后转变通明度罢了（我还别的在展现的图片上加了个z-index，防备拖一下图片就现形）。挑选控件上，用的仍然是这一系列题目脍炙人口的“hover一个元素激活其他元素”，只不过这题因dom组织简朴，完成起来可比上一题简朴多了。
重要逻辑做起来也就两个方面，经由历程监听控件来增删类名以转变款式、再加上自动定时播放就可以够，这里我把播放和住手都封装在一个单例里了（注重是定义在IIFE里），组织更清楚一点，也削减了全局变量。
但另有一个题目，那就是淡入效果的完成，思绪自然是定时修正通明度，但是因为一开始给图片直接增加类名已让它的通明度为1，致使图片展现时是不通明–>通明–>不通明的历程，效果很不自然，因而痛快就直接把修正类名展现图片的代码去了，直接用淡入展现，效果更好同时又精简了代码。
末了再提示下本身，用RegExp组织正则时，万万别忘记\的转义！
0x3自动转变方向一幻灯片效果
完成效果：4-03自动转变方向一幻灯片效果
在上面一题多加个方向推断函数罢了，同时这里我把和轮播有关的东西全都封装进了autoSlider这个单例里去了，全局变量如今就只剩这个单例，接口也能够写得简约到只要一个初始化挪用，真是清新啊~
0x4agruments运用一求出函数参数的总和
简朴体验arguments罢了，直接贴代码：
function sum() {
var result = 0;
for (var i = 0; i < arguments.length; i++) {
result += arguments[i];
}
return result;
}
console.log(sum(1, 3, 5, 7));0x5css函数一设置/读取对象的属性
完成效果：4-05css函数一设置、读取对象的属性
简朴的款式猎取和修正，虽然增删类名体式格局就可以够轻松完成，但着实这题要的不只是效果，而是要模仿jquery的css函数。因为设定上，该函数的参数应当有三种状况：
接收一个css属性名读取值
吸收一个对象（hash表）批量设置css属性
传入键、值两个参数直接设置某个css属性
所以要按参数个数和参数的范例离别举行操纵，范例推断最好运用Object.prototype.toString，如许不会涌现运用typeof时含糊其词的效果。假如碰到不正当的参数数量和范例，就直接用throw抛出毛病。
至于款式的猎取，运用了规范的window.getComputedStyle要领，这个要领的兼容性着实也够用了（IE8+），所以完整能够不必老旧的currentStyle。
而在设置款式属性时，要邃晓.和[]操纵符的差别，运用点操纵标记的属性名必需首先是正当的变量名，而且不能是动态的援用（着实就是字符串了，只是引号能够省略罢了）；中括号操纵符就不存在这类题目，所以elelment.sytle['background-color']这类用法也能跑。
0x6当前输入框高亮显现
完成效果：4-06当前输入框高亮显现
继承事宜模仿css伪类的行动，此次终究不是老冤家hover了，改成了文本框focus，很自然就想到老套路：事宜代办+增删类名。但要注重核心事宜也有一对冒泡和不冒泡的事宜存在，个中因为火狐不支撑冒泡的focusin和focusout，只支撑不冒泡的focus和blur，除非只斟酌挪动端，不然依靠冒泡的事宜代办是不能用在处置惩罚核心事宜上滴。所以这里只好用一个轮回来完成对一切元素的监听了。
至于修正的款式，着实就相当于自定义文本框背景和outline款式了，原题是用了背景图来做，但这完整能够用css模仿嘛。但是因为这里输入框是圆角的，除了火狐外并没有浏览器完成outline的圆角，所以不能直接修正outline款式了，只能假借边框来完成该效果。同时还得记得把浏览器默许outline关掉，不然效果可就大打折扣。
0x7数组演习：种种数组要领的运用
完成效果：4-07数组演习：种种数组要领的运用
简朴的数组演习，就不根据原题那样分几个数组了，这里直接在一个数组上操纵，再搭配一个简朴的处置惩罚流程：先用一个事宜代办来监听和分发按钮的点击事宜，处置惩罚完再输出到dom即可。
详细的数组操纵是比较简朴的，不过要注重concat和slice这两个要领异乎寻常，它们不是直接在挪用数组上操纵，而是别的天生新数组举行操纵，返回的也是新数组。应用这一点能够完成数组的深拷贝，但如果想作用到原数组就得别的赋值了。
0x8事宜演习：封装兼容性增加、删除事宜的函数
虽然做这系列的题本不想斟酌老旧浏览器，但兼容事宜毕竟是个典范题目，权当回忆下js高等顺序设计里的内容了。采纳的的也是书里的兼容要领，能用DOM2级别addEventListener和removeEventListener就用，再者就是兼容IE8以下的attachEvent和detachEvent（有this指向window、反向实行的坑），这两者都能绑定多个事宜处置惩罚顺序；末了着实不可再用只能绑定一个处置惩罚顺序、但兼容性最好的DOM0级。
0x9星级评分体系
完成效果：4-09星级评分体系
星星只是运用背景图来转变亮灭罢了，所以只需在容器上挂上对星星的click、mouseover、mouseout三个事宜代办，剩下的就是一些DOM和数据操纵了。
—第四课完—
