Skip to content

Latest commit

 

History

History
1484 lines (1087 loc) · 31.4 KB

README.zh-TW.md

File metadata and controls

1484 lines (1087 loc) · 31.4 KB
Raw

You (Might) Don't Need jQuery Build Status

當今的前端環境發展迅速，現代瀏覽器已經提供了夠好用的 DOM/BOM API，我們不需要為了 DOM 操作或事件處理而從頭開始學 jQuery。同時，由於 React、Angular 和 Vue 等前端框架的普及，直接操作 DOM 變成了反模式，jQuery 的使用性大幅減少。本專案概述了大部份 Javascript 替代 jQuery 的方式，支援 IE 10 以上。

備註：jQuery 仍然是一個很棒的函式庫，有很多有效的案例。不用刻意為了變而改變 !

目錄

  1. Translations
  2. Query Selector
  3. CSS & Style
  4. DOM Manipulation
  5. Ajax
  6. Events
  7. Utilities
  8. Promises
  9. Animation
  10. Alternatives
  11. Browser Support

Translations

Query Selector

常見的 class、id、屬性等選擇器，我們可以使用 document.querySelector 或 document.querySelectorAll 替代。差別是

  • document.querySelector 返回第一個匹配的 Element
  • document.querySelectorAll 返回所有匹配的 Element 組成的 NodeList。它可以通過 [].slice.call() 轉換成 Array 使用
  • 如果匹配不到任何 Element，jQuery 和 document.querySelectorAll 將會返回 []，但 document.querySelector 會返回 null。

注意：document.querySelector 和 document.querySelectorAll 效能很差。如果想提高效能，盡量使用 document.getElementById、document.getElementsByClassName 或 document.getElementsByTagName。

  • 1.0 Query by selector 選擇器查詢

    // jQuery
$('selector');

// Native
document.querySelectorAll('selector');

  • 1.1 Query by class 查詢 class

    // jQuery
$('.class');

// Native
document.querySelectorAll('.class');

// 或
document.getElementsByClassName('class');

  • 1.2 Query by id 查詢 id

    // jQuery
$('#id');

// Native
document.querySelector('#id');

// 或
document.getElementById('id');

  • 1.3 Query by attribute 屬性查詢

    // jQuery
$('a[target=_blank]');

// Native
document.querySelectorAll('a[target=_blank]');

  • 1.4 Query in descendants 後代查詢

    // jQuery
$el.find('li');

// Native
el.querySelectorAll('li');

  • 1.5 Sibling/Previous/Next Elements 同層相鄰及前後元素

    • All siblings 同層相鄰 (兄弟元素)

      // jQuery
$el.siblings();

// Native - latest, Edge13+
[...el.parentNode.children].filter((child) =>
  child !== el
);
// Native (alternative) - latest, Edge13+
Array.from(el.parentNode.children).filter((child) =>
  child !== el
);
// Native - IE10+
Array.prototype.filter.call(el.parentNode.children, (child) =>
  child !== el
);

    • Previous sibling 同層前一個元素

      // jQuery
$el.prev();

// Native
el.previousElementSibling;

    • Next sibling 同層後一個元素

      // next
$el.next();

// Native
el.nextElementSibling;

    • All previous siblings 所有同層裡之前的元素

      // jQuery (可選的過濾選擇器)
$el.prevAll($filter);

// Native (可選的過濾函式)
function getPreviousSiblings(elem, filter) {
  var sibs = [];
  while (elem = elem.previousSibling) {
      if (elem.nodeType === 3) continue; // ignore text nodes
      if (!filter || filter(elem)) sibs.push(elem);
  }
  return sibs;
}

    • All next siblings 所有同層裡之後的元素

      // jQuery (可選的過濾選擇器)
$el.nextAll($filter);

// Native (可選的過濾函式)
function getNextSiblings(elem, filter) {
        var sibs = [];
        var nextElem = elem.parentNode.firstChild;
        do {
            if (nextElem.nodeType === 3) continue; // ignore text nodes
            if (nextElem === elem) continue; // ignore elem of target
            if (nextElem === elem.nextElementSibling) {
                if (!filter || filter(elem)) {
                    sibs.push(nextElem);
                    elem = nextElem;
                }
            }
        } while(nextElem = nextElem.nextSibling)
        return sibs;
    }

