You Don't Need jQuery

Examples of how to do query, style, dom, ajax, event etc like jQuery with p...

Learning resource
camsong/You-Dont-Need-jQuery

README

You (Might) Don't Need jQuery


Frontend environments evolve rapidly nowadays and modern browsers have already implemented a great deal of DOM/BOM APIs which are good enough for production use. We don't have to learn jQuery from scratch for DOM manipulation or event handling. In the meantime, thanks to the spread of frontend libraries such as React, Angular and Vue, manipulating the DOM directly becomes anti-pattern, so that jQuery usage has never been less important. This project summarizes most of the alternatives in native Javascript implementation to jQuery methods, with IE 10+ support.

ℹ️ Notice:
1. jQuery is still a great library and has many valid use cases. Don’t migrate away if you don’t want to!
2. The alternatives are not completely equivalent in all scenarios, and it is recommended that you test it before using it.

Table of Contents


1. Translations
1. Query Selector
1. CSS & Style
1. DOM Manipulation
1. Ajax
1. Events
1. Utilities
1. Promises
1. Animation
1. Alternatives
1. Browser Support

Translations


한국어
正體中文
简体中文
Bahasa Melayu
Bahasa Indonesia
Português(PT-BR)
Tiếng Việt Nam
Español
Русский
Кыргызча
Türkçe
Italiano
Français
日本語
Polski

Query Selector


In place of common selectors like class, id or attribute we can use document.querySelector or document.querySelectorAll for substitution. The differences lie in:
document.querySelector returns the first matched element
document.querySelectorAll returns all matched elements as NodeList. It can be converted to Array using Array.prototype.slice.call(document.querySelectorAll(selector)); or any of the methods outlined in makeArray
If there are no elements matched, jQuery and document.querySelectorAll will return [], whereas document.querySelector will return null.

Notice: document.querySelector and document.querySelectorAll are quite SLOW, thus try to use document.getElementById, document.getElementsByClassName or document.getElementsByTagName if you want to get a performance bonus.


