Thursday, September 17, 2020

Essential Cheat Sheet: Convert jQuery to JavaScript

Essential Cheat Sheet: Convert jQuery to JavaScript

Even though jQuery is still a popular JavaScript library and has a place in web development, native web APIs have evolved a lot in recent years. As modern browsers support a wide range of JavaScript functionalities, we no longer need a third-party library to manipulate the DOM with relative ease. As a result, many frontend developers have decided to move from jQuery to JavaScript to decrease the number of dependencies and thus page load times.

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

jQuery vs. JavaScript

jQuery is a JavaScript library that helps web developers manipulate the document object model (DOM) to dynamically react to user actions and state changes. Its biggest advantage is that it lets you easily select any DOM element on the page and add user actions to it by using the “dot notation”, for instance:

Native JavaScript is more verbose, you can’t just add actions to any DOM element–first you need to pass it to a variable, then you can perform different actions on it. For instance, this is how the code above looks in JavaScript:

Even though JavaScript is more verbose, you don’t have to use a third-party library, as the DOM API (that you call with your JavaScript code) is built into your web browser. As a result, you’ll have one less dependency and your page will also load faster than with jQuery (except some edge cases). 

Now, let’s see the 20 most commonly used jQuery to JavaScript equivalents. 

1. Select Elements

jQuery:

The jQuery() function, or $() in short, is the global function in jQuery that you can use to select any element in the DOM.

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

JavaScript:

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

2. Select First Element

jQuery:

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

JavaScript:

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

3. Find Elements

jQuery:

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

JavaScript:

See code demo:

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

4. Select Children

jQuery:

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

JavaScript:

See test code: 

See more in the DOM API docs: .children property – remember that while the JavaScript version is a property, the jQuery version was a method with a parenthesis after it.

5. Select Parent

jQuery:

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

JavaScript:

See more in the DOM API docs: .parentNode property

6. Select Siblings

jQuery:

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

JavaScript:

See test demo:

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

7. Select Next Sibling

jQuery:

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

JavaScript:

See more in the DOM API docs: .nextElementSibling property

8. Select Previous Sibling

jQuery:

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

JavaScript:

See more in the DOM API docs: .previousElementSibling property

9. Add Class

jQuery:

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

JavaScript:

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

10. Remove Class

jQuery:

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

JavaScript:

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

11. Toggle Class

jQuery:

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

JavaScript:

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

12. Has Class

jQuery:

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

JavaScript:

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

13. Get Attribute

jQuery:

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

JavaScript:

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

14. Set Attribute

jQuery:

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:

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

15. Remove Attribute

jQuery:

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

JavaScript:

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

16. Get or Set HTML Content

jQuery:

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

JavaScript:

See more in the DOM API docs: .innerHTML property

17. Get or Set CSS Property

jQuery:

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

JavaScript:

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

18. Hide Element

jQuery:

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

JavaScript:

See more in the DOM API docs: .style property

19. Show Element

jQuery:

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

JavaScript:

See more in the DOM API docs: .style property

20. Add Event Listener

jQuery:

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

JavaScript:

See test code:

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

Next Steps

This jQuery to JavaScript cheat sheet includes the most important functionalities that you’ll need for building a website. By familiarizing yourself with these properties and methods, you can make the jump from jQuery to JavaScript. However, you’ll likely need to know more if you want to build more complex functionality.

There are two other resources I’d recommend to find the jQuery to JavaScript equivalent you need: the You Might Not Need jQuery website and Jack O’Connor’s jQuery-to-JavaScript repo on GitHub.

Even though I used the classic for loop to loop through querySelectorAll() matches, modern JavaScript provides you with other options, too — Chris Coyier shows some of them in this article about JavaScript loops.

Experimenting and creating your own code snippets can also help a lot if you want to confidently use native JavaScript and the DOM API in your everyday workflow.

Learn More JavaScript with Tuts+

If you’re just starting out with JavaScript these Tuts+ courses will put you in the right direction:


No comments:

Post a Comment