jQuery in a Nutshell

JWHAT?!?! jQuery!

jQuery is the grandaddy of web frameworks.

TO me it feels like a a weird combination of metaprogramming and heavily dynamic languages like Smalltalk etc..

Whats jQuery good for?

• HTML document manipulation
• Event handling
• Animation
• Ajax interactions!!!!!

AJAX? AJAX!

What is AJAX?

AJAX (Asynchronous JavaScript and XML)

AJAX is a technique that allows web pages to retrieve or send data to a server asynchronously without reloading the entire page.

In modern days this is expected.. but back in the fun old days- the page would sit in your browser…
dead and lifeless..

the next click you did- would hit the server- do all the calculations there and then return the page..

Ajax makes things possible, like when you click on your email the page fetches the next email - and SHOWS IT TO YOU WITHOUT reloading the page!!!!

AMAZING ! Yes?

THIS IS THE FUTURE AND IT IS AWESOME!!!!!!!!!!!!!!

( props to
https://www.teeshirtpalace.com/products/funny-tinfoil-hat-cat-lover-cooling-performance-crew-t-shirt_fth5188992-a4282 for an epic t-shirt)

How AJAX Works

1. A user action triggers an AJAX request (e.g., clicking a button).
2. The browser sends an HTTP request to the server using JavaScript.
3. The server processes the request and sends back a response.
4. JavaScript updates the web page dynamically based on the server’s response.

Basic AJAX Example with jQuery

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

$.ajax({
    url: "https://api.example.com/data",
    type: "GET",
    success: function(response) {
        console.log(response);
    },
    error: function() {
        console.log("Error fetching data");
    }
});

Fetching Data and Updating the DOM

1
2
3
4
5

$("#loadData").click(function() {
    $.get("https://jsonplaceholder.typicode.com/posts/1", function(data) {
        $("#content").html("<h3>" + data.title + "</h3><p>" + data.body + "</p>");
    });
});

This example fetches a post from an API and updates a webpage dynamically without a full reload.

Why I love it and hate it at the same time:

This code can be mind numbing to figure out sometimes because it’s very async and very dynamic.
Alot of times, on a complex screen you might see ajax that is depending on some other ajax to create some DOM objects. The code you might be looking at might be referencing DOM objects that dont exist yet!

Why Use jQuery?

• Simplifies DOM manipulation
• Cross-browser compatibility
• Built-in animation and effects
• Easy Ajax integration
• Extensive plugin ecosystem

Getting Started with jQuery

To start using jQuery, include the jQuery library in your project. You can either download it or use a CDN.

1
2

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

You can ensure jQuery is loaded by wrapping your code in the $(document).ready() function:

1
2
3

$(document).ready(function() {
    console.log("jQuery is ready!");
});

Basic jQuery Selectors and Methods

jQuery has “selectors” for selecting and manipulating HTML elements:

1
2
3

$("p").hide(); // Hides all <p> elements
$("#myDiv").css("color", "red"); // Changes text color of element with ID 'myDiv'
$(".myClass").fadeOut(); // Fades out elements with class 'myClass'

Advanced jQuery Techniques

1. Event Handling

jQueryevent handling with .on() and .off():

1
2
3

$("#myButton").on("click", function() {
    alert("Button clicked!");
});

2. Chaining Methods

You can chain multiple jQuery methods together to not only make your friends think you are cool but enhance readability:

1

$("#myDiv").fadeOut(500).fadeIn(500).slideUp(500).slideDown(500);

3. Working with AJAX

Example jQuery request:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

$.ajax({
    url: "https://api.example.com/data",
    type: "GET",
    success: function(response) {
        console.log(response);
    },
    error: function() {
        console.log("Error fetching data");
    }
});

4. Manipulating the DOM Dynamically

The crazy thing is you are manipulating the DOM dynamically.

When I first learned about this- it shifted my head, since this was quite a bit different that other languages I have used..

Maybe the closest analogy I have now is WPF. in WPF we do a simliar kind of pattern - where we are playing with a graph of objects at runtime..

1
2

$("#myList").append("<li>New Item</li>"); // Adds new list item
$("#myList li:first").remove(); // Removes the first item in the list

5. Animations and Effects

jQuery has built-in effects like fadeIn(), fadeOut(), and slideToggle() etc

1
2
3
4
5

$("#box").animate({
    width: "300px",
    height: "300px",
    opacity: 0.5
}, 1000);