jQuery vs ES6 (似乎 ES6 已經包含了大部分 jQuery 的主要功能)
- DOM Selection
jQuery |
ES6 |
$(‘.someclass’) |
document.querySelector(‘.someclass’) |
|
document.querySelectorAll(‘.someclass’) |
- DOM manipulation
jquery |
ES6 |
$element.remove() |
element.remove() |
$element.prepend(otherElement) |
element.prepend(otherElement) |
$element.before(otherElement) |
element.before(otherElement) |
$element.addClass(‘someclass’) |
element.classList.add(‘someclass’) |
$element.removeClass(‘someclass’) |
element.classList.remove(‘someclass’) |
$element.toggleClass(‘someclass’) |
element.classList.toggle(‘someclass’) |
const parent = $element.parent() |
const parent = element.parentNode |
const cloned = element.clone() |
const cloned = element.cloneNode(true) |
- Events
jQuery |
ES6 |
$someElement.on(‘click’, function() {}) |
someElement.addEventListener(‘click’, () => {}) |
- Http request (ajax)
ES6 |
axios |
fetch(‘http://api.some.com’) |
axios.get(‘http://api.som.com’) |
.then(res=>res.json()) |
.then(res => console.log(res.data)) |
.then(data => console.log(data)) |
|
- Utilities
jQuery |
ES6 |
$.isArray(someValue) |
Array.isArray(someValue) |
$.inArray(item, anArray) |
someArray.indexOf(item) > -1 |
$.each(someArray, (value, index) => {}) |
someArray.forEach((value, index) => {}) |
$.map(someArray, (value, index) => {}) |
someArray.map((value, index) => {}) |
$.grep(someArray, (value, index) => {}) |
someArray.filter((value, index) => {}) |
$.parseJson(str) |
JSON.parse(str) |
- Animation
- 在純粹 Javascript 做 Animation 還是比 jQuery 麻煩,但是已經可以使用以下來幫助
- CSS Transition/keyframes
- Web Animation API
- 3rd party library Greensock
相關