37k 字 34 分钟

# 新增关键字 它是 2015 年发布的一个 JavaScript 版本，被命名为 ECMAScript 2015，也叫 ECMAScript 6，故简称为 ES6。 ES6 带来了许多新的语法和新的功能，它可以使开发者编写更少的代码，做更多的事情。本节实验我们一起来学习定义变量和常量的关键字。 知识点 var 关键字的缺点 let const # 思考 var 关键字的缺点 # 变量提升机制的问题 还记得在 JavaScript 中我们学过定义变量的方式吗？😏 我们声明变量的唯一方式是使用 var 关键字，但其实使用 var...
233 字 1 分钟

# 补充知识 js 访问对象时点表示法与方括号表示法的区别 - 掘金 (juejin.cn) Iterable object（可迭代对象） (javascript.info) 使用展开运算符 “...” 也可以将可迭代对象转换为真正的数组，而且更加简洁 例如字符串： let str = "𝒳😂";let chars = [...str];console.log(chars[0]); // 𝒳console.log(chars[1]); // 😂console.log(chars.length); // 2
23k 字 21 分钟

# 消息提示组件 获取本节实验初始项目： wget https://labfile.oss.aliyuncs.com/courses/5246/elementui.zip && unzip elementui.zip# 知识点 Alert 警告 Loading 加载 Message 消息提示 MessageBox 弹框 Notification 通知 # Alert 警告 有时候，页面上有些重要的交互信息，想让浏览者重点关注，我们会以弹出窗的方式将其在恰当时机展示出来，而给这些信息添加一个鲜明的背景颜色，更能让人一目了然。 在 Element UI...
56k 字 51 分钟

# Layout 布局 和 Container 布局容器 知识点 Container 布局容器 Layout 布局 # Container 布局容器 当我们在写一个前端项目时，首先应该考虑页面的布局，设计好页面的布局后，才会用 CSS 样式去填充。比如，我们来看看 Element UI 官网组件页面的布局。 从上图可以看出，官网的布局可以分成四个容器，顶部容器、主要内容区域容器、侧边容器、底栏容器。在 Element UI 的组件库里为我们提供了对应的布局容器组件，方便我们实现页面的基本布局。 <el-header>...
6k 字 5 分钟

# 交互组件 常用的交互组件有： 标题组件（title） 图例组件（legend） 视觉映射组件（visualMap） 数据区域缩放组件（dataZoom） 时间线组件（timeline） # title title 用于配制整个折线图的标题，其包含主标题（text）和副标题（subtext）。 例如官网上某站点用户 Access From 的示例。 # legend legend 展现了不同系列的标记（symbol），颜色和名字。可以通过点击图例控制哪些系列不显示。 当图例数量过多时，我们可以使用 legend.type 设置可滚动图例。例如官网上可滚动的图例的示例。 通过...
24k 字 22 分钟

# 认识 ECharts # ECharts 初体验 现在，我们来绘制一个简单的图表。 绘制之前我们需要定义一个具有宽高的 DOM 容器，在 index.html 文件中写入以下内容。 ...<body> <!-- 为 ECharts 准备一个宽为 600px，高为 400px 的 DOM --> <div id="main" style="width: 600px;height:400px;"></div></body>...然后，通过...
24k 字 22 分钟

# CSS3 新特性 # 知识点 CSS3 新增选择器 文本阴影 文本溢出 圆角边框 盒子阴影 背景属性 渐变属性 元素转换 过渡属性 动画 # CSS3 新增选择器 在前面我们已经学习了元素选择器、id 选择器和类选择器，我们可以通过标签名、id 名、类名给指定元素设置样式。 现在我们继续选择器之旅，学习 CSS3 中新增的三类选择器，分别是： 属性选择器 子元素伪类选择器 UI 伪类选择器 # 新增属性选择器 属性选择器就是通过正则的方式去匹配指定属性的元素，为其设置样式。 在 CSS3 中新增了三种属性选择器，如下所示： 选择器 描述 E[attr^=“xx”] 选择元素...
1.4k 字 1 分钟

# 折叠手风琴 $(function(){ console.log($(".option")); $(".option").click(function() { $(this).siblings().removeClass("active"); $(this).addClass("active"); }) // 方式二 // $(".option").each((index, item) => { //...
2k 字 2 分钟

# 折叠手风琴 $(function(){ console.log($(".option")); $(".option").click(function() { $(this).siblings().removeClass("active"); $(this).addClass("active"); }) // 方式二 // $(".option").each((index, item) => { //...