- [1.0](#1.0) Query by selector

  1. ``` js
  2.   // jQuery
  3.   $('selector');

  5.   // Native
  6.   document.querySelectorAll('selector');
  7. ```

- [1.1](#1.1) Query by class

  1. ``` js
  2.   // jQuery
  3.   $('.class');

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

  8.   // or
  9.   document.getElementsByClassName('class');
  10. ```

- [1.2](#1.2) Query by id

  1. ``` js
  2.   // jQuery
  3.   $('#id');

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

  8.   // or
  9.   document.getElementById('id');

  11.   // or
  12.   window['id']
  13. ```

- [1.3](#1.3) Query by attribute

  1. ``` js
  2.   // jQuery
  3.   $('a[target=_blank]');

  5.   // Native
  6.   document.querySelectorAll('a[target=_blank]');
  7. ```

- [1.4](#1.4) Query in descendants

  1. ``` js
  2.   // jQuery
  3.   $el.find('li');

  5.   // Native
  6.   el.querySelectorAll('li');
  7. ```

- [1.5](#1.5) Sibling/Previous/Next Elements

  + All siblings

  1. ``` js
  2.     // jQuery
  3.     $el.siblings();

  5.     // Native - latest, Edge13+
  6.     [...el.parentNode.children].filter((child) =>
  7.       child !== el
  8.     );
  9.     // Native (alternative) - latest, Edge13+
  10.     Array.from(el.parentNode.children).filter((child) =>
  11.       child !== el
  12.     );
  13.     // Native - IE10+
  14.     Array.prototype.filter.call(el.parentNode.children, (child) =>
  15.       child !== el
  16.     );
  17. ```

  + Previous sibling

  1. ``` js
  2.     // jQuery
  3.     $el.prev();

  5.     // Native
  6.     el.previousElementSibling;
  7. ```
  + Next sibling

  1. ``` js
  2.     // jQuery
  3.     $el.next();

  5.     // Native
  6.     el.nextElementSibling;
  7. ```

  + All previous siblings

  1. ``` js
  2.     // jQuery (optional filter selector)
  3.     $el.prevAll($filter);

  5.     // Native (optional filter function)
  6.     function getPreviousSiblings(elem, filter) {
  7.       var sibs = [];
  8.       while (elem = elem.previousSibling) {
  9.           if (elem.nodeType === 3) continue; // ignore text nodes
  10.           if (!filter || filter(elem)) sibs.push(elem);
  11.       }
  12.       return sibs;
  13.     }

  15.   + All next siblings

  17. ``` js
    // jQuery (optional selector filter)
    $el.nextAll($filter);

    // Native (optional filter function)
    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;
        }

An example of filter function:

  1. ``` js
  2. function exampleFilter(elem) {
  3.   switch (elem.nodeName.toUpperCase()) {
  4.     case 'DIV':
  5.       return true;
  6.     case 'SPAN':
  7.       return true;
  8.     default:
  9.       return false;
  10.   }
  11. }
  12. ```

- [1.6](#1.6) Closest

  Return the first matched element by provided selector, traversing from current element up through its ancestors in the DOM tree.

  1. ``` js
  2.   // jQuery
  3.   $el.closest(selector);

  5.   // Native - Only latest, NO IE
  6.   el.closest(selector);

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

  12.     while (el) {
  13.       if (matchesSelector.call(el, selector)) {
  14.         return el;
  15.       } else {
  16.         el = el.parentElement;
  17.       }
  18.     }
  19.     return null;
  20.   }
  21. ```

- [1.7](#1.7) Parents Until

  Get the ancestors of each element in the current set of matched elements, up to but not including the element matched by the selector, DOM node, or jQuery object.

  1. ``` js
  2.   // jQuery
  3.   $el.parentsUntil(selector, filter);

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

  10.     // match start from parent
  11.     el = el.parentElement;
  12.     while (el && !matchesSelector.call(el, selector)) {
  13.       if (!filter) {
  14.         result.push(el);
  15.       } else {
  16.         if (matchesSelector.call(el, filter)) {
  17.           result.push(el);
  18.         }
  19.       }
  20.       el = el.parentElement;
  21.     }
  22.     return result;
  23.   }
  24. ```

- [1.8](#1.8) Form

  + Input/Textarea

  1. ``` js
  2.     // jQuery
  3.     $('#my-input').val();

  5.     // Native
  6.     document.querySelector('#my-input').value;
  7. ```

  + Get index of e.currentTarget between .radio

  1. ``` js
  2.     // jQuery
  3.     $('.radio').index(e.currentTarget);

  5.     // Native
  6.     Array.from(document.querySelectorAll('.radio')).indexOf(e.currentTarget);
  7.     or
  8.     Array.prototype.indexOf.call(document.querySelectorAll('.radio'), e.currentTarget);
  9. ```

- [1.9](#1.9) Iframe Contents

  $('iframe').contents() returns contentDocument for this specific iframe

  + Iframe contents

  1. ``` js
  2.     // jQuery
  3.     $iframe.contents();

  5.     // Native
  6.     iframe.contentDocument;
  7. ```

  + Iframe Query

  1. ``` js
  2.     // jQuery
  3.     $iframe.contents().find('.css');

  5.     // Native
  6.     iframe.contentDocument.querySelectorAll('.css');
  7. ```

- [1.10](#1.10) Get body

  1. ``` js
  2.   // jQuery
  3.   $('body');

  5.   // Native
  6.   document.body;
  7. ```

- [1.11](#1.11) Attribute getter and setter

  + Get an attribute

  1. ``` js
  2.     // jQuery
  3.     $el.attr('foo');

  5.     // Native
  6.     el.getAttribute('foo');
  7. ```
  + Set an attribute

  1. ``` js
  2.     // jQuery
  3.     $el.attr('foo', 'bar');

  5.     // Native
  6.     el.setAttribute('foo', 'bar');
  7. ```

  + Get a data- attribute

  1. ``` js
  2.     // jQuery
  3.     $el.data('foo');

  5.     // Native (use `getAttribute`)
  6.     el.getAttribute('data-foo');

  8.     // Native (use `dataset` if only need to support IE 11+)
  9.     el.dataset['foo'];
  10. ```

- [1.12](#1.12) Selector containing string (case-sensitive)

  1. ``` js
  2.     // jQuery
  3.     $("selector:contains('text')");

  5.     // Native
  6.     function contains(selector, text) {
  7.       var elements = document.querySelectorAll(selector);
  8.       return Array.from(elements).filter(function(element) {
  9.         return RegExp(text).test(element.textContent);
  10.       });
  11.     }
  12. ```

⬆ back to top

CSS & Style


- [2.1](#2.1) CSS

  + Get style

  1. ``` js
  2.     // jQuery
  3.     $el.css('color');

  5.     // Native
  6.     // NOTE: Known bug, will return 'auto' if style value is 'auto'
  7.     const win = el.ownerDocument.defaultView;

  9.     // null means not to return pseudo styles
  10.     win.getComputedStyle(el, null).color;
  11. ```

  + Set style

  1. ``` js
  2.     // jQuery
  3.     $el.css({ color: '#f01' });

  5.     // Native
  6.     el.style.color = '#f01';
  7. ```

  + Get/Set Styles

    Note that if you want to set multiple styles once, you could refer to setStyles method in oui-dom-utils package.


  + Add class

  1. ``` js
  2.     // jQuery
  3.     $el.addClass(className);

  5.     // Native
  6.     el.classList.add(className);
  7. ```

  + Remove class

  1. ``` js
  2.     // jQuery
  3.     $el.removeClass(className);

  5.     // Native
  6.     el.classList.remove(className);
  7. ```

  + has class

  1. ``` js
  2.     // jQuery
  3.     $el.hasClass(className);

  5.     // Native
  6.     el.classList.contains(className);
  7. ```

  + Toggle class

  1. ``` js
  2.     // jQuery
  3.     $el.toggleClass(className);

  5.     // Native
  6.     el.classList.toggle(className);
  7. ```

- [2.2](#2.2) Width & Height

  Width and Height are theoretically identical, take Height as example:

  + Window height

  1. ``` js
  2.     // window height
  3.     $(window).height();

  5.     // without scrollbar, behaves like jQuery
  6.     window.document.documentElement.clientHeight;

  8.     // with scrollbar
  9.     window.innerHeight;
  10. ```

  + Document height

  1. ``` js
  2.     // jQuery
  3.     $(document).height();

  5.     // Native
  6.     const body = document.body;
  7.     const html = document.documentElement;
  8.     const height = Math.max(
  9.       body.offsetHeight,
  10.       body.scrollHeight,
  11.       html.clientHeight,
  12.       html.offsetHeight,
  13.       html.scrollHeight
  14.     );
  15. ```

  + Element height

  1. ``` js
  2.     // jQuery
  3.     $el.height();

  5.     // Native
  6.     function getHeight(el) {
  7.       const styles = window.getComputedStyle(el);
  8.       const height = el.offsetHeight;
  9.       const borderTopWidth = parseFloat(styles.borderTopWidth);
  10.       const borderBottomWidth = parseFloat(styles.borderBottomWidth);
  11.       const paddingTop = parseFloat(styles.paddingTop);
  12.       const paddingBottom = parseFloat(styles.paddingBottom);
  13.       return height - borderBottomWidth - borderTopWidth - paddingTop - paddingBottom;
  14.     }

  16.     // accurate to integer（when `border-box`, it's `height - border`; when `content-box`, it's `height + padding`）
  17.     el.clientHeight;

  19.     // accurate to decimal（when `border-box`, it's `height`; when `content-box`, it's `height + padding + border`）
  20.     el.getBoundingClientRect().height;
  21. ```

- [2.3](#2.3) Position & Offset

  + Position

    Get the current coordinates of the element relative to the offset parent.

  1. ``` js
  2.     // jQuery
  3.     $el.position();

  5.     // Native
  6.     { left: el.offsetLeft, top: el.offsetTop }
  7. ```

  + Offset

    Get the current coordinates of the element relative to the document.

  1. ``` js
  2.     // jQuery
  3.     $el.offset();

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

  9.       return {
  10.         top: box.top + window.pageYOffset - document.documentElement.clientTop,
  11.         left: box.left + window.pageXOffset - document.documentElement.clientLeft
  12.       };
  13.     }
  14. ```

- [2.4](#2.4) Scroll Top

  Get the current vertical position of the scroll bar for the element.

  1. ``` js
  2.   // jQuery
  3.   $(window).scrollTop();

  5.   // Native
  6.   (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;
  7. ```

⬆ back to top

DOM Manipulation


- [3.1](#3.1) Remove

  Remove the element from the DOM.

  1. ``` js
  2.   // jQuery
  3.   $el.remove();

  5.   // Native
  6.   el.parentNode.removeChild(el);
  7. ```

- [3.2](#3.2) Text

  + Get text

    Get the combined text contents of the element including their descendants,

  1. ``` js
  2.     // jQuery
  3.     $el.text();

  5.     // Native
  6.     el.textContent;
  7. ```

  + Set text

    Set the content of the element to the specified text.

  1. ``` js
  2.     // jQuery
  3.     $el.text(string);

  5.     // Native
  6.     el.textContent = string;
  7. ```

- [3.3](#3.3) HTML

  + Get HTML

  1. ``` js
  2.     // jQuery
  3.     $el.html();

  5.     // Native
  6.     el.innerHTML;
  7. ```

  + Set HTML

  1. ``` js
  2.     // jQuery
  3.     $el.html(htmlString);

  5.     // Native
  6.     el.innerHTML = htmlString;
  7. ```

- [3.4](#3.4) Append

  Append child element after the last child of parent element

  1. ``` js
  2.   // jQuery: unified syntax for DOMString and Node objects
  3.   $parent.append(newEl | '<div id="container">Hello World</div>');

  5.   // Native: different syntax
  6.   parent.insertAdjacentHTML('beforeend', '<div id="container">Hello World</div>');
  7.   parent.appendChild(newEl);

  9.   // Native (ES6-way): unified syntax
  10.   parent.append(newEl | '<div id="container">Hello World</div>');
  11. ```

- [3.5](#3.5) Prepend

  1. ``` js
  2.   // jQuery: unified syntax for DOMString and Node objects
  3.   $parent.prepend(newEl | '<div id="container">Hello World</div>');

  5.   // Native: different syntax
  6.   parent.insertAdjacentHTML('afterbegin', '<div id="container">Hello World</div>');
  7.   parent.insertBefore(newEl, parent.firstChild);

  9.   // Native (ES6-way): unified syntax
  10.   parent.prepend(newEl | '<div id="container">Hello World</div>');
  11. ```

- [3.6](#3.6) insertBefore

  Insert a new node before the selected elements

  1. ``` js
  2.   // jQuery
  3.   $newEl.insertBefore(selector);

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

  8.   // Native (Element)
  9.   const el = document.querySelector(selector);
  10.   if (el.parentNode) {
  11.     el.parentNode.insertBefore(newEl, el);
  12.   }
  13. ```

- [3.7](#3.7) insertAfter

  Insert a new node after the selected elements

  1. ``` js
  2.   // jQuery
  3.   $newEl.insertAfter(selector);

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

  8.   // Native (Element)
  9.   const el = document.querySelector(selector);
  10.   if (el.parentNode) {
  11.     el.parentNode.insertBefore(newEl, el.nextSibling);
  12.   }
  13. ```

- [3.8](#3.8) is

  Return true if it matches the query selector

  1. ``` js
  2.   // jQuery - Notice `is` also works with a function, an existing jQuery object or a DOM element, which are not of concern here
  3.   $el.is(selector);

  5.   // Native
  6.   el.matches(selector);
  7. ```
- [3.9](#3.9) clone

  Create a deep copy of an element: it copies the matched element as well as all of its descendant elements and text nodes.

  1. ``` js
  2.   // jQuery. Sets parameter as `true` to indicate that event handlers should be copied along with the element.
  3.   $el.clone();

  5.   // Native
  6.   el.cloneNode();

  8. ```

- [3.10](#3.10) empty

  Remove all child nodes

  1. ``` js
  2.   // jQuery
  3.   $el.empty();

  5.   // Native
  6.   el.innerHTML = null;
  7. ```

- [3.11](#3.11) wrap

  Wrap an HTML structure around each element

  1. ``` js
  2.   // jQuery
  3.   $('.inner').wrap('<div class="wrapper"></div>');

  5.   // Native
  6.   Array.from(document.querySelectorAll('.inner')).forEach((el) => {
  7.     const wrapper = document.createElement('div');
  8.     wrapper.className = 'wrapper';
  9.     el.parentNode.insertBefore(wrapper, el);
  10.     wrapper.appendChild(el);
  11.   });
  12. ```

- [3.12](#3.12) unwrap

  Remove the parents of the set of matched elements from the DOM

  1. ``` js
  2.   // jQuery
  3.   $('.inner').unwrap();

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

  9.     if(elParentNode !== document.body) {
  10.         elParentNode.parentNode.insertBefore(el, elParentNode);
  11.         elParentNode.parentNode.removeChild(elParentNode);
  12.     }
  13.   });
  14. ```

- [3.13](#3.13) replaceWith

  Replace each element in the set of matched elements with the provided new content

  1. ``` js
  2.   // jQuery
  3.   $('.inner').replaceWith('<div class="outer"></div>');

  5.   // Native (alternative) - latest, Edge17+
  6.   Array.from(document.querySelectorAll('.inner')).forEach((el) => {
  7.     const outer = document.createElement('div');
  8.     outer.className = 'outer';
  9.     el.replaceWith(outer);
  10.   });

  12.   // Native
  13.   Array.from(document.querySelectorAll('.inner')).forEach((el) => {
  14.     const outer = document.createElement('div');
  15.     outer.className = 'outer';
  16.     el.parentNode.replaceChild(outer, el);
  17.   });
  18. ```

- [3.14](#3.14) simple parse

  Parse a string into HTML/SVG/XML

  1. ``` js
  2.   // jQuery
  3.   $(`<ol>
  4.     <li>a</li>
  5.     <li>b</li>
  6.   </ol>
  7.   <ol>
  8.     <li>c</li>
  9.     <li>d</li>
  10.   </ol>`);

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

  16.   parse(`<ol>
  17.     <li>a</li>
  18.     <li>b</li>
  19.   </ol>
  20.   <ol>
  21.     <li>c</li>
  22.     <li>d</li>
  23.   </ol>`);
  24. ```


⬆ back to top

Ajax


Fetch API is the new standard to replace XMLHttpRequest to do ajax. It works on Chrome and Firefox, you can use polyfills to make it work on legacy browsers.

Try github/fetch on IE9+ or fetch-ie8 on IE8+, fetch-jsonp to make JSONP requests.

- [4.1](#4.1) Load data from the server and place the returned HTML into the matched element.

  1. ``` js
  2.   // jQuery
  3.   $(selector).load(url, completeCallback)

  5.   // Native
  6.   fetch(url).then(data => data.text()).then(data => {
  7.     document.querySelector(selector).innerHTML = data
  8.   }).then(completeCallback)
  9. ```

⬆ back to top

Events


For a complete replacement with namespace and delegation, refer to https://github.com/oneuijs/oui-dom-events

- [5.0](#5.0) Document ready by `DOMContentLoaded`

  1. ``` js
  2.     // jQuery
  3.     $(document).ready(eventHandler);

  5.     // Native
  6.     // Check if the DOMContentLoaded has already been completed
  7.     if (document.readyState !== 'loading') {
  8.       eventHandler();
  9.     } else {
  10.       document.addEventListener('DOMContentLoaded', eventHandler);
  11.     }

  13.     // Native
  14.     // Example 2 - Ternary Operator - Async
  15.     // Check if the DOMContentLoaded has already been completed
  16.     (async function() {
  17.       (document.readyState !== 'loading') ?
  18.         eventHandler() : document.addEventListener('DOMContentLoaded',
  19.           function() {
  20.             eventHandler(); // EventHandler
  21.           });
  22.     })();

  24.     // Native
  25.     // Example 3 - Ternary Operator - Non Async
  26.     // Check if the DOMContentLoaded has already been completed
  27.     (function() {
  28.       (document.readyState !== 'loading') ?
  29.         eventHandler() : document.addEventListener('DOMContentLoaded',
  30.           function() {
  31.             eventHandler(); // EventHandler
  32.           });
  33.     })();
  34. ```

- [5.1](#5.1) Bind an event with on

  1. ``` js
  2.   // jQuery
  3.   $el.on(eventName, eventHandler);

  5.   // Native
  6.   el.addEventListener(eventName, eventHandler);
  7. ```

- [5.2](#5.2) Unbind an event with off

  1. ``` js
  2.   // jQuery
  3.   $el.off(eventName, eventHandler);

  5.   // Native
  6.   el.removeEventListener(eventName, eventHandler);
  7. ```

- [5.3](#5.3) Trigger

  1. ``` js
  2.   // jQuery
  3.   $(el).trigger('custom-event', {key1: 'data'});

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

  13.   el.dispatchEvent(event);
  14. ```

⬆ back to top

Utilities


Most of jQuery utilities are also found in the native API. Other advanced functions could be chosen from better utilities libraries, focusing on consistency and performance. Lodash is a recommended replacement.

- [6.1](#6.1) Basic utilities

  + isArray

  Determine whether the argument is an array.

  1. ``` js
  2.   // jQuery
  3.   $.isArray(array);

  5.   // Native
  6.   Array.isArray(array);
  7. ```

  + isWindow

  Determine whether the argument is a window.

  1. ``` js
  2.   // jQuery
  3.   $.isWindow(obj);

  5.   // Native
  6.   function isWindow(obj) {
  7.     return obj !== null && obj !== undefined && obj === obj.window;
  8.   }
  9. ```

  + inArray

  Search for a specified value within an array and return its index (or -1 if not found).

  1. ``` js
  2.   // jQuery
  3.   $.inArray(item, array);

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

  8.   // ES6-way
  9.   array.includes(item);
  10. ```

  + isNumeric

  Determine if the argument passed is numerical.
  Use typeof to decide the type or the type example for better accuracy.

  1. ``` js
  2.   // jQuery
  3.   $.isNumeric(item);

  5.   // Native
  6.   function isNumeric(n) {
  7.     return !isNaN(parseFloat(n)) && isFinite(n);
  8.   }
  9. ```

  + isFunction

  Determine if the argument passed is a JavaScript function object.

  1. ``` js
  2.   // jQuery
  3.   $.isFunction(item);

  5.   // Native
  6.   function isFunction(item) {
  7.     if (typeof item === 'function') {
  8.       return true;
  9.     }
  10.     var type = Object.prototype.toString.call(item);
  11.     return type === '[object Function]' || type === '[object GeneratorFunction]';
  12.   }
  13. ```

  + isEmptyObject

  Check to see if an object is empty (contains no enumerable properties).

  1. ``` js
  2.   // jQuery
  3.   $.isEmptyObject(obj);

  5.   // Native
  6.   function isEmptyObject(obj) {
  7.     return Object.keys(obj).length === 0;
  8.   }
  9. ```

  + isPlainObject

  Check to see if an object is a plain object (created using “{}” or “new Object”).

  1. ``` js
  2.   // jQuery
  3.   $.isPlainObject(obj);

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

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

  16.     return true;
  17.   }
  18. ```

  + extend

  Merge the contents of two or more objects together into a new object, without modifying either argument.
  object.assign is part of ES6 API, and you could also use a polyfill.

  1. ``` js
  2.   // jQuery
  3.   $.extend({}, object1, object2);

  5.   // Native
  6.   Object.assign({}, object1, object2);
  7. ```

  + trim

  Remove the white-space from the beginning and end of a string.

  1. ``` js
  2.   // jQuery
  3.   $.trim(string);

  5.   // Native
  6.   string.trim();
  7. ```

  + map

  Translate all items in an array or object to new array of items.

  1. ``` js
  2.   // jQuery
  3.   $.map(array, (value, index) => {
  4.   });

  6.   // Native
  7.   array.map((value, index) => {
  8.   });
  9. ```

  + each

  A generic iterator function, which can be used to seamlessly iterate over both objects and arrays.

  1. ``` js
  2.   // jQuery
  3.   $.each(array, (index, value) => {
  4.   });

  6.   // Native
  7.   array.forEach((value, index) => {
  8.   });
  9. ```

  + grep

  Finds the elements of an array which satisfy a filter function.

  1. ``` js
  2.   // jQuery
  3.   $.grep(array, (value, index) => {
  4.   });

  6.   // Native
  7.   array.filter((value, index) => {
  8.   });
  9. ```

  + type

  Determine the internal JavaScript [Class] of an object.

  1. ``` js
  2.   // jQuery
  3.   $.type(obj);

  5.   // Native
  6.   function type(item) {
  7.     const reTypeOf = /(?:^\[object\s(.*?)\]$)/;
  8.     return Object.prototype.toString.call(item)
  9.       .replace(reTypeOf, '$1')
  10.       .toLowerCase();
  11.   }
  12. ```

  + merge

  Merge the contents of two arrays together into the first array.

  1. ``` js
  2.   // jQuery, doesn't remove duplicate items
  3.   $.merge(array1, array2);

  5.   // Native, doesn't remove duplicate items
  6.   function merge(...args) {
  7.     return [].concat(...args)
  8.   }

  10.   // ES6-way, doesn't remove duplicate items
  11.   array1 = [...array1, ...array2]

  13.   // Set version, does remove duplicate items
  14.   function merge(...args) {
  15.     return Array.from(new Set([].concat(...args)))
  16.   }
  17. ```

  + now

  Return a number representing the current time.

  1. ``` js
  2.   // jQuery
  3.   $.now();

  5.   // Native
  6.   Date.now();
  7. ```

  + proxy

  Takes a function and returns a new one that will always have a particular context.

  1. ``` js
  2.   // jQuery
  3.   $.proxy(fn, context);

  5.   // Native
  6.   fn.bind(context);
  7. ```

+ makeArray

  Convert an array-like object into a true JavaScript array.

  1. ``` js
  2.   // jQuery
  3.   $.makeArray(arrayLike);

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

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

  11.   // ES6-way: spread operator
  12.   [...arrayLike];
  13. ```

- [6.2](#6.2) Contains

  Check to see if a DOM element is a descendant of another DOM element.

  1. ``` js
  2.   // jQuery
  3.   $.contains(el, child);

  5.   // Native
  6.   el !== child && el.contains(child);
  7. ```

- [6.3](#6.3) Globaleval

  Execute some JavaScript code globally.

  1. ``` js
  2.   // jQuery
  3.   $.globaleval(code);

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

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

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

- [6.4](#6.4) parse

  + parseHTML

  Parses a string into an array of DOM nodes.

  1. ``` js
  2.   // jQuery
  3.   $.parseHTML(htmlString);

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

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

  15.     context.body.innerHTML = string;
  16.     return context.body.children;
  17.   }
  18. ```
- [6.5](#6.4) exists

+ exists

  Check if an element exists in the DOM

  1. ``` js
  2.   // jQuery
  3.   if ($('selector').length) {
  4.      // exists
  5.   }

  7.   // Native
  8.   var element =  document.getElementById('elementId');
  9.   if (typeof(element) != 'undefined' && element != null)
  10.   {
  11.      // exists
  12.   }
  13. ```

⬆ back to top

Promises


A promise represents the eventual result of an asynchronous operation. jQuery has its own way to handle promises. Native JavaScript implements a thin and minimal API to handle promises according to the Promises/A+ specification.

- [7.1](#7.1) done, fail, always

  done is called when promise is resolved, fail is called when promise is rejected, always is called when promise is either resolved or rejected.

  1. ``` js
  2.   // jQuery
  3.   $promise.done(doneCallback).fail(failCallback).always(alwaysCallback)

  5.   // Native
  6.   promise.then(doneCallback, failCallback).then(alwaysCallback, alwaysCallback)
  7. ```

- [7.2](#7.2) when

  when is used to handle multiple promises. It will resolve when all promises are resolved, and reject if either one is rejected.

  1. ``` js
  2.   // jQuery
  3.   $.when($promise1, $promise2).done((promise1Result, promise2Result) => {
  4.   });

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

- [7.3](#7.3) Deferred

  Deferred is a way to create promises.

  1. ``` js
  2.   // jQuery
  3.   function asyncFunc() {
  4.     const defer = new $.Deferred();
  5.     setTimeout(() => {
  6.       if(true) {
  7.         defer.resolve('some_value_computed_asynchronously');
  8.       } else {
  9.         defer.reject('failed');
  10.       }
  11.     }, 1000);

  13.     return defer.promise();
  14.   }

  16.   // Native
  17.   function asyncFunc() {
  18.     return new Promise((resolve, reject) => {
  19.       setTimeout(() => {
  20.         if (true) {
  21.           resolve('some_value_computed_asynchronously');
  22.         } else {
  23.           reject('failed');
  24.         }
  25.       }, 1000);
  26.     });
  27.   }

  29.   // Deferred way
  30.   function defer() {
  31.     const deferred = {};
  32.     const promise = new Promise((resolve, reject) => {
  33.       deferred.resolve = resolve;
  34.       deferred.reject = reject;
  35.     });

  37.     deferred.promise = () => {
  38.       return promise;
  39.     };

  41.     return deferred;
  42.   }

  44.   function asyncFunc() {
  45.     const defer = defer();
  46.     setTimeout(() => {
  47.       if(true) {
  48.         defer.resolve('some_value_computed_asynchronously');
  49.       } else {
  50.         defer.reject('failed');
  51.       }
  52.     }, 1000);

  54.     return defer.promise();
  55.   }
  56. ```

⬆ back to top

Animation


- [8.1](#8.1) Show & Hide

  1. ``` js
  2.   // jQuery
  3.   $el.show();
  4.   $el.hide();

  6.   // Native
  7.   // More detail about show method, please refer to https://github.com/oneuijs/oui-dom-utils/blob/master/src/index.js#L363
  8.   el.style.display = ''|'inline'|'inline-block'|'inline-table'|'block';
  9.   el.style.display = 'none';
  10. ```

- [8.2](#8.2) Toggle

  Display or hide the element.

  1. ``` js
  2.   // jQuery
  3.   $el.toggle();

  5.   // Native
  6.   if (el.ownerDocument.defaultView.getComputedStyle(el, null).display === 'none') {
  7.     el.style.display = ''|'inline'|'inline-block'|'inline-table'|'block';
  8.   } else {
  9.     el.style.display = 'none';
  10.   }
  11. ```

- [8.3](#8.3) FadeIn & FadeOut

  1. ``` js
  2.   // jQuery
  3.   $el.fadeIn(3000);
  4.   $el.fadeOut(3000);

  6.   // Native fadeOut
  7.   function fadeOut(el, ms) {
  8.     if (ms) {
  9.       el.style.transition = `opacity ${ms} ms`;
  10.       el.addEventListener(
  11.         'transitionend',
  12.         function(event) {
  13.           el.style.display = 'none';
  14.         },
  15.         false
  16.       );
  17.     }
  18.     el.style.opacity = '0';
  19.   }

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

  25.     if (ms) {
  26.       let opacity = 0;
  27.       const timer = setInterval(function() {
  28.         opacity += 50 / ms;
  29.         if (opacity >= 1) {
  30.           clearInterval(timer);
  31.           opacity = 1;
  32.         }
  33.         elem.style.opacity = opacity;
  34.       }, 50);
  35.     } else {
  36.       elem.style.opacity = 1;
  37.     }
  38.   }
  39. ```

- [8.4](#8.4) FadeTo

  Adjust the opacity of the element.

  1. ``` js
  2.   // jQuery
  3.   $el.fadeTo('slow',0.15);
  4.   // Native
  5.   el.style.transition = 'opacity 3s'; // assume 'slow' equals 3 seconds
  6.   el.style.opacity = '0.15';
  7. ```

- [8.5](#8.5) FadeToggle

  Display or hide the element by animating their opacity.

  1. ``` js
  2.   // jQuery
  3.   $el.fadeToggle();

  5.   // Native
  6.   el.style.transition = 'opacity 3s';
  7.   const { opacity } = el.ownerDocument.defaultView.getComputedStyle(el, null);
  8.   if (opacity === '1') {
  9.     el.style.opacity = '0';
  10.   } else {
  11.     el.style.opacity = '1';
  12.   }
  13. ```

- [8.6](#8.6) SlideUp & SlideDown

  1. ``` js
  2.   // jQuery
  3.   $el.slideUp();
  4.   $el.slideDown();

  6.   // Native
  7.   const originHeight = '100px';
  8.   el.style.transition = 'height 3s';
  9.   // slideUp
  10.   el.style.height = '0px';
  11.   // slideDown
  12.   el.style.height = originHeight;
  13. ```

- [8.7](#8.7) SlideToggle

  Display or hide the element with a sliding motion.

  1. ``` js
  2.   // jQuery
  3.   $el.slideToggle();

  5.   // Native
  6.   const originHeight = '100px';
  7.   el.style.transition = 'height 3s';
  8.   const { height } = el.ownerDocument.defaultView.getComputedStyle(el, null);
  9.   if (parseInt(height, 10) === 0) {
  10.     el.style.height = originHeight;
  11.   } else {
  12.    el.style.height = '0px';
  13.   }
  14. ```

- [8.8](#8.8) Animate

  Perform a custom animation of a set of CSS properties.

  1. ``` js
  2.   // jQuery
  3.   $el.animate({ params }, speed);

  5.   // Native
  6.   el.style.transition = 'all ' + speed;
  7.   Object.keys(params).forEach((key) => {
  8.     el.style[key] = params[key];
  9.   });
  10. ```

Alternatives


You Might Not Need jQuery - Examples of how to do common event, element, ajax etc with plain javascript.
npm-dom and webmodules - Organizations you can find individual DOM modules on NPM

Browser Support


![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]: https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png
[firefox-image]: https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png
[ie-image]: https://raw.github.com/alrra/browser-logos/master/src/archive/internet-explorer_9-11/internet-explorer_9-11_48x48.png
[opera-image]: https://raw.github.com/alrra/browser-logos/master/src/opera/opera_48x48.png
[safari-image]: https://raw.github.com/alrra/browser-logos/master/src/safari/safari_48x48.png