2018-11-14日报

js基础(1/4天）

1.table栏切换

table栏切换主要是掌握排他性，再将自身“突出”。
案例:主要是以视觉上占用同一空间索引不同而显示盒子不同（实战中运用于条件索引框）。
效果实现就是鼠标在那个button上悬停就显示相对应哪一个盒子。
效果图：

image.png

2.下拉菜单事件

//select的value值会是选择的option的value值

js中菜单栏对象使用onchange方法。
案例：配合精灵图实现了一个选择菜单项切换相应图片，以switch接受不同value值。
效果图：

image.png

3.DOM访问关系的一些方法

1.封装自身class

IE8及之前js中没有直接得到类名定义对象的方法，那么如果考虑到兼容性问题就采取自身封装一个class方法，实际操作是遍历范围内所有标签，然后对比参数传进来的class值与遍历到标签的class值相同则实现需求操作。

2.DOM生成、插入、删除节点

image.png

每一项相同的都有两个只是兼容性问题，避免这样的麻烦干脆就两个都写上去以或来满足。
var div = one.nextElementSibling || one.nextSibling;
注意：或前必须写正常浏览器的方式（也就是带Element的），或后才去写IE的。

获取所有字节点采取children，以数组形式放入采取该方法父亲的所有子节点
注意：包含是子节点不是所有后代节点

主要是用于标签之中联动的一些问题，同时有时候很方便与父子标签之间的一些操作就没有必要把每一个需要操作的标签提取出来，以自身案例为例。

案例：实现输入框用户输入信息点击添加则新建标签显示输入内容
效果图：

image.png