What is zQuery
zQuery is a cheatsheet for
- Vanilla JS alternatives to common jQuery constructs, and
- neat JS hacks in general.
You can share this repo here as git.io/zQuery.
Contribute
If you know some neat JS hacks, feel free to send a PR. Hardly anything is too crazy as long as it's useful. zQuery already contains all of youdontneedjquery.
Contents
- AJAX GET
- AJAX POST
- Bind
- DOM Ready
- DOM Query
- Element Attributes
- Element Childs
- Element Child Manipulation
- Element Class
- Element Content
- Element Data Attributes
- Element Foreach
- Element Filters
- Element Find
- Element Listeners
- Element Parent
- Element Siblings
- Element Sibling Navigation
- Element Styles
- Element Value
- Element Visibility
- Window (Viewport) Dimensions
jQuery
$.get(
'path/to/json',
data => {/* use 'data' here */}
).error(
error => {/* use 'error' here */}
);fetch('/path/to/json')
.then(response => response.json())
.then(data => {/* use 'data' here */})
.catch(error => {/* use 'error' here */});jQuery
$.post(
'https://example.com/api',
JSON.stringify(myObjectHere),
data => {/* use 'data' here */ }
).error(
error => {/* use 'error' here */}
);fetch('path/to/whatever', {
method: 'POST',
headers: new Headers({ 'Content-Type': 'application/json' }),
body: JSON.stringify(myObjectHere)
})
.then(response => response.json())
.then(data => {/* use 'data' here */})
.catch(error => {/* use 'error' here */}
);jQuery
$(".foo").bind("contextmenu", function (event) { /* do something */ });
$(".foo").click(function (event) { /* do something */ });JavaScript
document.querySelector(".foo").addEventListener("contextmenu", function (event) { /* do something */ });
document.querySelector(".foo").addEventListener('click', function() { /* do something */ });jQuery
$(document).ready(function() {
alert("DOM ready.");
});JavaScript (old)
function onDOMReady(f){/in/.test(document.readyState)?setTimeout(arguments.callee.name+'('+f+')',9):f()}
onDOMReady(function(){
alert("DOM ready.");
});This is faster than other JS (intrinsic) functions, but still slower than just putting the JS at the end of your HTML file. Further, this works in IE8, whereas other solutions don't.
JavaScript (HTML5)
document.addeventListener('DOMContentLoaded', () => {
alert("DOM ready.");
});jQuery
const myElement = $('.foo');JavaScript
const myElement = document.querySelector('.foo');
const myMultipleElements = document.querySelectorAll('.foo');jQuery
const foo = $(myElement).attr('foo');
$(myElement).attr('bar', foo);JavaScript
const foo = myElement.getAttribute('foo');
myElement.setAttribute('bar', foo);jQuery
$(myElement).children();JavaScript
myElement.children;jQuery
$(myElement).append(anotherElement);
$(myElement).prepend(anotherElement);
$(myElement).remove();JavaScript
myElement.appendChild(anotherElement);
myElement.insertBefore(anotherElement, myElement.firstChild);
myElement.remove();jQuery
$(myElement).addClass('foo');
$(myElement).removeClass('foo');
$(myElement).toggleClass('foo');JavaScript
myElement.classList.add('foo');
myElement.classList.remove('foo');
myElement.classList.toggle('foo');jQuery
$(myElement).text('lorem ispum');
$(myElement).html('<span>lorem ipsum</span>');JavaScript
myElement.textContent = 'lorem ipsum';
myElement.innerHTML = '<span>lorem ipsum</span>';jQuery
$(myElement).data('foo', 'bar');JavaScript
myElement.dataset.foo = 'bar';jQuery
$(myMultipleElements).each((i, x) => {/* use 'x' here */});JavaScript
Array.from(myMultipleElements).forEach((x, i) => {/* use 'x' here */});jQuery
$(myMultipleElements).filter('.some-class-here');JavaScript
[...myMultipleElements].filter(x => x.classList.contains('some-class-here'));jQuery
const x = $(myElement).find('.foo');
const y = $(myMultipleElements).find('.foo');JavaScript
const x = myElement.querySelectorAll('.foo');
const y = [...myMultipleElements].map(x => [...x.querySelectorAll('.foo')]).reduce((a, b) => [...a, ...b]);jQuery
$(myElement).on('click', myEventHandler);
$(myElement).off('click', myEventHandler);JavaScript
myElement.addEventListener('click', myEventHandler);
myElement.removeEventListener('click', myEventHandler);jQuery
$(myElement).parent();
$(myMultipleElements).parents('.foo'); // all parentsJavaScript
myElement.parentElement;
[...myMultipleElements].map(x => x.closest('.foo')); // all parentsjQuery
$(myElement).siblings();JavaScript
[...myElement.parentElement.children].filter(x => x !== myElement);jQuery
$(myElement).next();
$(myElement).prev();JavaScript
myElement.nextElementSibling;
myElement.previousElementSibling;jQuery
$(myElement).css({ background: 'red', color: 'white' });JavaScript
Object.assign(myElement.style, { background: 'red', color: 'white' });
// or
myElement.style.background = 'red';
myElement.style.color = 'white';jQuery
const value = $(myElement).val();
$(myElement).val('foo');JavaScript
const value = myElement.value;
myElement.value = 'foo';jQuery
$(myElement).hide();
$(myElement).show();JavaScript
myElement.style.display = 'none';
myElement.style.display = null;jQuery
var height = $(window).height();
var width = $(window).width(); JavaScript
var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;