无论是使用哪种方式实现隔行变色的效果，它的思路都是一样的：

1.定义很多个div

2.给div 加背景

3.鼠标移动到div上时，当前div 背景变色

4.鼠标移出div时，当前div背景恢复

以上4点就是隔行变色的思路流程，任何形式的实现方式，都要依照以上的思路来，否则将不会达到效果-----这是本质。因为经常会弄反，写着写着就忘记之前要干什么事了，所以此处写出来，当做提示信息

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

     <style>

         div {

             border: 1px solid #000;

             margin: 10px;

             border: 1px solid #000;

             height: 10px;

             padding: 10px;

         }

         .even-color {

             background: #eee;

         }

         .odd-color {

             background: #ccc;

         }

         .active {

             background: red;

         }

     </style>

 </head>

 <body>

     <div></div>

     <div></div>

     <div></div>

     <div></div>

     <div></div>

     <div></div>

     <div></div>

     <div></div>

     <div></div>

     <div></div>

     <div></div>

     <div></div>

     <div></div>

     <div></div>

     <div></div>

 </body>

 </html>

js 常规实现方式（es5）:

  window.onload = function() {

             var adiv = document.querySelectorAll("div");

             var oldColor = '';

             adiv.forEach(function(ele, index) {

                 ele.className = (index % 2 == 0) ? 'even-color' : 'odd-color';

             });

             adiv.forEach(function(ele, index) {

                 ele.onmouseover = function() {

                     oldColor = this.className;

                     this.className = 'active';

                 }

                 ele.onmouseout = function() {

                     this.className = oldColor;

                 }

             });

  }

js  es6实现方式：

  window.onload = function() {

             let adiv = document.querySelectorAll("div");

             let oldColor = '';

             adiv.forEach((ele, index) => {

                 ele.className = (index % 2 == 0) ? 'even-color' : 'odd-color';

             });

             adiv.forEach((ele, index) => {

                 ele.onmouseover = () => {

                     oldColor = ele.className;

                     ele.className = 'active';

                 };

                 ele.onmouseout = () => {

                     ele.className = oldColor;

                 }

             });

         };

js es6 及html5    ele.classList.add()  & ele.classList.remove()  方法实现：

 window.onload = function() {

             let adiv = document.querySelectorAll("div");

             let oldColor = '';

             adiv.forEach((ele, index) => {

                 ele.className = (index % 2 == 0) ? 'even-color' : 'odd-color';

             });

             adiv.forEach((ele, index) => {

                 ele.onmouseover = () => {

                     ele.classList.add('active');

                 };

                 ele.onmouseout = () => {

                     ele.classList.remove('active');

                 }

             });

         }

运行结果都是相同的：

es6初级之箭头函数实现隔行变色的更多相关文章

  1. es6 初级之箭头函数

    1.先看一个例子: <script> function show() { console.log('aluoha'); } show(); </script> 2. 改写成简单 ...

  2. [js高手之路] es6系列教程 - 箭头函数详解

    箭头函数是es6新增的非常有意思的特性,初次写起来,可能会觉得别扭,习惯之后,会发现很精简. 什么是箭头函数? 箭头函数是一种使用箭头( => )定义函数的新语法, 主要有以下特性: 不能通过n ...

  3. ES6学习之箭头函数

    ES6学习笔记--箭头函数 箭头函数一直在用,最近突然想到重新看一下箭头函数的用法,所以这里做一些总结. 箭头函数长这个样子: let fn = a => a++; // fn 是函数名, a= ...

  4. 前端项目中常用es6知识总结 -- 箭头函数及this指向、尾调用优化

    项目开发中一些常用的es6知识,主要是为以后分享小程序开发.node+koa项目开发以及vueSSR(vue服务端渲染)做个前置铺垫. 项目开发常用es6介绍 1.块级作用域 let const 2. ...

  5. ES6系列之箭头函数

    本系列是在平时阅读.学习.实际项目中有关于es6中的新特性.用发的简单总结,目的是记录以备日后温习:本系列预计包含let/const.箭头函数.解构.常用新增方法.Symbol.Set&Map ...

  6. JS ES6中的箭头函数（Arrow Functions）使用

    转载这篇ES6的箭头函数方便自己查阅. ES6可以使用“箭头”(=>)定义函数,注意是函数,不要使用这种方式定义类(构造器). 一.语法 基础语法 (参数1, 参数2, …, 参数N) => ...

  7. es6学习笔记--箭头函数

    基本用法 ES6允许使用“箭头”(=>)定义函数. var f = v => v; 上面的箭头函数等同于: var f = function(v) { return v; }; 如果箭头函 ...

  8. codewars--js--Reverse or rotate?----es6变量，箭头函数，正则取块

    问题描述: 对输入的str按照sz个数进行分块,若一块内所有数字的立方和是偶数,则倒序:否则,向左移动一位.然后将修改过的块整合到一个字符串,作为输出. The input is a string s ...

  9. 从 ES6 高阶箭头函数理解函数柯里化

    前言:第一次看到多个连续箭头函数是在一个 react 项目中,然鹅确认了下眼神,并不是对的人,因为看得一脸懵逼.em......于是开始各种搜索,先是知道了多个连续箭头函数就是 es6 的多次柯里化的 ...

