jQuery: Selectors, Effects, AJAX & UI Widgets

TAKEAWAYS:

• jQuery is a fast, lightweight JavaScript library that simplifies DOM manipulation, event handling, and AJAX calls using concise syntax.
• Selectors (e.g., $("p"), $("#id")) target elements like CSS, while effects (e.g., .slideUp(), .fadeIn()) animate them.
• AJAX in jQuery ($.ajax(), $.get()) enables dynamic data loading without page reloads (e.g., Daraz’s live order tracking).
• UI widgets (e.g., date pickers, dialogs) enhance interactivity (e.g., eSewa’s payment deadlines).
• jQuery vs. Vanilla JS: jQuery reduces boilerplate code (e.g., $("#btn").click() vs. document.getElementById("btn").addEventListener("click", ...)).
• Exam focus: Code snippets (e.g., hide/show divs, date pickers), selector types, and AJAX properties/methods.

1. What is jQuery?

jQuery is a fast, cross-browser JavaScript library designed to simplify:

• DOM manipulation (e.g., changing HTML/CSS dynamically).
• Event handling (e.g., clicks, keypresses).
• AJAX (asynchronous data fetching).
• Animations and effects (e.g., fade, slide).

Why Use jQuery?

Example: Without jQuery, hiding a <div> requires 5+ lines. With jQuery:

$("#myDiv").hide();  // Instant!

2. jQuery Selectors

Selectors target HTML elements using CSS-like syntax. Common types:

A. Basic Selectors

Example: Select all <li> items in an unordered list:

$("ul li").css("color", "red");  // Turns all list items red

B. Hierarchy Selectors

Real-World Use: Daraz’s product filters Daraz uses jQuery selectors to dynamically update product lists when users click filters (e.g., $(".filter-active").siblings().hide()).

3. jQuery Effects

Effects animate elements without Flash. Key methods:

A. Hide/Show Effects

flowchart LR
    A["Start"] --> B["$(\"#div\").show()"] --> C["Div appears"]
    C --> D["$(\"#div\").hide()"] --> E["Div disappears"]
    E --> F["$(\"#div\").toggle()"] -->|"If visible"| G["Div hides"]
    F -->|"If hidden"| H["Div appears"]

Example: Toggle a "Read More" section:

$("#readMore").click(function() {
    $("#hiddenText").slideToggle("slow");
});

B. Other Effects

Real-World Use: eSewa’s payment success page After a transaction, eSewa fades in a success message:

$(".success-message").fadeIn(500);

4. jQuery AJAX

AJAX (Asynchronous JavaScript and XML) fetches data without reloading the page.

A. $.ajax() Method

sequenceDiagram
    participant User
    participant jQuery
    participant Server
    User->>jQuery: $.ajax({url: "api/data", success: callback})
    jQuery->>Server: GET /api/data
    Server-->>jQuery: {data: "..."}
    jQuery->>User: callback(data)

Example: Load user data from an API:

$.ajax({
    url: "https://api.example.com/user",
    method: "GET",
    success: function(data) {
        $("#userName").text(data.name);
    },
    error: function() {
        alert("Error loading data!");
    }
});

B. Shorthand Methods

Real-World Use: Ncell’s balance check Ncell’s website uses $.get() to fetch balance without refreshing:

$.get("check_balance.php", {userId: 123}, function(data) {
    $("#balance").text("Rs. " + data.balance);
});

5. jQuery UI Widgets

jQuery UI provides pre-built interactive widgets (requires jquery-ui.js).

A. Datepicker

flowchart LR
    A["Input field"] --> B["$(\"#datepicker\").datepicker()]"]
    B --> C["Calendar popup appears"]
    C --> D["User selects date"]
    D --> E["Input field updates"]

Example: Add a datepicker to an input:

<input type="text" id="datepicker">
<script>
$(function() {
    $("#datepicker").datepicker();
});
</script>

Real-World Use: NTC’s ticket booking NTC’s website uses the datepicker for selecting travel dates:

$("#departureDate").datepicker({ minDate: "+1d" }); // Disable past dates

B. Dialog Box

$("#confirm").click(function() {
    $("#dialog").dialog({
        title: "Confirm Order",
        buttons: {
            "Yes": function() { $(this).dialog("close"); orderSubmit(); },
            "No": function() { $(this).dialog("close"); }
        }
    });
});

