元素的增删改
选项卡实战
实现原理
- 使用自定义属性关联选项卡标签和内容区, 即有关联的标签和内容区的
data-index 相同. - 非活动的标签和内容区隐藏.
- 当动作事件(如: 点击事件/鼠标移入事件等)触发时, 执行切换选项卡高亮和内容区显示/隐藏操作.
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>选项卡</title> <style> @import 'tabs.css'; </style></head><body> <!-- 选项卡的页签部分 --> <div class="tabs"> <ul class="tab"> <!-- 默认显示水果页签内容 --> <li class="active" data-index="1">水果</li> <li data-index="2">手机</li> <li data-index="3">汽车</li> </ul> <!-- 页签内容 --> <!-- 1. 水果页签内容 --> <ul class="active" data-index="1"> <li>苹果</li> <li>雪梨</li> <li>香蕉</li> <li>橙子</li> </ul> <!-- 2. 手机页签内容 --> <ul data-index="2"> <li>华为</li> <li>荣耀</li> <li>OPPO</li> <li>VIVO</li> </ul> <!-- 3. 汽车页签内容 --> <ul data-index="3"> <li>大众</li> <li>丰田</li> <li>本田</li> <li>别克</li> </ul> </div></body><script> // 导航区 var tab = document.querySelector('.tab'); // 导航快 var tabItems = document.querySelector('.tab li'); // 把导航块的点击事件绑定到父元素(.tab), 利用冒泡机制触发 tab.addEventListener('click', selectItem, false); // ....鼠标移入..... // tab.addEventListener('mouseover', selectItem, false); function selectItem(event) { // 导航区中非导航块的区域, 鼠标进入时, 不做处理 if (event.target === event.currentTarget) { return false; } // console.log(event.target); // 获取被点击的导航块的父级元素, 再通过父级元素获取其所有的子节点(注意, 包括文本类型等HTML元素类型之外的子节点) event.target.parentNode.childNodes.forEach(function(item) { // 如果当前节点的类型是HTML元素(导航块), 则移除其active样式类 if (item.nodeType === 1) { item.classList.remove('active'); } }); // 给当前导航块加上active样式类 event.target.classList.add('active'); // 获取到导航内容区的ul元素 var items = document.querySelectorAll('.tabs ul:not(first-of-type)'); for (var i = 0; i < items.length; i++) { // 给data-index属性值跟当前被点击的导航块的data-index值相等的导航区增加active样式类 if (items[i].dataset.index == event.target.dataset.index) { items[i].classList.add('active'); } else { // 不等的, 则移除active样式类. items[i].classList.remove('active'); } } }</script></html>
效果图:
轮播图实战
实现原理
- 轮播图的图片设置为隐藏, 只显示激活状态的图片.
- 使用自定义属性关联图片和对应的小圆点, 即关联的图片和小圆点具有相同的
data-index 属性值, 点击小圆点, 将关联的图片设置为显示. - 点击上一张/下一张时, 利用
element.previousElementSibling 和 element.nextElementSibling 把上一张/下一张图片设置为显示, 并利用 data-index 属性把关联的小圆点设置为高亮. - 利用定时器, 定时执行”下一张”事件自动派发操作.
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>轮播图</title> <style> @import 'box.css'; </style></head><body> <!-- 轮播图 --> <div class="box"> <!-- 轮播图的图片区域 --> <img src="img/lb1.png" alt="" class="slider active" data-index="1" /> <img src="img/lb2.png" alt="" class="slider" data-index="2" /> <img src="img/lb3.png" alt="" class="slider" data-index="3" /> <img src="img/lb4.png" alt="" class="slider" data-index="4" /> <!-- 小黑点导航区 --> <div class="point-list"> <!-- 需要用js动态生成 --> </div> <span class="skip prev"><</span> <span class="skip next">></span> </div></body><script> var cl = console.log.bind(console); // 获取轮播图片 var imgs = document.querySelectorAll("img"); // 小圆点容器 pointList = document.querySelector(".point-list"); cl(pointList); // 根据图片的信息动态生成对应的小圆点 imgs.forEach(function(img, index) { // 生成小圆点 var span = document.createElement("span"); // 增加样式 span.classList.add("point"); span.dataset.index = img.dataset.index; // 初始状态，第一个小圆点为激活状态 if (index === 0) { span.classList.add("active"); } // 添加到小圆点容器中 pointList.appendChild(span); }); // 为小黑点添加事件（以事件委托的方式，事件添加到小圆点的父节点上） pointList.addEventListener( "click", function(event) { // 出发点击事件的节点 var currPoint = event.target; // 执行的事件绑定的节点 var pl = event.currentTarget; // 点击非小圆点之外的小圆点容器区域, 不做处理 if (pl == currPoint) return false; // 遍历图片数组 imgs.forEach(function(img, i) { var imgIndex = img.dataset.index; // 显示data-index与被点击小圆点的data-index值相同的图片显示, 隐藏当前显示的图片 if (currPoint.dataset.index == imgIndex) { img.classList.add("active"); currPoint.classList.add("active"); } // 去掉当前显示的图片以及显示为高亮的小圆点的active样式 else if (img.classList.contains("active")) { img.classList.remove("active"); var spot = document.querySelector( 'span[data-index="' + imgIndex + '"]' ); spot.classList.remove("active"); // cl(spot); } }); }, false ); // 获取翻页按钮 var skips = document.querySelectorAll(".skip"); // 绑定点击事件 skips.item(0).addEventListener("click", skipImg, false); skips.item(1).addEventListener("click", skipImg, false); function skipImg(event) { // 判断是上一页还是下一页 var next = this.classList.contains("next") ? "+" : "-"; // 获取当前显示的图片 var img = document.querySelector("img.active"); // 获取显示图片的data-index属性值 var index = img.dataset.index; // 下一章图片的data-index属性值 var nextIndex = parseInt(eval(index + next + "1")); cl(typeof nextIndex); // 边界值处理 nextIndex = nextIndex > 4 ? 1 : nextIndex < 1 ? 4 : nextIndex; cl(nextIndex); // 当前显示的图片和对应小圆点取消active样式 img.classList.remove("active"); document.querySelector(".point.active").classList.remove("active"); var nextImg = document.querySelector( 'img[data-index="' + nextIndex + '"]' ); var nextPoint = document.querySelector( '.point[data-index="' + nextIndex + '"]' ); nextImg.classList.add("active"); nextPoint.classList.add("active"); } // 轮播图容器 var box = document.querySelector(".box"); // 定时器 var timer = null; // 2. 当鼠标移出轮播图区域时, 加回定时器, 每2秒自动切换图片 box.addEventListener("mouseout", startTimer, false); // 1. 当鼠标移入轮播图区域时, 清除定时器, 由用户点击操作 box.addEventListener("mouseover", clearTimer, false); // 利用定时器, 每隔一段时间执行一次事件派发, 自动触发点金"下一页"事件 function startTimer() { // 创建一个点击事件 var click = new Event("click"); // 创建定时器, 语法: setInterver(间隔执行的回调函数, 间隔的毫秒数); timer = setInterval(function() { // 把点击事件派发给"下一页" skips.item(1).dispatchEvent(click); }, 2000); } startTimer(); // 清楚定时器 function clearTimer() { // 调用清除定时器的方法 clearInterval(timer); }</script></html>
运行效果图:
学习心得
- 懒加载理解得不够到位, 选了理解得比较到位的选项卡作为作业.
- 通过本次实战课, 自己对js的各种操作有了进一步的理解. 认识到了他们的使用场景.
- 懒加载主要是各种偏移量, 高度等, 是相对于哪个参照物这点, 理解得不太到位. 在老师给的实例中, 给父元素绑定滚动事件, 而在事件内部, 用
event.target.scrollHeight 来获取子元素的滚动高度, 个人理解, event.target 是父元素, event.target.scrollHeight 应该是父元素的滚动条滚动的高度, 而不是子元素相对于父元素滚动的高度, 这点没绕过来. element.offsetTop 这个值, 是相对于父元素(body)的偏移量, 还是相对于文档内容区(document.documentElement)顶部的偏移量. 这点也比较模糊. 希望老师解惑.
Correcting teacher：
天蓬老师
Correction status：qualified
Teacher's comments：你对文档大小与窗口大小还是没搞清楚 ， 通常情况下， 文档总是要比显示窗口（视口）要大， 所以可视区总是小于文档区， 所以， 如果用窗口大小来表示文档大小， 就需要再加上滚动大小才可以，而滚动有水平和垂直二个方向
Collection
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