随机推荐

  1. STP RSTP

    一.透明网桥 1.对于一般的透明网桥来说,通常都具有以下的特点: +拓展LAN的能力 +自主动态学习站点的地址信息 当网桥的某个端口上收到含有某个源MAC地址的数据帧时,它就把该MAC地址和接收该数据 ...

  2. [UE4]链接多个字符串Make Literal String

  3. 关于Jedis连接Linux上的redis出现 DENIED Redis is running in protected mode问题的解决方案

    redis 添加了requirepass 123456后还是报错,原来是重新启动的时候./redis-cli  没有指定配置文件. https://blog.csdn.net/a532672728/a ...

  4. arp协议分析&python编程实现arp欺骗抓图片

    arp协议分析&python编程实现arp欺骗抓图片 序 学校tcp/ip协议分析课程老师布置的任务,要求分析一种网络协议并且研究安全问题并编程实现,于是我选择了研究arp协议,并且利用pyt ...

  5. TextView右上角显示小红点，小红点根据TextView的长度移动，小红点被TextView挤出去不显示的问题；

    大概就是图片这个样,这个功能很常见,本来我以为很简单,谁知道真的很简单: 遇到点小问题,记录一下,哈哈: 小红点的Drawable: <?xml version="1.0" ...

  6. 浅析Redis 和MongoDB

    今天来聊聊什么事nosql,一听nosql也许很多人会觉得很高大上的感觉,但其实接触过了也还觉得还行,随着当今数据的疯狂爆炸性的增长,传统的RDBMS也越来越暴露出他的不足之处,所以,作为一名合格的程 ...

  7. 「ZJOI2015」地震后的幻想乡

    /* 难度最低的解法 钦定一个边集S作为前S小如果这个边集假如第|S|小这条边时加入时S恰好联通, 那么我们就能够算出他的贡献了 恰好联通 = 加了这条边之前不连通方案数 - 加了这条边之后不连通方案 ...

  8. 在html中使用thymeleaf编写通用模块

    在编写页面时,常常会需要用到通用模块,比如header部分.footer部分等. 项目前端使用的是themeleaf模板引擎,下面简单介绍下使用themeleaf写header通用模块: 1. 通用部 ...

  9. MySQL通过游标来实现通过查询结果集循环

    /*我们有时候会遇到需要对 从A表查询的结果集S_S 的记录 进行遍历并做一些操作(如插入),且这些操作需要的数据或许部分来自S_S集合*/ /*临时存储过程,没办法,不能直接在查询窗口做这些事.*/ ...

  10. JAVA面试精选【Java web部分一】

    Java的基础知识点就太多了,要说也不能穷尽,这个主要是靠自己在平时的积累和项目的开发经验,外边考的多的一般是继承,多态,线程,集合等等,但是笔试或者是面试中很有可能问许多集体的内容,比如hashMa ...