4.5 案例
排他思想（算法）
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
//1. 获取所有按钮元素
btns = document.getElementsByTagName('button');
//2. 绑定事件
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = function() {
//（1）将所有按钮背景颜色去掉
for (var j = 0; j < btns.length; j++) {
btns[j].style.backgroundColor = '';
}
//(2)将当前按钮的背景颜色设置为粉红色
this.style.backgroundColor = 'pink';
}
}
</script>
</body>
百度换肤效果(样式省略)
- 错误写法
<body>
<ul class="baidu">
<li><img src="images/1.jpg"></li>
<li><img src="images/2.jpg"></li>
<li><img src="images/3.jpg"></li>
<li><img src="images/4.jpg"></li>
</ul>
<script>
//1. 获取所有li元素
var pics = document.getElementsByTagName('li');
for (var i = 0; i < pics.length; i++) {
console.log(i); //0 1 2 3
pics[i].onclick = function() {
document.body.style.background = 'url(images/' + i + '.jpg)';
}
}
</script>
</body>
- 正确写法
<body>
<ul class="baidu">
<li><img src="images/1.jpg"></li>
<li><img src="images/2.jpg"></li>
<li><img src="images/3.jpg"></li>
<li><img src="images/4.jpg"></li>
</ul>
<script>
//1. 获取元素
var imgs = document.querySelector('.baidu').querySelectorAll('img');
//2. 注册事件
for (var i = 0; i < imgs.length; i++) {
imgs[i].onclick = function() {
document.body.style.backgroundImage = 'url(' + this.src + ')';
}
}
</script>
</body>
鼠标经过表格行，该行高亮
- 用到鼠标经过onmouseover 鼠标离开onmouseout
<body>
<table>
<thead>
<tr>
<th>代码</th>
<th>名称</th>
<th>最新公布净值</th>
<th>累计净值</th>
<th>前单位净值</th>
<th>净值增长率</th>
</tr>
</thead>
<tbody>
<tr>
<td>003526</td>
<td>农银金穗3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003526</td>
<td>农银金穗3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003526</td>
<td>农银金穗3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003526</td>
<td>农银金穗3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003526</td>
<td>农银金穗3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003526</td>
<td>农银金穗3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
</tbody>
</table>
<script>
//1. 获取元素
var tr = document.querySelector('tbody').querySelectorAll('tr'); //注意：一定要是：单个元素.单个元素or 单个元素.集合 not 集合.单个元素 not 集合.集合
//2. 绑定事件 若改成鼠标点击click变成高亮，那么就要用排他思想了
for (var i = 0; i < tr.length; i++) {
tr[i].onmouseover = function() {
this.className = 'bg';
}
tr[i].onmouseout = function() {
this.className = '';
}
}
</script>
</body>
添加了一个样式
/* 比较友好的写法是在css里面写一个类 */
.bg {
background-color: pink;
}
表单全选以及取消全选案例
样式省略
<body>
<div class="wrap">
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="j_cbAll" />
<!-- 对于复选框，有一个属性checked,若写成checked='checked'则默认被选中，若不写该属性(如上) 则默认未被选中-->
</th>
<th>商品</th>
<th>价钱</th>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<td>
<input type="checkbox" />
</td>
<td>iPhone8</td>
<td>8000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>iPad Pro</td>
<td>5000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>iPad Air</td>
<td>2000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>Apple Watch</td>
<td>2000</td>
</tr>
</tbody>
</table>
</div>
<script>
//全选和取消全选做法
//获取事件
all = document.querySelector('thead').querySelector('input');
inputs = document.querySelector('tbody').querySelectorAll('input');
//注册事件
all.onclick = function() {
// console.log(this.checked);
//this.checked可以得到当前复选框的选中状态，如果是true就是选中，如果是false就是未选中
for (var i = 0; i < inputs.length; i++) {
inputs[i].checked = this.checked;
}
}
//2 下面复选框需要全选中，最上面的按钮才会被选中
for (var i = 0; i < inputs.length; i++) {
inputs[i].onclick = function() {
//flag 控制全选按钮是否选中
var flag = true;
//每次点击下面的复选框都要检查4个小按钮是否全被选中
for (var i = 0; i < inputs.length; i++) {
//如果下面某一个复选框没有被选中
if (!inputs[i].checked) {
flag = false;
}
}
all.checked = flag;
}
}
</script>
</body>
4.6 自定义属性操作
获取属性值的方法：element.属性、element.getAttribute('属性')
<body>
<!-- id是元素本身的属性，index是自定义属性（程序员自己添加的属性） -->
<div id="demo" index="1"></div>
<script>
var div = document.querySelector('div');
//1. 获取元素的属性值
// (1)element.属性 该方法常常用于获取元素本身的属性
console.log(div.id); //demo
//（2）element.getAttribute('属性') 该方法常常用于获取元素自定义的属性
console.log(div.getAttribute('id')); //demo
console.log(div.getAttribute('index')); //1
</script>
</body>
自定义属性值---->element.属性 = '值'、element.setAttribute('属性','值')
- 说明：
setAttribute('属性','值')不仅可以修改已经有的自定义属性值，还可以创建目前没有的属性并设置值
<body>
<!-- id是元素本身的属性，index是自定义属性（程序员自己添加的属性） -->
<div id="demo" index="1" class="nav"></div>
<script>
var div = document.querySelector('div');
//2. 设置元素属性值
// (1)element.属性 = '值' 该方法常常针对元素本身的属性
div.id = 'test'
div.className = 'navs'; //这个特殊用的是className而不是class
//（2）element.setAttribute('属性','值') 该方法常常针对元素自定义的属性
div.setAttribute('index', '2');
div.setAttribute('class', 'footer');//该方法既可以修改自定义属性又可以修改原先自带的属性
</script>
</body>
移除属性---->removeAttribute()
- 语法
element.removeAttribute("属性");
<body>
<!-- id是元素本身的属性，index是自定义属性（程序员自己添加的属性） -->
<div id="demo" index="1" class="nav"></div>
<script>
var div = document.querySelector('div');
//3 移除属性
div.removeAttribute('index');
</script>
</body>
案例tab栏切换（重点案例）
- tab栏切换有两个大的模块
- 上面的模块选项卡，点击某一个，当前这个底色会是红色，其余不变(排他思想)
- 下面的模块内容，会随着上面选项卡变化。所以下面的模块变化写到点击事件里面
- 规律：下面模块显示内容和上面的选项卡一一对应，相匹配
- 问题是怎么知道点击的是哪一个li呢
- 解决思路：给上面的tab_lis里面所有的小li添加自定义属性，属性值从0开始编号
样式
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
.tab {
978px;
margin: 100px auto;
}
.tab_list {
height: 39px;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
.tab_list li {
float: left;
height: 39px;
line-height: 39px;
padding: 0 20px;
text-align: center;
cursor: pointer;
}
.tab_list .current {
background-color: #c81623;
color: #fff;
}
.item_info {
padding: 20px 0 0 20px;
}
.item {
display: none;
}
</style>
结构
<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>
js脚本之上面的模块
<script>
//1. 上面的模块选项卡，点击某一个，当前这个底色会是红色，其余不变（排他思想）
//获取元素
var tab_list = document.querySelector('.tab_list');
var lis = tab_list.querySelectorAll('li');
//for循环绑定点击事件
for (var i = 0; i < lis.length; i++) {
lis[i].onclick = function() {
//干掉所有人 其余的li清除 class="current"这个类
for (var i = 0; i < lis.length; i++) {
lis[i].className = '';
}
//留下我自己
this.className = 'current';
}
}
</script>
js脚本之在上面的基础上添加下面的模块
<script>
//获取元素
var tab_list = document.querySelector('.tab_list');
var lis = tab_list.querySelectorAll('li');
var items = document.querySelectorAll('.item');
//for循环绑定点击事件
for (var i = 0; i < lis.length; i++) {
//开始给5个li设置索引号
lis[i].setAttribute('index', i);
lis[i].onclick = function() {
for (var i = 0; i < lis.length; i++) {
lis[i].className = '';
}
this.className = 'current';
//2. 下面的显示内容模块
//获取当前小li的索引号
var index = this.getAttribute('index');
//干掉所有人 让其余的item这些div隐藏
for (var i = 0; i < items.length; i++) {
items[i].style.display = 'none';
}
//留下我自己
items[index].style.display = 'block';
}
}
</script>
4.7 H5自定义属性
<body>
<div getTime='20' data-index="2" data-time="30" data-list-name="andy"></div>
<script>
var div = document.querySelector('div');
console.log(div.getTime); //undefined 该方式无法获取自定义属性
console.log(div.getAttribute('getTime')); //20
console.log(div.getAttribute('data-index')); //2
console.log(div.getAttribute('data-list-name')); //andy
// H5新增获取自定义属性的方法 它只能获取data-开头的
//dataset是一个集合，里面存放了所有以data开头的自定义属性
console.log(div.dataset); //DOMStringMap {index: "2", time: "30", listName: "andy"}
console.log(div.dataset['index']); //2
console.log(div.dataset.index); //2
//如果自定义属性里有多个-连接的单词，我们获取的时候采取驼峰命名法
console.log(div.dataset.listName); //andy
console.log(div.dataset['listName']); //andy
</script>
</body>
getAttribute较为常用，因为兼容性较好