🧠 Introduction to jQuery & jQuery Selectors 🔍

🧠 Introduction to jQuery

💡 What is jQuery?

jQuery is a fast, small, and powerful JavaScript library. It makes things like HTML document traversal, event handling, animation, and AJAX much easier with just a few lines of code.

Think of jQuery as a shortcut to writing JavaScript. Instead of writing 10 lines of JavaScript, you can often do the same thing in just 1 or 2 lines using jQuery!

---

🎯 Advantages of Using jQuery

• ✅ Easy to learn and use.

• ✅ Reduces the amount of JavaScript code.

• ✅ Cross-browser compatibility (works in all major browsers).

• ✅ Simplifies AJAX calls.

• ✅ Built-in animation and effects.

---

🔧 jQuery Syntax

javascriptCopyEdit$(selector).action()

• $: This is how you start writing jQuery.

• selector: Selects the HTML element(s).

• action(): What you want to do (like hide, show, change text, etc).

🧸 Example:

javascriptCopyEdit$("#title").hide();

This hides the element with id="title".

---

🔍 jQuery Selectors

Selectors are used to select and manipulate HTML elements. Let’s go through the most common ones with real-life examples.

---

🔷 1. ID Selector (#id)

Used to select an element by its ID.

Syntax: $("#elementID")

✅ Real-life Example 1:

htmlCopyEdit<h1 id="mainHeading">Welcome!</h1>

javascriptCopyEdit$("#mainHeading").css("color", "blue");

🧠 Changes the text color of the heading to blue.

✅ Real-life Example 2:

htmlCopyEdit<button id="submitBtn">Submit</button>

javascriptCopyEdit$("#submitBtn").hide();

🧠 Hides the Submit button when some condition is met.

---

🔶 2. Class Selector (.class)

Used to select all elements with a specific class.

Syntax: $(".className")

✅ Real-life Example 1:

htmlCopyEdit<p class="info">This is important info.</p>
<p class="info">Read this carefully.</p>

javascriptCopyEdit$(".info").css("font-weight", "bold");

🧠 Makes all .info paragraphs bold.

✅ Real-life Example 2:

htmlCopyEdit<button class="btn">Save</button>
<button class="btn">Cancel</button>

javascriptCopyEdit$(".btn").addClass("active");

🧠 Adds an "active" style to all buttons.

---

🟢 3. Element Selector (div, p, h1, etc.)

Used to select all elements of a specific type.

Syntax: $("tagname")

✅ Real-life Example 1:

htmlCopyEdit<p>Paragraph one</p>
<p>Paragraph two</p>

javascriptCopyEdit$("p").css("color", "green");

🧠 Changes the color of all <p> elements to green.

✅ Real-life Example 2:

htmlCopyEdit<div>Box 1</div>
<div>Box 2</div>

javascriptCopyEdit$("div").slideUp();

🧠 Slides up (hides with animation) all divs.

---

🟡 4. Attribute Selector ([attribute="value"])

Used to select elements with a specific attribute.

Syntax: $("[attribute='value']")

✅ Real-life Example 1:

htmlCopyEdit<input type="text" placeholder="Enter name">
<input type="password">

javascriptCopyEdit$("input[type='text']").val("John Doe");

🧠 Automatically fills in the name field with "John Doe".

✅ Real-life Example 2:

htmlCopyEdit<input type="checkbox" name="subscribe">
<input type="radio" name="gender">

javascriptCopyEdit$("input[type='checkbox']").prop("checked", true);

🧠 Checks the checkbox automatically.

---

🧩 Complete Real-Life Example:

🎯 Scenario:

Let’s say you are building a registration form. When a user clicks the "Register" button:

• You want to highlight the input fields,

• Hide the button after clicking,

• And show a success message.

💻 HTML:

htmlCopyEdit<h2 id="formTitle">Register Now</h2>
<input type="text" class="inputField" placeholder="Enter your name">
<input type="email" class="inputField" placeholder="Enter your email">
<button id="registerBtn">Register</button>
<p id="message" style="display:none;">🎉 You are registered!</p>

✨ jQuery:

javascriptCopyEdit$("#registerBtn").click(function(){
  $(".inputField").css("border", "2px solid green");
  $("#registerBtn").hide();
  $("#message").show();
});

🧠 What it does:

• When you click the Register button,

• It adds a green border to all input fields,

• Hides the button,

• And shows a hidden success message.