Documentation

Introduction

JQuery is a JavaScript Library. It is not a programming language. It can....
Make working with the DOM easier
Make animations easier
Make event handling easier
Make AJAX really simplier, and more..

Download jQuery

Download from www.jquery.com/download. When downloading, check that the version you are going to use works for all browsers. The development one is better for dev for debugging, but use live for production as it's faster.

Using jQuery in a script

In a script, define as any normal JavaScript script
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
You can find this by looking for "jquery cdn" in google. Click on the type required amd you will then get a screen with the script to copy to the clipboard.

Simple script

If you wanted a message to be displayed when the web page was loaded, then this small code snippet would do this.
$(document).ready(function(){
alert("jquery loaded");
});

jQuery selectors

Selectors get data from the html page. It uses the same techniques as the CSS and the DOM methods for GetElementById, GetElementByClass etc...
i.e. For a html tag, use $("p") and this will select the <p> tag
For an id, use $("#defaulthead") and this will select the elements for id
And for a Class, use$(".className") and this will select the elements for class.

jQuery statements and the $ sign

This is a shortcut for the DOM elements. It allows you to get the elements from the DOM and store them in an array. This makes changing the properties of CSS or HTML easy.
The jquery elements are wrapped in an array and the jquery methods can be used with these objects. To use the javascript methods, you need to unwrap them using the [] array number.
i.e.
JavaScript, var heading = document.getElementById("#itemTable");
JavaScript, console.log(heading.innerHtml);
JQuery, var heading = $("#itemTable")[0];
JQuery, console.log(heading.innerHtml);
-- or --
JQuery, var heading = $("#itemTable");
JQuery, heading.css({color:red;});

jQuery filters

Filters....

jQuery and the DOM