~~~ <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> ~~~