（1）前端基礎(chǔ)面試題

一、HTML 面試題

1悦即、html 語義化？

• 閱讀代碼時能根據(jù)標(biāo)簽理解你的用意橱乱，便于閱讀
• 方便瀏覽器讀取和識別辜梳，有利于搜索引擎優(yōu)化(SEO: Search Engine Optimization)

2、行級元素和塊級元素

• 行級元素：不能設(shè)置寬高（內(nèi)容撐開）泳叠，不能獨(dú)占一行作瞄，水平排列。（span危纫、a宗挥、i、em）
• 塊級元素：可以設(shè)置寬高种蝶，能獨(dú)占一行契耿，垂直排列。(div螃征、p搪桂、h1-h6、ul会傲、li)
• 行內(nèi)塊級元素：既可以設(shè)置寬高锅棕，又可以水平排列。

二淌山、CSS 面試題

1裸燎、常見選擇器

• id 選擇器
• class 類選擇器
• 標(biāo)簽選擇器（div)
• 后代選擇器（div ul li）
• 子代選擇器（div>ul>li）
• 分組選擇器（html,body)
• 偽類選擇器（:hover)
• 偽元素選擇器（::after）
• 屬性選擇器（ [herf] ）選擇所有帶有 herf 屬性元素

2、css 優(yōu)先級

3退渗、清除浮動方式

• 父元素 overflow: hidden

• 父元素 float

• 設(shè)置父元素的高度

• 在浮動的后面添加新的節(jié)點(diǎn)移稳，新節(jié)點(diǎn)上 clear: both

  <style>
    .container {
      background: #000;
    }
    .container div {
      float: left;
      background: #555;
    }
    .clearfix {
      clear: both;
    }
  </style>
  
  <div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <p class="clearfix"></p>
  </div>
  

• 利用父元素的偽元素添加三件套（推薦使用）

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

4、定位 position

• static 默認(rèn)的
• absolute 絕對定位（相對于最近的祖先元素定位会油，定位后空間釋放）
• relative 相對定位（相對于自己初始位置定位个粱，定位后空間不釋放）
• fixed 固定定位（相對于瀏覽器位置定位，定位后空間釋放）
• sticky 粘性定位（相當(dāng)于吸頂效果翻翩，定位后空間不釋放）

5都许、盒子模型

• 標(biāo)準(zhǔn)盒模型：width 屬性 = content 的寬度（box-sizing: content-box）
• 怪異盒模型：width 屬性 = content + padding + border（box-sizing: border-box）

6稻薇、解決外邊距合并

• 父元素 overflow：hidden
• 父元素浮動或定位
• 父元素加邊框
• 子元素浮動或定位

7、BFC

• BFC 定義

BFC(Block formatting context)直譯為"塊級格式化上下文"胶征。它是一個獨(dú)立的渲染區(qū)域塞椎，只有 Block-level box 參與， 它規(guī)定了內(nèi)部的 Block-level Box 如何布局睛低，并且與這個區(qū)域外部毫不相干案狠。

• BFC 布局規(guī)則

1. 內(nèi)部的 Box 會在垂直方向，一個接一個地放置钱雷。
2. Box 垂直方向的距離由 margin 決定骂铁。屬于同一個 BFC 的兩個相鄰 Box 的 margin 會發(fā)生重疊。
3. 每個元素的 margin box 的左邊急波，與包含塊 border box 的左邊相接觸(對于從左往右的格式化从铲，否則相反)瘪校。
4. BFC 的區(qū)域不會與 float box 重疊澄暮。
5. BFC 就是頁面上的一個隔離的獨(dú)立容器，容器里面的子元素不會影響到外面的元素阱扬。反之也如此泣懊。
6. 計算 BFC 的高度時，浮動元素也參與計算麻惶。

• 那些情況會生成 BFC 馍刮？

  • 根元素 html
  • float 的值不是 none。
  • position 的值不是 static 或者 relative
  • display 的值是 inline-block窃蹋、table-cell卡啰、table-caption、flex警没、inline-flex
  • overflow 的值不是 visible

8匈辱、重排、重繪和回流（reflow）

• 重排：DOM 的變化影響元素的幾何屬性（比如寬高）杀迹，瀏覽器會重新計算元素的幾何屬性亡脸。（如：改變窗口大小、改變文字大小树酪、內(nèi)容的改變浅碾、瀏覽器窗口的變化、style 屬性的 改變...）
• 重繪：元素被改變了外觀续语，但沒有改變布局（或?qū)捀撸┑那闆r垂谢。（如：改變背景色、visiblity疮茄、outline...）
• 回流：當(dāng)瀏覽器發(fā)現(xiàn)某個部分發(fā)生了變化影響了布局滥朱，需倒回去重新渲染苛白，這個回退的過程稱回流。

9焚虱、display 屬性

? inline购裙、block、inline-block鹃栽、table躏率、table-cell、flex...

10民鼓、顯示和隱藏

