jQuery Prep

Learning jQuery 101

Basic Questions

1. What is jQuery?

   • jQuery is a fast, small, and feature-rich JavaScript library. It simplifies things like HTML document traversal and manipulation, event handling, and animation.

2. How do you include jQuery in your project?

   • You can include jQuery by adding a <script> tag in your HTML, either linking to a CDN (Content Delivery Network) or a local file:

     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
     

3. How do you select elements in jQuery?

   • You can select elements using CSS-style selectors:

     $("p") // Selects all <p> elements
     $("#id") // Selects an element with a specific id
     $(".class") // Selects elements with a specific class
     

4. How do you handle events in jQuery?

   • Use methods like .click(), .on(), or .hover() to bind events:

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

5. How do you manipulate the DOM with jQuery?

   • Use methods like .html(), .text(), .append(), and .remove():

     $("#element").html("New content");
     

Intermediate Questions

1. Explain the difference between .on() and .bind() in jQuery.

   • .on() is more flexible and recommended for handling events, allowing delegation and handling events for dynamically added elements. .bind() is deprecated but was used for binding events to elements.

2. What is event delegation in jQuery?

   • Event delegation is a technique where you attach a single event handler to a parent element instead of individual child elements. This is useful for dynamically added elements:

     $("#parent").on("click", ".child", function() {
       alert("Child clicked!");
     });
     

3. How can you perform animations with jQuery?

   • Use methods like .fadeIn(), .fadeOut(), .slideUp(), and .slideDown():

     $("#element").fadeIn(1000); // Fades in the element over 1 second
     

4. What are jQuery's utility functions?

   • Functions like $.each(), $.extend(), and $.ajax() are utilities provided by jQuery:

     $.each(array, function(index, value) {
       console.log(index, value);
     });
     

5. Explain the concept of "chaining" in jQuery.

   • Chaining allows multiple jQuery methods to be called, one after another, on the same elements:

     $("#element").css("color", "red").slideUp(2000).slideDown(2000);
     

Advanced Questions

1. How does jQuery handle asynchronous operations?

   • jQuery provides the .ajax() method for asynchronous requests, supporting various settings like url, type, data, and success callbacks:

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

2. What are jQuery plugins, and how do you create one?

   • jQuery plugins extend jQuery's functionality. A basic plugin is created by defining a function on jQuery's prototype:

     (function($) {
       $.fn.myPlugin = function() {
         return this.each(function() {
           // Plugin code here
         });
       };
     })(jQuery);
     

3. What is the purpose of $.Deferred() and how is it used?

   • $.Deferred() is used for managing asynchronous operations, providing a way to handle success, failure, and progress of async tasks:

     var deferred = $.Deferred();
     deferred.done(function() {
       console.log("Completed!");
     });
     deferred.resolve();
     

4. Explain how jQuery's $.when() function works.

   • $.when() is used to handle multiple deferred objects, ensuring that all of them are completed before executing a callback:

     $.when($.ajax("url1"), $.ajax("url2")).done(function(response1, response2) {
       console.log("Both requests complete");
     });
     

5. How does jQuery handle browser compatibility issues?

   • jQuery abstracts away many cross-browser inconsistencies and provides a unified API to handle different browsers' quirks, allowing developers to write code that works consistently across various browsers.