Educational

Blog

  • How do you make an AJAX call in jQuery?

    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);

  • What is chaining in jQuery?

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

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

    Improves performance and readability.

  • How do you show and hide elements in jQuery?

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

  • Difference between .on() and .bind()?

    • .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!"); });

  • How do you select elements in jQuery?

    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>

  • window.onload?

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

  • What are the advantages of using jQuery?

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

  • Difference between JavaScript and jQuery?

    • JavaScript: A programming language.
    • jQuery: A library built with JavaScript to simplify tasks.
    // JavaScript
document.getElementById("box").style.display = "none";

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

  • What is jQuery?

    jQuery is a fast, lightweight JavaScript library that simplifies tasks like:

    • DOM manipulation
    • Event handling
    • Animations
    • AJAX calls

    It allows you to write less code to achieve more (e.g., $("#id").hide() instead of long JavaScript code).

  • Delay Effect

    <p id="delayText">Watch me hide and show with delay!</p>
<button id="delayBtn">Start</button>

<script>
$(document).ready(function(){
  $("#delayBtn").click(function(){

    $("#delayText").fadeOut(1000).delay(2000).fadeIn(1000);
      });
});
</script>

    .delay() pauses the animation chain.