JS案例经验二

Posted 2020-11-30 小桃无主花自开

一

关键词：鼠标事件的触发

可以在函数中指定让鼠标事件自动触发，而不是必须要鼠标滑过才触发，例如：

main.onmouseover(); // 可以把该语句看做是鼠标滑过的模拟动作 main是DOM元素

二

关键词：for..of 的兼容性问题

旧的浏览器可能不会兼容for of方式的迭代方式，所以尽量使用常规的方式来迭代数组。

三

关键词：function作用域问题

例子：

for(var d = 0;d<10;d++){
  function(){
        console.log(d);    //在此处，打印的d的值永远为10；  `原因未知`
    }
}

四

关键词:元素的className

清除元素className的方法：

main.className = "";  //main为获取的DOM元素

五

关键词：元素在元素之上

若想让元素a在元素b之上，就应该先让元素a和元素b处在同一级，然后让元素a脱离标准流。

六

line-height可以控制a元素的高度。

七

关键词：导航栏相邻元素display问题

在js导航栏的案例中，需要实现这样的功能：当从一级菜单滑出时，保证二级菜单不消失（前提：设置了滑出一级菜单时二级菜单消失）。

实现方法：为二级菜单的设置滑过她时，他自己出现。

总结

在这个案例中，整个轮播特效的部分在一个整体的div中。

图片轮播的区域又是一个div（banner），图片相对于这个大的div定位在它里面，并重叠。图片上的箭头和原点和banner处于同一级，这是为了让他们脱离原本的文本流，从而出现在banner之上，也就是说为了让他们高一层。因为图片设置了定位，所以箭头们必须设置定位。

主菜单栏区域

他和banner也是同一级，子菜单同样和她同一级。

div的嵌套可以实现非常多的页面