JS-vs-jQuery

To help people, here’s a jQuery to JavaScript cheat sheet that includes the JavaScript equivalents to the most frequently used jQuery functionality.

Convert JavaScript to jQuery

JavaScript: is an object orient programming language designed to make web development easier and more attractive. jQuery: is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript.

How to convert JavaScript to jQuery ?

Selection: In jQuery, to select any element, we simply use the$()sign, but in JavaScript, to select any element, we can usequerySelector()orquerySelectorAll().

Program

// jQuery to select all instances
// of class "select"
$(".select");
  
// JavaScript to select only the
// first instance of class "select"
document.querySelector(".select");
  
// To select all the instances
// of class "select"  
document.querySelectorAll(".select");

Some other examples of selectors

Select Elements:

• jQuery:

// Syntax
jQuery();
$(); // Shortcut

// Example
// Selects all the links among the descendants of the 'my-class' class.
jQuery('.my-class a');
$('.my-class a');
$("html") // To select the entire html.
$("body") // To select the entire html body.

See more in the jQuery API docs:jQuery() global function

• JavaScript:

// Syntax
document.querySelectorAll();
// Example
document.querySelector(selector)
document.querySelector('.my-class a')
document.body

See more in the DOM API docs: .querySelectorAll() method.

Select First Element

• jQuery:

// Syntax
.first();

// Example
$('.my-class a').first();

See more in the jQuery API docs: first() method.

• JavaScript:

// Syntax
document.querySelector();

// Example
document.querySelector('.my-class a');

See more in the DOM API docs: .querySelector() method.

Find Elements

• jQuery:

// Syntax
.find();

// Example
// Find all the span tags that are descendants of links within the 'my-class' class.
// Note: searches for all descendants not just for children.
$('.my-class a').find('span');
$('.my-class a').find('span').css('color', 'red');

See more in the jQuery API docs: .find() method.

• JavaScript:

// Syntax
// To find the first element (also if there's only one)
document.querySelector();
 
// To find all elements
document.querySelectorAll();

// Example
// At first querySelectorAll() returns a NodeList, so we have to loop through it to find all the span tags we want.
// For the sake of testing, I made the selected elements red, you can find the 'style.color' property below in this cheat sheet.

// finds all '.my-class a'
let nodes = document.querySelectorAll('.my-class a');
 
// loops through all '.my-class a'
for (let i = 0; i < nodes.length; i++) {
     
    // checks if the individual '.my-class a' element has a 
    // 'span' descendant to avoid 'undefined' error
    if (nodes[i].querySelector('span')) {
         
      // colors span tags that are desdendants of '.my-class a'
      nodes[i].querySelector('span').style.color = 'red';
   }
}

See more in the DOM API docs: .querySelector() method, .querySelectorAll() method.

Select Children

• jQuery:

// Syntax
.children();
.children('selector');

// Example
// Finds all the children of all '.my-class a' elements on the age
// Finds all the 'span' elements that are the children of any '.my-class a' element on the page
// Note: searches only for children (first-level of descendants)
$('.my-class a').children();
$('.my-class a').children('span');
$('.my-class a').children('span').css('color', 'blue'); // for testing

See more in the jQuery API docs: .children() method.

• JavaScript:

// Syntax
parentNode.children;

// Example
// 2nd example of the jQuery version above, plus makes the selected span tags blue for the sake of easy testing.
// for 1st example, only leave out the if check at the end (we need this because the JS version is not a method but a property, so we need to check which children are 'span')

// selects all the elements with 'my-class a' on the page
let items = document.querySelectorAll('.my-class a');
 
// loops through all the elements with '.my-class a'
for (let i = 0; i < items.length; i++) {
     
        // finds the children of the current '.my-class a' element
        let kids = items[i].children;
         
        // loops through the children of the current '.my-class a' element
        for (let j = 0; j < kids.length; j++) {
             
            // checks if the child element is a span tag
            if (kids[j].tagName == 'SPAN') {
         
                  kids[j].style.color = 'blue';
       
            }
        }
}

See more in the DOM API docs: .children property

Select Parent

• jQuery:

// Syntax
.parent();

// Example
// Selects the parent elements of ALL elements with 'my-class a' on the page.
  
