| Chemmy's Blog

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

Query Selector

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

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

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

1.0 选择器查询

$(‘selector’);
document.querySelectorAll(‘selector’);

1.1 class 查询

$(‘.class’);
document.querySelectorAll(‘.class’);
document.getElementsByClassName(‘class’);

1.2 id 查询

$(‘#id’);
document.querySelector(‘#id’);
document.getElementById(‘id’);

1.3 属性查询

$(‘a[target=_blank]‘);
document.querySelectorAll(‘a[target=_blank]‘);

1.4 后代查询

$el.find(‘li’);
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
);

上一个元素

$el.prev();
el.previousElementSibling;

下一个元素

$el.next();
el.nextElementSibling;

1.6 Closest

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

$el.closest(queryString);
el.closest(selector);
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

获取当前每一个匹配元素集的祖先，不包括匹配元素的本身。

$el.parentsUntil(selector, filter);
function parentsUntil(el, selector, filter) {
const result = [];
const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;
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

$(‘#my-input’).val();
document.querySelector(‘#my-input’).value;

获取 e.currentTarget 在 .radio 中的数组索引

$(‘.radio’).index(e.currentTarget);
Array.prototype.indexOf.call(document.querySelectorAll(‘.radio’), e.currentTarget);

1.9 Iframe Contents

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

Iframe contents

$iframe.contents();
iframe.contentDocument;

Iframe Query

$iframe.contents().find(‘.css’);
iframe.contentDocument.querySelectorAll(‘.css’);

1.10 获取 body

$(‘body’);
document.body;

1.11 获取或设置属性

获取属性

$el.attr(‘foo’);
el.getAttribute(‘foo’);

设置属性

$el.attr(‘foo’, ‘bar’);
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 & Style

2.1 CSS

Get style

$el.css(“color”);
const win = el.ownerDocument.defaultView;
win.getComputedStyle(el, null).color;

Set style

$el.css({ color: “#ff0011” });
el.style.color = ‘#ff0011’;

Get/Set Styles

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

Add class

$el.addClass(className);
el.classList.add(className);

Remove class

$el.removeClass(className);
el.classList.remove(className);

has class

$el.hasClass(className);
el.classList.contains(className);

Toggle class

$el.toggleClass(className);
el.classList.toggle(className);

2.2 Width & Height

Width 与 Height 获取方法相同，下面以 Height 为例：

Window height

$(window).height();
window.document.documentElement.clientHeight;
window.innerHeight;

Document height

$(document).height();
const body = document.body;
const html = document.documentElement;
const height = Math.max(
body.offsetHeight,
body.scrollHeight,
html.clientHeight,
html.offsetHeight,
html.scrollHeight
);

Element height

$el.height();
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;
}
el.clientHeight;
el.getBoundingClientRect().height;

2.3 Position & Offset

Position

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

$el.position();
{ left: el.offsetLeft, top: el.offsetTop }

Offset

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

$el.offset();
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 ScrollTop

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

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

DOM Manipulation

3.1 Remove

从 DOM 中移除元素。

$el.remove();
el.parentNode.removeChild(el);

3.2 Text

Get text

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

$el.text();
el.textContent;

Set text

设置元素的文本内容。

$el.text(string);
el.textContent = string;

3.3 HTML

Get HTML

$el.html();
el.innerHTML;

Set HTML

$el.html(htmlString);
el.innerHTML = htmlString;

3.4 Append

Append 插入到子节点的末尾

$el.append(“

hello

“);
el.insertAdjacentHTML(‘beforeend’, ‘

Hello World

‘);
el.appendChild(newEl);

3.5 Prepend

$el.prepend(“

hello

“);
el.insertAdjacentHTML(‘afterbegin’, ‘

Hello World

‘);
el.insertBefore(newEl, el.firstChild);

3.6 insertBefore

在选中元素前插入新节点

$newEl.insertBefore(queryString);
el.insertAdjacentHTML(‘beforebegin ‘, ‘

Hello World

‘);
const el = document.querySelector(selector); if (el.parentNode) {
el.parentNode.insertBefore(newEl, el);
}

3.7 insertAfter

在选中元素后插入新节点

$newEl.insertAfter(queryString);
el.insertAdjacentHTML(‘afterend’, ‘

Hello World

‘);
const el = document.querySelector(selector); if (el.parentNode) {
el.parentNode.insertBefore(newEl, el.nextSibling);
}

3.8 is

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

$el.is(selector);
el.matches(selector);

3.9 clone

深拷贝被选元素。（生成被选元素的副本，包含子节点、文本和属性。）

$el.clone();
el.cloneNode();

注：深拷贝添加参数‘true’

3.10 empty

移除所有子节点

$el.empty();
el.innerHTML = ‘’;

3.11 wrap

把每个被选元素放置在指定的HTML结构中。

$(“.inner”).wrap(‘

‘);
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 unwrap

移除被选元素的父元素的DOM结构

$(‘.inner’).unwrap();
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 replaceWith

用指定的元素替换被选的元素

$(‘.inner’).replaceWith(‘

‘);
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 simple parse

解析 HTML/SVG/XML 字符串

// jQuery
$(`

c d \`);

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

parse(`

c d \`);

Ajax

Fetch API 是用于替换 XMLHttpRequest 处理 ajax 的新标准，Chrome 和 Firefox 均支持，旧浏览器可以使用 polyfills 提供支持。

IE9+ 请使用 github/fetch，IE8+ 请使用 fetch-ie8，JSONP 请使用 fetch-jsonp。

4.1 从服务器读取数据并替换匹配元素的内容

$(selector).load(url, completeCallback)
fetch(url).then(data => data.text()).then(data => {
document.querySelector(selector).innerHTML = data
}).then(completeCallback)

Events

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

5.0 Document ready by `DOMContentLoaded`

$(document).ready(eventHandler);
if (document.readyState !== ‘loading’) {
eventHandler();
} else {
document.addEventListener(‘DOMContentLoaded’, eventHandler);
}

5.1 使用 on 绑定事件

$el.on(eventName, eventHandler);
el.addEventListener(eventName, eventHandler);

5.2 使用 off 解绑事件

$el.off(eventName, eventHandler);
el.removeEventListener(eventName, eventHandler);

5.3 Trigger

$(el).trigger(‘custom-event’, {key1: ‘data’});
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

大部分实用工具都能在 native API 中找到. 其他高级功能可以选用专注于该领域的稳定性和性能都更好的库来代替，推荐 lodash。

6.1 基本工具

isArray

检测参数是不是数组。

$.isArray(range);
Array.isArray(range);

isWindow

检测参数是不是 window。

$.isWindow(obj);
function isWindow(obj) { return obj !== null && obj !== undefined && obj === obj.window;
}

inArray

在数组中搜索指定值并返回索引 (找不到则返回 -1)。

$.inArray(item, array);
array.indexOf(item) > -1;
array.includes(item);

isNumeric

检测传入的参数是不是数字。 Use typeof to decide the type or the type example for better accuracy.

$.isNumeric(item);
function isNumeric(n) { return !isNaN(parseFloat(n)) && isFinite(n);
}

isFunction

检测传入的参数是不是 JavaScript 函数对象。

$.isFunction(item);
function isFunction(item) { if (typeof item === ‘function’) { return true;
} var type = Object.prototype.toString(item); return type === ‘[object Function]‘ || type === ‘[object GeneratorFunction]‘;
}

isEmptyObject

检测对象是否为空 (包括不可枚举属性).

$.isEmptyObject(obj);
function isEmptyObject(obj) { return Object.keys(obj).length === 0;
}

isPlainObject

检测是不是扁平对象 (使用 “{}” 或 “new Object” 创建).

$.isPlainObject(obj);
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。

$.extend({}, defaultOpts, opts);
Object.assign({}, defaultOpts, opts);

trim

移除字符串头尾空白。

$.trim(string);
string.trim();

map

将数组或对象转化为包含新内容的数组。

// jQuery
$.map(array, (value, index) => {
}); // Native
array.map((value, index) => {
});

each

轮询函数，可用于平滑的轮询对象和数组。

$.each(array, (index, value) => {
});
array.forEach((value, index) => {
});

grep

找到数组中符合过滤函数的元素。

// jQuery
$.grep(array, (value, index) => {
}); // Native
array.filter((value, index) => {
});

type

检测对象的 JavaScript [Class] 内部类型。

$.type(obj);
function type(item) {
const reTypeOf = /(?:^\[object\s(.*?)\]$)/; return Object.prototype.toString.call(item)
.replace(reTypeOf, ‘$1’)
.toLowerCase();
}

merge

合并第二个数组内容到第一个数组。

$.merge(array1, array2);
function merge(…args) { return [].concat(…args)
}
array1 = […array1, …array2]
function merge(…args) { return Array.from(new Set([].concat(…args)))
}

now

返回当前时间的数字呈现。

proxy

传入函数并返回一个新函数，该函数绑定指定上下文。

$.proxy(fn, context);
fn.bind(context);

makeArray

类数组对象转化为真正的 JavaScript 数组。

$.makeArray(arrayLike);
Array.prototype.slice.call(arrayLike);
Array.from(arrayLike);

6.2 包含

检测 DOM 元素是不是其他 DOM 元素的后代.

$.contains(el, child);
el !== child && el.contains(child);

6.3 Globaleval

全局执行 JavaScript 代码。

$.globaleval(code);
function Globaleval(code) {
const script = document.createElement(‘script’);
script.text = code;

document.head.appendChild(script).parentNode.removeChild(script);
}
eval(code);

6.4 解析

parseHTML

解析字符串为 DOM 节点数组.

$.parseHTML(htmlString);
function parseHTML(string) {
const context = document.implementation.createHTMLDocument();

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 值.

$.parseJSON(str);
JSON.parse(str);

Promises

Promise 代表异步操作的最终结果。jQuery 用它自己的方式处理 promises，原生 JavaScript 遵循 Promises/A+ 标准实现了最小 API 来处理 promises。

7.1 done, fail, always

done 会在 promise 解决时调用，fail 会在 promise 拒绝时调用，always 总会调用。

$promise.done(doneCallback).fail(failCallback).always(alwaysCallback)
promise.then(doneCallback, failCallback).then(alwaysCallback, alwaysCallback)

7.2 when

when 用于处理多个 promises。当全部 promises 被解决时返回，当任一 promise 被拒绝时拒绝。

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

7.3 Deferred

Deferred 是创建 promises 的一种方式。

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();
}

Animation

8.1 Show & Hide

$el.show();
$el.hide();
el.style.display = ‘’|’inline’|’inline-block’|’inline-table’|’block’;
el.style.display = ‘none’;

8.2 Toggle

显示或隐藏元素。

$el.toggle();
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 FadeIn & FadeOut

$el.fadeIn(3000);
$el.fadeOut(3000);
el.style.transition = ‘opacity 3s’;
el.style.opacity = ‘1’;
el.style.opacity = ‘0’;

8.4 FadeTo

调整元素透明度。

$el.fadeTo(‘slow’,0.15);
el.style.transition = ‘opacity 3s’;
el.style.opacity = ‘0.15’;

8.5 FadeToggle

动画调整透明度用来显示或隐藏。

$el.fadeToggle();
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 SlideUp & SlideDown

$el.slideUp();
$el.slideDown();
const originHeight = ‘100px’;
el.style.transition = ‘height 3s’;
el.style.height = ‘0px’;
el.style.height = originHeight;

8.7 SlideToggle

滑动切换显示或隐藏。

$el.slideToggle();
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 Animate

执行一系列 CSS 属性动画。

$el.animate({ params }, speed);
el.style.transition = ‘all ‘ + speed;
Object.keys(params).forEach((key) => el.style[key] = params[key];
)

Alternatives

你可能不需要 jQuery (You Might Not Need jQuery) - 如何使用原生 JavaScript 实现通用事件，元素，ajax 等用法。
npm-dom 以及 webmodules - 在 NPM 上提供独立 DOM 模块的组织

Browser Support

转载地址：You Don’t Need jQuery

Query Selector

1.0 选择器查询

1.1 class 查询

1.2 id 查询

1.3 属性查询

1.4 后代查询

1.5 兄弟及上下元素

兄弟元素

上一个元素

下一个元素

1.6 Closest

1.7 Parents Until

1.8 Form

1.9 Iframe Contents

1.10 获取 body

1.11 获取或设置属性

CSS & Style

2.1 CSS

2.2 Width & Height

Window height

Document height

Element height

2.3 Position & Offset

Position

Offset

2.4 ScrollTop

DOM Manipulation

3.1 Remove

3.2 Text

Get text

Set text

3.3 HTML

Get HTML

Set HTML

3.4 Append

3.5 Prepend

3.6 insertBefore

3.7 insertAfter

3.8 is

3.9 clone

3.10 empty

3.11 wrap

3.12 unwrap

3.13 replaceWith

3.14 simple parse

Ajax

4.1 从服务器读取数据并替换匹配元素的内容

Events

5.0 Document ready by DOMContentLoaded

5.1 使用 on 绑定事件

5.2 使用 off 解绑事件

5.3 Trigger

Utilities

6.1 基本工具

isArray

isWindow

inArray

isNumeric

isFunction

isEmptyObject

isPlainObject

extend

trim

map

each

grep

type

merge

now

proxy

makeArray

6.2 包含

6.3 Globaleval

6.4 解析

parseHTML

parseJSON

Promises

7.1 done, fail, always

7.2 when

7.3 Deferred

5.0 Document ready by `DOMContentLoaded`