Skip to content

Latest commit

 

History

History
619 lines (439 loc) · 13.1 KB

README-my.md

File metadata and controls

619 lines (439 loc) · 13.1 KB
Raw

Anda tidak memerlukan jQuery

Frontend environment evolves repaidly nowadays, modern browsers have already implemented a great deal of DOM/BOM APIs which are good enough. We don't have to learn jQuery from scratch for DOM manipulation or events. In the meantime, thanks to the prevail of frontend libraries like React, Angular and Vue, manipulating DOM directly becomes anti-pattern, jQuery has never been less important. This project summarized most of the jQuery method alternatives in native implementation, with IE 10+ support. Mutakhir ini perkembangan dalam persekitaran frontend berlaku begitu pesat sekali. Justeru itu kebanyakan pelayar moden telahpun menyediakan API yang memadai untuk pengaksesan DOM/BOM. Kita tidak perlu lagi belajar jQuery dari asas untuk memanipulasi DOM dan acara-acara. Sementara itu, berbanyak terima kasih pada pustaka-pustaka frontend yang terkemuka seperti React, Angular dan Vue, pemanipulasi DOM secara langsung menjadikan ianya suatu bentuk anti kepada cora

Isi Kandungan

  1. Pemilih
  2. CSS & Penggayaan
  3. Manipulasi DOM
  4. Ajax
  5. Events
  6. Utiliti
  7. Terjemahan
  8. Browser Support

Query Selector

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 [].slice.call
  • If no elements matched, jQuery would return [] whereas the DOM API will return null. Pay attention to Null Pointer Exception.

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

  • 1.1 Query by class

    // jQuery
$('.css');

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

  • 1.2 Query by id

    // jQuery
$('#id');

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

  • 1.3 Query by attribute

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

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

  • 1.4 Find sth.

    • Find nodes

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

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

    • Find body

      // jQuery
$('body');

// Native
document.body;

    • Find Attribute

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

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

    • Find data attribute

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

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

  • 1.5 Sibling/Previous/Next Elements

    • Sibling elements

      // jQuery
$el.siblings();

// Native
[].filter.call(el.parentNode.children, function(child) {
  return child !== el;
});

    • Previous elements

      // jQuery
$el.prev();

// Native
el.previousElementSibling;

    • Next elements

      // next
$el.next();
el.nextElementSibling;

  • 1.6 Closest

    Return the first matched element by provided selector, traversing from current element to document.

    // jQuery
$el.closest(queryString);

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

    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.

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

    • Input/Textarea

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

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

    • Get index of e.currentTarget between .radio

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

// Native
[].indexOf.call(document.querySelectAll('.radio'), e.currentTarget);

  • 1.9 Iframe Contents

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

    • Iframe contents

      // jQuery
$iframe.contents();

// Native
iframe.contentDocument;

    • Iframe Query

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

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

⬆ back to top

CSS & Style

  • 2.1 CSS

    • Get style

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

// Native
// NOTE: Known bug, will return 'auto' if style value is 'auto'
const win = el.ownerDocument.defaultView;
// null means not return presudo styles
win.getComputedStyle(el, null).color;

    • Set style

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

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

    • 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

      // 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 and Height are theoretically identical, take Height as example:

    • Window height

      // window height
$(window).height();
// without scrollbar, behaves like jQuery
window.document.documentElement.clientHeight;
// with scrollbar
window.innerHeight;

    • Document height

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

// Native
document.documentElement.scrollHeight;

    • Element height

      // jQuery
$el.height();

// Native
function getHeight(el) {
  const styles = this.getComputedStyles(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;
}
// accurate to integer（when `border-box`, it's `height`; when `content-box`, it's `height + padding + border`）
el.clientHeight;
// accurate to decimal（when `border-box`, it's `height`; when `content-box`, it's `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;

⬆ back to top

DOM Manipulation

  • 3.1 Remove

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

      // jQuery
$el.html();

// Native
el.innerHTML;

    • Set HTML

      // jQuery
$el.html(htmlString);

// Native
el.innerHTML = htmlString;

  • 3.4 Append

    append child element after the last child of parent element

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

// Native
let newEl = document.createElement('div');
newEl.setAttribute('id', 'container');
newEl.innerHTML = 'hello';
el.appendChild(newEl);

  • 3.5 Prepend

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

// Native
let newEl = document.createElement('div');
newEl.setAttribute('id', 'container');
newEl.innerHTML = 'hello';
el.insertBefore(newEl, el.firstChild);

  • 3.6 insertBefore

    Insert a new node before the selected elements

    // jQuery
$newEl.insertBefore(queryString);

// Native
newEl.insertBefore(document.querySelector(queryString));

  • 3.7 insertAfter

    Insert a new node after the selected elements

    // jQuery
$newEl.insertAfter(queryString);

// Native
function insertAfter(newEl, queryString) {
  const parent = document.querySelector(queryString).parentNode;

  if (parent.lastChild === newEl) {
    parent.appendChild(newEl);
  } else {
    parent.insertBefore(newEl, parent.nextSibling);
  }
},

⬆ back to top

Ajax

Replace with fetch and fetch-jsonp

⬆ back to top

Events

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

  • 5.1 Bind an event with on

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

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

  • 5.2 Unbind an event with 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);

⬆ back to top

Utilities

  • 6.1 isArray

    // jQuery
$.isArray(range);

// Native
Array.isArray(range);

  • 6.2 Trim

    // jQuery
$.trim(string);

// Native
String.trim(string);

  • 6.3 Object Assign

    Extend, use object.assign polyfill https://github.com/ljharb/object.assign

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

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

  • 6.4 Contains

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

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

⬆ back to top

Translation

Browser Support

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

License

MIT