Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How do I shift from jQuery to core JavaScript?
JavaScript is a versatile programming language used to create interactive and dynamic web applications. While jQuery was once essential for simplifying JavaScript development, modern JavaScript (ES6+) now provides native methods that make jQuery less necessary.
jQuery is a lightweight JavaScript library that simplifies DOM manipulation, event handling, and AJAX operations. It became popular because it solved cross-browser compatibility issues and provided a simpler syntax for common tasks.
Why Developers are Moving from jQuery to Vanilla JavaScript
Modern JavaScript Features: ES6+ provides powerful built-in methods that eliminate the need for jQuery's utility functions.
Performance: Avoiding jQuery's 87KB library reduces bundle size and improves page load times.
Direct Browser APIs: Modern browsers support consistent APIs, making direct DOM manipulation more reliable.
Cross-browser Compatibility: Modern browsers have standardized support, reducing jQuery's original advantage.
CSS3 Animations: Native CSS animations perform better than jQuery animations as they run on the GPU.
Element Selection Comparison
jQuery's $() selector can be replaced with querySelector() and querySelectorAll():
<!DOCTYPE html>
<html>
<body>
<div class="select">First div</div>
<div class="select">Second div</div>
<script>
// jQuery approach
// $(".select");
// JavaScript - select first element
const firstElement = document.querySelector(".select");
console.log(firstElement.textContent);
// JavaScript - select all elements
const allElements = document.querySelectorAll(".select");
console.log("Total elements:", allElements.length);
</script>
</body>
</html>
First div Total elements: 2
Common Selector Equivalents
| Task | jQuery | JavaScript |
|---|---|---|
| Select HTML element | $("html") |
document.documentElement |
| Select body element | $("body") |
document.body |
| Select by class | $(".class-name") |
document.querySelector(".class-name") |
Class Manipulation
<!DOCTYPE html>
<html>
<head>
<style>
.highlight { background-color: yellow; }
.hidden { display: none; }
</style>
</head>
<body>
<p id="demo">Sample text</p>
<script>
const element = document.getElementById("demo");
// Add class
element.classList.add("highlight");
console.log("Added highlight class");
// Remove class
setTimeout(() => {
element.classList.remove("highlight");
console.log("Removed highlight class");
}, 1000);
// Toggle class
setTimeout(() => {
element.classList.toggle("hidden");
console.log("Toggled hidden class");
}, 2000);
// Check if class exists
console.log("Has hidden class:", element.classList.contains("hidden"));
</script>
</body>
</html>
Added highlight class Has hidden class: false Removed highlight class Toggled hidden class
Event Handling Comparison
| Operation | jQuery | JavaScript |
|---|---|---|
| Add class | $element.addClass("class-name") |
element.classList.add("class-name") |
| Remove class | $element.removeClass("class-name") |
element.classList.remove("class-name") |
| Toggle class | $element.toggleClass("class-name") |
element.classList.toggle("class-name") |
| Check class | $element.hasClass("class-name") |
element.classList.contains("class-name") |
Event Listeners
<!DOCTYPE html>
<html>
<body>
<button class="btn">Click me</button>
<script>
// jQuery approach:
// $(".btn").click(function(event) {
// console.log("Button clicked!");
// });
// JavaScript approach:
document.querySelector(".btn").addEventListener("click", (event) => {
console.log("Button clicked with JavaScript!");
console.log("Event type:", event.type);
});
</script>
</body>
</html>
CSS Styling
<!DOCTYPE html>
<html>
<body>
<div id="myDiv">Sample content</div>
<script>
const div = document.getElementById("myDiv");
// jQuery approach:
// $div.css({ padding: "15px", color: "blue" });
// JavaScript approach:
div.style.padding = "15px";
div.style.color = "blue";
div.style.border = "2px solid red";
console.log("Styling applied to div element");
</script>
</body>
</html>
Styling applied to div element
Conclusion
Transitioning from jQuery to vanilla JavaScript is straightforward with modern browser APIs. Native JavaScript provides better performance, smaller bundle sizes, and direct access to web APIs. While jQuery's syntax appears simpler, modern JavaScript offers equivalent functionality with improved efficiency.
255 Views