• display: none | block（不占空間薇芝，不能觸發(fā)事件）
• opacity: 0 | 1（占空間，能觸發(fā)事件）
• visibility： hidden | visible（占空間丰嘉，不能觸發(fā)事件）

三夯到、JavaScript 面試題

1、數(shù)據(jù)類型

• 基本數(shù)據(jù)類型（number饮亏、string耍贾、boolean、null路幸、undefined荐开、symbol）

• 引用數(shù)據(jù)類型（array、object）

• 注意 1： null 和 undefined 區(qū)別：

  • null 表示"沒有對象"简肴，即該處不應(yīng)該有值晃听。典型用法是：

  （1） 作為函數(shù)的參數(shù)，表示該函數(shù)的參數(shù)不是對象砰识。

  （2） 作為對象原型鏈的終點(diǎn)能扒。

  console.log(Object.getPrototypeOf(Object.prototype)); // null
  console.log(document.getElementById("a")); // null 找不到唯一的dom節(jié)點(diǎn)也返回null
  

• undefined 表示"缺少值"，此處應(yīng)該有一個值辫狼，但是還沒有定義初斑。典型用法是：

（1）變量被聲明了，但沒有賦值時予借，就等于 undefined越平。

var a;
console.log(a); // undefined

（2）調(diào)用函數(shù)時，應(yīng)該提供的參數(shù)沒有提供灵迫，該參數(shù)等于 undefined秦叛。

function fn(a) {
  console.log(a);
}
fn(); // undefined

（3）訪問對象沒有的屬性，返回 undefined瀑粥。

var obj = {};
console.log(obj.name); // undefined

（4）函數(shù)沒有返回值時挣跋，默認(rèn)返回 undefined。

function fun() {
  console.log("此函數(shù)沒返回值");
}
console.log(fun()); // undefined

（5）數(shù)組越界狞换，返回 undefined避咆。

var arr = [1, 2, 3];
console.log(arr[5]); // undefined

• 注意 2：typeof 判斷各種數(shù)據(jù)類型

  // typeof 判斷數(shù)據(jù)類型
  function Fn() {}
  var arr = [1, 2, 3];
  var obj = { name: "ha" };
  
  console.log(typeof "abc"); // "string"
  console.log(typeof 123); // "number"
  console.log(typeof true); // "boolean"
  console.log(typeof undefined); // "undefined"
  console.log(typeof Fn); // "function"
  console.log(typeof null); // "object"
  console.log(typeof arr); // "object"
  console.log(typeof obj); // "object"
  

• 注意 3：判斷區(qū)分?jǐn)?shù)組（Array）和對象（Object）的三種方式

  var arr = [1, 2, 3];
  var obj = { name: "ha" };
  
  // 1. constructor
  console.log(arr.constructor == Array); // true
  console.log(obj.constructor == Object); // true
  
  // 2. instanceof
  console.log(arr instanceof Array); // true
  console.log(obj instanceof Object); // true
  
  // 3. isArray()
  console.log(Array.isArray(arr)); // true2舟肉、fdsf
  

2、繼承

• 繼承屬性：要在構(gòu)造函數(shù)中,通過調(diào)用父類方法并用.call() | .apply() | .bind()方法改變 this 的指向

• 繼承方法：原型對象 = new 父類的實(shí)例化對象(但是原型對象變成父類構(gòu)造函數(shù)了查库，需要把原型對象的 constructor 指回本類)

  function Animal(name, age) {
    this.name = name;
    this.age = age;
  }
  
  Animal.prototype.eat = function() {
    console.log(this.name + "is eatting....");
  };
  
  // 繼承屬性 要在構(gòu)造函數(shù)中,通過調(diào)用父類方法并用.call() | .apply() | .bind()方法改變this的指向
  function Cat(name, age) {
    Animal.call(this, name, age);
  }
  
  // 繼承方法 原型對象 = new 父類的實(shí)例化對象(但是原型對象變成父類構(gòu)造函數(shù)了路媚，需要把原型對象的constructor指回本類)
  Cat.prototype = new Animal();
  Cat.prototype.constructor = Cat;
  console.log(Cat.prototype.constructor); // Cat構(gòu)造函數(shù)
  
  var cat = new Cat("qiqi", 5);
  console.log(cat);
  

3、 ES6 新特性

• var樊销、let整慎、const 區(qū)別

  1）let 不存在變量提升

  2）let 不能重復(fù)聲明

  3）let 具有塊級作用域

  4）let 存在臨時失效區(qū)（也稱暫時性死區(qū)，即在當(dāng)前作用域下不允許外部的同名的變量進(jìn)入）

  5）const 用于定義常量（const 以上四條特性也符合）

  （1）let 不存在變量提升

  // var定義變量
  console.log(a); // undefined
  var a = 3;
  
  // let定義變量
  console.log(a); // 報錯 Cannot access 'a' before initialization
  let a = 3;
  

