目录
一、百度换肤效果
案例分析
- 给一组元素注册事件
- 给4个小图片利用循环注册点击事件
- 点击图片，把背景改为当前的图片
- 核心算法：把当前图片的src路径获取过来，给body作为背景即可
<style>
*{
margin: 0;
padding: 0;
}
body{
background: url(img/mao1.png) no-repeat center top;
background-size: 100%;
}
li{
list-style: none;
}
.baidu{
overflow: hidden;
margin: 100px auto;
background-color: #fff;
width: 410px;
padding-top: 3px;
}
.baidu li{
float: left;
margin: 0 1px;
cursor: pointer;
}
.baidu img{
width: 100px;
}
</style> <ul class="baidu">
<li><img src="img/mao1.png"></li>
<li><img src="img/mao2.png"></li>
<li><img src="img/mao3.png"></li>
<li><img src="img/night.JPG"></li>
</ul>
<script>
var imgs = document.querySelector('.baidu').querySelectorAll('img');
// 循环注册事件
for(var i = 0; i < imgs.length; i++){
imgs[i].onclick = function(){
// 将this.scr赋值给body
document.body.style.backgroundImage = 'url(' + this.src + ')';
}
}
</script>
二、表格隔行变色
案例分析：
- 用到鼠标事件 鼠标经过onmouseover 鼠标离开onmouseout
- 核心思路：鼠标经过tr行，当前行的改变背景颜色，鼠标离开去掉当前的背景颜色
<style>
table {
width: 800px;
margin: 100px auto;
text-align: center;
border-collapse: collapse;
font-size: 14px;
}
thead tr {
height: 30px;
background-color: skyblue;
}
tbody tr {
height: 30px;
}
tbody td {
border-bottom: 1px solid #d7d7d7;
font-size: 12px;
color: blue;
}
.bg {
background-color: orange;
}
</style> <table>
<thead>
<tr>
<th>代码</th>
<th>名称</th>
<th>最新公布净值</th>
<th>累计净值</th>
<th>前单位净值</th>
<th>净值增长率</th>
</tr>
</thead>
<tbody>
<tr>
<td>001234</td>
<td>测试用基金</td>
<td>1.7400</td>
<td>1.7405</td>
<td>1.7309</td>
<td>+1.28%</td>
</tr>
<tr>
<td>001234</td>
<td>测试用基金</td>
<td>1.7400</td>
<td>1.7405</td>
<td>1.7309</td>
<td>+1.28%</td>
</tr>
<tr>
<td>001234</td>
<td>测试用基金</td>
<td>1.7400</td>
<td>1.7405</td>
<td>1.7309</td>
<td>+1.28%</td>
</tr>
<tr>
<td>001234</td>
<td>测试用基金</td>
<td>1.7400</td>
<td>1.7405</td>
<td>1.7309</td>
<td>+1.28%</td>
</tr>
<tr>
<td>001234</td>
<td>测试用基金</td>
<td>1.7400</td>
<td>1.7405</td>
<td>1.7309</td>
<td>+1.28%</td>
</tr>
</tbody>
</table>
<script>
var trs = document.querySelector('tbody').querySelectorAll('tr');
for(var i = 0; i < trs.length; i++){
// 鼠标经过事件 onmouseover
trs[i].onmouseover = function(){
this.className = 'bg';
}
// 鼠标离开事件 onmouseout
trs[i].onmouseout = function(){
this.className = '';
}
}
</script>
三、表单全选取消全选案例
案例分析
- 全选和取消全选做法：让下面所有复选框的checked属性（选中状态）跟随 全选按钮即可
- 下面复选框需要全部选中，上面全选才能选中的做法：给下面所有的复选框绑定事件，每次点击，都要循环查看下面所有复选框是否有没选中的，如果有一个没选中，上面的全选就不选中
- 可以设置一个变量，来控制全选是否选中
<style>
table {
margin: 100px auto;
text-align: center;
border-collapse: collapse;
}
thead tr {
height: 30px;
background-color: skyblue;
}
tbody tr {
height: 30px;
}
tbody td {
border-bottom: 1px solid #d7d7d7;
}
</style> <div class="wrap">
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="cbAll">
</th>
<th>商品</th>
<th>价格</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td>
<input type="checkbox">
</td>
<td>iPhone13</td>
<td>8000</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>iPad pro</td>
<td>4000</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>iPad Air</td>
<td>3000</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>Apple Watch</td>
<td>2000</td>
</tr>
</tbody>
</table>
</div>
<script>
var cbAll = document.getElementById('cbAll');
var tbs = document.getElementById('tb').getElementsByTagName('input');
cbAll.onclick = function(){
for(var i = 0; i < tbs.length; i++){
tbs[i].checked = this.checked;
}
}
for(var i = 0; i < tbs.length; i++){
tbs[i].onclick = function(){
// 定义一个变量flag，用于控制全选按钮是否等于true
var flag = true;
for(var i = 0; i < tbs.length; i++){
if(!tbs[i].checked){
flag = false;
}
}
cbAll.checked = flag;
}
}
</script>
四、自定义属性的操作
4.1 获取属性值
- element.属性 获取属性值
- element.getAttribute('属性')
区别：
- element.属性 获取内置属性值（元素本身自带的属性）
- element.getAttribute('属性')；主要获取得自定义的属性（标准）
4.2 设置属性值
- element.属性= '值' 设置内置属性值
- element.setAttribute('属性','值')
区别：
- element.属性 设置内置属性值
- element.setAttribute(''属性)；主要设置自定义的属性（标准）
4.3 移除属性
- element.removeAttribute('属性')
4.5 案例练习 - tab栏切换（重点案例）
当鼠标点击上面相应的选项卡（tab），内容跟谁变化
案例分析：
- Tab栏切换有2个大模块
- 上的模块选项卡，点击某一个，当前这一个底色会是红色，其余不变（排他思想）修改类名的方式
- 下面的模块内容，会跟随上面的选项卡变化
- 规律：下面的模块显示内容和上面的选项卡一一对应，相匹配
- 核心思路：给上面的tab_list里面的所有小li添加自定义属性，属性值从0开始编号
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
.tab {
padding: 100px;
}
.tab_list{
width: 988px;
border-bottom: 1px solid #e4393c;
overflow: hidden;
background-color: rgb(230, 225, 225);
}
.tab_list li {
float: left;
height: 39px;
line-height: 39px;
padding: 0 20px;
text-align: center;
cursor: pointer;
}
.tab_list .current {
background-color: #e4393c;
color: #fff;
cursor: default;
}
.item {
display: none;
}
</style><div class="tab">
<div class="tab_list">
<ul>
<li class="current">商品介绍</li>
<li>规格与包装</li>
<li>售后保障</li>
<li>商品评价（500）</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">
商品评价（500）模块内容
</div>
<div class="item">
手机社区模块内容
</div>
</div>
</div>
<script>
var tab_list = document.querySelector('.tab_list');
var list = tab_list.querySelectorAll('li');
var items = document.querySelectorAll('.item');
for(var i = 0; i < list.length; i++){
// 给5个小li设置索引号
list[i].setAttribute('index', i);
list[i].onclick = function(){
// 其余的li清除 class这个类
for(var i = 0; i < list.length; i++){
list[i].className = '';
}
this.className = 'current';
var index = this.getAttribute('index');
for(var i = 0; i <items.length; i++){
items[i].style.display = 'none';
}
items[index].style.display = 'block';
}
}
</script>
五、H5自定义属性
自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。
自定义属性获取是通过getAttribute('属性')获取
但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性
H5给我们新增了自定义属性：
5.1 设置H5自定义属性
H5规定自定义属性data开头做为属性名并且赋值
例如：<div data-index = '1'></div>
或者使用JS设置
element.setAttribute('data-index','1');
5.2 获取H5自定义属性
- 兼容性获取 element.getArribyte('data-index');
- H5 新增 element.dataset.index 或者 element.dataset['index'] ie 11 才开始支持，只能获取data开头的自定义属性
- dataset 是一个集合里面存放了所有以data开头的自定义属性；注意：如果自定义属性里面有多个-链接的单词，获取时采用驼峰命名法；例如：data-list-name = '1'，获取：element.dataset['listName']
202
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
