🧠 Mastering jQuery: DOM Manipulation & Event Handling

🏗️ Part 1: DOM Manipulation

DOM (Document Object Model) manipulation means changing the content, structure, or style of web pages using jQuery.

---

🔹 1. html(): Get or set HTML content

$("#box").html("<b>Hello</b>");

✅ Use Case: You want to show a formatted message inside a div.

🧸 Real-life Example:

<div id="messageBox"></div>

$("#messageBox").html("<h3>🎉 You have successfully registered!</h3>");

🧠 Displays a heading with bold formatting inside the message box.

---

🔹 2. text(): Get or set plain text

$("#title").text("Hello World");

✅ Use Case: You want to display text without any HTML tags.

🧸 Real-life Example:

<h2 id="title"></h2>

$("#title").text("Thank you for visiting!");

🧠 Sets plain text as heading content (no formatting applied).

---

🔹 3. val(): Get or set the value of form fields

$("#name").val("John Doe");

✅ Use Case: Prefill a form or get user input.

🧸 Real-life Example:

<input type="text" id="name">

$("#name").val("Amit");

🧠 Automatically fills the input field with "Amit".

---

🔹 4. css(): Get or set CSS styles

$(".btn").css("background-color", "blue");

✅ Use Case: Change appearance dynamically.

🧸 Real-life Example:

<button class="btn">Submit</button>

$(".btn").css("font-size", "18px");

🧠 Changes button text size to 18px.

---

🔹 5. append(): Add content inside an element at the end

$("#list").append("<li>New Item</li>");

✅ Use Case: Add new items to a list dynamically.

🧸 Real-life Example:

<ul id="list"><li>Item 1</li></ul>

$("#list").append("<li>Item 2</li>");

🧠 Adds "Item 2" to the end of the list.

---

🔹 6. prepend(): Add content inside an element at the beginning

$("#list").prepend("<li>First Item</li>");

✅ Use Case: Add high-priority items at the top.

🧸 Real-life Example:

<ul id="tasks"></ul>

$("#tasks").prepend("<li>🛠 Urgent Task</li>");

🧠 Adds "Urgent Task" to the top of the task list.

---

🔹 7. before(): Add content before an element

$("#box").before("<p>Above the box</p>");

✅ Use Case: Insert labels or instructions above an input.

🧸 Real-life Example:

<input type="text" id="username">

$("#username").before("<label>Enter Username:</label>");

🧠 Adds a label above the input box.

---

🔹 8. after(): Add content after an element

$("#box").after("<p>Below the box</p>");

✅ Use Case: Add extra info after a field.

🧸 Real-life Example:

<input type="email" id="email">

$("#email").after("<small>We'll never share your email.</small>");

🧠 Adds help text under the email field.

---

🖱️ Part 2: Event Handling

Event handling means making your website react to user actions like clicking, typing, hovering, etc.

---

🔸 1. click(): When user clicks an element

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

🧸 Real-life Example:

<button id="btn">Submit</button>

$("#btn").click(function(){
  $("#btn").text("Submitted!");
});

🧠 Changes button text after it's clicked.

---

🔸 2. hover(): Mouse enters and leaves an element

$("#card").hover(function(){
  $(this).css("background", "#eee");
});

🧸 Real-life Example:

<div id="card">Hover over me</div>

$("#card").hover(
  function(){ $(this).css("background-color", "lightblue"); },
  function(){ $(this).css("background-color", "white"); }
);

🧠 Changes background when hovering in and out.

---

🔸 3. keypress(): When user types in a field

$("#input").keypress(function(){
  console.log("Key pressed!");
});

🧸 Real-life Example:

<input type="text" id="input">

$("#input").keypress(function(){
  $("#msg").text("You are typing...");
});

🧠 Displays a message while the user is typing.

---

🔸 4. focus(): When user clicks into an input

$("#input").focus(function(){
  $(this).css("border", "2px solid green");
});

🧸 Real-life Example:

<input type="text" id="email">

javascriptCopyEdit$("#email").focus(function(){
  $(this).css("background-color", "#ffffcc");
});

🧠 Highlights the field when the user focuses on it.

---

🔸 5. blur(): When user clicks outside an input

$("#input").blur(function(){
  $(this).css("border", "1px solid gray");
});

🧸 Real-life Example:

<input type="text" id="email">

javascriptCopyEdit$("#email").blur(function(){
  $("#msg").text("Field left!");
});

🧠 Shows message when user exits the field.

---

🔸 6. on(): Bind event dynamically

javascriptCopyEdit$("#box").on("click", function(){
  alert("Box clicked");
});

✅ Use when elements are created after page load or you want to attach multiple events.

🧸 Real-life Example:

javascriptCopyEdit$(".btn").on("click", function(){
  $(this).text("Clicked");
});

🧠 Binds click to all buttons using .btn class.

---

🔸 7. off(): Remove bound event

javascriptCopyEdit$("#btn").off("click");

✅ Use this to disable functionality on certain conditions.

🧸 Real-life Example:

javascriptCopyEdit$("#disableBtn").click(function(){
  $("#submitBtn").off("click");
});

🧠 Stops the submit button from working when you click "Disable".

---

🎯 Full Real-Life Example: Interactive Feedback Form

💻 HTML:

<h2>Feedback Form</h2>
<input type="text" id="userName" placeholder="Your Name">
<textarea id="userFeedback" placeholder="Your Feedback"></textarea>
<button id="sendBtn">Send Feedback</button>
<p id="thankYouMsg" style="display:none;"></p>

✨ jQuery:

javascriptCopyEdit$("#sendBtn").click(function(){
  var name = $("#userName").val();
  var feedback = $("#userFeedback").val();

  if(name && feedback){
    $("#thankYouMsg").text("Thank you, " + name + "! We received your feedback.");
    $("#thankYouMsg").css("color", "green").show();
    $("#sendBtn").off("click"); // disable after one use
  } else {
    $("#thankYouMsg").text("Please fill in all fields.");
    $("#thankYouMsg").css("color", "red").show();
  }
});

🧠 What it does:

• Gets values from input and textarea,

• Shows a thank you message,

• Prevents further submissions with .off().

---

Let me know if you want the next part on Effects and Animations or AJAX!