来源:GitHub - You-Dont-Need-jQuery

前端发展很快,现代浏览器原生 API 已经足够好用。我们并不需要为了操作 DOM、Event 等再学习一下 jQuery 的 API。同时由于 React、Angular、Vue 等框架的流行,直接操作 DOM 不再是好的模式,jQuery 使用场景大大减少。本项目总结了大部分 jQuery API 替代的方法,暂时只支持 IE10 以上浏览器。

目录

  1. Query 选择器
  2. CSS & Style
  3. DOM 操作
  4. Ajax
  5. 事件
  6. 实用工具
  7. Promises
  8. 动画
  9. 替代品
  10. 浏览器支持

Query 选择器

常用的 class、id、属性 选择器都可以使用 document.querySelectordocument.querySelectorAll 替代。区别是

  • document.querySelector 返回第一个匹配的 Element
  • document.querySelectorAll 返回所有匹配的 Element 组成的 NodeList。它可以通过 [].slice.call() 把它转成 Array
  • 如果匹配不到任何 Element,jQuery 返回空数组 [],但 document.querySelector 返回 null,注意空指针异常。当找不到时,也可以使用 || 设置默认的值,如 document.querySelectorAll(selector) || []

注意:document.querySelectordocument.querySelectorAll 性能很。如果想提高性能,尽量使用 document.getElementByIddocument.getElementsByClassNamedocument.getElementsByTagName

  • 1.0 选择器查询

    // jQuery
    $('selector');
    
    // Native
    document.querySelectorAll('selector');
  • 1.1 class 查询

    // jQuery
    $('.class');
    
    // Native
    document.querySelectorAll('.class');
    
    // or
    document.getElementsByClassName('class');
  • 1.2 id 查询

    // jQuery
    $('#id');
    
    // Native
    document.querySelector('#id');
    
    // or
    document.getElementById('id');
  • 1.3 属性查询

    // jQuery
    $('a[target=_blank]');
    
    // Native
    document.querySelectorAll('a[target=_blank]');
  • 1.4 后代查询

    // jQuery
    $el.find('li');
    
    // Native
    el.querySelectorAll('li');
  • 1.5 兄弟及上下元素

    • 兄弟元素

      // 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
      );
    • 上一个元素

      // jQuery
      $el.prev();
      
      // Native
      el.previousElementSibling;
      
    • 下一个元素

      // next
      $el.next();
      
      // Native
      el.nextElementSibling;
  • 1.6 最近的祖先元素

Closest 获得匹配选择器的第一个祖先元素,从当前元素开始沿 DOM 树向上。

// jQuery
$el.closest(queryString);

// Native - Only latest, 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 匹配元素的祖先集

获取当前匹配元素的每层祖先的集合,不包括匹配元素的本身。

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

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

  // match start from parent
  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 表单

    • Input/Textarea

      // jQuery
      $('#my-input').val();
      
      // Native
      document.querySelector('#my-input').value;
    • 获取 e.currentTarget 在 .radio 中的数组索引

      // jQuery
      $('.radio').index(e.currentTarget);
      
      // Native
      Array.prototype.indexOf.call(document.querySelectorAll('.radio'), e.currentTarget);
  • 1.9 Iframe里的内容

