JavaScript|JS之DOM操作元素2 前端|css3|javascript

开始有点难度了当pink老师提前布置了新浪下拉菜单后，发现自己没有好好复习和预习，知识点还没到融会贯通的状态，很难想到会用什么方法写
排他思想如果有同一组元素，想要某一个元素实现某种样式，需要用到循环的排他思想算法：

所有元素全部清除样式（干掉其他人）
给当前元素设置样式（留下我自己）
注意顺序不能颠倒（程序是从上往下），首先干掉其他人，再留下自己

文章图片

案例：百度换肤分析：

这个案例练习的是给一组元素注册事件
给4个小图片利用循环注册点击事件
当点击了这个图片，让页面背景改为当前的图片

你怎么知道点了哪张图？

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

文章图片

案例：表格隔行变色分析：

用到新的鼠标事件鼠标经过onmouseover 鼠标离开onmouseout
核心思路：鼠标经过tr行当前的行变背景颜色，鼠标离开去掉当前的背景颜色
注意：第一行(thead 里面的行) 不需要变换颜色，因此获取的是tbody里面的行

文章图片

案例：表单全选取消全选案例企业要求：

点击上面全选复选框，下面所有复选框都选中（全选）
再次点击全选复选框，下面所有的复选框都不选中（取消全选）
如果下面复选框全部选中，上面全选按钮就自动选中
如果下面复选框有一个没选中，上面全选阿牛就不选中
所有复选框一开始默认都没有选中状态

分析：

全选和取消全选做法：让下面所有复选框的checked属性（选中状态）跟随全选按钮即可
下面复选框需要全部选中，上面全选才能选中做法：给下面所有复选框绑定点击事件，每次点击，都要循环查看下面所有的复选框是否有没有选中，如果有一个没选中的，上面全选就不选中
可以设置一个变量，来控制全选是否选中

文章图片

【JavaScript|JS之DOM操作元素2】
自定义属性的操作 1.获得属性值

element.属性获取属性值
element.getAttribute('属性');

区别：

element.属性获取内置属性值（元素本身自带的属性）
elemmts.getAttribute('属性'); 注意获得自定义属性(标准 ) 程序员自定义的属性

文章图片

简单来说，自己添加的属性就用getAttribute()
2.设置属性值

element.属性 = ‘值' 设置内置属性值
element.setAttritube('属性'，'值')；

文章图片

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

element.removeAttritube('属性');

文章图片

案例：tab栏切换（重点案例）当鼠标点击上面相应的选项卡(tab)下面内容跟随变化
分析：

Tab栏切换有2个的模块
上的模块选项卡，点击某一个，当前这一个底色会是红色，其余不变(排他思想) 修改类名的方式
下面的模块内容，会跟随上面的选项卡变化，所以下面模块变化写到点击事件里面
规律：下面的模块显示内容和上面的选项卡——对应，相匹配
核心思路：给上面的tab_list里面的所有小li添加自定义属性，属性值从0开始编号
当点击tab_list里面某一个li 让tab_con里面对应序号内容显示其余隐藏（排他思想）

文章图片

HTML

商品介绍

规格与包装

售后保障

商品评价（50000）

手机社区

商品介绍模块内容

规格与包装模块内容

售后保障模块内容

商品评价（50000）模块内容

手机社区模块内容

文章图片

H5自定义属性为什么要使用自定义属性？
自定义属性的目的：是为了保存并使用数据，有些数据可以保存到页面中而不用保存到数据库中
自定义属性获取是通过getAttribute('属性')获取
但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性
设置H5自定义属性 H5规定自定义属性date开头作为属性名并且赋值