简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >JS基础-元素的增删/选项卡小实战/轮播图小实战

JS基础-元素的增删/选项卡小实战/轮播图小实战

岂几岂几
岂几岂几原创
2020年06月04日 00:59:04870浏览

元素的增删改

  • 创建元素

    1. 使用 document.createElement(标签名) 的方式创建元素
    1. 使用 element.innerHTML=HTML代码片段 的方式创建元素并设置为 element 的后代元素.
    • element.innerHTML 和 element.innerText 的区别: 前者会把文本中的标签文本解析为 HTML 标签元素; 后者则把标签文本当作文本直接输出.

  • 插入元素

    1. 使用 element.appendChild(新元素) 的方式向父元素中插入新元素. 新元素将被插入到兄弟元素中最后的位置.
    1. 使用 element.insertBefor(新元素, 兄弟元素) 的方式在父元素中的某个子元素前插入新元素. 新元素将被插入在指定的兄弟元素之前.

  • 删除元素

  • 删除元素需要调用父元素的 removeChild(待删除子元素) 方法来执行删除.

    • 获取当前元素的父元素, 使用 element.parentNode 属性.

  • 补: 获取子节点和获取子元素的相关方法对比

    • 获取所有子节点, 用 element.childNodes 属性;
    • 获取所有子元素, 用 element.children 属性;
    • 获取子节点数量, 用 element.childNodes.length 属性;
    • 获取子元素数量, 用 element.childElementCount 属性, 或者 element.children.length 属性;
    • 获取第一个子节点, 用 element.firstChild 属性, 或者 element.childNodes[0] , 或者 element.childNodes.item(0) ;
    • 获取第一个子元素, 用 element.firstElementChild 属性, 或者 element.children[0] , 或者 element.children.item(0) ;
    • 获取最后一个子节点, 用 element.lastChild 属性, 或者 element.children[element.childNodes.length -1] , 或者 element.children.item(element.childNodes.length -1) ;
    • 获取最后一个子元素, 用 element.lastElementChild , 或者 element.children[element.childElementCount - 1] , 或者 element.children.item(element.childElementCount - 1) ;
    • 获取当前节点的前一个兄弟节点, 用 nodeElement.previousSibling 属性;
    • 获取当前元素的前一个兄弟元素, 用 eleElement.previousElementSibling 属性;
    • 获取当前节点的后一个兄弟节点, 用 nodeElement.nextSibling 属性;
    • 获取当前元素的后一个兄弟元素, 用 eleElement.nextElementSibling 属性;

选项卡实战

实现原理

  • 使用自定义属性关联选项卡标签和内容区, 即有关联的标签和内容区的 data-index 相同.
  • 非活动的标签和内容区隐藏.
  • 当动作事件(如: 点击事件/鼠标移入事件等)触发时, 执行切换选项卡高亮和内容区显示/隐藏操作.
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>选项卡</title>
  8.     <style>
  9.         @import 'tabs.css';
  10.     </style>
  11. </head>
  13. <body>
  14.     <!-- 选项卡的页签部分 -->
  15.     <div class="tabs">
  16.         <ul class="tab">
  17.             <!-- 默认显示水果页签内容 -->
  18.             <li class="active" data-index="1">水果</li>
  19.             <li data-index="2">手机</li>
  20.             <li data-index="3">汽车</li>
  21.         </ul>
  22.         <!-- 页签内容 -->
  23.         <!-- 1. 水果页签内容 -->
  24.         <ul class="active" data-index="1">
  25.             <li>苹果</li>
  26.             <li>雪梨</li>
  27.             <li>香蕉</li>
  28.             <li>橙子</li>
  29.         </ul>
  30.         <!-- 2. 手机页签内容 -->
  31.         <ul data-index="2">
  32.             <li>华为</li>
  33.             <li>荣耀</li>
  34.             <li>OPPO</li>
  35.             <li>VIVO</li>
  36.         </ul>
  37.         <!-- 3. 汽车页签内容 -->
  38.         <ul data-index="3">
  39.             <li>大众</li>
  40.             <li>丰田</li>
  41.             <li>本田</li>
  42.             <li>别克</li>
  43.         </ul>
  44.     </div>
  45. </body>
  46. <script>
  47.     // 导航区
  48.     var tab = document.querySelector('.tab');
  49.     // 导航快
  50.     var tabItems = document.querySelector('.tab li');
  52.     // 把导航块的点击事件绑定到父元素(.tab), 利用冒泡机制触发
  53.     tab.addEventListener('click', selectItem, false);
  54.     // ....鼠标移入.....
  55.     // tab.addEventListener('mouseover', selectItem, false);
  57.     function selectItem(event) {
  58.         // 导航区中非导航块的区域, 鼠标进入时, 不做处理
  59.         if (event.target === event.currentTarget) {
  60.             return false;
  61.         }
  63.         // console.log(event.target);
  64.         // 获取被点击的导航块的父级元素, 再通过父级元素获取其所有的子节点(注意, 包括文本类型等HTML元素类型之外的子节点)
  65.         event.target.parentNode.childNodes.forEach(function(item) {
  66.             // 如果当前节点的类型是HTML元素(导航块), 则移除其active样式类
  67.             if (item.nodeType === 1) {
  68.                 item.classList.remove('active');
  69.             }
  70.         });
  72.         // 给当前导航块加上active样式类
  73.         event.target.classList.add('active');
  75.         // 获取到导航内容区的ul元素
  76.         var items = document.querySelectorAll('.tabs ul:not(first-of-type)');
  77.         for (var i = 0; i < items.length; i++) {
  78.             // 给data-index属性值跟当前被点击的导航块的data-index值相等的导航区增加active样式类
  79.             if (items[i].dataset.index == event.target.dataset.index) {
  80.                 items[i].classList.add('active');
  81.             } else {
  82.                 // 不等的, 则移除active样式类.
  83.                 items[i].classList.remove('active');
  84.             }
  85.         }
  86.     }
  87. </script>
  89. </html>

