webpack基础-初始化隔行变色案例

1.新建项目空白目录，并运行 npm init -y 命令，初始化包管理配置文件package.json 

2.新建src源代码目录

3.新建src->index.html首页和src->index.js脚本文件

4.初始化首页基本结构

(1)快捷键：!+enter

(2)执行以下快捷指令生成9个li

ul>li{这是第$个li}*9

5.运行npm install jquery -S命令，安装jQuery

配置环境文章：webpack基础-安装、配置、基本使用-CSDN博客

6.通过ES6模块化的方式导入jQuery,实现列表隔行变色效果

在index.js文件中编写以下代码

//1.使用ES6导入语法，导入jQuery
import $ from 'jquery'

// 2.定义jQuery的入口函数
$(function(){
    //3.实现奇偶行变色
    //奇数为红色
    $('li:odd').css('background-color','red')
    $('li:even').css('background-color','blue')
})