jQuery會過時嗎？

前端發展很快，現代瀏覽器原生 API 已經足夠好用。我們並不需要為了操作 DOM、Event 等再學習一下 jQuery 的 API。同時由於 React、Angular、Vue 等框架的流行，直接操作 DOM 不再是好的模式，jQuery 使用場景大大減少。本項目總結了大部分 jQuery API 替代的方法，暫時只支持 IE10+ 以上瀏覽器。

## 目錄

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-support)

## Query Selector

常用的 class、id、屬性 選擇器都可以使用 `document.querySelector` 或 `document.querySelectorAll` 替代。區別是
* `document.querySelector` 返回第一個匹配的 Element
* `document.querySelectorAll` 返回所有匹配的 Element 組成的 NodeList。它可以通過 `[].slice.call()` 把它轉成 Array
* 如果匹配不到任何 Element，jQuery 返回空數組 []`，但 `document.querySelector` 返回 `null`，注意空指針異常

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

- [1.1](#1.1) && Query by class

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

// Native
document.querySelectorAll(".css");
```

- [1.2](#1.2) && Query by id

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

// Native
el.querySelector("#id");
```

- [1.3](#1.3) && Query by attribute

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

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

- [1.4](#1.4) && Find sth.

+ Find nodes

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

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

+ Find body

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

// Native
document.body;
```

+ Find Attribute

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

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

+ Find data attribute

```js
// 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](#1.5) && Sibling/Previous/Next Elements

+ Sibling elements

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

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

+ Previous elements

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

// Native
el.previousElementSibling;

```

+ Next elements

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

- [1.6](#1.6) && Closest

Closest 獲得匹配選擇器的第一個祖先元素，從當前元素開始沿 DOM 樹向上。

```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) && Parents Until

獲取當前每一個匹配元素集的祖先，不包括匹配元素的本身

```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 resu< } ``` - [1.8](#1.8) && 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) && Iframe Contents

jQuery 對象的 iframe `contents()` 返回的是 iframe 內的 `document`

+ Iframe contents

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

// Native
iframe.contentDocument;
```

+ Iframe Query

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

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

**[? 回到頂部](#目錄)**

## CSS Style

- [2.1](#2.1) && CSS

+ Get style

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

// Native
// 注意：此處為了解決當 style 值為 auto 時，返回 auto 的問題
const win = el.ownerDocument.defaultView;
// null 的意思是不返回偽類元素
win.getComputedStyle(el, null).color;
```

+ Set style

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

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

+ Get/Set Styles

注意，如果想一次設置多個 style，可以參考 oui-dom-utils 中 [setStyles](https://github.com/oneuijs/oui-dom-utils/blob/master/src/index.js#L194) 方法

+ 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) && Width Height

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

+ Window height

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

// Native
// 不含 scrollbar，與 jQuery 行為一致
window.document.documentElement.clientHeight;
// 含 scrollbar
window.innerHeight;
```

+ Document height

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

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

+ Element height

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

// Native
// 與 jQuery 一致（一直為 content 區域的高度）
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;
}
// 精確到整數（border-box 時為 height 值，content-box 時為 height + padding + border 值）
el.clientHeight;
// 精確到小數（border-box 時為 height 值，content-box 時為 height + padding + border 值）
el.getBoundingClientRect().height;
```

+ Iframe height

$iframe .contents() 方法返回 iframe 的 contentDocument

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

// Native
iframe.contentDocument.documentElement.scrollHeight;
```

- [2.3](#2.3) && 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) && Scroll Top

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

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

**[? 回到頂部](#目錄)**

## DOM Manipulation

- [3.1](#3.1) && Remove
```js
// jQuery
$el.remove();

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

- [3.2](#3.2) && 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) && 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) && Append

Append 插入到子節點的末尾

```js
// jQuery
$el.append("&hello&");

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

- [3.5](#3.5) && Prepend

```js
// jQuery
$el.prepend("&hello&");

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

- [3.6](#3.6) && insertBefore

在選中元素前插入新節點

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

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

- [3.7](#3.7) && insertAfter

在選中元素後插入新節點

```js
// 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);
}
},
```

**[? 回到頂部](#目錄)**

## Ajax

用 [fetch](https://github.com/camsong/fetch-ie8) 和 [fetch-jsonp](https://github.com/camsong/fetch-jsonp) 替代

**[? 回到頂部](#目錄)**

## Events

完整地替代命名空間和事件代理，鏈接到 https://github.com/oneuijs/oui-dom-events

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

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

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

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

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

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

- [5.3](#5.3) && 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);
```

**[? 回到頂部](#目錄)**

## Utilities

- [6.1](#6.1) && isArray

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

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

- [6.2](#6.2) && Trim

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

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

- [6.3](#6.3) && Object Assign

繼承，使用 object.assign polyfill https://github.com/ljharb/object.assign

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

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

- [6.4](#6.4) && Contains

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

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

**[? 回到頂部](#目錄)**

## Browser Support

 |  |  |  | 
--- | --- | --- | --- | --- |
Latest ? | Latest ? | 10+ ? | Latest ? | 6.1+ ? |

# License