效果图:

轮播图实战

实现原理

  • 轮播图的图片设置为隐藏, 只显示激活状态的图片.
  • 使用自定义属性关联图片和对应的小圆点, 即关联的图片和小圆点具有相同的 data-index 属性值, 点击小圆点, 将关联的图片设置为显示.
  • 点击上一张/下一张时, 利用 element.previousElementSibling 和 element.nextElementSibling 把上一张/下一张图片设置为显示, 并利用 data-index 属性把关联的小圆点设置为高亮.
  • 利用定时器, 定时执行”下一张”事件自动派发操作.
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>轮播图</title>
  8.     <style>
  9.         @import 'box.css';
  10.     </style>
  11. </head>
  13. <body>
  14.     <!-- 轮播图 -->
  15.     <div class="box">
  16.         <!-- 轮播图的图片区域 -->
  17.         <img src="img/lb1.png" alt="" class="slider active" data-index="1" />
  18.         <img src="img/lb2.png" alt="" class="slider" data-index="2" />
  19.         <img src="img/lb3.png" alt="" class="slider" data-index="3" />
  20.         <img src="img/lb4.png" alt="" class="slider" data-index="4" />
  21.         <!-- 小黑点导航区 -->
  22.         <div class="point-list">
  23.             <!-- 需要用js动态生成 -->
  24.         </div>
  25.         <span class="skip prev">&lt;</span>
  26.         <span class="skip next">&gt;</span>
  27.     </div>
  28. </body>
  29. <script>
  30.     var cl = console.log.bind(console);
  31.     // 获取轮播图片
  32.     var imgs = document.querySelectorAll("img");
  33.     // 小圆点容器
  34.     pointList = document.querySelector(".point-list");
  35.     cl(pointList);
  37.     // 根据图片的信息动态生成对应的小圆点
  38.     imgs.forEach(function(img, index) {
  39.         // 生成小圆点
  40.         var span = document.createElement("span");
  41.         // 增加样式
  42.         span.classList.add("point");
  44.         span.dataset.index = img.dataset.index;
  45.         // 初始状态，第一个小圆点为激活状态
  46.         if (index === 0) {
  47.             span.classList.add("active");
  48.         }
  49.         // 添加到小圆点容器中
  50.         pointList.appendChild(span);
  51.     });
  53.     // 为小黑点添加事件（以事件委托的方式，事件添加到小圆点的父节点上）
  54.     pointList.addEventListener(
  55.         "click",
  56.         function(event) {
  57.             // 出发点击事件的节点
  58.             var currPoint = event.target;
  59.             // 执行的事件绑定的节点
  60.             var pl = event.currentTarget;
  61.             // 点击非小圆点之外的小圆点容器区域, 不做处理
  62.             if (pl == currPoint) return false;
  64.             // 遍历图片数组
  65.             imgs.forEach(function(img, i) {
  66.                 var imgIndex = img.dataset.index;
  67.                 // 显示data-index与被点击小圆点的data-index值相同的图片显示, 隐藏当前显示的图片
  68.                 if (currPoint.dataset.index == imgIndex) {
  69.                     img.classList.add("active");
  70.                     currPoint.classList.add("active");
  71.                 }
  72.                 // 去掉当前显示的图片以及显示为高亮的小圆点的active样式
  73.                 else if (img.classList.contains("active")) {
  74.                     img.classList.remove("active");
  75.                     var spot = document.querySelector(
  76.                         'span[data-index="' + imgIndex + '"]'
  77.                     );
  78.                     spot.classList.remove("active");
  79.                     // cl(spot);
  80.                 }
  81.             });
  82.         },
  83.         false
  84.     );
  86.     // 获取翻页按钮
  87.     var skips = document.querySelectorAll(".skip");
  89.     // 绑定点击事件
  90.     skips.item(0).addEventListener("click", skipImg, false);
  91.     skips.item(1).addEventListener("click", skipImg, false);
  93.     function skipImg(event) {
  94.         // 判断是上一页还是下一页
  95.         var next = this.classList.contains("next") ? "+" : "-";
  96.         // 获取当前显示的图片
  97.         var img = document.querySelector("img.active");
  98.         // 获取显示图片的data-index属性值
  99.         var index = img.dataset.index;
  100.         // 下一章图片的data-index属性值
  101.         var nextIndex = parseInt(eval(index + next + "1"));
  102.         cl(typeof nextIndex);
  103.         // 边界值处理
  104.         nextIndex = nextIndex > 4 ? 1 : nextIndex < 1 ? 4 : nextIndex;
  105.         cl(nextIndex);
  107.         // 当前显示的图片和对应小圆点取消active样式
  108.         img.classList.remove("active");
  109.         document.querySelector(".point.active").classList.remove("active");
  111.         var nextImg = document.querySelector(
  112.             'img[data-index="' + nextIndex + '"]'
  113.         );
  114.         var nextPoint = document.querySelector(
  115.             '.point[data-index="' + nextIndex + '"]'
  116.         );
  117.         nextImg.classList.add("active");
  118.         nextPoint.classList.add("active");
  119.     }
  121.     // 轮播图容器
  122.     var box = document.querySelector(".box");
  123.     // 定时器
  124.     var timer = null;
  125.     // 2. 当鼠标移出轮播图区域时, 加回定时器, 每2秒自动切换图片
  126.     box.addEventListener("mouseout", startTimer, false);
  127.     // 1. 当鼠标移入轮播图区域时, 清除定时器, 由用户点击操作
  128.     box.addEventListener("mouseover", clearTimer, false);
  130.     // 利用定时器, 每隔一段时间执行一次事件派发, 自动触发点金"下一页"事件
  131.     function startTimer() {
  132.         // 创建一个点击事件
  133.         var click = new Event("click");
  134.         // 创建定时器, 语法: setInterver(间隔执行的回调函数, 间隔的毫秒数);
  135.         timer = setInterval(function() {
  136.             // 把点击事件派发给"下一页"
  137.             skips.item(1).dispatchEvent(click);
  138.         }, 2000);
  139.     }
  141.     startTimer();
  143.     // 清楚定时器
  144.     function clearTimer() {
  145.         // 调用清除定时器的方法
  146.         clearInterval(timer);
  147.     }
  148. </script>
  150. </html>

运行效果图:

学习心得

  • 懒加载理解得不够到位, 选了理解得比较到位的选项卡作为作业.
  • 通过本次实战课, 自己对js的各种操作有了进一步的理解. 认识到了他们的使用场景.
  • 懒加载主要是各种偏移量, 高度等, 是相对于哪个参照物这点, 理解得不太到位. 在老师给的实例中, 给父元素绑定滚动事件, 而在事件内部, 用 event.target.scrollHeight 来获取子元素的滚动高度, 个人理解, event.target 是父元素, event.target.scrollHeight 应该是父元素的滚动条滚动的高度, 而不是子元素相对于父元素滚动的高度, 这点没绕过来. element.offsetTop 这个值, 是相对于父元素(body)的偏移量, 还是相对于文档内容区(document.documentElement)顶部的偏移量. 这点也比较模糊. 希望老师解惑.
上一条：laravel目录结构下一条：laravel下载，安装
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多