（2）let 不能重復(fù)聲明

// var
var a = 10;
var a = 20;
console.log(a); // 20

// let
let a = 10;
let a = 20;
console.log(a); // 報錯 'a' has already been declared

（3）let 具有塊級作用域

// var
{
  var a = 2;
}
console.log(a); // 2

// let
{
  let a = 2;
}
console.log(a); // 報錯 a is not defined

（4）let 存在臨時失效區(qū)（也稱暫時性死區(qū)围苫，即在當(dāng)前作用域下不允許同名的變量進(jìn)入）

// var
var a = 5;
function fn() {
  console.log(a); // undefined
  var a = 6;
}
fn();

// let
let a = 5;
function fn() {
  console.log(a); // 報錯 Cannot access 'a' before initialization
  let a = 6;
}
fn();

（5）const 用于定義常量（const 以上四條特性也符合）

// const不能給基本數(shù)據(jù)類型重新賦值
const a = 5;
a = 6; // 報錯 Assignment to constant variable.
console.log(a);

// const 能修改引用數(shù)據(jù)類型在堆內(nèi)存中的值裤园，但不能修改引用的內(nèi)存地址
const arr = [1, 2, 3];
arr[0] = 10;
console.log(arr); // [10,2,3]

// 使用Object.freeze()凍結(jié) 使其不能修改數(shù)組或?qū)ο蟮闹?Object.freeze(arr);
arr[1] = 20;
console.log(arr); // [10,2,3]

arr = [4, 5, 6]; // 報錯 Assignment to constant variable

• 解構(gòu)賦值

  // 數(shù)組解構(gòu)
  let [a, b] = [10, 5];
  console.log(a, b); // 10 5
  
  // 對象解構(gòu)
  let { c, d } = { name: "tao", age: 20 };
  console.log(c, d); // tao 20
  

• 展開運(yùn)算符（...）

  // 數(shù)組用法
  let arr = [1, 2, 3, 4];
  let arr2 = [...arr];
  console.log(arr2); // [1,2,3,4]
  
  // 對象用法
  let obj = {
    name: "tao",
    age: 18
  };
  
  let obj2 = { ...obj };
  console.log(obj2); // {name: "tao", age: 18}
  

• 箭頭函數(shù)

  注意：箭頭函數(shù)中的 this 指向聲明時（父作用域中）的 this，而不是執(zhí)行時的 this

• Set 類

  // 利用Set類進(jìn)行數(shù)組去重
  let arr = [1, 1, 2, 3, 2, 6, 4, 6];
  let class_arr = new Set(arr);
  console.log(class_arr); // Set(5) {1, 2, 3, 6, 4}
  let newArr = [...class_arr];
  console.log(newArr); // (5) [1, 2, 3, 6, 4]
  

4剂府、JavsScript 六種情況為假值（用于 if拧揽、while 等條件判斷時）

注意：空對象（{ }）和空數(shù)組（[ ]）為 true 值。

• false（Boolean 布爾值）
• null
• undefined（只聲明腺占，未定義）
• ""（String 空字符串）
• 0 （Number 數(shù)字 0）
• NaN （Not a Number）

5淤袜、HTTP 狀態(tài)碼

6临扮、Ajax 異步請求

1. 創(chuàng)建請求對象 XMLHttpRequest/ ActiveXObject
2. 建立連接，設(shè)置請求方式教翩、是否異步和 url 地址 open()
3. 發(fā)送請求 send()
4. 監(jiān)聽狀態(tài)的變化 onreadystatechange()
5. 接收返回的數(shù)據(jù)

• 補(bǔ)充：

readyState	存有 XMLHttpRequest 的狀態(tài)杆勇。從 0 到 4 發(fā)生變化。
-	0: 請求未初始化
-	1: 服務(wù)器連接已建立
-	2: 請求已接收
-	3: 請求處理中
-	4: 請求已完成饱亿，且響應(yīng)已就緒
status	200: “OK” 404: 未找到頁面

function request() {
  // 1.創(chuàng)建請求對象XMLHttpRequest / ActiveXObject
  let xmlHttp;
  if (window.XMLHttpRequest) {
    xmlHttp = new XMLHttpRequest();
  } else {
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  // 2.建立連接蚜退，設(shè)置請求方式，是否異步以及url地址
  xmlHttp.open("post", "http://localhost:8080/api", true);
  // 3.發(fā)送異步請求 get => send(null) / post => send(相應(yīng)的參數(shù))
  xmlHttp.send();
  // 4.監(jiān)聽狀態(tài)的變化
  xmlHttp.onreadystatechange = function() {
    if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
      // 5.接收返回的數(shù)據(jù)彪笼，進(jìn)行處理
      console.log(xmlHttp.responseText);
    }
  };
}

四钻注、jQuery 面試題

1、jQuery 入口函數(shù)

• jQuery 與 JavaScript 加載模式對比：

• 入口函數(shù)四種寫法：

