开始有点难度了当pink老师提前布置了新浪下拉菜单后,发现自己没有好好复习和预习,知识点还没到融会贯通的状态,很难想到会用什么方法写
排他思想
如果有同一组元素,想要某一个元素实现某种样式,需要用到循环的排他思想算法:
-
所有元素全部清除样式(干掉其他人)
-
给当前元素设置样式(留下我自己)
-
注意顺序不能颠倒(程序是从上往下),首先干掉其他人,再留下自己
案例:百度换肤
分析:
-
这个案例练习的是给一组元素注册事件
-
给4个小图片利用循环注册点击事件
-
当点击了这个图片,让页面背景改为当前的图片
你怎么知道点了哪张图?
-
核心算法:把当前图片的scr路径取过来,给body作为背景即可
案例:表格隔行变色
分析:
-
用到新的鼠标事件鼠标经过onmouseover 鼠标离开onmouseout
-
核心思路:鼠标经过tr行 当前的行变背景颜色,鼠标离开去掉当前的背景颜色
-
注意:第一行(thead 里面的行) 不需要变换颜色,因此获取的是tbody里面的行
案例:表单全选取消全选 案例
企业要求:
-
点击上面全选复选框,下面所有复选框都选中(全选)
-
再次点击全选复选框,下面所有的复选框都不选中(取消全选)
-
如果下面复选框全部选中,上面全选按钮就自动选中
-
如果下面复选框有一个没选中,上面全选阿牛就不选中
-
所有复选框一开始默认都没有选中状态
分析:
-
全选和取消全选做法:让下面所有复选框的checked属性(选中状态)跟随全选按钮即可
-
下面复选框需要全部选中,上面全选才能选中做法:给下面所有复选框绑定点击事件,每次点击,都要循环查看下面所有的复选框是否有没有选中,如果有一个没选中的,上面全选就不选中
-
可以设置一个变量,来控制全选是否选中
自定义属性的操作
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
<div class="tab">
<div class="tab_list">
<ul>
<li class="current">商品介绍</li>
<li>规格与包装</li>
<li>售后保障</li>
<li>商品评价(50000)</li>
<li>手机社区</li>
</ul>
</div>
<div class="tab_con">
<div class="item" style="display: block;">
商品介绍模块内容
</div>
<div class="item">
规格与包装模块内容
</div>
<div class="item">
售后保障模块内容
</div>
<div class="item">
商品评价(50000)模块内容
</div>
<div class="item">
手机社区模块内容
</div>
</div>
</div>
H5自定义属性
为什么要使用自定义属性?
自定义属性的目的:是为了保存并使用数据,有些数据可以保存到页面中而不用保存到数据库中
自定义属性获取是通过getAttribute('属性')获取
但是有些自定义属性很容易引起歧义,不容易判断是元素的内置属性还是自定义属性
设置H5自定义属性
H5规定自定义属性date开头作为属性名并且赋值
比如
<div data-index= '1'></div>
看到这个必定就是程序员自定义添加的
或者使用JS设置
element.setAttribute('date-index',2);
将2改成20
获取H5自定义属性
-
兼容性获取(element.getAttribute('date-index'));
-
H5新增element.dateset.index 或 element.dateset['index'] ie11才开始支持