JavaScript vs jQuery

⚡ JavaScript vs jQuery

JavaScript is a programming language, while jQuery is a JavaScript library that makes JavaScript easier to use. Let's see the difference!


// Pure JavaScript
document.getElementById("demo").innerHTML = "Hello World!";

// jQuery
$("#demo").html("Hello World!");

Output:

Hello World!

Key Differences

🟨

JavaScript

Native programming language

document.querySelector('.btn')

💙

jQuery

JavaScript library (simpler syntax)

$('.btn')

⚡

Performance

JavaScript is faster (no library overhead)

// Faster execution
element.style.color = 'red';

📝

Syntax

jQuery has shorter, easier syntax

// Shorter code
$('.btn').hide();

🔹 Selecting Elements

Here's how you select elements in both JavaScript and jQuery:

// JavaScript - Select by ID
let element = document.getElementById("myId");

// JavaScript - Select by class
let elements = document.getElementsByClassName("myClass");

// JavaScript - Modern selector
let element = document.querySelector("#myId");
let elements = document.querySelectorAll(".myClass");

// jQuery - Select by ID
let element = $("#myId");

// jQuery - Select by class
let elements = $(".myClass");

Both methods select the same elements:

Element with ID

Element with class

🔹 Changing Content

Modifying element content in JavaScript vs jQuery:

// JavaScript
document.getElementById("demo").innerHTML = "New content";
document.getElementById("demo").textContent = "Text only";

// jQuery
$("#demo").html("New content");
$("#demo").text("Text only");

Output:

New content

🔹 Event Handling

Adding click events in both approaches:

// JavaScript
document.getElementById("btn").addEventListener("click", function() {
    alert("Button clicked!");
});

// jQuery
$("#btn").click(function() {
    alert("Button clicked!");
});

Try it:

🔹 When to Use Which?

Use JavaScript when:

Performance matters: Building fast, lightweight applications
Modern browsers: Using ES6+ features
Learning: Want to understand how things work
Small projects: Don't need extra library weight

Use jQuery when:

Quick development: Need to build something fast
Older browsers: Need cross-browser compatibility
DOM manipulation: Lots of element selection and changes
Beginner friendly: Easier syntax to learn

🔹 Common Tasks Comparison

Here are common tasks in both JavaScript and jQuery:

🔸 Selecting Elements

// JavaScript
document.getElementById('myId')
document.querySelector('.myClass')
document.querySelectorAll('p')

// jQuery
$('#myId')
$('.myClass')  
$('p')

🔸 Adding Event Listeners

// JavaScript
document.getElementById('btn').addEventListener('click', function() {
    console.log('Clicked!');
});

// jQuery
$('#btn').click(function() {
    console.log('Clicked!');
});

🔸 Changing Content

// JavaScript
document.getElementById('text').innerHTML = 'New content';

// jQuery
$('#text').html('New content');