admin
项目地址：https://github.com/oneuijs/You-Dont-Need-jQuery
前端发展很快，现代浏览器原生 API 已经足够好用。我们并不需要为了操作 DOM、Event 等再学习一下 jQuery 的 API。同时由于 React、Angular、Vue 等框架的流行，直接操作 DOM 不再是好的模式，jQuery 使用场景大大减少。本项目总结了大部分 jQuery API 替代的方法，暂时只支持 IE10+ 以上浏览器。
Query Selector
常用的 class、id、属性 选择器都可以使用 document.querySelector 或 document.querySelectorAll 替代。区别是
1) document.querySelector 返回第一个匹配的 Element
2) document.querySelectorAll 返回所有匹配的 Element 组成的 NodeList。它可以通过 [].slice.call() 把它转成 Array
3) 如果匹配不到任何 Element，jQuery 返回空数组 []，但 document.querySelector 返回 null，注意空指针异常。当找不到时，也可以使用 || 设置默认的值，如 document.querySelectorAll(selector) || []
注意：document.querySelector 和 document.querySelectorAll 性能很差。如果想提高性能，尽量使用 document.getElementById、document.getElementsByClassName 或 document.getElementsByTagName。
1.0 Query by selector
// jQuery
$('selector');
// Native
document.querySelectorAll('selector');
1.1 Query by class
// jQuery
$('.css');
// Native
document.querySelectorAll('.css');
// or
document.getElementsByClassName('css');
1.2 Query by id
// jQuery
$('#id');
// Native
document.querySelector('#id');
// or
document.getElementById('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
Closest 获得匹配选择器的第一个祖先元素，从当前元素开始沿 DOM 树向上。
// 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
获取当前每一个匹配元素集的祖先，不包括匹配元素的本身。
// 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.querySelectorAll('.radio'), e.currentTarget);
1.9 Iframe Contents
jQuery 对象的 iframe contents() 返回的是 iframe 内的 document
Iframe contents
// jQuery
$iframe.contents();
// Native
iframe.contentDocument;
Iframe Query
// jQuery
$iframe.contents().find('.css');
// Native
iframe.contentDocument.querySelectorAll('.css');
