Some vanilla equivalents to jQuery methods.
jQuery:
var target = $('.page-content');JavaScript:
var target = document.querySelectorAll('.page-content');To be precise, there are five different ways for it:
document.querySelectorAll(selector)-- all matching nodesdocument.querySelector(selector)-- the first matching nodedocument.getElementById(idname)-- a single node by iddocument.getElementsByTagName(tagname)-- all nodes by html tagdocument.getElementsByClassName(class)-- all nodes by class
You can link those to find descendants:
var parent = document.getElementById('distinct-id');
var kids = parent.getElementsByClassName('my-class');jQuery:
var nextElement = $('.page-content').next();JavaScript:
var nextElement = document.querySelector('.page-content').nextSibling;jQuery:
$('.page-content').append('<p>Some more text.</p>');JavaScript:
var something = document.createElement('p');
something.appendChild(document.createTextNode('Some more text.'));
document.querySelector('.page-content').appendChild(something);jQuery:
$('.page-content').empty();JavaScript:
document.querySelector('.page-contentt').innerHTML = null;jQuery:
if ($('.page-content').is(':empty'))JavaScript:
if (!document.getElementById('.page-content').hasChildNodes());jQuery:
$('.page-content').remove();JavaScript:
var something = document.querySelector('.unwanted-stuff');
something.parentNode.removeChild(something);jQuery:
$('.list-element').addClass('active');
$('.list-element').removeClass('active');
$('.list-element').toggleClass('active');JavaScript:
document.querySelector('.list-element').classList.add('active');
document.querySelector('.list-element').classList.remove('active');
document.querySelector('.list-element').classList.toggle('active');jQuery:
$('.home-link').attr('href');
$('.home-link').attr('href', 'http://corpo.org');JavaScript:
document.querySelector('.home-link').getAttribute('href');
document.querySelector('.home-link').setAttribute('href', 'http://corpo.org');jQuery:
$('.clickable').on('click', function(e) {
console.log('You clicked ' + e.target);
e.preventDefault();
});JavaScript:
document.querySelectorAll('.clickable').addEventListener('click', function(e) {
console.log('You clicked ' + e.target);
e.preventDefault();
});You can also use one of these simple GlobalEventHandlers events:
element.onclick = functionRef;-- when clicked, after the mousedown and mouseupelement.oninput = functionRef;-- when input element value changeswindow.onload = funcRef;-- after all DOM elements and images are loadedelement.onscroll = functionRef;-- when content of the element is scrolled