一個篩選函式範例：

function exampleFilter(elem) {
  switch (elem.nodeName.toUpperCase()) {
    case 'DIV':
      return true;
    case 'SPAN':
      return true;
    default:
      return false;
  }
}

  • 1.6 Closest 遍尋

    Closest 返回匹配選擇器的第一個父元素，從當前元素開始沿 DOM 樹向上遍尋。

    // jQuery
$el.closest(queryString);

// Native - 只支援最新版本，NO IE
el.closest(selector);

// Native - IE10+
function closest(el, selector) {
  const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;

  while (el) {
    if (matchesSelector.call(el, selector)) {
      return el;
    } else {
      el = el.parentElement;
    }
  }
  return null;
}

  • 1.7 Parents Until

    獲取當前每一個匹配元素的祖先們，不包含匹配元素本身，DOM node 或 jQuery 物件。

    // jQuery
$el.parentsUntil(selector, filter);

// Native
function parentsUntil(el, selector, filter) {
  const result = [];
  const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;

  // 從父母開始匹配
  el = el.parentElement;
  while (el && !matchesSelector.call(el, selector)) {
    if (!filter) {
      result.push(el);
    } else {
      if (matchesSelector.call(el, filter)) {
        result.push(el);
      }
    }
    el = el.parentElement;
  }
  return result;
}

  • 1.8 Form 表單

    • Input / Textarea 輸入欄位

      // jQuery
$('#my-input').val();

// Native
document.querySelector('#my-input').value;

    • 獲取 e.currentTarget 在 .radio 中的索引值

      // jQuery
$('.radio').index(e.currentTarget);

// Native
Array.from(document.querySelectorAll('.radio')).indexOf(e.currentTarget);
or
Array.prototype.indexOf.call(document.querySelectorAll('.radio'), e.currentTarget);

  • 1.9 Iframe Contents

    $('iframe').contents() 在 jQuery 返回的是 iframe 内的 document

    • Iframe contents

      // jQuery
$iframe.contents();

// Native
iframe.contentDocument;

    • Iframe Query

      // jQuery
$iframe.contents().find('.css');

// Native
iframe.contentDocument.querySelectorAll('.css');

  • 1.10 獲取 body

    // jQuery
$('body');

// Native
document.body;

  • 1.11 獲取或設置屬性

    • Get an attribute 獲取屬性

      // jQuery
$el.attr('foo');

// Native
el.getAttribute('foo');

    • Set an attribute 設置屬性

      // jQuery, 請注意，這可以在記憶體中工作，無需更改 DOM
$el.attr('foo', 'bar');

// Native
el.setAttribute('foo', 'bar');

    • 獲取 data- 屬性

      // jQuery
$el.data('foo');

// Native (使用 `getAttribute`)
el.getAttribute('data-foo');

// Native (如果只需要支援 IE 11 以上，可以使用 `dataset`)
el.dataset['foo'];

  • 1.12 包含字串的選擇器 (區分大小寫)

    // jQuery
$("selector:contains('text')");

// Native
function contains(selector, text) {
  var elements = document.querySelectorAll(selector);
  return Array.from(elements).filter(function(element) {
    return RegExp(text).test(element.textContent);
  });
}

⬆ 回到頂部

CSS & Style

  • 2.1 CSS

    • 獲取樣式

      // jQuery
$el.css("color");

// Native
// 注意: 已知問題，如果樣式的值為 'auto'，將會返回 'auto'
const win = el.ownerDocument.defaultView;

// null 意指不返回偽樣式
win.getComputedStyle(el, null).color;

    • 設置樣式

      // jQuery
$el.css({ color: "#ff0011" });

// Native
el.style.color = '#ff0011';

    • 獲取 / 設置樣式

      注意：如果想一次設置多個樣式，可以參考 oui-dom-utils 裡 setStyles 的方法

    • Add class 增加樣式

      // jQuery
