jQuery methods in plain JavaScript

Mathias Lipowski

–

March 7, 2023

Life is already very complex, so let’s simplify your projects by removing all the jQuery code. Plain JavaScript provides the same functionalities and it does not require any additional frameworks. And it’s supported by most of the modern browsers out of the box. This is a list of replacements for your daily used jQuery methods.

$() or jQuery()

Return a collection of matched elements either found in the DOM based on passed argument(s) or created by passing an HTML string.

// jQuery implementation
var element = $(selector);
// Plain JavaScript
var element = document.querySelector(selector); // Single element
var elements = document.querySelectorAll(selector); // Multiple elements

.addClass()

Adds the specified class(es) to each element in the set of matched elements.

// jQuery implementation
element.addClass('text-bold');
// Plain JavaScript
element.classList.add('text-bold');

.attr()

Adds the specified class(es) to each element in the set of matched elements.

// jQuery implementation
element.attr(attribute, value);
// Plain JavaScript
element.setAttribute(attribute, value);

.css()

Set one or more CSS properties for the set of matched elements.

// jQuery implementation
element.css(property, value);
// Plain JavaScript
element.style[property] = value;

.each()

Iterate over a jQuery object, executing a function for each matched element.

// jQuery implementation
$.each(settings, function (index, element) {
    // ...
});
// Plain JavaScript
settings.forEach((element, index) => {
    // ...
});

.empty()

Remove all child nodes of the set of matched elements from the DOM.

// jQuery implementation
container.empty();
// Plain JavaScript
container.replaceChildren();

See https://stackoverflow.com/questions/3955229/remove-all-child-elements-of-a-dom-node-in-javascript/65413839#65413839

.extend()

Merge the contents of two or more objects together into the first object.

// jQuery implementation
const settings = $.extend(defaults, options)
// Plain JavaScript
const settings = {...defaults, ...options}

.hasClass()

Determine whether any of the matched elements are assigned the given class.

// jQuery implementation
if (element.hasClass('text-bold')) {
  // ...
}
// Plain JavaScript
if (element.classList.contains('text-bold')) {
  // ...
}

.hide()

Hide the matched elements.

// jQuery implementation
element.hide();
// Plain JavaScript
element.style.display = 'none';

.html()

Set the HTML contents of each element in the set of matched elements.

// jQuery implementation
element.html('<div>my html</div>');
// Plain JavaScript
element.style.innerHTML = '<div>my html</div>';

.map()

Translate all items in an array or object to new array of items.

// jQuery implementation
$.map(array, function (value, index) {});
// Plain JavaScript
array.map((value, index) => {});

.now()

Return a number representing the current time.

// jQuery implementation
$.now();
// Plain JavaScript
Date.now();

.removeClass()

Remove a single class or multiple classes from each element in the set of matched elements.

// jQuery implementation
element.removeClass('text-bold');
// Plain JavaScript
element.classList.remove('text-bold');

.show()

Display the matched elements.

// jQuery implementation
element.show();
// Plain JavaScript
element.style.display = 'block';

.text()

Set the content of each element in the set of matched elements to the specified text.

// jQuery implementation
element.text('my text');
// Plain JavaScript
element.textContent = 'my text';

.toggle()

Display or hide the matched elements.

// jQuery implementation
element.toggle();
// Plain JavaScript
element.style.display = element.style.display === 'none' ? 'block' : 'none';

.toggleClass()

Add or remove one or more classes from each element in the set of matched elements, depending on either the class’s presence or the value of the state argument.

// jQuery implementation
element.toggleClass('text-bold');
// Plain JavaScript
element.classList.toggle('text-bold');

.trigger()

Execute all handlers and behaviors attached to the matched elements for the given event type.

// jQuery implementation
$(document).trigger("myEvent");
$(".container").trigger("myEvent");

// Plain JavaScript
document.dispatchEvent(new Event("myEvent"));
document.querySelector(".container").dispatchEvent(new Event("myEvent"));

.val()

Get the current value of the first element in the set of matched elements.

// jQuery implementation
var val = element.val();
// Plain JavaScript
var val = element.value;

Photo by Jakub Dziubak on Unsplash