// 第一種寫法
$(document).ready(function() {
  // 執(zhí)行代碼邏輯
});

// 第二種寫法
jQuery(document).ready(function() {
  // 執(zhí)行代碼邏輯
});

// 第三種寫法（推薦）
$(function() {
  // 執(zhí)行代碼邏輯
});

// 第四種寫法
jQuery(function() {
  // 執(zhí)行代碼邏輯
});

2泵肄、jQuery 核心函數(shù)

核心函數(shù) => $(arg) 捆交。arg 可為函數(shù)淑翼、字符串（包括字符串選擇器和字符串片段）、dom 元素對象

// 1.接收一個函數(shù)
$(function() {
  console.log("function");
});

// 2.接收一個字符串
// 2.1 傳入字符串選擇器
let box = $("#box");
// 2.2 傳入字符串片段
let p = $("<p>我是p段落</p>");

// 3.接收一個dom
// <div id="box"></div>
let box = $(box);

3品追、jQuery 對象

通俗來說玄括，jQuery 對象的本質(zhì)是一個偽數(shù)組。

• 屬性名為 0 到 length-1
• 有 length 屬性

// 仿寫偽數(shù)組
let jq = {
  0: "Daiva",
  1: "Losy",
  2: "Herry",
  length: 3
};

4肉瓦、jQuery 靜態(tài)方法

靜態(tài)方法定義：靜態(tài)方法直接用類名調(diào)用的方法惠豺；其對應(yīng)是對象方法。

對象方法：用實(shí)例對象調(diào)用的方法风宁。

function Person() {}
Person.say = function() {
  console.log("我是靜態(tài)方法");
};
// 靜態(tài)方法調(diào)用 => 類名.方法
Person.say();

// 對象方法需要寫到原型上
Person.prototype.say = function() {
  console.log("我是對象方法");
};
// 對象方法 => 實(shí)例化對象.方法
let person = new Person();
person.say();

jQuery 的靜態(tài)方法：

1. $.holdReady(Boolean) 暫徒嗲剑或者恢復(fù) jQuery.ready()事件
2. $.each( arr, callback(index, value) ) 遍歷對象或數(shù)組（相比原生 js 的 forEach 不能遍歷數(shù)組）
3. $.map(arr, callback(item, index, arr) ) 遍歷對象或數(shù)組，將回調(diào)函數(shù)的返回值組成新數(shù)組并返回
4. $.trim( str ) 去掉字符串兩端空格 => 返回去除空格后的 str
5. $.isWindow() 判斷傳入的對象是否是 window 對象 => 返回 true / false
6. $.isArray() 判斷傳入的對象是否是數(shù)組 => 返回 true / false
7. $.isFunction() 判斷傳入的對象是否是一個函數(shù) => 返回 true / false

5戒财、jQuery 選擇器

1. 基礎(chǔ)選擇器
2. 層次選擇器
3. 內(nèi)容過濾選擇器

[圖片上傳失敗...(image-4f73f6-1606756516165)]

6热监、jQuery 操作屬性

1. 屬性和屬性節(jié)點(diǎn)

   • 屬性定義

     • 對象身上保存的變量就是屬性

     • 只要對象身上都可以添加屬性(無論是自定義對象,還是 DOM 對象)

   • 如何操作屬性?

     • 獲取屬性：obj.key | obj[key]

     • 設(shè)置屬性：obj.key = value | obj[key] = value

   • 屬性節(jié)點(diǎn)定義

     • 在 HTML 標(biāo)簽中添加的屬性就是屬性節(jié)點(diǎn)

     • 在 attributes 屬性中保存的所有內(nèi)容都是屬性節(jié)點(diǎn)

   • 如何操作屬性節(jié)點(diǎn)?

     • 獲取屬性節(jié)點(diǎn)：dom 元素.getAttribute('屬性名')

     • 設(shè)置屬性節(jié)點(diǎn)：dom 元素.setAttribute('屬性名', '屬性值')

   屬性和屬性節(jié)點(diǎn)的區(qū)別：任何對象都有屬性，屬性節(jié)點(diǎn)只有 dom 獨(dú)有饮寞。

2. 屬性節(jié)點(diǎn)方法

   • attr(key, value) 獲取或者設(shè)置屬性節(jié)點(diǎn)
   • removeAttr(key) 刪除所有找到指定元素的屬性節(jié)點(diǎn)
   • prop(key[, value]) 獲取或者設(shè)置元素的屬性值（注意：prop 方法不僅能操作屬性孝扛，還能操作屬性節(jié)點(diǎn)。一般用于 checked/selected/disabled）
   • removeProp(key) 刪除所有找到指定元素的屬性和屬性節(jié)點(diǎn)

   attr 方法和 prop 方法區(qū)別：

   1）attr 方法只能操作屬性節(jié)點(diǎn)幽崩，而 prop 方法既可以操作屬性苦始，又可以操作屬性節(jié)點(diǎn)。

   2）如果具有 true 和 false 兩個屬性節(jié)點(diǎn)時（例如：checked/selected/disabled）慌申，官方推薦使用 prop 方法陌选，其他使用 attr 方法。

   3）具有 true 和 false 兩個屬性節(jié)點(diǎn)時蹄溉，沒有設(shè)置默認(rèn)值咨油，attr 方法默認(rèn)返回 undefined，prop 方法默認(rèn)返回 false柒爵。