$el.addClass(className);

// Native
el.classList.add(className);

    • remove class 移除樣式

      // jQuery
$el.removeClass(className);

// Native
el.classList.remove(className);

    • has class 是否有樣式

      // jQuery
$el.hasClass(className);

// Native
el.classList.contains(className);

    • Toggle class 觸發樣式

      // jQuery
$el.toggleClass(className);

// Native
el.classList.toggle(className);

  • 2.2 Width & Height

    Width 與 Height 獲取方式相同，下面以 Height 為例：

    • Window height

      // window height
$(window).height();

// 沒有捲軸，行為像 jQuery
window.document.documentElement.clientHeight;

// 有捲軸
window.innerHeight;

    • Document height

      // jQuery
$(document).height();

// Native
const body = document.body;
const html = document.documentElement;
const height = Math.max(
  body.offsetHeight,
  body.scrollHeight,
  html.clientHeight,
  html.offsetHeight,
  html.scrollHeight
);

    • Element height

      // jQuery
$el.height();

// Native
function getHeight(el) {
  const styles = this.getComputedStyle(el);
  const height = el.offsetHeight;
  const borderTopWidth = parseFloat(styles.borderTopWidth);
  const borderBottomWidth = parseFloat(styles.borderBottomWidth);
  const paddingTop = parseFloat(styles.paddingTop);
  const paddingBottom = parseFloat(styles.paddingBottom);
  return height - borderBottomWidth - borderTopWidth - paddingTop - paddingBottom;
}

// 精準到整數（當 `border-box` 時為 `height - border` 值；當 `content-box` 時為 `height + padding` 值）
el.clientHeight;

// 精準到小數（當 `border-box` 時為 `height` 值；當 `content-box` 時為 `height + padding + border` 值）
el.getBoundingClientRect().height;

  • 2.3 Position & Offset 定位和位移

    • Position 定位

      獲得匹配元素相對於父元素的坐標

      // jQuery
$el.position();

// Native
{ left: el.offsetLeft, top: el.offsetTop }

    • Offset 位移

      獲得匹配元素相對於文件的坐標

      // jQuery
$el.offset();

// Native
function getOffset (el) {
  const box = el.getBoundingClientRect();

  return {
    top: box.top + window.pageYOffset - document.documentElement.clientTop,
    left: box.left + window.pageXOffset - document.documentElement.clientLeft
  }
}

  • 2.4 Scroll Top

    獲取元素滾動條的當前垂直位置。

    // jQuery
$(window).scrollTop();