Real-World Use: Pathao’s order confirmation Pathao shows a dialog before finalizing a ride:

$("#confirmRide").dialog({
    modal: true,
    buttons: { "Confirm": confirmRide }
});

6. jQuery vs. Vanilla JavaScript

Why jQuery?

• Less code: 1 line vs. 5+ lines for DOM tasks.
• Cross-browser: Works on IE, Firefox, Chrome without fixes.
• Effects/AJAX: Built-in methods for animations and async calls.

7. Common Exam Questions & Answers

Q1: Differentiate jQuery from JavaScript.

Answer:

• JavaScript is a full-fledged programming language for web interactivity.
• jQuery is a library that simplifies JS tasks (e.g., DOM manipulation, AJAX) with shorter syntax.
• Example:

  // Vanilla JS
  document.getElementById("btn").addEventListener("click", function() {
      document.getElementById("content").style.display = "none";
  });
  
  // jQuery
  $("#btn").click(function() {
      $("#content").hide();
  });
  

Q2: Write jQuery code to hide/show a div.

Answer:

$("#toggleBtn").click(function() {
    $("#myDiv").slideToggle("fast");
});

Trace:

Q3: Explain $.ajax() properties.

Answer:

Example:

$.ajax({
    url: "save_order.php",
    method: "POST",
    data: {orderId: 123, status: "shipped"},
    success: function() { alert("Order updated!"); }
});

## In the Real World

1. eSewa (Payment Deadlines)

   • Idea Used: jQuery effects (fadeIn(), hide()).
   • How: After a payment, eSewa fades in a success message and hides the payment form:

     $(".payment-form").fadeOut(500, function() {
         $(".success-message").fadeIn(500);
     });
     

2. Daraz (Live Order Tracking)

   • Idea Used: jQuery AJAX ($.get()).
   • How: Daraz updates order status without refreshing:

     function checkOrder() {
         $.get("track_order.php", {orderId: 1001}, function(data) {
             $("#status").text(data.status);
         });
     }
     setInterval(checkOrder, 5000); // Check every 5 seconds
     

3. Ncell (Balance Check)

   • Idea Used: jQuery selectors and AJAX.
   • How: Ncell’s website loads balance dynamically:

     $("#checkBalance").click(function() {
         $.post("balance.php", {userId: 456}, function(data) {
             $("#balance").text("Rs. " + data.balance);
         });
     });
     

4. NTC (Ticket Booking Dates)

   • Idea Used: jQuery UI Datepicker.
   • How: Users select travel dates via a calendar popup:

     $("#departureDate").datepicker({
         minDate: "+1d", // Disable past dates
         dateFormat: "yy-mm-dd"
     });
     

## Exam Tip

1. Code Snippets: Always write complete, runnable jQuery code in exams (e.g., hide/show divs, date pickers).
2. Selector Types: Memorize basic (#id, .class), hierarchy (parent > child), and attribute ([type="text"]) selectors.
3. AJAX Properties: Know url, method, data, success, and error for $.ajax().
4. Real-World Tie-Ins: Relate examples to eSewa (effects), Daraz (AJAX), or NTC (datepicker).
5. jQuery vs. JS: Compare syntax length and cross-browser support.

## Practice Questions

1. Write jQuery code to:
   • Toggle the visibility of a <div> with ID content when a button is clicked.
   • Load data from api/users and display usernames in a <ul>.
2. Explain the difference between $("div p") and $("div > p").
3. How would you use jQuery UI’s dialog widget to confirm a form submission?
4. Trace the execution of $("#box").animate({left: "100px"}, 1000) step-by-step.

## Key Formulas/Shortcuts

## Common Mistakes to Avoid

• Forgetting $: Always prefix selectors with $ (e.g., $("#id"), not ("#id")).
• Incorrect Selectors: $("div.p") selects <div> with class p, not <p> inside <div> (use $("div p")).
• Missing Callbacks: In AJAX, omit success/error handlers to break functionality.
• Not Including jQuery UI: Widgets like datepicker require jquery-ui.js and CSS.
• Overusing jQuery: For complex apps, modern JS (e.g., fetch(), querySelector) may be preferred.