MVC-上

设计模式：对通用的代码取一个名字！

为什么要有设计模式：防止代码重复！
—>重复：
—>1.代码级别的重复
—>2.页面级别

MVC:所有的页面都可以使用MVC来优化代码的结构

MVC是啥？

每一个模块都可以写成三个对象，分别是M、V、C
—> M-Model(数据模型)负责操作所有的数据
—> V-View(视图)负责所有UI页面
—> C-Controller(控制器)负责其他

执行方案：完成四个独立的模块

如何引入Jquery

yarn init v1.22.4//可以用npm
yarn add jquery

模块化

把内容放在一个文件中再把文件引入进来

CSS相关函数

CSS3 transition 属性

语法：

transition: property duration timing-function delay;

transition: property duration timing-function delay;

CSS3 transform 属性

定义和用法
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
为了更好地理解 transform 属性，请查看这个演示。
语法

transform: none|transform-functions;

CSS3 @keyframes 规则

js 相关函数

currentTarget:

定义和用法:
currentTarget 事件属性返回其监听器触发事件的节点，即当前处理该事件的元素、文档或窗口。
在捕获和起泡阶段，该属性是非常有用的，因为在这两个节点，它不同于 target 属性.

$tabBar.on('click','li',(e)=>{
    const  $li = $(e.currentTarget)
    const index = $li.index()
    console.log(index)
})//事件委托，监听父元素

jQuery DOM 元素方法 - index() 方法

定义和用法:
index() 方法返回指定元素相对于其他指定元素的 index 位置。
这些元素可通过 jQuery 选择器或 DOM 元素来指定。
注释：如果未找到元素，index() 将返回 -1。

const index = $li.index()

jQuery :eq() 选择器

定义和用法
:eq() 选择器选取带有指定 index 值的元素。
index 值从 0 开始，所有第一个元素的 index 值是 0（不是 1）。
经常与其他元素/选择器一起使用，来选择指定的组中特定序号的元素（如上面的例子）。

$tabBar.children().eq(0).trigger('click')

jQuery :trigger()

定义和用法

trigger() 方法触发被选元素的指定事件类型。

$tabBar.children().eq(0).trigger('click')

jQuery :toggleClass(‘active’)

定义：来回点击

$square.on('click',()=>{
    $square.toggleClass('active')
})

样式与行为分离：css只管样式! js只管行为!

js代码：

$tabContent.children()
        .eq(index).addClass('active')
        .siblings().removeClass('active')

css代码：

/*样式与行为分离*/
#app2 .tab-content > li.active{
    display: block;
}

我的错误认为：添加active是在标签后面加一个class=”active”的属性
增加一个节点应该为：

let  div1 = document.createElement('div')

问题

1.多余的17px是哪里来的？
答：滚动条！