7役电、jQuery 操作 Class

1. 操作 Class

   • addClass(className[, className2]) 添加類。給元素添加一個或多個類（多個類名之間用空格隔開）

   • removeClass(className[, className2]) 刪除類棉胀。給元素刪除一個或多個類

   • toggleClass(className) 切換類法瑟。添加或刪除一個類（存在則刪除，不存在則添加）

2. 操作 Css 樣式

   • css() 獲取或設(shè)置元素的 css 樣式

     • 獲取 css(key)

     • 設(shè)置 css(key, value)

   • width() 獲取或設(shè)置元素的寬度

     • 獲取 width()
     • 設(shè)置 width(value)

   • height() 獲取或設(shè)置元素的高度

     • 獲取 height()

     • 設(shè)置 height(value)

3. 操作文本

   • html() 獲取或設(shè)置元素的 HTML

     • 獲取 html()

     • 設(shè)置 html('domstr')

   • text() 獲取或設(shè)置元素的文本內(nèi)容

     • 獲取 text()
     • 設(shè)置 text('string')

   • val() 獲取或設(shè)置元素的 value 屬性值

     • 獲取 val()
     • 設(shè)置 val('string')

4. 操作元素的位置

   • offset() 獲取或設(shè)置元素相對窗口的偏移量

     • 獲取 offset().left | right...
     • 設(shè)置 offset({ left: 10, top: 10})

   • position() 獲取相對于它最近具有相對位置的父級元素（position: absolute | relative）

     • 獲取 position().left | right...

     • 設(shè)置 position({ left: 10, top: 10})

5. 操作 Scroll 方法

   • scrollTop() 獲取或設(shè)置元素相對滾動條頂部的偏移量

     • 獲取 scrollTop()

     • 設(shè)置 scrollTop(100)

   • scrollLeft() 獲取或設(shè)置元素滾動條的水平位置（最左側(cè)為 0）

     • 獲取 scrollLeft()
     • 設(shè)置 scrollLeft(100)

8唁奢、jQuery 事件

1. 事件綁定

   • 事件綁定方式：
     • eventName(function) （ 比如 click(function））(推薦)
     • on(eventName, function)

2. 事件解綁

   • off(eventName, function)
     • off()不傳參數(shù)霎挟，會移除元素的所有事件
     • off()傳入一個參數(shù)，會移除元素指定類型的事件驮瞧。比如：off('click')
     • off()傳入兩個參數(shù)茅信，會移除元素指定類型的指定事件惯驼。比如：off('click'宵荒，funcName)

3. 事件坐標(biāo)

   • 獲取事件坐標(biāo)的三種方式：

     • event.offsetX / event.offsetY 相對于事件元素左上角的坐標(biāo)位置
     • event.pageX/ event.pageY 相對于頁面左上角的坐標(biāo)位置
     • event.clientX / event.clientY 相對于視口（瀏覽器）左上角的坐標(biāo)位置

   • event.page 和 event.client 區(qū)別：

     • 網(wǎng)頁是可以滾動的，而視口是固定的

     • 獲取可視區(qū)域用 event.page

     • 獲取距離瀏覽器左上角坐標(biāo)的用 event.client

4. 事件冒泡

   • 定義：事件冒泡是從目標(biāo)元素逐級向上傳遞到根節(jié)點(diǎn)的過程千所。
   • 阻止事件冒泡：event.stopPropagation()方法

5. 事件委托（也稱事件代理）

   • 定義：事件委托通俗地說就是請其他人幫我們干事情，干完的結(jié)果會反饋回來的過程蒜埋。
   • 事件委托的優(yōu)點(diǎn)：
     • 減少 dom 監(jiān)聽的數(shù)量
     • 自動給新增元素添加事件（默認(rèn)新增的元素沒有綁定事件淫痰，而事件委托可以做到）

6. 事件默認(rèn)行為

   • 定義：網(wǎng)頁中某些元素存在默認(rèn)的行為。比如 a 標(biāo)簽整份、提交表單
   • 阻止默認(rèn)行為：event.preventDefault()方法

7. 自定義事件

8. 移入移出事件

   • hover(function) 監(jiān)聽移入移出待错，其原理是 mouseenter 和 mouseleave
   • mouseenter(function) / mouseleave(function)（移動到子元素不會觸發(fā)事件）
   • mouseover(function) / mouseout （移動到子元素也會觸發(fā)事件）

9、jQuery 動畫效果

1. 顯示和隱藏

   • show(time, fn) 顯示動畫烈评。其原理是塊級調(diào)用 display: block; 行內(nèi)調(diào)用 display: inline
   • hide(time, fn) 隱藏動畫火俄。
   • toggle 切換動畫。（顯示 -> 隱藏讲冠，隱藏 -> 顯示）

2. 淡入淡出動畫

   • fadeIn(time, fn) 淡入動畫瓜客。
   • fadeOut(time, fn) 淡出動畫。
   • fadeToggle(time, fn) 切換動畫竿开。（顯示 -> 淡出谱仪，不顯示 -> 淡入）

3. 展開和收起動畫

   • slideDown(time, fn) 展開動畫。
   • slideUp(time, fn) 收起動畫否彩。
   • sildeToggle(time, fn) 切換動畫疯攒。（展開 -> 收起，收起 -> 展開）

4. 自定義動畫

   • animate(object, time, type, fn)
     • object 參數(shù)：接收一個對象列荔，可以在對象修改屬性
     • time 參數(shù)：指定動畫時長
     • type 參數(shù)：指定動畫類型敬尺。默認(rèn) swing
     • fn 參數(shù)：動畫執(zhí)行完畢后的回調(diào)函數(shù)

5. 動畫隊列

   • 鏈?zhǔn)蕉鄠€動畫 （ 例如：$('div').slideDown(1000).slideUp(200).show(2000) ）
   • 注意：
     • 動畫隊列方法 queue()后面不能直接添加 queue()方法，想繼續(xù)添加動畫肌毅，需要在上一個 queue()方法中使用 next()方法筷转。
     • 動畫隊列中緊跟一個非動畫方法則會被立即執(zhí)行。