$('.my-class a');

See more in the jQuery API docs: .parent() method

• JavaScript:

/* Syntax */
Node.parentNode;

// Example
// Selects the parent of the FIRST element with 'my-class a' on the page (for the sake of less repetition)
// For looping through all '.my-class a' elements, use the looping solution and querySelectorAll() from the two examples above.
 
let item = document.querySelector('.my-class a');
item.parentNode;

See more in the DOM API docs: .parentNode property.

Select Siblings

• jQuery:

// Syntax
.siblings();

// Example
// Selects the siblings of ALL elements with the 'find-siblings' class on the page.

$('.find-siblings').siblings();

See more in the jQuery API docs: .siblings() method.

• JavaScript:

// Syntax
Node.parentNode.querySelectorAll(":not(#elem)");

// Example
// Selects the siblings of the FIRST element with the 'find-siblings' class.
// For looping through all 'find-siblings' elements, see examples #3 and #4 the ':scope' pseudoclass is necessary for preventing the child elements of 'item' from being selected (otherwise querySelectorAll() searches through all descendants of 'item', with ':scope >' it loops through just the first level).
let item = document.querySelector('.find-siblings');
let siblings = item.parentNode.querySelectorAll(':scope > :not(.find-siblings)');

See more in the DOM API docs: .parentNode property, .querySelectorAll() method, :scope pseudo-class

Select Next Sibling

• jQuery:

//Syntax
.next();

// Example
// Selects the next siblings of all elements with 'my-class a' on the page.
$('.my-class a').next();

See more in the jQuery API docs: .next() method.

• JavaScript:

// Syntax
nonDocumentTypeChildNode.nextElementSibling;

// Example
// For declaring the 'item' variable by selecting elements with 'my-class a' on the page, see examples #3, #4, #5.
item.nextElementSibling;

See more in the DOM API docs: .nextElementSibling property.

Select Previous Sibling

• jQuery:

// Syntax
.prev();

// Example
// Selects the previous siblings of all elements with 'my-class a' on the page.
$('.my-class a').prev();

See more in the jQuery API docs: .prev() method.

• JavaScript:

// Syntax
nonDocumentTypeChildNode.previousElementSibling;

// Example
// For declaring the 'item' variable by selecting elements with 'my-class a' on the page, see examples examples #3, #4, #5.
item.previousElementSibling;

See more in the DOM API docs: .previousElementSibling property.

Add Class

• jQuery:

// Syntax
addClass();

// Example
// Adds the 'second-class' class to every 'my-class' element.
$('.my-class').addClass('second-class');

See more in the jQuery API docs: .addClass() method.

• JavaScript:

// Syntax
// Example
// For declaring the 'item' variable by selecting elements with 'my-class' on the page, see examples examples #3, #4, #5.
item.classList.add('second-class');

See more in the DOM API docs: .classList property and .add() method

Remove Class

• jQuery:

//Syntax
.removeClass();

// Example
// Removes the 'second-class' class from every 'my-class' element.
// Removes 'second-class', then add 'third-class' to every 'my-class' element.
$('.my-class').removeClass('second-class');
$('.my-class').removeClass('second-class').addClass('third-class');

See more in the jQuery API docs: .removeClass() method.

• JavaScript:

// Syntax
Element.classList.remove();

// Example
// For declaring the 'item' variable by selecting elements with 'my-class' on the page, see examples examples #3, #4, #5.
  
item.classList.remove('second-class');
 
// To use it together with add(), you need two separate statements.
item.classList.remove('second-class');
item.classList.add('third-class');

See more in the DOM API docs: .classList property, .remove() method.

Toggle Class

• jQuery:

// Syntax
.toggleClass();

// Example
// Adds the 'active' class to elements with 'my-class' if they don' have it remove it if they have it.
$('.my-class').toggleClass('active');

See more in the jQuery API docs: .toggleClass() method.

• JavaScript:

// Syntax
Element.classList.toggle();

// Example 
// For declaring the 'item' variable, see examples #3, #4, #5.
item.classList.toggle('active');

See more in the DOM API docs: .classList property, .toggle() method.

Has Class

• jQuery:

// Syntax
.hasClass();