// Native
(document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;

⬆ 回到頂部

DOM Manipulation DOM 操作

  • 3.1 Remove 移除

    從 DOM 中移除元素。

    // jQuery
$el.remove();

// Native
el.parentNode.removeChild(el);

  • 3.2 Text 文字

    • Get text 獲取文字

      返回元素的文本內容，包含其後代。

      // jQuery
$el.text();

// Native
el.textContent;

    • Set text 設置文字

      設置元素的文本內容。

      // jQuery
$el.text(string);

// Native
el.textContent = string;

  • 3.3 HTML

    • Get HTML 獲取 HTML

      // jQuery
$el.html();

// Native
el.innerHTML;

    • Set HTML 設置 HTML

      // jQuery
$el.html(htmlString);

// Native
el.innerHTML = htmlString;

  • 3.4 Append 追加

    Append 在父元素的最後一個子元素後追加子元素

    // jQuery
$el.append("<div id='container'>hello</div>");

// Native (HTML 字串)
el.insertAdjacentHTML('beforeend', '<div id="container">Hello World</div>');

// Native (元素)
el.appendChild(newEl);

  • 3.5 Prepend 前置

    // jQuery
$el.prepend("<div id='container'>hello</div>");

// Native (HTML 字串)
el.insertAdjacentHTML('afterbegin', '<div id="container">Hello World</div>');

// Native (元素)
el.insertBefore(newEl, el.firstChild);

  • 3.6 insertBefore 在元素前方插入

    在選取的元素前插入新節點

    // jQuery
$newEl.insertBefore(queryString);

// Native (HTML 字串)
el.insertAdjacentHTML('beforebegin ', '<div id="container">Hello World</div>');

// Native (元素)
const el = document.querySelector(selector);
if (el.parentNode) {
  el.parentNode.insertBefore(newEl, el);
}

  • 3.7 insertAfter 在元素後方插入

    在選取的元素插入新節點

    // jQuery
$newEl.insertAfter(queryString);

// Native (HTML 字串)
el.insertAdjacentHTML('afterend', '<div id="container">Hello World</div>');

// Native (元素)
const el = document.querySelector(selector);
if (el.parentNode) {
  el.parentNode.insertBefore(newEl, el.nextSibling);
}

  • 3.8 is

    如果匹配 query selector，返回 true

    // jQuery
$el.is(selector);

// Native
el.matches(selector);

  • 3.9 clone

    創造一個深拷貝元素：此拷貝包含匹配元素及其所有後代元素和文本節點。

    // jQuery. 將參數設為 `true` 以表示應將事件處理程序與元素一起複製。
$el.clone();

// Native
el.cloneNode();

  • 3.10 empty

    移除所有子節點

// jQuery
$el.empty();

// Native
el.innerHTML = '';

把每個被選取的元素放到指定的 HTML 結構裡

// jQuery
$(".inner").wrap('<div class="wrapper"></div>');

// Native
Array.from(document.querySelectorAll('.inner')).forEach((el) => {
   const wrapper = document.createElement('div');
   wrapper.className = 'wrapper';
   el.parentNode.insertBefore(wrapper, el);
   el.parentNode.removeChild(el);
   wrapper.appendChild(el);
});

  • 3.12 unwrap

    從 DOM 結構移除匹配元素的父元素

    // jQuery
$('.inner').unwrap();

// Native
Array.from(document.querySelectorAll('.inner')).forEach((el) => {
  let elParentNode = el.parentNode

  if(elParentNode !== document.body) {
    elParentNode.parentNode.insertBefore(el, elParentNode)
    elParentNode.parentNode.removeChild(elParentNode)
  }
});

  • 3.13 replaceWith

    用提供的新內容取代任何匹配元素集中的每個元素

    // jQuery
$('.inner').replaceWith('<div class="outer"></div>');

// Native (方案一) - 最新版或 Edge17+
Array.from(document.querySelectorAll('.inner')).forEach((el) => {
  const outer = document.createElement('div');
  outer.className = 'outer';
  el.replaceWith(outer);
});

// Native
Array.from(document.querySelectorAll('.inner')).forEach((el) => {
  const outer = document.createElement("div");
  outer.className = "outer";
  el.parentNode.replaceChild(outer, el);
});

  • 3.14 simple parse

    解析 HTML / SVG / XML 字串

    // jQuery
$(`<ol>
  <li>a</li>
  <li>b</li>
</ol>
<ol>
  <li>c</li>
  <li>d</li>
</ol>`);

// Native
range = document.createRange();
parse = range.createContextualFragment.bind(range);

parse(`<ol>
  <li>a</li>
  <li>b</li>
</ol>
<ol>
  <li>c</li>
  <li>d</li>
</ol>`);

⬆ 回到頂部

Ajax

Fetch API 是一個用是來替換 XMLHttpRequest 執行 ajax 的新標準。適用於 Chrome 和 Firefox，你可以使用 polyfill 讓它在舊版瀏覽器上運行。。

IE9+ 請使用 github/fetch，IE8+ 請使用 fetch-ie8，JSONP 請使用 fetch-jsonp。

  • 4.1 從伺服器載入數據並將返回的 HTML 放入匹配的元素中。

    // jQuery
$(selector).load(url, completeCallback)

// Native
fetch(url).then(data => data.text()).then(data => {
  document.querySelector(selector).innerHTML = data
}).then(completeCallback)

⬆ 回到頂部

Events

完整的替代命名空間及事件處理，請參考 https://github.com/oneuijs/oui-dom-events

  • 5.0 Document ready by DOMContentLoaded

    // jQuery
$(document).ready(eventHandler);

// Native
// 檢查 DOMContentLoaded 是否已經完成
if (document.readyState !== 'loading') {
  eventHandler();
} else {
  document.addEventListener('DOMContentLoaded', eventHandler);
}

  • 5.1 使用 on 綁定事件

    // jQuery
$el.on(eventName, eventHandler);

// Native
el.addEventListener(eventName, eventHandler);

  • 5.2 使用 off 綁定事件

    // jQuery
$el.off(eventName, eventHandler);

// Native
el.removeEventListener(eventName, eventHandler);

  • 5.3 Trigger

    // jQuery
$(el).trigger('custom-event', {key1: 'data'});

// Native
if (window.CustomEvent) {
  const event = new CustomEvent('custom-event', {detail: {key1: 'data'}});
} else {
  const event = document.createEvent('CustomEvent');
  event.initCustomEvent('custom-event', true, true, {key1: 'data'});
}

el.dispatchEvent(event);

⬆ 回到頂部

Utilities

大部份的 jQuery 實用工具都能在 native API 中找到。其它進階功能可以選用專注於穩定及效能的優質工具庫，推薦 lodash。

  • 6.1 基本工具

    • isArray

    判斷參數是否為陣列。

    // jQuery
$.isArray(array);

// Native
Array.isArray(array);
    • isWindow

    判斷參數是否為 window

    // jQuery
$.isWindow(obj);

// Native
function isWindow(obj) {
  return obj !== null && obj !== undefined && obj === obj.window;
}
    • inArray

    在陣列中搜尋指定值並返回索引值 (找不到則返回 -1)。

    // jQuery
$.inArray(item, array);

// Native
array.indexOf(item) > -1;

// ES6-way
array.includes(item);
    • isNumeric

    判斷傳入的參數是否為數字。 為了更好的準確性，請使用 typeof 確定型別，或參考下方 type 範例。

    // jQuery
$.isNumeric(item);

// Native
function isNumeric(n) {
  return !isNaN(parseFloat(n)) && isFinite(n);
}
    • isFunction

    判斷傳入的參數是否為 Javascript 函式。

    // jQuery
$.isFunction(item);

// Native
function isFunction(item) {
  if (typeof item === 'function') {
    return true;
  }
  var type = Object.prototype.toString.call(item);
  return type === '[object Function]' || type === '[object GeneratorFunction]';
}
    • isEmptyObject

    檢測物件是否為空值 (包含不可枚舉的屬性)

    // jQuery
$.isEmptyObject(obj);

// Native
function isEmptyObject(obj) {
  return Object.keys(obj).length === 0;
}
    • isPlainObject

    檢測物件是否為純對象 (使用 “{}” 或 “new Object” 創建)

    // jQuery
$.isPlainObject(obj);

// Native
function isPlainObject(obj) {
  if (typeof (obj) !== 'object' || obj.nodeType || obj !== null && obj !== undefined && obj === obj.window) {
    return false;
  }

  if (obj.constructor &&
      !Object.prototype.hasOwnProperty.call(obj.constructor.prototype, 'isPrototypeOf')) {
    return false;
  }

  return true;
}
    • extend

    將二個或多個物件的內容合併到一個新物件中，且不修改任一個參數。 object.assign 是 ES6 API，你也可以使用 polyfill。

    // jQuery
$.extend({}, object1, object2);

// Native
Object.assign({}, object1, object2);
    • trim

    刪除字串開頭和結尾的空白。

    // jQuery
$.trim(string);

// Native
string.trim();
    • map

    將陣列或物件裡的所有項目轉換為新的陣列項目。

    // jQuery
$.map(array, (value, index) => {
});

// Native
array.map((value, index) => {
});
    • each

    通用迭代函式，可用於無縫迭代物件或陣列。

    // jQuery
$.each(array, (index, value) => {
});

// Native
array.forEach((value, index) => {
});
    • grep

    找到陣列中符合過濾函式的元素。

    // jQuery
$.grep(array, (value, index) => {
});

// Native
array.filter((value, index) => {
});
    • type

    檢測物件中的 JavaScript [Class] 內部型態。

    // jQuery
$.type(obj);

// Native
function type(item) {
  const reTypeOf = /(?:^\[object\s(.*?)\]$)/;
  return Object.prototype.toString.call(item)
    .replace(reTypeOf, '$1')
    .toLowerCase();
}
    • merge

    將二個陣列的內容合併到第一個陣列裡。

    // jQuery, 不會刪除重複的項目
$.merge(array1, array2);

// Native, 不會刪除重複的項目
function merge(...args) {
  return [].concat(...args)
}

// ES6-way, 不會刪除重複的項目
array1 = [...array1, ...array2]

// Set version, 不會刪除重複的項目
function merge(...args) {
  return Array.from(new Set([].concat(...args)))
}
    • now

    返回表示當前時間的數字。

    // jQuery
$.now();

// Native
Date.now();
    • proxy

    傳入一個函式並返回一個新的函式，該函式綁定指定的上下文。

    // jQuery
$.proxy(fn, context);

// Native
fn.bind(context);

    + makeArray

    將類似陣列的物件轉換為真正的 JavaScript 陣列。

    // jQuery
$.makeArray(arrayLike);

// Native
Array.prototype.slice.call(arrayLike);

// ES6-way: Array.from() method
Array.from(arrayLike);

// ES6-way: spread operator 展開運算式
[...arrayLike];

  • 6.2 Contains

    檢查 DOM 元素是否為其它 DOM 元素的後代。

    // jQuery
$.contains(el, child);

// Native
el !== child && el.contains(child);

  • 6.3 Globaleval

    執行一些 JavaScript 的全域域代碼。

    // jQuery
$.globaleval(code);

// Native
function Globaleval(code) {
  const script = document.createElement('script');
  script.text = code;

  document.head.appendChild(script).parentNode.removeChild(script);
}

// 使用 eval，但 eval 的上下文是當前的，而 $.Globaleval 的上下文是 global 全域的。
eval(code);

  • 6.4 parse

    • parseHTML

    將字串解析為 DOM nodes 陣列。

    // jQuery
$.parseHTML(htmlString);

// Native
function parseHTML(string) {
  const context = document.implementation.createHTMLDocument();

  // Set the base href for the created document so any parsed elements with URLs
  // are based on the document's URL
  const base = context.createElement('base');
  base.href = document.location.href;
  context.head.appendChild(base);

  context.body.innerHTML = string;
  return context.body.children;
}

  • 6.5 exists

  • exists

    檢查元素是否存在於 DOM 裡。

    // jQuery
if ($('selector').length) {
   // exists
}

// Native
var element =  document.getElementById('elementId');
if (typeof(element) != 'undefined' && element != null)
{
   // exists
}

⬆ 回到頂部

Promises

promise 表示異步操作的最終結果。 jQuery 用它自己的方式來處理 promises。原生 JavaScript 依據 Promises/A+ 標準來實現最小 API 處理 promises。

  • 7.1 done, fail, always

    done 會在 promise 解決時調用，fail 會在 promise 拒絕時調用，always 無論 promise 解決或拒絕時都會調用。

    // jQuery
$promise.done(doneCallback).fail(failCallback).always(alwaysCallback)

// Native
promise.then(doneCallback, failCallback).then(alwaysCallback, alwaysCallback)

  • 7.2 when

    when 用於處理多個 promises。當全部 promises 被解決時返回，當任一 promises 被拒絕時拒絕。

    // jQuery
$.when($promise1, $promise2).done((promise1Result, promise2Result) => {
});

// Native
Promise.all([$promise1, $promise2]).then([promise1Result, promise2Result] => {});

  • 7.3 Deferred

    Deferred 是創建 promises 的一種方式。

    // jQuery
function asyncFunc() {
  const defer = new $.Deferred();
  setTimeout(() => {
    if(true) {
      defer.resolve('some_value_computed_asynchronously');
    } else {
      defer.reject('failed');
    }
  }, 1000);

  return defer.promise();
}

// Native
function asyncFunc() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (true) {
        resolve('some_value_computed_asynchronously');
      } else {
        reject('failed');
      }
    }, 1000);
  });
}