6. 動畫相關(guān)方法

   • delay(time) 設(shè)置動畫延遲時間
   • stop() 停止指定元素正在執(zhí)行的動畫

   // 停止當(dāng)前動畫, 繼續(xù)執(zhí)行后續(xù)動畫
   $("div").stop();
   $("div").stop(false);
   $("div").stop(false, false);
   
   // 停止當(dāng)前和后續(xù)所有的動畫
   $("div").stop(true);
   $("div").stop(true, false);
   
   // 立即完成當(dāng)前的, 繼續(xù)執(zhí)行后續(xù)動畫
   $("div").stop(false, true);
   
   // 立即完成當(dāng)前的, 并且停止后續(xù)所有的
   $("div").stop(true, true);
   

10悬而、jQuery 文檔處理

1. 添加節(jié)點(diǎn)
   • 內(nèi)部插入
     • 在后面插入元素
       • append() 在指定元素上插入一個元素，并在最后面（父添子锭汛，在最后）
       • appendTo() 把元素插入指定元素笨奠，并在最后面（子插父，在最后）
     • 在前面插入元素
       • prepend() 在指定元素上插入一個元素唤殴，并在最后面（父添子般婆，在最前）
       • prependTo() 把元素插入指定元素，并在最后面（子插父朵逝，在最前）
   • 外部插入
     • 在后面插入元素
       • after()
       • insertAfter()
     • 在前面插入元素
       • before()
       • insertBefore()
2. 刪除節(jié)點(diǎn)
   • empty() 刪除指定元素的內(nèi)容和子元素（指定元素自身不刪除）
   • remove() 刪除指定元素（元素上的 事件會移除）
   • detach() 刪除指定元素（元素上的 事件會保留）
3. 替換節(jié)點(diǎn)
   • replaceWith() 將匹配元素替換成指定元素蔚袍。
   • replaceAll() 用匹配的元素替換所有 selector 匹配到的元素 （比如：$li.replaceAll('div')）
4. 復(fù)制節(jié)點(diǎn)
   • clone() / clone(false) 淺復(fù)制一個節(jié)點(diǎn) （不會復(fù)制節(jié)點(diǎn)的事件）
   • clone(true) 深復(fù)制一個節(jié)點(diǎn)（會復(fù)制節(jié)點(diǎn)的事件）
5. 包裹節(jié)點(diǎn)
   • wrap() 將指定元素用其他標(biāo)簽包裹起來
   • wrapAll() 將所有匹配的元素用一個元素包裹起來
   • wrapInner() 將每一個匹配的元素的子內(nèi)容（包括文本節(jié)點(diǎn)），用其他標(biāo)簽包裹起來
6. 遍歷節(jié)點(diǎn)
   • children() 返回指定元素的子元素數(shù)組對象（只考慮子元素）
   • next() 同輩緊鄰后面一個元素
   • nextAll() 同輩緊鄰后面所有元素
   • prev() 同輩緊鄰前面一個元素
   • prevAll() 同輩緊鄰前面所有元素
   • siblings() 所有兄弟元素
   • find(selector) 查找指定元素的后代元素
   • filter() 指定選擇器的 xx 元素，符合條件的同級元素
   • has() 符合條件的后代元素啤咽，不包含自身
   • parents() 獲取所有祖先元素
   • closest() 用來取得最近的匹配元素晋辆，包括自身
   • parentsUntil() 截止到 xx 位置的祖先節(jié)點(diǎn)。

