JS之DOM操作元素2

开始有点难度了当pink老师提前布置了新浪下拉菜单后，发现自己没有好好复习和预习，知识点还没到融会贯通的状态，很难想到会用什么方法写

排他思想

如果有同一组元素，想要某一个元素实现某种样式，需要用到循环的排他思想算法：

1. 所有元素全部清除样式（干掉其他人）

2. 给当前元素设置样式（留下我自己）

3. 注意顺序不能颠倒（程序是从上往下），首先干掉其他人，再留下自己

案例：百度换肤

分析：

1. 这个案例练习的是给一组元素注册事件

2. 给4个小图片利用循环注册点击事件

3. 当点击了这个图片，让页面背景改为当前的图片

你怎么知道点了哪张图？

1. 核心算法：把当前图片的scr路径取过来，给body作为背景即可

 

案例：表格隔行变色

分析：

1. 用到新的鼠标事件鼠标经过onmouseover 鼠标离开onmouseout

2. 核心思路：鼠标经过tr行 当前的行变背景颜色，鼠标离开去掉当前的背景颜色

3. 注意：第一行(thead 里面的行) 不需要变换颜色，因此获取的是tbody里面的行

 

案例：表单全选取消全选 案例

企业要求：

1. 点击上面全选复选框，下面所有复选框都选中（全选）

2. 再次点击全选复选框，下面所有的复选框都不选中（取消全选）

3. 如果下面复选框全部选中，上面全选按钮就自动选中

4. 如果下面复选框有一个没选中，上面全选阿牛就不选中

5. 所有复选框一开始默认都没有选中状态

分析：

• 全选和取消全选做法：让下面所有复选框的checked属性（选中状态）跟随全选按钮即可

• 下面复选框需要全部选中，上面全选才能选中做法：给下面所有复选框绑定点击事件，每次点击，都要循环查看下面所有的复选框是否有没有选中，如果有一个没选中的，上面全选就不选中

• 可以设置一个变量，来控制全选是否选中

 

自定义属性的操作

1.获得属性值

• element.属性 获取属性值

• element.getAttribute('属性');

区别：

• element.属性 获取内置属性值 （元素本身自带的属性）

• elemmts.getAttribute('属性'); 注意获得自定义属性(标准 ) 程序员自定义的属性

 简单来说，自己添加的属性就用getAttribute()

2.设置属性值

• element.属性 = ‘值' 设置内置属性值

• element.setAttritube('属性'，'值')；

它会自动到div 中给div自定义添加属性 自带的属性就用className

3.移除属性

• element.removeAttritube('属性');

 

案例：tab栏切换（重点案例）

当鼠标点击上面相应的选项卡(tab)下面内容跟随变化

分析：

1. Tab栏切换有2个的模块

2. 上的模块选项卡，点击某一个，当前这一个底色会是红色，其余不变(排他思想) 修改类名的方式

3. 下面的模块内容，会跟随上面的选项卡变化，所以下面模块变化写到点击事件里面

4. 规律：下面的模块显示内容和上面的选项卡——对应，相匹配

5. 核心思路：给上面的tab_list里面的所有小li添加自定义属性，属性值从0开始编号

6. 当点击tab_list里面某一个li 让tab_con里面对应序号内容显示 其余隐藏（排他思想）

 HTML

   

       

           

               

• 商品介绍

               

• 规格与包装

               

• 售后保障

               

• 商品评价（50000）

               

• 手机社区

           

       

       

           

                商品介绍模块内容

           

           

                规格与包装模块内容

           

           

                售后保障模块内容

           

           

                商品评价（50000）模块内容

           

           

                手机社区模块内容

           

       

   

 

H5自定义属性

为什么要使用自定义属性？

自定义属性的目的：是为了保存并使用数据，有些数据可以保存到页面中而不用保存到数据库中

自定义属性获取是通过getAttribute('属性')获取

但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性

设置H5自定义属性

H5规定自定义属性date开头作为属性名并且赋值

比如

 

看到这个必定就是程序员自定义添加的

或者使用JS设置

element.setAttribute('date-index',2);

将2改成20

 

获取H5自定义属性

1. 兼容性获取(element.getAttribute('date-index'));

2. H5新增element.dateset.index 或 element.dateset['index'] ie11才开始支持