Although there are many similarities between jQuery and JavaScript, several differences also exist in their syntax and functionality. For that, first, understand what the jQuery code is trying to do. Then, utilize the alternative methods or attributes of vanilla JavaScript.
This blog will discuss the conversion of the jQuery code to JavaScript.
How to Convert jQuery Code to JavaScript?
For converting jQuery code to JavaScript, it is essential to understand what the code is doing and what jQuery methods are being used. Then, use the alternative methods in JavaScript, such as the “$()” used in jQuery for selecting elements while in JavaScript, for selecting elements “document.querySelector()” or “querySelectorAll()” methods are used.
Let’s understand the conversion process with the help of an example.
Example
Here, we have a jQuery code that changes the text color and shows an explanatory text on a button click. For that, the HTML document contains two buttons, text, and an empty <p> tag where the new text will be shown on the button click:
<p class="text">JavaScript Tutorial</p>
<button id="button">Click here</button>
<button id="button">Click here</button>
<p id="message"></p>
</div>
While working with jQuery, it is mandatory to add jQuery library in the <head> tag of the HTML document:
In the <script> tag, the given code is used:
$('#myDiv').find('button:first').click(function() {
$('.text').css('color', 'blue');
$('#message').text('I am the first button that will set the color of the text to blue');
});
$('#button').next().click(function() {
$('.text').css('color', 'green');
$('#message').text('I am the second button that will set the color of the text to green');
});
});
In the above code
- First, use the “ready()” function that will execute when the DOM is fully loaded. It is frequently used to make sure that the DOM is fully loaded before the execution of any JavaScript code that interacts with or manipulates the DOM elements.
- Then, access the div element using its assigned id “$(‘#myDiv’)” and call the “find()” method to find the first button, attach a click event on it using the “click()” method where the color of the text will be changed and a text message will be shown below the button on the button click.
- Then, for finding the other button in the div, we have used the jQuery “next()” method and applied the same functionality.
As you can see that the output shows a text message on the button click that will explain the work and at the same time, the color of the existing text is changed:
Now, here, we will convert the above jQuery code into JavaScript without changing output. You can use different approaches for conversion, but, we will use the JavaScript methods as an alternative to the jQuery methods.
First, we will access the button using the “document.querySelector()” method:
Then, attach a “click” event with the help of the “addEventListener()” method. For changing the color of the text, in JavaScript, use the “style” attribute while in jQuery we use the “css()” method. Similarly, for text, use the “innerHTML” property in JavaScript while the “text()” method is utilized in the jQuery:
document.querySelector('.text').style.color = "blue";
document.querySelector('#message').innerHTML='I am the first button that will set the color of the text to blue';
});
For the second button, we will use the “nextElementSibling” attribute in JavaScript, while in jQuery we have used the “next()” method:
document.querySelector('.text').style.color = "green";
document.querySelector('#message').textContent='I am the second button that will set the color of the text to green';
});
Output
jQuery Alternate Methods or Attributes in JavaScript
In the given table, you can see the alternate methods and attributes of the jQuery:
| jQuery | JavaScript | |
|---|---|---|
| Execute a Function When the DOM Is Ready | $(document).ready(function() { // code… }); |
document.addEventListenerM( “DOMContentLoaded”, function() { // code… }); |
| For selecting the entire HTML | $(“html”) | document.querySelector(selector) |
| For selecting the entire HTML body | $(“body”) | document.body |
| Add a class to an HTML element | $element.addClass(class-name) | element.classList.add(class-name) |
| Remove a class to an HTML element | $element.removeClass(class-name) | element.classList.remove(class-name) |
| Toggle a class to an HTML element | $element.toggleClass(class-name) | element.classList.toggle(class-name) |
| Check if an HTML element contains a class | $element.hasClass(class-name) | element.classList.has(class-name) |
| Click event | $(“.button”).click( function(event) { }); |
document.querySelector(“.button”) .addEventListener(“click”, (event) => { }); |
| Add CSS Styling | $div.css({ color: “yellow” }) | div.style.color= “yellow” |
| Selecting all Elements | $(‘….’) | document.querySelectorAll(); |
| Select First Element | .first(); | document.querySelector(); |
| Find Elements | .find(); | document.querySelector(); or document.querySelectorAll(); method |
| Selecting Child element | .children(); | ParentNode.children; |
| Selecting Parent element | .parent(); | Node.parentNode; |
| Select Siblings | .siblings(); | Node.parentNode.querySelectorAll( “:not(#elem)”); |
| Select Next Sibling | .next(); | NonDocumentTypeChildNode. nextElementSibling; |
| Select Previous Sibling | .prev(); | NonDocumentTypeChildNode. previousElementSibling; |
| Find the Closest Matching Element | .closest(); | Element.closest(); |
| Get Attribute | .attr(‘attr-name’); | Element.getAttribute(‘attr-name’); |
| Append a New Child Element | .append(‘html-string’); | Node.appendChild(); |
| Remove All Child Nodes | .empty(); | Element.replaceChildren(); |
| Get or Set HTML Content | .html(); | Element.innerHTML; |
| Hide Element | .hide(); | ElementCSSInlineStyle.style.display = ‘none’; |
| Show Element | .show(); | ElementCSSInlineStyle.style.display = ”; |
| Add Event Listener | .on(); | EventTarget.addEventListener( ‘event’, functionName); |
| Remove Event Listener | .off(); | EventTarget.removeEventListener( ‘event’, functionName); |
| Loop Through an Object, Array, or Collection | .each(); | NodeList.prototype.forEach(); |
That’s all about converting jQuery code to JavaScript.
Conclusion
There is no easy way for the conversion of jQuery code to JavaScript. You can simply know the differences between both and use the Vanilla JavaScript built-in methods that are equal to jQuery methods. This blog discussed the conversion of the jQuery code to JavaScript.
