原生js练习题---第二课(下)

0x1播放列表压缩睁开

完成结果

值得注重的一个处所是谁人箭头,我这里只是用了简朴的字符串替代,而原题用了背景图片挪动来完成切换箭头,然则好像那样做会致使悉数容器的摆布偏移、结果不是很好。

0x2鼠标移过显现车标

完成结果

这题看起来和前面那道转变车标透明度的题差不多,然则却花了我不少时候。缘由照样没有深切明白mouseovermouseout事宜的特性,虽然这两个事宜移进子元素也会触发的特性便于完成事宜代办,然则如许一来假如纯真在父元素上挂这两个事宜就想在子元素上完成涌现和消逝的结果,就会致使一连触发—子元素涌现触发父元素mouseout致使消逝、再触发父元素mouseover,然后子元素又涌现了,就如许闪个不断。。。

所以这题和前面那道题最大的差别就在此,由于要完成的是子元素的涌现和消逝,由于上述缘由的掣肘、也由于子元素本身就比父元素要大,故应当采纳监听li元素的mouseover使车标弹出,监听子元素的mouseout使其消逝。

但是新题目又涌现了,一开始我弹出的车标是个链接嵌套图片,而我只是监听链接的mouseout触发车标的消逝。但这就致使一个诡异的状况,子元素弹出时鼠标就直接掩盖在图片上了,并不会触发链接上的mouseover,而是要一向挪动到链接的border上才触发,然后移出border再触发链接上的mouseover。由于border本身宽度小,只需鼠标的挪动速率过快,浏览器就会回响反映不过来,链接上的mouseovermouseout就不会被触发!!如此一来,当鼠标疾速地在各li上扫一遍后,就被扫过地区的图象会一向显现!!

这也申明监听事宜实际上是个很费盘算量的事变,一旦事宜发作得很快,浏览器对事宜的监听就不太靠谱了。所以要处置惩罚上面的题目,就得给浏览器相应的时候,能够改成监听图片的mouseout触发车标的消逝,但最好地,照样精简dom构造,不再在链接里嵌套图片,把图片内置成链接的背景,如许链接变大就不会有上面的懊恼了。

0x3鼠标移过,修正图片途径

完成结果

和上一题基础一个套路,总之要监听mouseover这类进入子元素也会触发的事宜,就肯定得防备一连触发,不然就会和上一题一样涌现背叛料想的结果、而且性能上也不太好。防备一连触发的要领就是直接对最里层的子元素作用。另有像上一题也提到的,关于这类掩盖的事宜还要保证元素的面积够大、让浏览器回响反映得过来。

另有一个点,就是加载动画的完成,这里用的是一个设置了半透明gif背景的div来做,直接掩盖在展现区上。在mouseover触发图片切换时显现这个div,直到要展现图片load终了,再触发其消逝即可。

0x4复选框全选、全不选、反选

完成结果

轻微把思绪理一下,这题统共监听三个方面的点击事宜:全选框、反选链接、以及悉数的复选框的代办。详细到每一个方面:全选框的点击事宜处置惩罚悉数的复选框的勾选及本身文本内容的转变(‘全选’、‘全不选’)这两件事、而反选链接在此基础上还要处置惩罚全选框的勾选;至于悉数的复选框则处置惩罚全选框的勾选和全选框文本内容的转变这两件事。

如许一理就清楚了,每一个监听中的行动也就在三个支配当选:悉数的复选框的勾选、全选框的勾选和全选框文本内容的转变,而且这三件支配都得依靠一个“是不是悉数勾选”的布尔值举行,所以这里分别用三个函数完成这三个支配。末了,我们只需在事宜处置惩罚顺序中取得这个布尔值传给这几个函数就能够了,个中,全选框、反选链接能够从全选框的checked属性取得这个值,而悉数的复选框要取得就得靠遍历了。

0x5支配 input 标签

完成结果

搞不懂原题想完成什么,本来谁人版本功用也没做完,因而我就自作主张改成完成表单获值和重置了。经由过程这个也演习也补了一下表单的学问,关于这方面的总结我写在《表单学问总结》这篇文章里了。

0x6支配表单元素 select

完成结果

照样表单控件的演习,和input一样,select也有专有的API给我们支配,比纯真用DOM要领轻易高效,藉著此次演习把对选项的增编削查都练了一遍吧。增删应用select元素的addremove要领完成,而要详细接见和修正某个选项就得用options属性取得选项鸠合再支配选项。另外,将options元素集的length置零还能够直接清空一切选项,但options貌似是个只读的属性,给它直接赋null却不能清空选项。

0x7简朴的select级联列表

完成结果
监听州列表的change事宜猎取选中的州,再拿州名去猎取都市名增加到都市列表即可。注重增加前要把都市列表先清空,防备数据聚集;同时注重选中项的可直接由selectvalue属性取得,不必再绕个大弯去取得选中项。

—第二课完 \ (^o^) /—

    原文作者:Levon
    原文地址: https://segmentfault.com/a/1190000004596918
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