README-id.md · lizesheng/You-Dont-Need-jQuery

## Anda tidak memerlukan jQuery

Perkembangan environment frontend sangatlah pesat, dimana banyak browser sudah mengimplementasikan DOM/BOM APIs dengan baik. Kita tidak perlu lagi belajar jQuery dari nol untuk keperluan memanipulasi DOM atau events. Secara bersamaan; dengan berterimakasih kepada library frontend terkini seperti React, Angular dan Vue; Memanipulasi DOM secara langsung telah menjadi anti-pattern atau sesuatu yang tidak perlu dilakukan lagi. Dengan kata lain, jQuery sekarang menjadi semakin tidak diperlukan. Projek ini memberikan informasi mengenai metode alternatif dari jQuery untuk implementasi Native dengan support untuk browser IE 10+.

## Daftar Isi

1. [Terjemahan](#translation)
1. [Query Selector](#query-selector)
1. [CSS & Style](#css-style)
1. [DOM Manipulation](#dom-manipulation)
1. [Ajax](#ajax)
1. [Events](#events)
1. [Utilities](#utilities)
1. [Browser Support](#browser-yang-di-support)

## Terjemahan

* [한국어](./README.ko-KR.md)
* [正體中文](./README.zh-TW.md)
* [简体中文](./README.zh-CN.md)
* [Bahasa Melayu](./README-my.md)
* [Bahasa Indonesia](./README-id.md)
* [Português(PT-BR)](./README.pt-BR.md)
* [Tiếng Việt Nam](./README-vi.md)
* [Español](./README-es.md)
* [Русский](./README-ru.md)
* [Кыргызча](./README-kg.md)
* [Türkçe](./README-tr.md)
* [Italiano](./README-it.md)
* [Français](./README-fr.md)
* [日本語](./README-ja.md)
* [Polski](./README-pl.md)

## Query Selector

Untuk selector-selector umum seperti class, id atau attribute, kita dapat menggunakan `document.querySelector` atau `document.querySelectorAll` sebagai pengganti. Perbedaan diantaranya adalah:
* `document.querySelector` mengembalikan elemen pertama yang cocok
* `document.querySelectorAll` mengembalikan semua elemen yang cocok sebagai NodeList. Hasilnya bisa dikonversikan menjadi Array `[].slice.call(document.querySelectorAll(selector) || []);`
* Bila tidak ada hasil balik pada elemen yang cocok, jQuery akan mengembalikan `[]` sedangkan DOM API akan mengembalikan `null`. Mohon diperhatikan mengenai Null Pointer Exception. Anda juga bisa menggunakan operator `||` untuk set nilai awal jika hasil pencarian tidak ditemukan : `document.querySelectorAll(selector) || []`

> Perhatian: `document.querySelector` dan `document.querySelectorAll` sedikit **LAMBAT**. Silahkan menggunakan `getElementById`, `document.getElementsByClassName` atau `document.getElementsByTagName` jika anda menginginkan tambahan performa.

- [1.0](#1.0) <a name='1.0'></a> Query by selector

```js
  // jQuery
  $('selector');

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

- [1.1](#1.1) <a name='1.1'></a> Query by class

```js
  // jQuery
  $('.class');

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

// or
  document.getElementsByClassName('class');
  ```

- [1.2](#1.2) <a name='1.2'></a> Query by id

```js
  // jQuery
  $('#id');

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

// or
  document.getElementById('id');
  ```

- [1.3](#1.3) <a name='1.3'></a> Query menggunakan attribute

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

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

- [1.4](#1.4) <a name='1.4'></a> Pencarian.

+ Mencari nodes

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

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

+ Mencari body

```js
    // jQuery
    $('body');

// Native
    document.body;
    ```

+ Mencari Attribute

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

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

+ Mencari data attribute

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

// Native
    // gunakan getAttribute
    el.getAttribute('data-foo');
    // anda juga bisa menggunakan `dataset` bila anda perlu support IE 11+
    el.dataset['foo'];
    ```

- [1.5](#1.5) <a name='1.5'></a> Elemen-elemen Sibling/Previous/Next

+ Elemen Sibling

```js
    // jQuery
    $el.siblings();

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

+ Elemen Previous

```js
    // jQuery
    $el.prev();

// Native
    el.previousElementSibling;

```

+ Elemen Next

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

- [1.6](#1.6) <a name='1.6'></a> Closest

Mengembalikan elemen sama yang digunakan dari selector pertama, dengan cara mencari elemen-sekarang sampai ke document.

```js
  // 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](#1.7) <a name='1.7'></a> Parents Until

Digunakan untuk mendapatkan "ancestor" dari setiap elemen yang ditemukan. Namun tidak termasuk elemen-sekarang yang sudah didapat dari pencarian oleh selector, DOM node, atau object jQuery.

```js
  // 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](#1.8) <a name='1.8'></a> Form

+ Input/Textarea

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

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

+ Get index of e.currentTarget between `.radio`

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

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

- [1.9](#1.9) <a name='1.9'></a> Iframe Contents

`$('iframe').contents()` mengembalikan `contentDocument`

+ Iframe contents

```js
    // jQuery
    $iframe.contents();

// Native
    iframe.contentDocument;
    ```

+ Iframe Query

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

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

**[⬆ back to top](#daftar-isi)**

## CSS Style

- [2.1](#2.1) <a name='2.1'></a> CSS

+ Get style

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

// Native
    // PERHATIAN: ada bug disini, dimana fungsi ini akan mengembalikan nilai 'auto' bila nilai dari atribut style adalah 'auto'
    const win = el.ownerDocument.defaultView;
    // null artinya tidak mengembalikan pseudo styles
    win.getComputedStyle(el, null).color;
    ```

+ Set style

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

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

+ Get/Set Styles

Mohon dicatat jika anda ingin mengubah style secara bersamaan, anda dapat menemukan referensi di metode [setStyles](https://github.com/oneuijs/oui-dom-utils/blob/master/src/index.js#L194) pada package oui-dom-utils

+ Add class

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

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

+ Remove class

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

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

+ has class

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

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

+ Toggle class

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

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

- [2.2](#2.2) <a name='2.2'></a> Width & Height

Secara teori, width dan height identik, contohnya Height:

+ Window height

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

+ Document height

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

// Native
    document.documentElement.scrollHeight;
    ```

+ Element height

```js
    // 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 - border`; when `content-box`, it's `height + padding`）
    el.clientHeight;
    // accurate to decimal（when `border-box`, it's `height`; when `content-box`, it's `height + padding + border`）
    el.getBoundingClientRect().height;
    ```

- [2.3](#2.3) <a name='2.3'></a> Position & Offset

+ Position

```js
    // jQuery
    $el.position();

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

+ Offset

```js
    // 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](#2.4) <a name='2.4'></a> Scroll Top

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

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

**[⬆ back to top](#daftar-isi)**

## DOM Manipulation

- [3.1](#3.1) <a name='3.1'></a> Remove
  ```js
  // jQuery
  $el.remove();

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

- [3.2](#3.2) <a name='3.2'></a> Text

+ Get text

```js
    // jQuery
    $el.text();

// Native
    el.textContent;
    ```

+ Set text

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

// Native
    el.textContent = string;
    ```

- [3.3](#3.3) <a name='3.3'></a> HTML

+ Get HTML

```js
    // jQuery
    $el.html();

// Native
    el.innerHTML;
    ```

+ Set HTML

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

// Native
    el.innerHTML = htmlString;
    ```

- [3.4](#3.4) <a name='3.4'></a> Append

Menambahkan elemen-anak setelah anak terakhir dari elemen-parent

```js
  // 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](#3.5) <a name='3.5'></a> Prepend

```js
  // 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](#3.6) <a name='3.6'></a> insertBefore

Memasukkan node baru sebelum elemen yang dipilih.

```js
  // jQuery
  $newEl.insertBefore(queryString);

// Native
  const target = document.querySelector(queryString);
  target.parentNode.insertBefore(newEl, target);
  ```

- [3.7](#3.7) <a name='3.7'></a> insertAfter

Memasukkan node baru sesudah elemen yang dipilih.

```js
  // jQuery
  $newEl.insertAfter(queryString);

// Native
  const target = document.querySelector(queryString);
  target.parentNode.insertBefore(newEl, target.nextSibling);
  ```

**[⬆ back to top](#daftar-isi)**

## Ajax

Gantikan dengan [fetch](https://github.com/camsong/fetch-ie8) dan [fetch-jsonp](https://github.com/camsong/fetch-jsonp)

**[⬆ back to top](#daftar-isi)**

## Events

Untuk penggantian secara menyeluruh dengan namespace dan delegation, lihat ke https://github.com/oneuijs/oui-dom-events

- [5.1](#5.1) <a name='5.1'></a> Bind event dengan menggunakan on

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

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

- [5.2](#5.2) <a name='5.2'></a> Unbind event dengan menggunakan off

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

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

- [5.3](#5.3) <a name='5.3'></a> Trigger

```js
  // 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](#daftar-isi)**

## Utilities

- [6.1](#6.1) <a name='6.1'></a> isArray

```js
  // jQuery
  $.isArray(range);

// Native
  Array.isArray(range);
  ```

- [6.2](#6.2) <a name='6.2'></a> Trim

```js
  // jQuery
  $.trim(string);

// Native
  string.trim();
  ```

- [6.3](#6.3) <a name='6.3'></a> Object Assign

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

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

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

- [6.4](#6.4) <a name='6.4'></a> Contains

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

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

**[⬆ back to top](#daftar-isi)**

## Browser yang di Support

![Chrome](https://raw.github.com/alrra/browser-logos/master/chrome/chrome_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/firefox/firefox_48x48.png) | ![IE](https://raw.github.com/alrra/browser-logos/master/internet-explorer/internet-explorer_48x48.png) | ![Opera](https://raw.github.com/alrra/browser-logos/master/opera/opera_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/safari/safari_48x48.png)
--- | --- | --- | --- | --- |
Latest ✔ | Latest ✔ | 10+ ✔ | Latest ✔ | 6.1+ ✔ |

# License

MIT

lizesheng/You-Dont-Need-jQuery

简介

发行版

贡献者

近期动态

lizesheng/You-Dont-Need-jQuery .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

lizesheng/You-Dont-Need-jQuery