// Example
// Checks if any element with 'my-class' has the 'active' class.
// Returns true or false
// If there's at least one element with 'active' it's true, otherwise false.
$('.my-class').hasClass('active');

See more in the jQuery API docs: .hasClass() method.

• JavaScript:

// Syntax
element.classList.contains();

// Example 
// Similar to the jQuery version, this one also checks if any element in the whole classList has the 'active' class
// If at least one element has 'active', it's true, otherwise false.
// For declaring the 'item' variable, see examples #3, #4, #5.
item.classList.contains('active');

See more in the DOM API docs: .classList property, .contains() method.

Get Attribute

• jQuery:

// Syntax
.attr('attr-name');

// Example
// Returns the value of the href property of the FIRST occurrence of an element with 'my-class'
$('.my-class').attr('href');

See more in the jQuery API docs: .attr() method.

• JavaScript:

/* Syntax */
Element.getAttribute('attr-name');

// Example
// For declaring the 'item' variable, see examples #3, #4, #5.
 item.getAttribute('href');

See more in the DOM API docs: .getAttribute() method.

Set Attribute

• jQuery:

// Syntax
.attr('attr-name', value);

// Example
// Sets the value of the href property for ALL contact links that have the 'contact-link' class
$('.contact-link').attr('href', 'contact.html');

See more in jQuery API docs: .attr() method (you need to use the same .attr() method as for getting an attribute value, but with two parameters instead of one)

• JavaScript:

// Syntax
Element.setAttribute();

// Example
// For declaring the 'item' variable, see examples #3, #4, #5.
item.setAttribute('href', 'contact.html');

See more in the DOM API docs: .setAttribute() method.

Remove Attribute

• jQuery:

// Syntax
.removeAttr('attr-name');
// Example
// Removes 'target' attributes from contact links.
$('.contact-link').removeAttr('target');

See more in the jQuery API docs: .removeAttr() method.

• JavaScript:

// Syntax
Element.removeAttribute();

// Example
// For declaring the 'item' variable, see examples #3, #4, #5.
 item.removeAttribute('target');

See more in the DOM API docs: .removeAttribute() method.

Append a New Child Element

• jQuery:

//Syntax
.append('html-string');

// Example
// Appends an extra list element to the end of every ordered list on the page.
$("ol").append("<li>");

See more in the jQuery API docs: .append() method.

• JavaScript:

// Syntax
Node.appendChild();
// Example
// For declaring the 'ol' variable, see examples #3, #4, #5.
ol.appendChild(document.createElement("li"));

See more in the DOM API docs: .appendChild() method and .createElement() method.

Prepend a New Child Element

• jQuery:

// Syntax
  
.prepend('html-string');

// Example
// Prepends an extra list element to the beginning of every ordered list on the page.
$("ol").prepend("<li>");

See more in the jQuery API docs: .prepend() method.

• JavaScript:

// Syntax
  
Node.insertBefore();

// Example 
// For declaring the 'ol' variable, see examples #3, #4, #5.
ol.insertBefore(document.createElement("li"), ol.firstChild);

See more in the DOM API docs: .insertBefore() method, .createElement() method and firstChild property.

Get or Set HTML Content

• jQuery:

// Syntax
.html();
.html('html-string');

// Example
// Gets the HTML content of the FIRST element that matches 'my-class'.
// Sets/resets the HTML content of EACH element that matches 'my-class'.
$('.my-class').html();
$('.my-class').html('<em>Hello</em>');

See more in the jQuery API docs: .html() method.

• JavaScript:

// Syntax
Element.innerHTML;
// Example 
// For declaring the 'item' variable, see examples #3, #4, #5.
item.innerHTML; // gets the value.
item.innerHTML = '<em>Hello</em>'; // sets the value.

See more in the DOM API docs: .innerHTML property.

Get or Set CSS Property

• jQuery:

// Syntax
.css('property-name');
.css('property-name', value);

// Example
// Gets the 'color' value of the FIRST element that has 'my-class'.
// Sets the 'color' value to 'white' for EVERY element that has 'my-class'.
$('.my-class').css('color');
$('.my-class').css('color', 'white');

See more in the jQuery API docs: .css() method.

