Author: Saim Khalid

Event delegation means attaching an event to a parent element so that future child elements also inherit it.

Example:

$(document).on("click", "button.dynamic", function(){
  alert("New button clicked!");
});

Useful when elements are added dynamically.

Use .stop() method.

$("#box").slideDown(5000);
$("#stopBtn").click(function(){
  $("#box").stop(); // stops animation
});

Answer:

$.ajax({
  url: "data.json",
  method: "GET",
  success: function(response){
console.log(response);
  }
});

Also simpler shortcuts:

• $("#div").load("file.txt");
• $.get("file.txt", callback);
• $.post("server.php", data, callback);

Chaining means calling multiple methods on the same element in one line.

$("#box").css("color", "red").slideUp(1000).slideDown(1000);

Improves performance and readability.

• $("#id").show(); → Show element
• $("#id").hide(); → Hide element
• $("#id").toggle(); → Toggle between show/hide

• .bind() → Older method for event binding (not recommended now).
• .on() → Modern, more powerful. Can bind multiple events and works with dynamically added elements.

Example:

// Old
$("#btn").bind("click", function(){ alert("Clicked!"); });

// New
$("#btn").on("click", function(){ alert("Clicked!"); });

Selectors in jQuery are similar to CSS selectors.

• $("#id") → Select element by ID
• $(".class") → Select by class
• $("p") → Select all <p> tags
• $("p:first") → Select first <p>

• $(document).ready() → Runs when DOM is ready (faster).
• window.onload → Runs when entire page including images & resources is loaded (slower).

• Less code, more functionality.
• Cross-browser support.
• Built-in effects and animations.
• Simplifies AJAX requests.
• Large plugin ecosystem.

• JavaScript: A programming language.
• jQuery: A library built with JavaScript to simplify tasks.

// JavaScript
document.getElementById("box").style.display = "none";

// jQuery
$("#box").hide();