// Deferred way
function defer() {
  const deferred = {};
  const promise = new Promise((resolve, reject) => {
    deferred.resolve = resolve;
    deferred.reject = reject;
  });

  deferred.promise = () => {
    return promise;
  };

  return deferred;
}

function asyncFunc() {
  const defer = defer();
  setTimeout(() => {
    if(true) {
      defer.resolve('some_value_computed_asynchronously');
    } else {
      defer.reject('failed');
    }
  }, 1000);

  return defer.promise();
}

⬆ 回到頂部

Animation

  • 8.1 Show & Hide

    // jQuery
$el.show();
$el.hide();

// Native
// 更多 show 方法的細節，請參考 https://github.com/oneuijs/oui-dom-utils/blob/master/src/index.js#L363
el.style.display = ''|'inline'|'inline-block'|'inline-table'|'block';
el.style.display = 'none';

  • 8.2 Toggle

    顯示或隱藏元素。

    // jQuery
$el.toggle();

// Native
if (el.ownerDocument.defaultView.getComputedStyle(el, null).display === 'none') {
  el.style.display = ''|'inline'|'inline-block'|'inline-table'|'block';
} else {
  el.style.display = 'none';
}

  • 8.3 FadeIn & FadeOut

    // jQuery
$el.fadeIn(3000);
$el.fadeOut(3000);

