document.querySelectorAll
返回所有匹配的 Element 组成的 NodeList。它可以通过[].slice.call()
把它转成 Array- 如果匹配不到任何 Element,jQuery 返回空数组
[]
,但document.querySelector
返回null
,注意空指针异常。当找不到时,也可以使用||
设置默认的值,如document.querySelectorAll(selector) || []
-
// jQuery
$('.class');
// Native
document.querySelectorAll('.class');
// or
document.getElementsByClassName('class');
-
// jQuery
$('#id');
// Native
document.querySelector('#id');
// or
document.getElementById('id');
-
// jQuery
$('a[target=_blank]');
// Native
document.querySelectorAll('a[target=_blank]');
-
// jQuery
$el.find('li');
// Native
el.querySelectorAll('li');
-
兄弟元素
// jQuery
$el.siblings();
// Native - latest, Edge13+
[...el.parentNode.children].filter((child) =>
child !== el
);
Array.from(el.parentNode.children).filter((child) =>
child !== el
);
// Native - IE10+
Array.prototype.filter.call(el.parentNode.children, (child) =>
child !== el
下一个元素
// next
$el.next();
// Native
el.nextElementSibling;
-
Closest 获得匹配选择器的第一个祖先元素,从当前元素开始沿 DOM 树向上。
// jQuery
$el.closest(queryString);
// Native - Only latest, NO IE
el.closest(selector);
// Native - IE10+
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;
}
-
获取当前每一个匹配元素集的祖先,不包括匹配元素的本身。
// 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;
-
Input/Textarea
// jQuery
$('#my-input').val();
// Native
document.querySelector('#my-input').value;
获取 e.currentTarget 在
.radio
中的数组索引// jQuery
$('.radio').index(e.currentTarget);
// Native
Array.prototype.indexOf.call(document.querySelectorAll('.radio'), e.currentTarget);
-
jQuery 对象的 iframe
contents()
返回的是 iframe 内的document
Iframe contents
Iframe Query
// jQuery
$iframe.contents().find('.css');
// Native
iframe.contentDocument.querySelectorAll('.css');
-
// jQuery
$('body');
// Native
document.body;
-
获取属性
// jQuery
$el.attr('foo');
// Native
el.getAttribute('foo');
设置属性
// jQuery, note that this works in memory without change the DOM
$el.attr('foo', 'bar');
// Native
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'];