Web API(二)排他思想和自定义属性
一、排他思想
1、定义
如果有同一组元素,想要某一个元素实现某种样式, 需要用到循环的排他思想算法:
- 所有元素全部清除样式(干掉其他人)
- 给当前元素设置样式 (留下我自己)
- 注意顺序不能颠倒,首先干掉其他人,再设置自己2、
2、案例
- 按钮案例、
// 需求:点击5个按钮中的任意一个按钮,当前按钮变粉色,其他按钮正常
//获取当前元素
var btns = document.querySelectorAll('button');
// 遍历伪数组
for (var i = 0; i < btns.length; i++) {
// 使用索引号取出单个按钮,绑定事件
btns[i].onclick = function() {
// 先清除所有按钮样式
for (var i = 0; i < btns.length; i++) {
btns[i].style.backgroundColor = '';
}
// 再设置自己的样式,改变当前按钮样式
// this不能换成btns[i], 这里的i值变成了5, 会报错
// 外层循环也会调用,先执行外层循环,在执行事件
this.style.backgroundColor = 'skyblue';
}
}
</script>
- 百度换肤、
// 需求:点击不同的图片,body 的背景图同步发生改变
// 思路:当点击小图片的时候,获取到当前图片的路径,并且设置给 body 上的 backgroundImage
// 获取元素
var imgs = document.querySelectorAll('img');
var body = document.body;
// for 循环遍历所有图片
for (var i = 0; i < imgs.length; i++) {
// 绑定事件
imgs[i].onclick = function() {
// 设置给body上的backgroundImage ,this.src图片的路径
body.style.backgroundImage = 'url(' + this.src + ')'
}
}
- 表格隔行变色、
// 案例需求:数据表格需要隔行变色的样式进行展示
// 思路: 给 tbody 中的每个 tr 绑定鼠标经过和离开事件,在事件处理函数中修改对应 tr 上的背景颜色
// 获取元素
var trs = document.querySelectorAll('tbody>tr');
console.log(trs);
// 遍历元素
for (var i = 0; i < trs.length; i++) {
// 鼠标经过,行背景色变色
trs[i].onmouseover = function() {
this.style.backgroundColor = 'skyblue';
}
// 鼠标经过,行背景色变为原来颜色
trs[i].onmouseout = function() {
this.style.backgroundColor = '';
}
}
- 全选案例
// 分析思路
// 1. 点击上面的全选按钮
// 2. 下面的分选按钮状态和全选按钮的状态保持一致
// 3. 点击下面的分选按钮
// 4. 核心:如何判断下面每个按钮都选中 ---> ( flag思想 ) 至少有一个按钮没有被选中
// 5. 设置上面全选按钮的状态
var main = document.querySelector('#mainCheckBox');
var rest = document.querySelectorAll('.restCheckBox');
// 绑定事件
main.onclick = function() {
// 获取当前按钮选中状态
var state = main.checked;
console.log(state); //true或false
// 遍历rest
for (var i = 0; i < rest.length; i++) {
// 给取出的每个按钮设置选中状态, 和全选按钮状态一致
rest[i].checked = state;
}
}
//给每个分选按钮绑定事件
for (var i = 0; i < rest.length; i++) {
rest[i].onclick = function() {
// 先设定一个flag变量
var flag = true; //true表示全选;false表示非全选(至少一个以上未选中).
// 遍历每个分选按钮
for (var i = 0; i < rest.length; i++) {
// 获取每个分选按钮是否选中
var state = rest[i].checked;
// 一旦有一个未选中
if (state == false) {
// 更新flag变量,改选为非全选状态
flag = false;
break;
}
}
console.log(flag);
// 设置全选按钮状态
main.checked = flag;
}
}
二、自定义属性操作
1、获取属性值
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZoH2RprG-1616981014708)(E:\黑马培训\前端基础\案例练习\就业班\笔记\Web API\Web API第二天\iamges\1550915376339.png)]
2、设置属性值
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-p68hUzmZ-1616981014711)(E:\黑马培训\前端基础\案例练习\就业班\笔记\Web API\Web API第二天\iamges\1550915445026.png)]
3、移除属性值
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6TAPdPJb-1616981014711)(E:\黑马培训\前端基础\案例练习\就业班\笔记\Web API\Web API第二天\iamges\1550915513137.png)]
4、H5自定义属性
自定义属性目的:是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。
自定义属性获取是通过getAttribute(‘属性’) 获取。
条件: 自定义属性名必须用 data- 开头
ele.dataset['index']//获取
ele.dataset['index']='123'//修改
三、节点操作
1、节点概述
-
网页中的所有内容都是节点(标签、属性、文本、注释等),在DOM 中,节点使用 node 来表示。
-
HTML DOM 树中的所有节点均可通过 JavaScript 进行访问,所有 HTML 元素(节点)均可被修改,也可以创建或删除。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IHueFTIQ-1616981014713)(E:\黑马培训\前端基础\案例练习\就业班\笔记\Web API\Web API第二天\iamges\1550970986988.png)]
2、父级节点
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bcP4QU6O-1616981014714)(E:\黑马培训\前端基础\案例练习\就业班\笔记\Web API\Web API第二天\iamges\1550971196686.png)]
3、子节点
所有子节点(了解)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IZYn3uIV-1616981014715)(E:\黑马培训\前端基础\案例练习\就业班\笔记\Web API\Web API第二天\iamges\1550971263925.png******)]
子元素节点(掌握)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-q06BLzqm-1616981014716)(E:\黑马培训\前端基础\案例练习\就业班\笔记\Web API\Web API第二天\iamges\1550971325828.png)]
返回的是伪数组,可以用索引号访问子元素节点
- 获取上一个兄弟元素
ele.previousElementSibling
获取下一个兄弟元素
ele.nextElementSibling
- 首尾元素
ele.firstElementChild
ele.children[0](优先试用)
ele.lastElementChild
ele.children[ele.children.length - 1](优先试用)
- 创建一个元素 div span li
document.createElement(‘标签名’)
- 追加元素
parent.appendChild(ele)
parent.insertBefore(ele, 指定的位置)