五宇整、Vue 面試題

1瓶佳、常用指令

• v-if、v-show鳞青、v-on霸饲、v-for、v-model臂拓、v-bind...

2厚脉、v-if 和 v-show 區(qū)別

• v-show 是通過修改 css 的 display 屬性實(shí)現(xiàn)顯示和隱藏
• v-if 是銷毀 dom 或重新創(chuàng)建 dom 實(shí)現(xiàn)顯示和隱藏

3、雙向數(shù)據(jù)綁定原理

• 利用 Object.defineProperty（）方法重新定義了對象胶惰，用里面的 get（）獲取屬性值和用 set（）設(shè)置屬性值來實(shí)現(xiàn)傻工。

4、Proxy 相比 Object.defineProperty 優(yōu)勢（為什么 Vue3.0 將用原生 Proxy 替換 Object.defineProperty童番？）

• Object.defineProperty 劣勢：

  • Object.defineProperty 無法監(jiān)控數(shù)組下標(biāo)的變化精钮，通過數(shù)組下標(biāo)給數(shù)組設(shè)置值，不能實(shí)時響應(yīng)剃斧。
  • Object.defineProperty 只能劫持對象的屬性轨香，但如果屬性值也是對象則不能進(jìn)行深度遍歷。（Vue2.x 是通過遞歸 + 遍歷 data 對象實(shí)現(xiàn)監(jiān)控的）

• Proxy 優(yōu)勢：

  • Proxy 可以直接監(jiān)聽數(shù)組的變化幼东。
  • Proxy 可以直接監(jiān)聽對象而非屬性臂容。
  • Proxy 返回的是一個新對象,我們可以只操作新的對象達(dá)到目的,而 Object.defineProperty 只能遍歷對象屬性直接修改。
  • Proxy 有多達(dá) 13 種攔截方法,不限于 apply根蟹、ownKeys脓杉、deleteProperty、has 等等简逮。

5球散、Vue.js 的兩個核心

• 數(shù)據(jù)驅(qū)動和組件化思想。

6散庶、Vue 組件中 data 為什么必須是函數(shù)

• 在 new Vue()中蕉堰，data 可以是對象，但是在 component 中 data 只能是函數(shù)悲龟，不能是對象屋讶。這跟 JavaScript 的特性相關(guān)，==兩個實(shí)例都引用同一個原型對象须教，當(dāng)一個實(shí)例屬性發(fā)生改變時皿渗，另一個實(shí)例的屬性也隨之改變，只有兩個實(shí)例都擁有自己的作用域時，才不會相互干擾乐疆。（函數(shù)是擁有自己的作用域）==

  示例如下：

// data是對象形式
function C() {}
C.prototype.data = {
  name: "Herry"
};
var c1 = new C();
var c2 = new C();
c1.data.name = "c1";
console.log(c1.data.name); // c1
console.log(c2.data.name); // c1

// data是函數(shù)
function C() {
  this.data = this.data();
}
C.prototype.data = function() {
  return {
    name: "Herry"
  };
};
var c1 = new C();
var c2 = new C();
c1.data.name = "c1";
console.log(c1.data.name); // c1
console.log(c2.data.name); // Herry

7划乖、Vue 中 key 值的作用

• key 是用來給每個節(jié)點(diǎn)做唯一的標(biāo)識，diff 算法就可以正確識別并找到準(zhǔn)確的位置操作節(jié)點(diǎn)诀拭∏ㄉ福總的來說，key 主要是為了更高效地更新虛擬 Dom耕挨。

8细卧、什么是 Vue 的計算屬性

• 計算屬性的定義為當(dāng)其依賴的屬性的值發(fā)生變化時，計算屬性會重新計算筒占，反之贪庙，則使用緩存中的屬性值。計算屬性是響應(yīng)式的翰苫，是依賴某一個數(shù)據(jù)實(shí)現(xiàn)的止邮，只有它依賴的數(shù)據(jù)發(fā)生改變，它才會更新奏窑。

（2）前端大廠面試題

一导披、CSS 面試題

1、盒子水平居中的五大方案

