Category: Interview Questions

$.ajax({
  url: "wrong_url.json",
  method: "GET",
  error: function(xhr, status, error){
console.log("Error: " + error);
  }
});

• .attr() → Gets/sets HTML attributes.
• .prop() → Gets/sets DOM properties.

Example:

$("#check").attr("checked"); // may return "checked"
$("#check").prop("checked"); // returns true/false

if($("#box").is(":hidden")){
  console.log("Box is hidden");
}

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>