~~~ <div class="box" id="box" style="width: 500px;"> <h2 class="title">珠峰课程体系</h2> <ul> <li>HTML5+CSS3</li> <li>JavaScript（ES6）基础知识、核心原理、项目实战、组件封装、设计模式等</li> <li>AJAX和HTTP</li> <li>Vue/React/小程序开发的全家桶（基础、源码、实战）</li> <li>Webpack/Node/Git等常用的工具类或者全栈化</li> </ul> </div> <script> let box = document.getElementById('box'); let itemList = box.getElementsByTagName('li'); //=>获取BOX盒子中所有的LI =>获取的是HTMLCollection元素集合（他是一个类数组对象：结构和数组非常的相似，但是不是数组） let title = box.getElementsByTagName('h2'); //=>获取BOX盒子中所有的H2 =>哪怕没有或者只有一项，获取到的依然是元素集合HTMLCollection // 把LI实现奇数和偶数行变色（CSS中 :nth-child 可以搞定） // 重复完成事情：分别拿到每一个LI元素对象，根据判断它是奇数行还是偶数行，给其设置不同的颜色 for (var i = 0; i < itemList.length; i++) { // 每一次循环，基于变量i的值（等价于集合中对应的索引）获取到当前本轮循环要操作的那个LI var itemLi = itemList[i]; /* if (i % 2 !== 0) { // 索引奇数代表偶数行 itemLi.style.color = 'green'; } else { itemLi.style.color = 'red'; } */ // itemLi.style.color = i % 2 !== 0 ? 'green' : 'red'; switch (i % 2) { case 0: itemLi.style.color = 'red'; break; default: itemLi.style.color = 'green'; } } /* * 第一行 奇数行 => 索引0 索引偶数 * 第二行 偶数行 => 索引1 索引奇数 * 第三行 奇数行 => 索引2 索引偶数 * .... * 当前行的索引是奇数代表偶数行，当前行的索引是偶数，代表的是奇数行 * * x % 2 === 0 能被2整除的是偶数 */ </script> ~~~