You Don't Need jQuery
轉(zhuǎn)自You Don't Need jQuery
前端發(fā)展很快，現(xiàn)代瀏覽器原生 API 已經(jīng)足夠好用滑臊。我們并不需要為了操作 DOM喘鸟、Event 等再學(xué)習(xí)一下 jQuery 的 API堤尾。同時(shí)由于 React、Angular葵蒂、Vue 等框架的流行，直接操作 DOM 不再是好的模式重虑，jQuery 使用場(chǎng)景大大減少践付。本項(xiàng)目總結(jié)了大部分 jQuery API 替代的方法，暫時(shí)只支持 IE10+ 以上瀏覽器缺厉。
Query Selector
常用的 class永高、id、屬性 選擇器都可以使用 document.querySelector 或 document.querySelectorAll 替代提针。區(qū)別是
-
document.querySelector返回第一個(gè)匹配的 Element -
document.querySelectorAll返回所有匹配的 Element 組成的 NodeList命爬。它可以通過(guò)[].slice.call()把它轉(zhuǎn)成 Array - 如果匹配不到任何 Element，jQuery 返回空數(shù)組
[]辐脖，但document.querySelector返回null饲宛，注意空指針異常。當(dāng)找不到時(shí)嗜价，也可以使用||設(shè)置默認(rèn)的值艇抠，如document.querySelectorAll(selector) || []
注意：
document.querySelector和document.querySelectorAll性能很差幕庐。如果想提高性能，盡量使用document.getElementById练链、document.getElementsByClassName或document.getElementsByTagName翔脱。
-
1.0 <a name='1.0'></a> Query by selector
// jQuery $('selector'); // Native document.querySelectorAll('selector'); -
1.1 <a name='1.1'></a> Query by class
// jQuery $('.css'); // Native document.querySelectorAll('.css'); // or document.getElementsByClassName('css'); -
1.2 <a name='1.2'></a> Query by id
// jQuery $('#id'); // Native document.querySelector('#id'); // or document.getElementById('id'); -
1.3 <a name='1.3'></a> Query by attribute
// jQuery $('a[target=_blank]'); // Native document.querySelectorAll('a[target=_blank]'); -
1.4 <a name='1.4'></a> 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 <a name='1.5'></a> 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 <a name='1.6'></a> Closest
Closest 獲得匹配選擇器的第一個(gè)祖先元素，從當(dāng)前元素開(kāi)始沿 DOM 樹(shù)向上媒鼓。
// 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 <a name='1.7'></a> Parents Until
獲取當(dāng)前每一個(gè)匹配元素集的祖先届吁，不包括匹配元素的本身。
// 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 <a name='1.8'></a> 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 <a name='1.9'></a> Iframe Contents
jQuery 對(duì)象的 iframe
contents()返回的是 iframe 內(nèi)的document-
Iframe contents
// jQuery $iframe.contents(); // Native iframe.contentDocument; -
Iframe Query
// jQuery $iframe.contents().find('.css'); // Native iframe.contentDocument.querySelectorAll('.css');
-
CSS & Style
-
2.1 <a name='2.1'></a> CSS
-
Get style
// jQuery $el.css("color"); // Native // 注意：此處為了解決當(dāng) style 值為 auto 時(shí)绿鸣，返回 auto 的問(wèn)題 const win = el.ownerDocument.defaultView; // null 的意思是不返回偽類(lèi)元素 win.getComputedStyle(el, null).color; -
Set style
// jQuery $el.css({ color: "#ff0011" }); // Native el.style.color = '#ff0011'; -
Get/Set Styles
注意疚沐，如果想一次設(shè)置多個(gè) style，可以參考 oui-dom-utils 中 setStyles 方法
-
Add class
// jQuery $el.addClass(className); // Native el.classList.add(className); -
Remove class
// jQuery $el.removeClass(className); // Native el.classList.remove(className); -
has class
// jQuery $el.hasClass(className); // Native el.classList.contains(className); -
Toggle class
// jQuery $el.toggleClass(className); // Native el.classList.toggle(className);
-
-
2.2 <a name='2.2'></a> Width & Height
Width 與 Height 獲取方法相同潮模，下面以 Height 為例：
-
Window height
// jQuery $(window).height(); // Native // 不含 scrollbar亮蛔，與 jQuery 行為一致 window.document.documentElement.clientHeight; // 含 scrollbar window.innerHeight; -
Document height
// jQuery $(document).height(); // Native document.documentElement.scrollHeight; -
Element height
// jQuery $el.height(); // Native // 與 jQuery 一致（一直為 content 區(qū)域的高度） 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; } // 精確到整數(shù)（border-box 時(shí)為 height 值，content-box 時(shí)為 height + padding + border 值） el.clientHeight; // 精確到小數(shù)（border-box 時(shí)為 height 值擎厢，content-box 時(shí)為 height + padding + border 值） el.getBoundingClientRect().height; -
Iframe height
$iframe .contents() 方法返回 iframe 的 contentDocument
// jQuery $('iframe').contents().height(); // Native iframe.contentDocument.documentElement.scrollHeight;
-
-
2.3 <a name='2.3'></a> Position & Offset
-
Position
// jQuery $el.position(); // Native { left: el.offsetLeft, top: el.offsetTop } -
Offset
// 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 <a name='2.4'></a> Scroll Top
// jQuery $(window).scrollTop(); // Native (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;
DOM Manipulation
-
3.1 <a name='3.1'></a> Remove
// jQuery $el.remove(); // Native el.parentNode.removeChild(el); -
3.2 <a name='3.2'></a> Text
-
Get text
// jQuery $el.text(); // Native el.textContent; -
Set text
// jQuery $el.text(string); // Native el.textContent = string;
-
-
3.3 <a name='3.3'></a> HTML
-
Get HTML
// jQuery $el.html(); // Native el.innerHTML; -
Set HTML
// jQuery $el.html(htmlString); // Native el.innerHTML = htmlString;
-
-
3.4 <a name='3.4'></a> Append
Append 插入到子節(jié)點(diǎn)的末尾
// jQuery $el.append("<div id='container'>hello</div>"); // Native let newEl = document.createElement('div'); newEl.setAttribute('id', 'container'); newEl.innerHTML = 'hello'; el.appendChild(newEl); -
3.5 <a name='3.5'></a> Prepend
// jQuery $el.prepend("<div id='container'>hello</div>"); // Native let newEl = document.createElement('div'); newEl.setAttribute('id', 'container'); newEl.innerHTML = 'hello'; el.insertBefore(newEl, el.firstChild); -
3.6 <a name='3.6'></a> insertBefore
在選中元素前插入新節(jié)點(diǎn)
// jQuery $newEl.insertBefore(queryString); // Native const target = document.querySelector(queryString); target.parentNode.insertBefore(newEl, target); -
3.7 <a name='3.7'></a> insertAfter
在選中元素后插入新節(jié)點(diǎn)
// jQuery $newEl.insertAfter(queryString); // Native const target = document.querySelector(queryString); target.parentNode.insertBefore(newEl, target.nextSibling);
Ajax
用 fetch 和 fetch-jsonp 替代
Events
完整地替代命名空間和事件代理究流，鏈接到 https://github.com/oneuijs/oui-dom-events
-
5.1 <a name='5.1'></a> Bind an event with on
// jQuery $el.on(eventName, eventHandler); // Native el.addEventListener(eventName, eventHandler); -
5.2 <a name='5.2'></a> Unbind an event with off
// jQuery $el.off(eventName, eventHandler); // Native el.removeEventListener(eventName, eventHandler); -
5.3 <a name='5.3'></a> Trigger
// 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 <a name='6.1'></a> isArray
// jQuery $.isArray(range); // Native Array.isArray(range); -
6.2 <a name='6.2'></a> Trim
// jQuery $.trim(string); // Native string.trim(); -
6.3 <a name='6.3'></a> Object Assign
繼承，使用 object.assign polyfill https://github.com/ljharb/object.assign
// jQuery $.extend({}, defaultOpts, opts); // Native Object.assign({}, defaultOpts, opts); -
6.4 <a name='6.4'></a> Contains
// jQuery $.contains(el, child); // Native el !== child && el.contains(child);
Alternatives
- 你可能不需要 jQuery (You Might Not Need jQuery) - 如何使用原生 JavaScript 實(shí)現(xiàn)通用事件动遭，元素芬探，ajax 等用法。
- npm-dom 以及 webmodules - 在 NPM 上提供獨(dú)立 DOM 模塊的組織
Browser Support
| Chrome | Firefox | IE | Opera | Safari |
|---|---|---|---|---|
| Latest ? | Latest ? | 10+ ? | Latest ? | 6.1+ ? |
License
MIT
