The implications of jQuery

jQuery includes the following.

HTML/DOM manipulation CSS manipulation HTML event methods Effects and animations AJAX (Asynchronous Javascript and XML) Utilities

Jquery also has plugins for almoost any task.

jQuery syntax and how to use it

With jQuery you slect (query) HTML elements and perform “actions” on them.

Basic syntax is $(selector).action()

A $ symbol to define/access jQuery A (selector) to “query (or find)” HTML elements A jQuery action() to be performed on the element(s)

Examples: $(this).hide() - hides the current element

$(“p”).hide() - hides all <p> elements

$(“.test”).hide() - hides all elements with class=”test”

$(“#test”).hide() - hides the element with id=”test”

Popcorn hack

Write in one of the comments where the selector is.

$(document).ready(function(){     // 
    $("button").click(function(){ //
      $("p").hide();              //
    });                           //
  });                             //

The element Selector

$(“p”) The #id Selector $(“#test”) The .class Selector $(“.class”) The Document Ready Event

All jQuery methods begin inside a document ready event:

$(document).ready(function(){

    // jQuery methods go here...
  
  });

This is to prevent any jQuery code from running before the document is finished loading (is ready).

It is good practice to wait for the document to be fully loaded and ready before working with it. This also allows you to have your JavaScript code before the body of your document, in the head section.

Reason:

Trying to hide an element that is not created yet Trying to get the size of an image that is not loaded yet

$(function(){
    
    // An even quicker way to do it
    // jQuery methods go here...
  
  });

jQuery methods and event handling What are Events?

All the different visitors’ actions that a web page can respond to are called events Mouse Events Keyboard Events Form Events Document/Window Events click keypress submit load dblclick keydown change resize mouseenter keyup focus scroll mouseleave blur unload

Making requests with AJAX

AJAX, which stands for Asynchronous JavaScript and XML, enables web pages to update asynchronously more efficiently. It operates on a promise-based system, where a JavaScript Promise represents the eventual success or failure of an asynchronous request.

WHy use jQuery AJAX over a normal aync request or AJAX request?

Against a normal sun request AJAX jas a lot of advantages: Easier Error Handling: Promises are much easier to deal with than callbacks. If an error occurs in a promise, it will be passed down to the next catch() clause. Simpler API Chaining: If you want to wait for one operation to finish before starting another one you can simply use .then().

Normal async request:

getUserLocation(function(error, location) {
    if (error) {
        console.error('Error:', error);
    } else {
        getForecast(location, function(error, forecast) {
            if (error) {
                console.error('Error:', error);
            } else {
                console.log('Forecast:', forecast);
            }
        });
    }
});

Ajax requests wihtout any library

fetch('api/location')
.then(response => response.json())
.then(location => fetch('api/forecast/' + location))
.then(response => response.json())
.then(forecast => {
    console.log('Forecast:', forecast);
})
.catch(error => {
    console.error('Error:', error);
});

Ajax requests with jQuery

$.ajax({ url: 'api/location', method: 'GET', dataType: 'json' })
.then(function(location) {
    return $.ajax({ url: 'api/forecast/' + location, method: 'GET', dataType: 'json' });
})
.then(function(forecast) {
    console.log('Forecast:', forecast);
})
.catch(function(error) {
    console.error('Error:', error);
});