Introduction to jQuery

jQuery is a JavaScript library. It makes it easy to write JavaScript routines using the built-in functions and modules in the jQuery library.

There are two ways of including the jQuery library.

Download the jQuery library from jQuery.com. Have the jQuery in the same directory as your html and css files.
Put a link in your file to a Content Delivery Network (CDN) like Google or Microsoft.

Local Copy

<head> 

<script src="./jquery-3.3.1.min.js"></script> 

</head>

Google CDN:

<head> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 

</head>

Microsoft CDN:

<head> 

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script> 

</head>

Add the jQuery library link before your other .js files.

<script src="my_jquery_functions.js"></script>

Wait for the document to fully load before working with it. To make sure that happens always insert jQuery methods inside the Document Ready Event:

$(document).ready (function () {
  // some jQuery method
});

Syntax
The jQuery library consists of methods where you select an HTML element and then perform an action on it. To call a jQuery method, the general syntax is

$(selector).action()

Selectors

$("*")	Selects all elements
$("p")	Selects all elements with that name
$("#id")	Selects only that element having that unique id
$(".class")	Selects all elements having that class
$(this)	Selects the current HTML element
$("[href]")	Selects all elements with an href attribute

Selectors by Relationship

$("p:first")	The first p element
$("p:last")	The last p element
$("tr:even")	All even tr elements
$("tr:odd")	All odd tr elements
$("p:first-child")	All p elements that are the first child of their parent
$("p:last-child")	All p elements that are the last child of their parent
$("div > p")	All p elements that are a direct child of a div element
$("div p")	All p elements that are descendants of a div element
$("h2 + div")	All div elements that are adjacent siblings of h2 elements
$("ul ~ p")	All p elements that are siblings of ul elements

jQuery Methods
Once you have selected an element or elements in the HTML document, you would like to apply a method to it. The general syntax for calling a method is the same - use the selector to get the element(s), the dot, the method name, and any parameters within parentheses. Here are some common methods:

val()	Get the value of a text box or other form control
val (value)	Set the value of a text box or other form control
text ()	Get the text of an element
text (value)	Set the text of an element
next ([type])	Get the next sibling of an element or the next sibling of a specified type if the parameter is coded
submit()	Submit the selected form
focus ()	Move the focus to the selected form control or link
append()	Inserts content at the end of the selected element as a child element
prepend()	Inserts content at the beginning of the selected element as a child element
before()	Adds content before the selected element as a sibling element
after()	Adds content after the selected element as a sibling element
remove()	Removes the selected element (and its child elements)
empty()	Removes the child elements from the selected element

jQuery Events
You use event methods to attach event handlers to events. First you select the element that will initiate the event like a button that will be clicked. Then you code the name of the event method that represents the event that you want to use. Lastly, you code a function that will be the event handler for the event within parentheses.

Common Mouse Events: click, dblclick, mouseenter, mouseleave, mouseout, mouseover, hover
Common Keyboard Events: keypress, keydown, keyup
Common Form Events: submit, change, focus, blur
Common Document Events: ready, load, unload, resize, scroll

jQuery Effects

Hide and Show
You can show, hide or toggle between showing and hiding HTML elements. The general syntax is

$(selector).hide (speed, callback);

$(selector).show (speed, callback);

$(selector).toggle (speed, callback);

The optional speed parameter specifies the speed at which the HTML element is shown or hidden. The options are fast, slow, and speed in milliseconds. The optional function callback is called after the hide, show, toggle functions have been executed.

Fading
You can fade HTML elements in and out of visibility. The syntax is

$(selector).fadeIn (speed, callback);

$(selector).fadeOut (speed, callback);

$(selector).fadeToggle (speed, callback);

$(selector).fadeTo (speed, callback);

The optional speed parameter specifies the speed at which the HTML element fades. The options are fast, slow, and speed in milliseconds. The optional function callback is called after the fadeIn, fadeOut, fadeToggle, fadeTo functions have been executed.

Sliding
You can slide HTML elements up or down. The syntax is:

$(selector).slideDown (speed, callback);

$(selector).slideUp (speed, callback);

$(selector).slideToggle (speed, callback);

The optional speed parameter specifies the speed at which the HTML element slides. The options are fast, slow, and speed in milliseconds. The optional function callback is called after the slideDown, slideUp, slideToggle functions have been executed.

Animation
You can create custom animations with jQuery. The syntax is:

$(selector).animate ({params}, speed, callback);

The params parameter is required. It is a CSS property that is animated. The optional speed parameter specifies the speed at which the animation takes place. The options are fast, slow, and speed in milliseconds. The optional function callback is called after the animate function has executed. Multiple CSS properties can be animated at the same time. All property names must be camel cased when used with the animate() method. You will have to write paddingLeft instead of padding-left. Color animation is not included in the core jQuery library. jQuery uses a queue functionality with animations. If multiple animations are called one after another then jQuery will create a queue with all these method calls and then run the animations one by one.

Stop Function
The jQuery stop() function will stop all animations or effects before they have finished.

$(selector).stop (stopAll, goToEnd);

The optional stopAll parameter specifies whether the animation queue will be cleared or not. The default is only the current animation will be stopped. The optional parameter goToEnd whether or not to complete the current animation immediately.

Chaining
With chaining you can run multiple methods, one after the other, on the same element. The advantage of chaining is that the browser does not have to locate the element multiple times. To chain an action, you simply append it to the previous action.

$("#myElement").css("color", "blue")
  .slideDown (3000)
  .slideUp (3000);

CSS
You can use jQuery to return the value of a CSS property or set the value of a CSS property.
To get the value of a CSS property:

$("p").css("background-color");

To set the value of a CSS property:

$("p").css("background-color", "blue");

You can add a CSS class to a selected element

$("p").addClass("some_class");

You can remove a CSS class from a selected element

$("p").removeClass("some_class");