• 定位（3 種）

  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
  
    html,
    body {
      width: 100%;
      height: 100%;
      position: relative;
    }
  
    div {
      background: #104398;
  
      /* 定位1 已知定位盒子的寬和高 */
      /* width: 100px;
          height: 100px;
          position: absolute;
          top: 50%;
          left: 50%;
          margin-top: -50px;
          margin-left: -50px; */
  
      /* 定位2 未知定位盒子的寬和高 (定位盒子必須有寬高,但不需要具體寬高是多少) */
      /* position: absolute;
          width: 100px;
          height: 100px;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          margin: auto; */
  
      /* 定位3 css3的transform: translate(-50%, -50%) 存在兼容性問題 ie9以下不兼容 */
      width: 100px;
      height: 100px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  </style>
  

• display : flex

  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    div {
      width: 100px;
      height: 100px;
      background: #104398;
    }
  </style>
  

• display : table-cell

  <style>
    /* display: table-cell 要求父盒子必須要有固定寬高并把子盒子display: inline-block;*/
    body {
      width: 200px;
      height: 200px;
      border: 1px solid #f33;
      display: table-cell;
      text-align: center;
      vertical-align: middle;
    }
  
    div {
      width: 100px;
      height: 100px;
      background: #104398;
  
      display: inline-block;
    }
  </style>
  

• JavaScript

  <div id="box"></div>
  
  <script>
    let screenWidth = document.documentElement.clientWidth, // 屏幕寬度
      screenHeight = document.documentElement.clientHeight, // 屏幕高度
      boxWidth = box.offsetWidth, // box的寬度
      boxHeight = box.offsetHeight; // box的高度
  
    box.style.position = "absolute";
    box.style.left = (screenWidth - boxWidth) / 2 + "px";
    box.style.top = (screenHeight - boxHeight) / 2 + "px";
  </script>
  

2埃唯、關(guān)于盒子模型

• 標(biāo)準(zhǔn)盒子模型 content-box
• IE 盒子模型（也稱怪異盒子模型） border-box
• Flex 盒模型

3撩匕、幾大經(jīng)典布局方案

• 左右固定，中間自適應(yīng)

  • 圣杯布局

    <!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>圣杯布局</title>
        <style>
          * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
          }
    
          html,
          body {
            height: 100%;
            overflow: hidden;
          }
          .container {
            height: 100%;
            padding: 0 20%;
            background: #fafafa;
          }
          .left,
          .right {
            width: 20%;
            min-height: 200px;
            background: #f52;
            border: 2px solid #420214;
          }
          .center {
            width: 100%;
            min-height: 300px;
            background: #52f;
          }
          .left,
          .right,
          .center {
            float: left;
    
            text-align: center;
            line-height: 200px;
            color: #fff;
          }
          .left {
            margin-left: -120%;
          }
          .right {
            margin-right: -20%;
          }
        </style>
      </head>
      <body>
        <h3><center>圣杯布局</center></h3>
    
        <div class="container">
          <div class="center">center</div>
          <div class="left">left</div>
          <div class="right">right</div>
        </div>
      </body>
    </html>
    

• 雙飛翼布局

  <!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>雙飛翼布局</title>
      <style>
        * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }
  
        html,
        body {
          height: 100%;
          overflow: hidden;
        }
  
        .container,
        .left,
        .right {
          float: left;
        }
  
        .container {
          width: 100%;
        }
  
        .container .center {
          margin: 0 20%;
          min-height: 300px;
          background: #52f;
        }
  
        .left,
        .right {
          width: 20%;
          min-height: 200px;
          background: #f52;
          border: 2px solid #420214;
        }
  
        .left {
          margin-left: -100%;
        }
  
        .right {
          margin-left: -20%;
        }
      </style>
    </head>
    <body>
      <h3><center>雙飛翼布局</center></h3>
  
      <div class="container">
        <div class="center">center</div>
      </div>
      <div class="left">left</div>
      <div class="right">right</div>
    </body>
  </html>
  

• 使用 （存在兼容性和性能差的缺點(diǎn)墨叛，不建議使用）

  <!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>
        * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }
  
        html,
        body {
          height: 100%;
          overflow: hidden;
        }
  
        .container {
          width: 100%;
          min-height: 300px;
          margin: 0 auto;
          background: #fafafa;
        }
  
        .left,
        .center,
        .right {
          float: left;
          text-align: center;
          line-height: 300px;
        }
  
        .left,
        .right {
          width: 20%;
          background: #f52;
        }
  
        .center {
          width: calc(100% - 20% * 2);
          background: #52f;
        }
      </style>
    </head>
  
    <body>
      <div class="container">
        <div class="left">left</div>
        <div class="center">center</div>
        <div class="right">right</div>
      </div>
    </body>
  </html>
  

• 使用 flex(存在兼容性的問題)

  <!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>
        * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }
  
        html,
        body {
          height: 100%;
        }
  
        .container {
          display: flex;
          height: 50vh;
          background: #fafafa;
          border: 1px solid #f00;
        }
  
        /* 要在子項目設(shè)置以下三個屬性才會使里面內(nèi)容水平垂直居中止毕，在父容器container設(shè)置不生效 */
        .left,
        .right,
        .center {
          display: flex;
          justify-content: center;
          align-items: center;
        }
  
        .left,
        .right {
          flex: 0 0 20%;
          background: #f52;
        }
  
        .center {
          flex: 1;
          background: #52f;
        }
      </style>
    </head>
    <body>
      <div class="container">
        <div class="left">left</div>
        <div class="center">center</div>
        <div class="right">right</div>
      </div>
    </body>
  </html>