// Native fadeOut
function fadeOut(el, ms) {
  if (ms) {
    el.style.transition = `opacity ${ms} ms`;
    el.addEventListener(
      'transitionend',
      function(event) {
        el.style.display = 'none';
      },
      false
    );
  }
  el.style.opacity = '0';
}

// Native fadeIn
function fadeIn(elem, ms) {
  elem.style.opacity = 0;

  if (ms) {
    let opacity = 0;
    const timer = setInterval(function() {
      opacity += 50 / ms;
      if (opacity >= 1) {
        clearInterval(timer);
        opacity = 1;
      }
      elem.style.opacity = opacity;
    }, 50);
  } else {
    elem.style.opacity = 1;
  }
}

  • 8.4 FadeTo

    調整元素的透明度。

    // jQuery
$el.fadeTo('slow',0.15);
// Native
el.style.transition = 'opacity 3s'; // assume 'slow' equals 3 seconds
el.style.opacity = '0.15';

  • 8.5 FadeToggle

    動畫調整透明度來顯示或隱藏。

    // jQuery
$el.fadeToggle();

// Native
el.style.transition = 'opacity 3s';
const { opacity } = el.ownerDocument.defaultView.getComputedStyle(el, null);
if (opacity === '1') {
  el.style.opacity = '0';
} else {
  el.style.opacity = '1';
}

  • 8.6 SlideUp & SlideDown

    // jQuery
$el.slideUp();
$el.slideDown();

// Native
const originHeight = '100px';
el.style.transition = 'height 3s';
// slideUp
el.style.height = '0px';
// slideDown
el.style.height = originHeight;

  • 8.7 SlideToggle

    滑動效果來顯示或隱藏元素。

    // jQuery
$el.slideToggle();

// Native
const originHeight = '100px';
el.style.transition = 'height 3s';
const { height } = el.ownerDocument.defaultView.getComputedStyle(el, null);
if (parseInt(height, 10) === 0) {
  el.style.height = originHeight;
} else {
 el.style.height = '0px';
}

  • 8.8 Animate

    執行一組自定義動畫的 CSS 屬性。

    // jQuery
$el.animate({ params }, speed);

// Native
el.style.transition = 'all ' + speed;
Object.keys(params).forEach((key) =>
  el.style[key] = params[key];
)

Alternatives

Browser Support

Chrome Firefox IE Opera Safari
Latest ✔ Latest ✔ 10+ ✔ Latest ✔ 6.1+ ✔

License

MIT