From 6a105f5c23e7597b1f233667c7fa856aaaa99b1a Mon Sep 17 00:00:00 2001 From: qianguyihao Date: Mon, 5 Feb 2018 15:28:01 +0800 Subject: [PATCH] add files --- 01-html/02-html标签图文详解（二）.md | 2 +- .../09-JavaScript基础：事件对象Event和冒泡.md | 2 +- 07-jQuery/01-jQuery的介绍和选择器.md | 1157 +++++++++++++++++ 07-jQuery/02-jQuery动画详解.md | 526 ++++++++ 07-jQuery/03-jQuery操作DOM.md | 397 ++++++ 面试相关/面经/面经链接推荐.md | 4 + 6 files changed, 2086 insertions(+), 2 deletions(-) create mode 100644 07-jQuery/01-jQuery的介绍和选择器.md create mode 100644 07-jQuery/02-jQuery动画详解.md create mode 100644 07-jQuery/03-jQuery操作DOM.md diff --git a/01-html/02-html标签图文详解（二）.md b/01-html/02-html标签图文详解（二）.md index 63516bb..99d5314 100644 --- a/01-html/02-html标签图文详解（二）.md +++ b/01-html/02-html标签图文详解（二）.md @@ -97,7 +97,7 @@ ![](http://img.smyhvae.com/20170704_1719.png) -声明：ul的儿子，只能是li。但是li是一个容器级标签，li里面什么都能放。甚至可以再放一个ul。 +声明：ul的儿子，只能是li。但是li是一个容器级标签，**li里面什么都能放，甚至可以再放一个ul**。 ### 2、有序列表`
    `，里面的每一项是`
  1. ` diff --git a/03-JavaScript基础/09-JavaScript基础：事件对象Event和冒泡.md b/03-JavaScript基础/09-JavaScript基础：事件对象Event和冒泡.md index b66c65d..2417d5e 100644 --- a/03-JavaScript基础/09-JavaScript基础：事件对象Event和冒泡.md +++ b/03-JavaScript基础/09-JavaScript基础：事件对象Event和冒泡.md @@ -7,7 +7,7 @@ ## 绑定事件的两种方式 -我们在上一篇文章中已经讲过事件的概念。这里讲一下注册事件的两种方式，我们以onclick事件为例。 +我们在上一篇文章 [DOM操作详解](http://www.cnblogs.com/smyhvae/p/8366012.html) 中已经讲过事件的概念。这里讲一下注册事件的两种方式，我们以onclick事件为例。 ### 方式一：onclick diff --git a/07-jQuery/01-jQuery的介绍和选择器.md b/07-jQuery/01-jQuery的介绍和选择器.md new file mode 100644 index 0000000..fe6447d --- /dev/null +++ b/07-jQuery/01-jQuery的介绍和选择器.md @@ -0,0 +1,1157 @@ + + +> 本文最初发表于[博客园](http://www.cnblogs.com/smyhvae/p/8414627.html)，并在[GitHub](https://github.com/smyhvae/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，一起入门和进阶前端。 + +> 以下是正文。 + + + +## jQuery 的介绍 + +### 引入 jQuery 的原因 + +在用 js 写代码时，会遇到一些问题： + +- window.onload 事件有事件覆盖的问题，因此只能写一个事件。 + +- 代码容错性差。 + +- 浏览器兼容性问题。 + +- 书写很繁琐，代码量多。 + +- 代码很乱，各个页面到处都是。 + +- 动画效果很难实现。 + +如下图所示： + +![](http://img.smyhvae.com/20180204_1710.png) + +jQuery的出现，可以解决以上问题。 + +### 什么是 jQuery + +jQuery 是 js 的一个库，封装了我们开发过程中常用的一些功能，方便我们调用，提高开发效率。 + +js库是把我们常用的功能放到一个单独的文件中，我们用的时候，直接引用到页面里即可。 + +以下是jQuery的相关信息： + +- 官网： + +- 官网API文档： + +- 汉化API文档： + +### 学习jQuery，主要是学什么 + +初期，主要学习如何使用jQuery操作DOM，其实就是学习jQuery封装好的那些功API。 + +这些API的共同特点是：几乎全都是方法。所以，在使用jQuery的API时，都是方法调用，也就是说要加小括号()，小括号里面是相应的参数，参数不同，功能不同。 + +### jQuery初体验 + +现在用原生 js 来写下面这一段代码： + +```html + + + + + + + + + + + + +
    +
    +
    +
    +
    + + + +``` + +如果用 jQuery 来写，保持其他的代码不变，` + +``` + +### jQuery 的两大特点 + +- 链式编程：比如`.show()`和`.html()`可以连写成`.show().html()`。 + +- 隐式迭代：隐式 对应的是 显式。隐式迭代的意思是：在方法的内部进行循环遍历，而不用我们自己再进行循环，简化我们的操作，方便我们调用。 + +## jQuery 的使用 + +### 使用 jQuery 的基本步骤 + +（1）引包 + +（2）入口函数 + +（3）功能实现代码（事件处理） + +如下图所示： + +![](http://img.smyhvae.com/20180204_1940.png) + +主要，导包的代码一定要放在js代码的最上面。 + +### jQuery 的版本 + +jQuery 有两个大版本： + +- 1.x版本：最新版为 v1.11.3。 + +- 2.x版本：最新版为 v2.1.4（不再支持IE6、7、8）。 + +- 3.x版本。 + + +我们以 v1.11.1版本为例，下载下来后发现，里面有两个文件： + +![](http://img.smyhvae.com/20180204_1950.png) + +它们的区别是： + +- 第一个是未压缩版，第二个是压缩版。 + +- 平时开发过程中，可以使用任意一个版本；但是，项目上线的时候，推荐使用压缩版。 + + +## jQuery 的入口函数和 `$` 符号 + + +### 入口函数（重要） + +原生 js 的入口函数指的是：`window.onload = function() {};` 如下： + +```javascript + //原生 js 的入口函数。页面上所有内容加载完毕，才执行。 + //不仅要等文本加载完毕，而且要等图片也要加载完毕，才执行函数。 + window.onload = function () { + alert(1); + } +``` + + +而 jQuery的入口函数，有以下几种写法： + +写法一： + + +```javascript + //1.文档加载完毕，图片不加载的时候，就可以执行这个函数。 + $(document).ready(function () { + alert(1); + }) +``` + +写法二：（写法一的简洁版） + +```javascript + //2.文档加载完毕，图片不加载的时候，就可以执行这个函数。 + $(function () { + alert(1); + }); +``` + +写法三： + +```javascript + //3.文档加载完毕，图片也加载完毕的时候，在执行这个函数。 + $(window).ready(function () { + alert(1); + }) +``` + +**jQuery入口函数与js入口函数的区别**： + +区别一：书写个数不同： + +- Js 的入口函数只能出现一次，出现多次会存在事件覆盖的问题。 + +- jQuery 的入口函数，可以出现任意多次，并不存在事件覆盖问题。 + + +区别二：执行时机不同： + +- Js的入口函数是在**所有的文件资源加载**完成后，才执行。这些**文件资源**包括：页面文档、外部的js文件、外部的css文件、图片等。 + +- jQuery的入口函数，是在文档加载完成后，就执行。文档加载完成指的是：DOM树加载完成后，就可以操作DOM了，不用等到所有的**外部资源**都加载完成。 + +文档加载的顺序：从上往下，边解析边执行。 + +### jQuery的`$`符号 + +jQuery 使用 `$` 符号原因：书写简洁、相对于其他字符与众不同、容易被记住。 + +jQuery占用了我们两个变量：`$` 和 jQuery。当我们在代码中打印它们俩的时候： + + +```html + + +``` + +打印结果如下： + +![](http://img.smyhvae.com/20180204_2014.png) + +从打印结果可以看出，$ 代表的就是 jQuery。 + +那怎么理解jQuery里面的 `$` 符号呢？ + +**`$` 实际上表示的是一个函数名** 如下： + + +```html + $(); // 调用上面我们自定义的函数$ + + $(document）.ready(function(){}); // 调用入口函数 + + $(function(){}); // 调用入口函数 + + $(“#btnShow”) // 获取id属性为btnShow的元素 + + $(“div”) // 获取所有的div标签元素 + +``` + +如上方所示，jQuery 里面的 `$` 函数，根据传入参数的不同，进行不同的调用，实现不同的功能。返回的是jQuery对象。 + +jQuery这个js库，除了` $` 之外，还提供了另外一个函数：jQuery。jQuery函数跟 `$` 函数的关系：`jQuery === $`。 + +## js中的DOM对象 和 jQuery对象 比较（重点，难点） + +### 二者的区别 + +通过 jQuery 获取的元素是一个**数组**，数组中包含着原生JS中的DOM对象。举例： + +针对下面这样一个div结构： + +```html +
    +
    +
    +
    +
    +``` + +通过原生 js 获取这些元素节点的方式是： + +```javascript + var myBox = document.getElementById("box"); //通过 id 获取单个元素 + var boxArr = document.getElementsByClassName("box"); //通过 class 获取的是数组 + var divArr = document.getElementsByTagName("div"); //通过标签获取的是数组 +``` + +通过 jQuery 获取这些元素节点的方式是：（获取的都是数组） + +```javascript + //获取的是数组，里面包含着原生 JS 中的DOM对象。 + var jqBox1 = $("#box"); + var jqBox2 = $(".box"); + var jqBox3 = $("div"); +``` + +我们打印出来看看： + +![](http://img.smyhvae.com/20180204_2045.png) + +上图显示，由于JQuery 自带了 css()方法，我们还可以直接在代码中给 div 设置 css 属性。 + +**总结**：jQuery 就是把 DOM 对象重新包装了一下，让其具有了 jQuery 方法。 + +### 二者的相互转换 + +**1、 DOM 对象 转为 jQuery对象**： + +```javascript + $(js对象); +``` + +举例：（拿上一段的代码举例） + +```javascript + //转换。 + jqBox1 = $(myBox); + jqBox2 = $(boxArr); + jqBox3 = $(divArr); +``` + +DOM 对象转换成了 jquery 对象之后，皮上面的功能可以直接调用。 + +**2、jQuery对象 转为 DOM 对象**： + +```javascript + jquery对象[index]; //方式1（推荐） + + jquery对象.get(index); //方式2 +``` + +jQuery对象转换成了 DOM 对象之后，可以直接调用 DOM 提供的一些功能。如： + +```javascript + //jquery对象转换成 DOM 对象之后 + jqBox3[0].style.backgroundColor = "black"; + jqBox3.get(4).style.backgroundColor = "pink"; +``` + +**总结**：如果想要用哪种方式设置属性或方法，必须转换成该类型。 + +### 举例：隔行变色 + +代码如下： + +```html + + + + + + + + + +
      +
    • 生命壹号，永不止步
      • +
    • 生命壹号，永不止步
      • +
    • 生命壹号，永不止步
      • +
    • 生命壹号，永不止步
      • +
    • 生命壹号，永不止步
      • +
    • 生命壹号，永不止步
      • +
    • 生命壹号，永不止步
      • +
    + + +``` + +效果如下： + +![](http://img.smyhvae.com/20180204_2111.png) + +## jQuery 选择器 + +我们以前在CSS中学习的选择器有： + +![](http://img.smyhvae.com/20180204_2122.png) + +今天来学习一下jQuery 选择器。 + +jQuery选择器是jQuery强大的体现，它提供了一组方法，让我们更加方便的获取到页面中的元素。 + +### 1、jQuery 的基本选择器 + +![](http://img.smyhvae.com/20180204_2125.png) + +解释如下： + +![](http://img.smyhvae.com/20180204_2126.png) + +举例： + +```html + + + + + + + + + + +
    +
    +
    +
    +
    + + + +``` + +效果如下： + +![](http://img.smyhvae.com/20180204_2133.png) + +### 2、层级选择器 + +![](http://img.smyhvae.com/20180204_2138.png) + +解释如下： + +![](http://img.smyhvae.com/20180204_2139.png) + +举例： + +```html + + + + + + + + + +
      +
    • 111
      • +
    • 222
      • +
    • 333
      • +
        +
      1. aaa
        2. +
      2. bbb
        3. +
      3. ccc
        4. +
      +
    + + +``` + +效果： + +![](http://img.smyhvae.com/20180204_2145.png) + +### 3、基本过滤选择器 + +![](http://img.smyhvae.com/20180204_2150.png) + +解释： + +![](http://img.smyhvae.com/20180204_2151.png) + +举例： + +```html + + +``` + +### 4、属性选择器 + +![](http://img.smyhvae.com/20180204_2155.png) + +### 5、筛选选择器 + +![](http://img.smyhvae.com/20180204_2200.png) + +举例： + +```html + + + + + + + + + + +
      +
    • 生命壹号，永不止步
      • +
    • 生命壹号，永不止步
      • + 生命壹号，永不止步 +
    • 生命壹号，永不止步
      • + 生命壹号，永不止步 +
    • 生命壹号，永不止步
      • + 生命壹号，永不止步 +
        +
      1. 我是ol中的li
        2. +
      2. 我是ol中的li
        3. +
      3. 我是ol中的li
        4. +
      4. 我是ol中的li
        5. +
      +
    + + + +``` + +效果： + +![](http://img.smyhvae.com/20180204_2203.png) + + +## 举例 + +### 举例1：鼠标悬停时，弹出下拉菜单【重要】 + +完整版代码： + +```html + + + + + + + + + + + +
    + +
    + + +``` + + +上方代码中，我们可以看到，用 jQuery来操作，是非常方便的。 + +实现效果如下： + +20180205_1030.gif + +**this的用法：** + +上方代码中，核心的一行代码是： + +```javascript + $(this).children("ul").show(); + + $(this).children("ul").hide(); +``` + +如果我把这行代码中的this直接写成 DOM对象： + +```javascript + jqli.children("ul").show(); + + jqli.children("ul").hide(); +``` + +产生的结果是：（不是我们期望的结果） + + +20180205_1050.gif + + +两张图的对比，可以看出this的作用：谁正在调用函数，this就指的是谁。 + +### 举例2：鼠标悬停时变色 + +完整版代码如下： + +```html + + + + + + + + + + +
      +
    • 生命壹号，永不止步
      • +
    • 生命壹号，永不止步
      • +
    • 生命壹号，永不止步
      • +
    • 生命壹号，永不止步
      • +
    • 生命壹号，永不止步
      • +
    • 生命壹号，永不止步
      • +
    + + + +``` + +效果如下： + +20180205_1100.gif + + +### 举例3：突出显示 + +要求：鼠标悬停时，突出显示这个li，让其他的li都半透明。 + +用 jQuery的选择起来实现，会发现非常方便。 + +完整版代码如下： + +```html + + + + + + + + + + +
    +
      +
      • +
      • +
      • +
      • +
      • +
      • +
    +
    + + +``` + + +实现的效果： + +20180205_1118.gif + +注意这里的css布局里，每一个图片都用一个li来存放。设置li的父亲的宽度之后，然后将li设置为浮动，即可自适应地排列成两排。 + +工程文件： + +- [2018-02-05-突出显示.rar]() + + +### 举例4：手风琴效果 + +完整版代码： + +```html + + + + + + + + + + +
      +
    • + 标题1 +
      我是弹出来的div1
      +
      • +
    • + 标题2 +
      我是弹出来的div2
      +
      • +
    • + 标题3 +
      我是弹出来的div3
      +
      • +
    • + 标题4 +
      我是弹出来的div4
      +
      • +
    + + +``` + + +效果： + +20180205_1120.gif + + +注意这里的 选择器的用法：parent、next + +### 举例5：淘宝精品服饰广告 + +完整版代码： + +```html + + + + + + + + + + +
    + + +
      +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
    + +
    + + +``` + +效果： + +20180205_1135.gif + +工程文件： + +- [2018-02-05-淘宝精品服饰广告.rar]() + + + + + + +## 我的公众号 + +想学习**代码之外的软技能**？不妨关注我的微信公众号：**生命团队**（id：`vitateam`）。 + +扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外： + +![](http://img.smyhvae.com/2016040102.jpg) diff --git a/07-jQuery/02-jQuery动画详解.md b/07-jQuery/02-jQuery动画详解.md new file mode 100644 index 0000000..c75da9a --- /dev/null +++ b/07-jQuery/02-jQuery动画详解.md @@ -0,0 +1,526 @@ + + +> 本文最初发表于[博客园]()，并在[GitHub](https://github.com/smyhvae/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，一起入门和进阶前端。 + +> 以下是正文。 + +## 前言 + +jQuery提供的一组网页中常见的动画效果，这些动画是标准的、有规律的效果；同时还提供给我们了自定义动画的功能。 + +## 显示动画 + +方式一： + +```javascript + $("div").show(); +``` + +解释：无参数，表示让指定的元素直接显示出来。其实这个方法的底层就是通过`display: block;`实现的。 + +方式二： + +```javascript + $("div").show(2000); +``` + +解释：通过控制元素的宽高、透明度、display属性，逐渐显示，2秒后显示完毕。 + +效果如下： + +![](http://img.smyhvae.com/20180205_1358.gif) + +方式三： + +```javascript + $("div").show("slow"); +``` + +参数可以是： + +- slow 慢：600ms + +- normal 正常：400ms + +- fast 快：200ms + +解释：和方式二类似，也是通过控制元素的宽高、透明度、display属性，逐渐显示。 + +方式四： + +```javascript + //show(毫秒值，回调函数; + $("div").show(5000,function () { + alert("动画执行完毕！"); + }); +``` + +解释：动画执行完后，立即执行回调函数。 + +**总结：** + +上面的四种方式几乎一致：参数可以有两个，第一个是动画的执行时长，第二个是动画结束后执行的回调函数。 + +## 隐藏动画 + +方式参照上面的show()方法的方式。如下： + + +```javascript + $(selector).hide(); + + $(selector).hide(1000); + + $(selector).hide("slow"); + + $(selector).hide(1000, function(){}); +``` + +**显示和隐藏的来回切换：** + +显示和隐藏的来回切换采用的是toggle()方法：就是先执行show()，再执行hide()。 + +同样是四种方式： + +```javascript +$(selector).toggle(); + +``` + +## 滑入和滑出 + +**1、滑入动画效果**：（类似于生活中的卷帘门） + + +```javascript + $(selector).slideDown(speed, 回调函数); +``` + +解释：下拉动画，显示元素。 + +注意：省略参数或者传入不合法的字符串，那么则使用默认值：400毫秒（同样适用于fadeIn/slideDown/slideUp） + + +**2 滑出动画效果：** + +```javascript + $(selector).slideUp(speed, 回调函数); +``` + +解释：上拉动画，隐藏元素。 + + +**3、滑入滑出切换动画效果：** + +```javascript + $(selector).slideToggle(speed, 回调函数); +``` + +参数解释同show()方法。 + +举例： + +```html + + + + + + + + + + + + + + +
    + + + +``` + +![](http://img.smyhvae.com/20180205_1420.gif) + +## 淡入淡出动画 + +1、淡入动画效果： + +```javascript + $(selector).fadeIn(speed, callback); +``` + +作用：让元素以淡淡的进入视线的方式展示出来。 + +2、淡出动画效果： + +```javascript + $(selector).fadeOut(1000); +``` + +作用：让元素以渐渐消失的方式隐藏起来 + +3、淡入淡出切换动画效果： + + +```javascript + $(selector).fadeToggle('fast', callback); +``` + +作用：通过改变透明度，切换匹配元素的显示或隐藏状态。 + +参数的含义同show()方法。 + +代码举例： + +```html + + + + + + + + + + + + + + + +
    + + + +``` + +## 自定义动画 + +```javascript + $(selector).animate({params}, speed, callback); +``` + +作用：执行一组CSS属性的自定义动画。 + +- 第一个参数表示：要执行动画的CSS属性（必选） + +- 第二个参数表示：执行动画时长（可选） + +- 第三个参数表示：动画执行完后，立即执行的回调函数（可选） + +代码举例： + +```html + + + + + + + + + + + +
    + + +``` + +## 停止动画 + +```javascript + $(selector).stop(true, false); +``` + +**里面的两个参数，有不同的含义。** + +第一个参数： + +- true：后续动画不执行。 + +- false：后续动画会执行。 + +第二个参数： + +- true：立即执行完成当前动画。 + +- false：立即停止当前动画。 + +PS：参数如果都不写，默认两个都是false。实际工作中，直接写stop()用的多。 + +**效果演示：** + +当第二个参数为true时，效果如下： + +![](http://img.smyhvae.com/20180205_1445.gif) + +当第二个参数为false时，效果如下： + +![](http://img.smyhvae.com/20180205_1450.gif) + + +这个**后续动画**我们要好好理解，来看个例子。 + +**案例：鼠标悬停时，弹出下拉菜单（下拉时带动画）** + +```html + + + + + + + + + + + +
    + +
    + + +``` + +效果如下： + +![](http://img.smyhvae.com/20180205_1500.gif) + +上方代码中，关键的地方在于，用了stop函数，再执行动画前，先停掉之前的动画。 + +如果去掉stop()函数，效果如下：（不是我们期望的效果） + +![](http://img.smyhvae.com/20180205_1505.gif) + +### stop方法的总结 + +当调用stop()方法后，队列里面的下一个动画将会立即开始。 +但是，如果参数clearQueue被设置为true，那么队列面剩余的动画就被删除了，并且永远也不会执行。 + +如果参数jumpToEnd被设置为true，那么当前动画会停止，但是参与动画的每一个CSS属性将被立即设置为它们的目标值。比如：slideUp()方法，那么元素会立即隐藏掉。如果存在回调函数，那么回调函数也会立即执行。 + +注意：如果元素动画还没有执行完，此时调用sotp()方法，那么动画将会停止。并且动画没有执行完成，那么回调函数也不会被执行。 + +## 我的公众号 + +想学习**代码之外的软技能**？不妨关注我的微信公众号：**生命团队**（id：`vitateam`）。 + +扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外： + +![](http://img.smyhvae.com/2016040102.jpg) + diff --git a/07-jQuery/03-jQuery操作DOM.md b/07-jQuery/03-jQuery操作DOM.md new file mode 100644 index 0000000..fc0d7ee --- /dev/null +++ b/07-jQuery/03-jQuery操作DOM.md @@ -0,0 +1,397 @@ + + + +## 文本主要内容 + +- 样式和类操作 + +- jQuery 动画 + +- 节点操作 + + +## 样式操作和类操作 + +作用：设置或获取元素的样式属性值。 + +### 样式操作 + +**1、设置样式：** + +```javascript + + //设置单个样式： css(属性，值); + $("div").css("background-color","red"); + + //设置多个样式： css(json); + $("div").css({"width":100,"height":100,"background-color":"pink"}); + + + +``` + + +**2、获取样式：** + +```javascript + //获取样式：css(属性); + //获取的时候如果有很多个，那么获取jquery对象中的第一个 + alert($("div").css("width")); +``` + +举例如下： + +20180205_1315.png + +### 类操作（className） + +**1、添加类样式：** + +```javascript + $(selector).addClass("liItem"); //为指定元素添加类className +``` + +注意：此处类名不带点，所有类操作的方法类名都不带点。 + + +**2、移除类样式：** + + +```javascript + $(selector).removeClass("liItem"); //为指定元素移除类 className + $(selector).removeClass(); //不指定参数，表示移除被选中元素的所有类 +``` + +**3、判断有没有类样式：** + +```javascript + $(selector).hasClass("liItem"); //判断指定元素是否包含类 className +``` + +此时，会返回true或false。jquery对象中，只要有一个带有指定类名的就是true，所有都不带才是false。 + +举例： + +```html + + + + + + + + + + + + +
    +
    +
    +
    + + + +``` + +**4、切换类样式：** + +```javascript +$(selector).toggleClass(“liItem”); //为指定元素切换类 className，该元素有类则移除，没有指定类则添加。 +``` + +解释：为指定元素切换类 className，该元素有类则移除，没有指定类则添加。 + +如果采用采用正常的思路实现上面这句话，代码是： + + +```javascript + if($("div").hasClass("current")){ + //如果有类名，那么删除 + $("div").removeClass("current") + }else{ + //如果没有类名，那么添加 + $("div").addClass("current") + } +``` + +现在有了toggleClass()方法，一行代码即可实现。 + +举例： + +```html + + + + + + + + + + + +
    + + +``` + +实现的效果： + +20180205_1330.gif + + +### 样式操作和类操作的比较 + +- 操作的样式非常少，那么可以通过`.css()`实现。 + +- 操作的样式很多，建议通过使用类 class 的方式来操作。 + +- 如果考虑以后维护方便（把CSS从js中分离出来）的话，推荐使用类的方式来操作。 + + +**举例**：addClass+removeClass + +代码实现： + +```html + + + + + + + + + + +
    +
      +
    • 国际大牌◆
      • +
    • 国妆名牌◆
      • +
    • 清洁用品◆
      • +
    • 男士精品
      • +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    + + + + +``` + + +上方代码中，我们注意，tab栏和下方图片栏的index值，一一对应，这里用得很巧妙。 + +效果： + +20180205_1345.gif + + + +```javascript + + +``` + + + + + + +```html + + +``` + + + + +```javascript + + +``` + + + + + + + + +```html + + +``` + + + + +```javascript + + +``` + + + + + + + + +```html + + +``` + + + + +```javascript + + +``` + + + + + + +``` + +``` + + diff --git a/面试相关/面经/面经链接推荐.md b/面试相关/面经/面经链接推荐.md index 091685e..9a951d8 100644 --- a/面试相关/面经/面经链接推荐.md +++ b/面试相关/面经/面经链接推荐.md @@ -17,6 +17,10 @@ - [16年毕业的前端er在杭州求职ing](https://www.cnblogs.com/qianduantuanzhang/archive/2018/01/27/8365670.html) +### 2018-02-04 + +- [2018秋招前端总结](https://www.cnblogs.com/Mr-stockings/archive/2018/02/02/8407295.html) +