JQuery is an external library which is used to help developers write less code in their script. It is another way of connecting to the DOM to make sites interactive. Below will outline some of the useful Jquery information, to find our more click on the links in the footer!

There are two ways to include Jquery within the code:
The first method is to download a local copy and have it as a file within your code.
The second method and more popular method is to link to a CDN within your script. The CDN is placed before you closing body tags. Your own personal JS file must be linked BELOW the CDN otherwise it will not work.
You can find the CDN on google or on the Jquery website.

The first bit of code written in Jquery will ALWAYS be the following and ALL Jquery code will be wrapped within it:

        $(document).ready(function(){
            ALL CUSTOM JQUERY GOES HERE!
        });
        

Jquery is called and represented by the '$'.
A basic Jquery syntax would be:

        $("selector").method;
        

Please note that double quotations are preferred when using Jquery.

Selectors:

Similarly to JS, we tell Jquery which elements we want to work on by using selectors, below are a few of the more common ones:

SYNTAX	WHAT IT SELECTS
$("*");	Every element on the page.
$("this");	Current element being operated on in a function.
$("p");	Selects all the tags of specified element
$(".class");	Class selector
$("#id");	ID selector
$("[type = 'text']");	Attribute selector. Selects any element with text applied to type attr.
$("p: first-of-type");	Selects first P tag.

JQuery Events

Events are what make the sites interactive. JQuery events are similar to the JS 'addEventListener' method but require less code.
Using the same example in the 'JS examples events' page, we will change the background color using Jquery code and compare the length of the code to the JS equivalent. The Jquery code for this is:

        $(document).ready(function(){
    $("#clkEx").click(function(){
        $("#clkEx").css("backgroundColor", "orange");
    });
});
        

The JS code for it was:

        let cEx = document.getElementById('clkEx');

let changeBack = () => {
    cEx.style.backgroundColor = 'orange';
}

cEx.addEventListener('click', changeBack);
        

As you can see Jquery requires only two lines of code (if you remove the document.ready line) and does not require any new variables to be made, as opposed to the JS code which requires a new variable to be declared and a new function to be made.
Some more popular JQuery events are:

SYNTAX	WHAT IT DOES
click()	Executes when element is clicked once.
hover()	Executes when mouse is hovered over element.
submit()	Executes when form is submitted.
scroll()	Executes when screen is scrolled by user
keydown()	Executes when a key is pressed on the keyboard

JQuery Effects

Effects are used hand-in-hand with events to allow animations on the page. We use the Jquery events to listen for the users actions, we then use the Jquery effects to add more animation to the page.
Below are some example of the most commonly used effects.

SYNTAX	WHAT IT DOES
toggle()	Switches the visibility of an element between show and hide.
fadeToggle()	Switches the visibility of an element and animates the opacity.
slideToggle()	Switches the visibility of an element using a sliding effect.
animate()	Performs custom animation effects on the CSS of an element.

The button below has a toggle effect applied to it, which toggles the display of the modal which appears. Below is all the css and Jquery code.

        .modal {
    display: hide;
    height: 200px;
    width: 200px;
    background-color: black;
    font-size: 20px;
    font-family: 'Roboto Mono', monospace;
    color: white;
    margin: auto;
}

$("#modalTrigger").click(function(){
        $(".modal").toggle();
    });
        

Click here!!