jQuery

jQuery is a commonly used JavaScript library that facilitates traversing the HTML document to manipulate elements.

However, JavaScript has matured and now has functions to traverse the DOM that did not exist in 2006. Also CSS as well has developed to be used for animations which once required jQuery. Although jQuery is less necessary today, it is still very much in use and the popular frontend framework Bootstrap (now in version 4) relies on it. (Bootsrap 5 may do away with jQuery.) Many js libraries still depend on jQuery.

jQuery

jQuery was introduced in the mid-2000s to deal with cross-browser conflicts, to encapsulate commonly used javascript functions and to make programming simpler.

<script>
  function displayMessage()
  {
    alert("Hello World!");
  }
</script>
  

<script>
  $(document).ready(function()
  {
    alert('Hello World!');
  });
</script>

jQuery

<script>
  $(document).ready(function()
  {
    alert('Hello World!');
  });
</script>

Each command is made up of four parts: the jQuery function (or its alias - $), selectors, actions, and parameters.
use a selector to select one or more elements on the web page.
choose an action to be applied to each element selected.
specify some parameters to tell jQuery how to apply the chosen action.

jQuery

//Basic syntax is: $(selector).action()
$(document).ready(function( { alert("Hello World!"); });

The selector is document; the action is ready; and the parameter is a function that runs some code (above it's alert).

• A $ sign to define/access jQuery
• A (selector) to "query (or find)" HTML elements
• A jQuery action() to be performed on the element(s)

jQuery

Getting an element by id, JS vs jQuery:
JS:

document.getElementById("status");

document.querySelector("#status");

$("#status");

$("#content p:first");

jQuery Selectors on W3Schools.

jQuery

Get Started with jQuery:

• Wired jQuery Intro
• W3Schools jQuery Section
• Learn jQuery

jQuery

It takes time to learn JavaScript, and it may be a while before you can write scripts on your own. But not to worry. If you do a web search for what you need (for example, “jQuery image carousel” or “jQuery accordion list”), there is a very good chance you will find lots of scripts that people have created and shared, complete with documentation on how to use them. Because jQuery uses a selector syntax very similar to CSS, it makes it easier to customize jQuery scripts for use with your own markup.

- Jennifer Niederst Robbins

jQuery

Whether to use jQuery today or not? There are many detractors and others that still recognize it's value. The reality is that many sites still depend on it. It is easy to use and allows for rapid prototyping and it functions across browsers. Here's a useful article Using jQuery in 2019

jQuery & Video

• Full Screen Video using CSS (autoplay is of course frowned upon)
• Full Screen jQuery plugin: Vide
• Full Screen YouTube: "Digital Inspiration" post
• Full Screen YouTube: VideoJS
• plyr.js - a media player
• mozilla: Video Player Styling

jQuery & Other JS Libraries

• Search for "top jquery plugins" and countless tools come up
• Swipebox.js
• Galleria
• Lightbox for Bootstrap
• Buzz Audio Library

jQuery & Animation

Scroll-based Animatoin: ScrollReveal; AOS

The Guardian, Graphic Story used Skrollr. Unfortunately, developers move on, the web changes...

JS API: IntersectionObserver "used to understand the visibility and position of DOM elements ('targets') relative to a containing element or to the top-level viewport ('root')." Here is a good overview: Javascript Intersection Observer API Explained in Detail. JS is a living language...