jQuery 对象的 iframe contents() 返回的是 iframe 内的 document

    • Iframe里的内容

      // jQuery
      $iframe.contents();
      
      // Native
      iframe.contentDocument;
    • Iframe里的查询

      // jQuery
      $iframe.contents().find('.css');
      
      // Native
      iframe.contentDocument.querySelectorAll('.css');
    • 1.10 获取 body

      // jQuery
      $('body');
      
      // Native
      document.body;
    • 1.11 获取或设置属性

      • 获取属性

        // jQuery
        $el.attr('foo');
        
        // Native
        el.getAttribute('foo');
      • 设置属性

        // jQuery, note that this works in memory without change the DOM
        $el.attr('foo', 'bar');
        
        // Native
        el.setAttribute('foo', 'bar');
      • 获取 data- 属性

        // jQuery
        $el.data('foo');
        
        // Native (use `getAttribute`)
        el.getAttribute('data-foo');
        
        // Native (use `dataset` if only need to support IE 11+)
        el.dataset['foo'];

    ⬆ 回到顶部

    CSS和样式

    • 2.1 CSS

      • 获取样式

        // jQuery
        $el.css("color");
        
        // Native
        // 注意:此处为了解决当 style 值为 auto 时,返回 auto 的问题
        const win = el.ownerDocument.defaultView;
        
        // null 的意思是不返回伪类元素
        win.getComputedStyle(el, null).color;
      • 设置样式

        // jQuery
        $el.css({ color: "#ff0011" });
        
        // Native
        el.style.color = '#ff0011';
      • 同时操作多个样式

      注意,如果想一次设置多个 style,可以参考 oui-dom-utils 中 setStyles 方法

      • 添加class

        // jQuery
        $el.addClass(className);
        
        // Native
        el.classList.add(className);
      • 移除class

        // jQuery
        $el.removeClass(className);
        
        // Native
        el.classList.remove(className);
      • 是否包含class

        // jQuery
        $el.hasClass(className);
        
        // Native
        el.classList.contains(className);
      • 切换class

        // jQuery
        $el.toggleClass(className);
        
        // Native
        el.classList.toggle(className);
    • 2.2 获取宽高

    Width 与 Height 获取方法相同,下面以 Height 为例:

    • 窗口高度

      // window height
      $(window).height();
      
      // 含 scrollbar
      window.document.documentElement.clientHeight;
      
      // 不含 scrollbar,与 jQuery 行为一致
      window.innerHeight;
    • 文档高度

      // 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
      );
    • 元素高度

      // 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 位置和偏移

      • 位置

      获得匹配元素相对父元素的偏移

      // jQuery
      $el.position();
      
      // Native
      { left: el.offsetLeft, top: el.offsetTop }
      • 偏移

      获得匹配元素相对文档的偏移

      // 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 滚动条垂直位置

    获取元素滚动条垂直位置。

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

    ⬆ 回到顶部

    DOM 操作

    • 3.1 移除元素

    从 DOM 中移除元素。

    // jQuery
    $el.remove();
    
    // Native
    el.parentNode.removeChild(el);
    • 3.2 元素的文本内容

      • 获取文本内容

      返回指定元素及其后代的文本内容。

      // jQuery
      $el.text();
      
      // Native
      el.textContent;
      • 设置文本内容

      设置元素的文本内容。

      // jQuery
      $el.text(string);
      
      // Native
      el.textContent = string;
    • 3.3 HTML

      • 获取HTML

        // jQuery
        $el.html();
        
        // Native
        el.innerHTML;
      • 设置HTML

        // jQuery
        $el.html(htmlString);
        
        // Native
        el.innerHTML = htmlString;
    • 3.4 插入到末尾

    Append 插入到子节点的末尾

    // jQuery
    $el.append("<div id='container'>hello</div>");
    
    // Native (HTML string)
    el.insertAdjacentHTML('beforeend', '<div id="container">Hello World</div>');
    
    // Native (Element)
    el.appendChild(newEl);
    • 3.5 插入到开头

      // jQuery
      $el.prepend("<div id='container'>hello</div>");
      
      // Native (HTML string)
      el.insertAdjacentHTML('afterbegin', '<div id="container">Hello World</div>');
      
      // Native (Element)
      el.insertBefore(newEl, el.firstChild);
    • 3.6 在元素前插入

    在选中元素前插入新节点

    // jQuery
    $newEl.insertBefore(queryString);
    
    // Native (HTML string)
    el.insertAdjacentHTML('beforebegin ', '<div id="container">Hello World</div>');
    
    // Native (Element)
    const el = document.querySelector(selector);
    if (el.parentNode) {
      el.parentNode.insertBefore(newEl, el);
    }
    • 3.7 在元素后插入

    在选中元素后插入新节点

    // jQuery
    $newEl.insertAfter(queryString);
    
    // Native (HTML string)
    el.insertAdjacentHTML('afterend', '<div id="container">Hello World</div>');
    
    // Native (Element)
    const el = document.querySelector(selector);
    if (el.parentNode) {
      el.parentNode.insertBefore(newEl, el.nextSibling);
    }

    如果匹配给定的选择器,返回true

    // jQuery
    $el.is(selector);
    
    // Native
    el.matches(selector);
    • 3.9 克隆/深拷贝

    深拷贝被选元素。(生成被选元素的副本,包含子节点、文本和属性。)

    //jQuery
    $el.clone();
    
    //Native
    //深拷贝添加参数‘true’
    el.cloneNode();
    
      ```
    
    - [3.10](#3.10) <a name='3.10'></a> 清空
    
    移除所有子节点
    

    //jQuery
    $el.empty();

    //Native
    el.innerHTML = '';

    
    - [3.11](#3.11) <a name='3.11'></a> 包装
    
     把每个被选元素放置在指定的HTML结构中。
    

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

    //Native
    Array.prototype.forEach.call(document.querySelector('.inner'), (el) => {

    const wrapper = document.createElement('div');
    wrapper.className = 'wrapper';
    el.parentNode.insertBefore(wrapper, el);
    el.parentNode.removeChild(el);
    wrapper.appendChild(el);

    });

    
    - [3.12](#3.12) <a name="3.12"></a> 拆包装
    
     移除被选元素的父元素的DOM结构
    

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

    // Native
    Array.prototype.forEach.call(document.querySelectorAll('.inner'), (el) => {

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

    });

    
    - [3.13](#3.13) <a name="3.13"></a> 替换
    
    用指定的元素替换被选的元素
    

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

    //Native
    Array.prototype.forEach.call(document.querySelectorAll('.inner'),(el) => {

    const outer = document.createElement("div");
    outer.className = "outer";
    el.parentNode.insertBefore(outer, el);
    el.parentNode.removeChild(el);

    });

    
    - [3.14](#3.14) <a name='3.14'></a> 解析HTML
    
      解析 HTML/SVG/XML 字符串
    

    // jQuery
    $(`<ol>

    <li>a</li>
    <li>b</li>
    ol>
    l>
    <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>
    l>
    <li>c</li>
    <li>d</li>

    </ol>`);

    
    **[⬆ 回到顶部](#contents)**
    
    ## <a name="ajax"></a> Ajax
    
    [Fetch API](https://fetch.spec.whatwg.org/) 是用于替换 XMLHttpRequest 处理 ajax 的新标准,Chrome 和 Firefox 均支持,旧浏览器可以使用 polyfills 提供支持。
    
    IE9+ 请使用 [github/fetch](http://github.com/github/fetch),IE8+ 请使用 [fetch-ie8](https://github.com/camsong/fetch-ie8/),JSONP 请使用 [fetch-jsonp](https://github.com/camsong/fetch-jsonp)。
    
    - [4.1](#4.1) <a name='4.1'></a> 从服务器读取数据并替换匹配元素的内容。
    

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

    // Native
    fetch(url).then(data => data.text()).then(data => {

    document.querySelector(selector).innerHTML = data

    }).then(completeCallback)

    
    **[⬆ 回到顶部](#contents)**
    
    ## <a name="events"></a> 事件
    
    完整地替代命名空间和事件代理,链接到 https://github.com/oneuijs/oui-dom-events
    
    - [5.0](#5.0) <a name='5.0'></a> Document ready by `DOMContentLoaded`
    

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

    // Native
    // 检测 DOMContentLoaded 是否已完成
    if (document.readyState !== 'loading') {

    eventHandler();

    } else {

    document.addEventListener('DOMContentLoaded', eventHandler);

    }

    
    - [5.1](#5.1) <a name='5.1'></a> 使用 on 绑定事件
    

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

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

    
    - [5.2](#5.2) <a name='5.2'></a> 使用 off 解绑事件
    

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

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

    
    - [5.3](#5.3) <a name='5.3'></a> 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);

    
    **[⬆ 回到顶部](#contents)**
    
    ## <a name="utilities"></a> 实用工具
    
    大部分实用工具都能在 native API 中找到. 其他高级功能可以选用专注于该领域的稳定性和性能都更好的库来代替,推荐 [lodash](https://lodash.com)。
    
    - [6.1](#6.1) <a name='6.1'></a> 基本工具
    
    + isArray
    
    检测参数是不是数组。
    

    // jQuery
    $.isArray(range);

    // Native
    Array.isArray(range);

    
    + 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
    
    检测传入的参数是不是数字。
    Use `typeof` to decide the type or the `type` example for better accuracy.
    

    // 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(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](https://github.com/ljharb/object.assign)。
    

    // jQuery
    $.extend({}, defaultOpts, opts);

    // Native
    Object.assign({}, defaultOpts, opts);

    
    + 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
    // 使用 concat,不能去除重复值
    function merge(...args) {

    return [].concat(...args)

    }

    // ES6,同样不能去除重复值
    array1 = [...array1, ...array2]

    // 使用 Set,可以去除重复值
    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(arrayLike);

    
    - [6.2](#6.2) <a name='6.2'></a> 包含
    
    检测 DOM 元素是不是其他 DOM 元素的后代.
    

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

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

    
    - [6.3](#6.3) <a name='6.3'></a> Globaleval
    
    全局执行 JavaScript 代码。
    

    // jQuery
    $.globaleval(code);

    // Native
    function Globaleval(code) {

    const script = document.createElement('script');
    script.text = code;
    
    document.head.appendChild(script).parentNode.removeChild(script);

    }

    // Use eval, but context of eval is current, context of $.Globaleval is global.
    eval(code);

    
    - [6.4](#6.4) <a name='6.4'></a> 解析
    
    + parseHTML
    
    解析字符串为 DOM 节点数组.
    

    // 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;

    }

    
    + parseJSON
    
    传入格式正确的 JSON 字符串并返回 JavaScript 值.
    

    // jQuery
    $.parseJSON(str);

    // Native
    JSON.parse(str);

    
    **[⬆ 回到顶部](#contents)**
    
    ## <a name="promises"></a> Promises
    
    Promise 代表异步操作的最终结果。jQuery 用它自己的方式处理 promises,原生 JavaScript 遵循 [Promises/A+](http://promises-aplus.github.io/promises-spec/) 标准实现了最小 API 来处理 promises。
    
    - [7.1](#7.1) <a name='7.1'></a> done, fail, always
    
    `done` 会在 promise 解决时调用,`fail` 会在 promise 拒绝时调用,`always` 总会调用。
    

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

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

    
    - [7.2](#7.2) <a name='7.2'></a> when
    
    `when` 用于处理多个 promises。当全部 promises 被解决时返回,当任一 promise 被拒绝时拒绝。
    

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

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

    
    - [7.3](#7.3) <a name='7.3'></a> 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();

    }

    
    **[⬆ 回到顶部](#contents)**
    
    ## <a name="animation"></a> 动画
    
    - [8.1](#8.1) <a name='8.1'></a> 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](#8.2) <a name='8.2'></a> 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](#8.3) <a name='8.3'></a> FadeIn & FadeOut
    

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

    // Native
    el.style.transition = 'opacity 3s';
    // fadeIn
    el.style.opacity = '1';
    // fadeOut
    el.style.opacity = '0';

    
    - [8.4](#8.4) <a name='8.4'></a> FadeTo
    
    调整元素透明度。
    

    // jQuery
    $el.fadeTo('slow',0.15);
    // Native
    el.style.transition = 'opacity 3s'; // 假设 'slow' 等于 3 秒
    el.style.opacity = '0.15';

    
    - [8.5](#8.5) <a name='8.5'></a> 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](#8.6) <a name='8.6'></a> 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](#8.7) <a name='8.7'></a> 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](#8.8) <a name='8.8'></a> Animate
    
    执行一系列 CSS 属性动画。
    

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

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

    el.style[key] = params[key];

    )

    
    **[⬆ 回到顶部](#contents)**
    
    ## <a name="alternatives"></a> 替代品
    
    * [你可能不需要 jQuery (You Might Not Need jQuery)](http://youmightnotneedjquery.com/) - 如何使用原生 JavaScript 实现通用事件,元素,ajax 等用法。
    * [npm-dom](http://github.com/npm-dom) 以及 [webmodules](http://github.com/webmodules) - 在 NPM 上提供独立 DOM 模块的组织
    
    ## <a name="browser-support"></a>浏览器支持
    
    ![Chrome][chrome-image] | ![Firefox][firefox-image] | ![IE][ie-image] | ![Opera][opera-image] | ![Safari][safari-image]
    --- | --- | --- | --- | --- |
    Latest ✔ | Latest ✔ | 10+ ✔ | Latest ✔ | 6.1+ ✔ |
    
    # License
    
    MIT
    
    [chrome-image]: http://dr490n.cn/usr/uploads/2021/09/3655604560.png
    [firefox-image]: http://dr490n.cn/usr/uploads/2021/09/1140607777.png
    [ie-image]: http://dr490n.cn/usr/uploads/2021/09/2878678933.png
    [opera-image]: http://dr490n.cn/usr/uploads/2021/09/2305392921.png

    标签: jQuery, Javascript

    添加新评论