Jquery vs Javascript (DOM + Ajax)

index.md

JQuery vs JS (DOM and Ajax)

find element

JQuery:

let $wrapper = $('#wrapper') // 1
let $blocks = $('.block') // 2
let $block = $('.block').eq(0) // 3
let $items = $block.find('.item') // 4
let $parent = $block.closest('#wrapper') // 5
let $siblings = $el.siblings(); // 6
let $prev = $el.prev(); // 7
let $next = $el.next(); // 8

Javascript:

let wrapper = document.findElementById('wrapper') // 1
let blocks = document.querySelectorAll('.block') // 2
let block = document.querySelector('.block') // 3
let items = blocks.querySelectorAll('.item') // 4
let parent = block.closest('#wrapper') // 5 IE?
let siblings = Array.prototype.filter.call(el.parentNode.children, (child) => child !== el); // 6
let prev = el.previousElementSibling; // 7
let next = el.nextElementSibling; // 8

create element

JQuery:

let $el = $('<div>') // 1

Javascript:

let el = document.createElement('div') // 1

insert element

JQuery:

$parent.append($child) // 1
$parent.prepend($child) // 2
$el.insertBefore('.parent .next'); // 3

Javascript:

parent.appendChild(child) // 1
let parent = document.querySelector('.parent'); // 2
parent.insertBefore(el, parent.firstChild);
let parent = document.querySelector('.parent'); // 3
let next = parent.querySelector('.next');
parent.insertBefore(el, next);

remove element

JQuery:

$el.remove();

Javascript:

el.remove();

work with content

JQuery:

$el.html() // 1
$el.html('<h1>title</h1>') // 2
$el.text() // 3
$el.text('<h1>title</h1>') // 4
$el.val() // 5
$el.val('1') // 6

Javascript:

el.innerHTML // 1
el.innerHTML = '<h1>title</h1>' // 2
el.textContent // 3
el.textContent = '<h1>title</h1>' // 4
el.value // 5
el.value = '1' // 6

work with classes

JQuery:

$el.addClass('my') // 1
$el.hasClass('my') // 2
$el.removeClass('my') // 3
$el.toggleClass('my') // 4

Javascript:

el.classList.add('my') // 1
el.classList.contains('my') // 2
el.classList.remove('my') // 3
el.classList.toggle('my') // 4

work with styles

JQuery:

$el.css('color'); // 1
$el.css({ color: '#f01' }); // 2

Javascript:

window.getComputedStyle(el).color // 1
el.style.color = '#f01'; // 2

work with attributes

JQuery:

$el.attr('href') // 1
$el.attr('href', '/') // 2
$el.prop('href') // 3
$el.prop('href', '/') // 4

Javascript:

el.getAttribute('href') // 1
el.setAttribute('href', '/') // 2
el.href // 3
el.href = '/' // 4

work with data

JQuery:

$el.attr('data-user-id') // 1
$el.attr('data-user-id', 1) // 2
$el.data('user-id') // 3
$el.data('user-id', 1) // 4

Javascript:

el.getAttribute('data-user-id') // 1
el.setAttribute('data-user-id', 1) // 2
el.dataset.userId // 3
el.dataset.userId = 1 // 4

work with events

Jquery:

$(document).ready(eventHandler); // 1
$el.on(eventName, eventHandler); // 2
$el.off(eventName, eventHandler); // 3
$(el).trigger('custom-event', {key1: 'data'}); // 4

Javascript:

(document.readyState === 'loading') ? document.addEventListener('DOMContentLoaded', eventHandler) : eventHandler(); // 1
el.addEventListener(eventName, eventHandler); // 2
el.removeEventListener(eventName, eventHandler); // 3
if (window.CustomEvent) { // 4
  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);

See oui-dom-events for delegation

ajax

Jquery:

$.get('/', function(){}) // 1
$.post('/', data, function(){}) // 2

Javascript:

$.fetch('/', {method: 'GET'}) // 1
	.then(function(response){});
$.fetch('/', { // 2
	method: 'POST',
	body: formData
}).then(function(response){});

ajax json

Jquery:

$.getJSON('/', function(data){});

Javascript:

fetch('/')
.then(function(response) {
	return response.json();
}).then(function(data) {
});