• JavaScript:

// Syntax
ElementCSSInlineStyle.style.{propertyName};

// Example 
// For declaring the 'item' variable, see examples #3, #4, #5.
item.style.color; // getting value
item.style.color = 'white'; // setting value

See more in the DOM API docs: .style property and CSS Properties Reference (for the JavaScript names of CSS properties)

Get or Set Text Content of an Element and All of Its Descendants

• jQuery:

// Syntax
.text();
.text('text');

// Example
// Gets the text content of the FIRST element (and all of its descendants) that matches 'my-class'.
// Sets/resets the text content of EACH element that matches 'my-class'.
$('.my-class').text();
$('.my-class').text('<em>Hello</em>');

See more in the jQuery API docs: .text() method.

• JavaScript:

// Syntax
Element.textContent;

// Example
// For declaring the 'item' variable, see examples #3, #4, #5.
item.textContent; // gets the value
item.textContent = '<em>Hello</em>'; // sets the value

See more in the DOM API docs: .textContent property.

Get or Set Input Values

• jQuery:

// Syntax
.val();
.val(val);

// Example
// Gets the value of the input with the 'name' name.
// Sets/resets the value of the input with the 'name' name.
$('input[name=name]').val();
$('input[name=name]').val('Marilyn Monroe');

See more in the jQuery API docs: .val() method.

• JavaScript:

// Syntax
HTMLInputElement.value;

// Example
// For declaring the 'input' variable, see examples #3, #4, #5.
input.value; // gets the value
input.value = 'Marilyn Monroe'; // sets the value

See more in the DOM API docs: .value property (in the list of ''Properties that apply to any type of input element that is not hidden")

Hide Element

• jQuery:

// Syntax
.hide();

// Example
// Hides all elements with 'my-class'.
$('.my-class').hide();

See more in the jQuery API docs: .hide() method.

• JavaScript:

// Syntax
ElementCSSInlineStyle.style.display = 'none';

// Example
// For declaring the 'item' variable, see examples #3, #4, #5.
item.style.display = 'none';

See more in the DOM API docs: .style property.

Show Element

• jQuery:

// Syntax
.show();

// Example
// Displays all elements with 'my-class'.
$('.my-class').show()

See more in the jQuery API docs: .show() method.

• JavaScript:

// Syntax
ElementCSSInlineStyle.style.display = '';

// Example
// For declaring the 'item' variable, see examples #3, #4, #5.
item.style.display = ''; // resets default.
item.style.display = 'block'; // sets display as block.
item.style.display = 'flex'; // sets display as flex.

See more in the DOM API docs: .style property.

Add Event Listener

• jQuery:

// Syntax
.on();

// Example
// Adds or removes the 'active' class to/from all elements with '.submenu' when #toggle is clicked.
$('#toggle').on('click', function(){
    $('.submenu').toggleClass('active');
});

See more in the jQuery API docs: .on() method

• JavaScript:

// Syntax
EventTarget.addEventListener('event', functionName);

// Example  
// The code below only selects the FIRST element with the 'submenu' class.
// To select all submenus, use the 'for' loop in // Example #3 and #4.
let toggle = document.querySelector("#toggle");
let submenu = document.querySelector(".submenu");
 
toggle.addEventListener('click', function() {
   submenu.classList.toggle('active'); 
});

See more in the DOM API docs: .addEventListener() method and DOM Event Reference.

Remove Event Listener

• jQuery:

// Syntax
.off();

// Example
// Removes the listed event handler when #toggle is clicked.
$('#toggle').off('click', function(){
    $('.submenu').toggleClass('active');
});

See more in the jQuery API docs: .off() method.

• JavaScript:

// Syntax
EventTarget.removeEventListener('event', functionName);

// Example
// The code below only selects the FIRST element with the 'submenu' class.
// To select all submenus, use the 'for' loop in Example #3 and #4.
let toggle = document.querySelector("#toggle");
let submenu = document.querySelector(".submenu");
  
toggle.removeEventListener('click', function() {
   submenu.classList.toggle('active'); 
});

See more in the DOM API docs: .removeEventListener() method and DOM Event Reference.

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change. Please make sure to update tests as appropriate.

License

MIT