你不需要JQuery
- 1. 你不需要JQuery
- 2. 目录
- 3. Query Selector
- 4. CSS & Style
- 5. DOM Manipulation
- 6. Ajax
- 7. Events
- 8. Utilities
- 9. Alternatives
- 10. Browser Support
你不需要JQuery
前端发展很快,现代浏览器原生 API 已经足够好用。我们并不需要为了操作 DOM、Event 等再学习一下 jQuery 的 API。同时由于 React、Angular、Vue 等框架的流行,直接操作 DOM 不再是好的模式,jQuery 使用场景大大减少。本项目总结了大部分 jQuery API 替代的方法,暂时只支持 IE10+ 以上浏览器。
目录
Query Selector
常用的 class、id、属性 选择器都可以使用 document.querySelector
或 document.querySelectorAll
替代。区别是
document.querySelector
返回第一个匹配的 Elementdocument.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 Query by selector
12345// jQuery$('selector');// Nativedocument.querySelectorAll('selector');1.1 Query by class
12345678// jQuery$('.css');// Nativedocument.querySelectorAll('.css');// ordocument.getElementsByClassName('css');1.2 Query by id
12345678// jQuery$('#id');// Nativedocument.querySelector('#id');// ordocument.getElementById('id');1.3 Query by attribute
12345// jQuery$('a[target=_blank]');// Nativedocument.querySelectorAll('a[target=_blank]');1.4 Find sth.
Find nodes
12345// jQuery$el.find('li');// Nativeel.querySelectorAll('li');Find body
12345// jQuery$('body');// Nativedocument.body;Find Attribute
12345// jQuery$el.attr('foo');// Nativee.getAttribute('foo');Find data attribute
12345678// jQuery$el.data('foo');// Native// using getAttributeel.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
1234567// jQuery$el.siblings();// Native[].filter.call(el.parentNode.children, function(child) {return child !== el;});Previous elements
12345// jQuery$el.prev();// Nativeel.previousElementSibling;Next elements
123// next$el.next();el.nextElementSibling;
1.6 Closest
Closest 获得匹配选择器的第一个祖先元素,从当前元素开始沿 DOM 树向上。
12345678910111213141516// jQuery$el.closest(queryString);// Nativefunction 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
获取当前每一个匹配元素集的祖先,不包括匹配元素的本身。
12345678910111213141516171819202122// jQuery$el.parentsUntil(selector, filter);// Nativefunction parentsUntil(el, selector, filter) {const result = [];const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;// match start from parentel = 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
12345// jQuery$('#my-input').val();// Nativedocument.querySelector('#my-input').value;Get index of e.currentTarget between
.radio
12345// jQuery$(e.currentTarget).index('.radio');// Native[].indexOf.call(document.querySelectorAll('.radio'), e.currentTarget);
1.9 Iframe Contents
jQuery 对象的 iframe
contents()
返回的是 iframe 内的document
Iframe contents
12345// jQuery$iframe.contents();// Nativeiframe.contentDocument;Iframe Query
12345// jQuery$iframe.contents().find('.css');// Nativeiframe.contentDocument.querySelectorAll('.css');
CSS & Style
2.1 CSS
Get style
12345678// jQuery$el.css("color");// Native// 注意:此处为了解决当 style 值为 auto 时,返回 auto 的问题const win = el.ownerDocument.defaultView;// null 的意思是不返回伪类元素win.getComputedStyle(el, null).color;Set style
12345// jQuery$el.css({ color: "#ff0011" });// Nativeel.style.color = '#ff0011';Get/Set Styles
注意,如果想一次设置多个 style,可以参考 oui-dom-utils 中 setStyles 方法
Add class
12345// jQuery$el.addClass(className);// Nativeel.classList.add(className);Remove class
12345// jQuery$el.removeClass(className);// Nativeel.classList.remove(className);has class
12345// jQuery$el.hasClass(className);// Nativeel.classList.contains(className);Toggle class
12345// jQuery$el.toggleClass(className);// Nativeel.classList.toggle(className);
2.2 Width & Height
Width 与 Height 获取方法相同,下面以 Height 为例:
Window height
12345678// jQuery$(window).height();// Native// 不含 scrollbar,与 jQuery 行为一致window.document.documentElement.clientHeight;// 含 scrollbarwindow.innerHeight;Document height
12345// jQuery$(document).height();// Nativedocument.documentElement.scrollHeight;Element height
123456789101112131415161718// jQuery$el.height();// Native// 与 jQuery 一致(一直为 content 区域的高度)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;}// 精确到整数(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
12345// jQuery$('iframe').contents().height();// Nativeiframe.contentDocument.documentElement.scrollHeight;
2.3 Position & Offset
Position
12345// jQuery$el.position();// Native{ left: el.offsetLeft, top: el.offsetTop }Offset
123456789101112// jQuery$el.offset();// Nativefunction 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 Scroll Top
12345// jQuery$(window).scrollTop();// Native(document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;
DOM Manipulation
3.1 Remove
12345// jQuery$el.remove();// Nativeel.parentNode.removeChild(el);3.2 Text
Get text
12345// jQuery$el.text();// Nativeel.textContent;Set text
12345// jQuery$el.text(string);// Nativeel.textContent = string;
3.3 HTML
Get HTML
12345// jQuery$el.html();// Nativeel.innerHTML;Set HTML
12345// jQuery$el.html(htmlString);// Nativeel.innerHTML = htmlString;
3.4 Append
Append 插入到子节点的末尾
12345678// jQuery$el.append("<div id='container'>hello</div>");// Nativelet newEl = document.createElement('div');newEl.setAttribute('id', 'container');newEl.innerHTML = 'hello';el.appendChild(newEl);3.5 Prepend
12345678// jQuery$el.prepend("<div id='container'>hello</div>");// Nativelet newEl = document.createElement('div');newEl.setAttribute('id', 'container');newEl.innerHTML = 'hello';el.insertBefore(newEl, el.firstChild);3.6 insertBefore
在选中元素前插入新节点
123456// jQuery$newEl.insertBefore(queryString);// Nativeconst target = document.querySelector(queryString);target.parentNode.insertBefore(newEl, target);3.7 insertAfter
在选中元素后插入新节点
123456// jQuery$newEl.insertAfter(queryString);// Nativeconst target = document.querySelector(queryString);target.parentNode.insertBefore(newEl, target.nextSibling);
Ajax
用 fetch 和 fetch-jsonp 替代
Events
完整地替代命名空间和事件代理,链接到 https://github.com/oneuijs/oui-dom-events
5.1 Bind an event with on
12345// jQuery$el.on(eventName, eventHandler);// Nativeel.addEventListener(eventName, eventHandler);5.2 Unbind an event with off
12345// jQuery$el.off(eventName, eventHandler);// Nativeel.removeEventListener(eventName, eventHandler);5.3 Trigger
123456789101112// jQuery$(el).trigger('custom-event', {key1: 'data'});// Nativeif (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 isArray
12345// jQuery$.isArray(range);// NativeArray.isArray(range);6.2 Trim
12345// jQuery$.trim(string);// Nativestring.trim();6.3 Object Assign
继承,使用 object.assign polyfill https://github.com/ljharb/object.assign
12345// jQuery$.extend({}, defaultOpts, opts);// NativeObject.assign({}, defaultOpts, opts);6.4 Contains
12345// jQuery$.contains(el, child);// Nativeel !== child && el.contains(child);
Alternatives
- 你可能不需要 jQuery (You Might Not Need jQuery) - 如何使用原生 JavaScript 实现通用事件,元素,ajax 等用法。
- npm-dom 以及 webmodules - 在 NPM 上提供独立 DOM 模块的组织
Browser Support
![]() |
![]() |
![]() |
![]() |
![]() |
|
---|---|---|---|---|---|
Latest ✔ | Latest ✔ | 10+ ✔ | Latest ✔ | 6.1+ ✔ |