jQuery Tutorial

by Bob Downs

Use

Now that you know how to implement jQuery into your web page, let's dive in to how to use jQuery.

One of the biggest advantages of using jQuery versus Vanilla JS is the syntax. jQuery's syntax is designed for selecting HTML elements and performing actions on those elements.

As w3schools says (at https://www.w3schools.com/jquery/jquery_syntax.asp), jQuery's basic syntax is:

$(selector).action()

w3schools explains the parts:

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

Examples

Three examples will be used below to demonstrate jQuery's syntax and how to use jQuery. The three examples are “element Selector”, “click() Event Method”, and “fadeOut() Effect Method”.

element Selector

The jQuery element selector selects elements based on the element name.

You can select all <p> elements on a page like this:

$("p")

click() Event Method

The click() method connects an event handler function to its associated HTML element so that it's executed when the user clicks on said element. The following example tells the browser, “When the user clicks on a <p> element, hide that <p> element:”

$("p").click(function(){
    $(this).hide();
    });

A demonstration of the element Selector & click() Event Method can be found here.

fadeOut() Effect Method

Here's how to fade out a visible element on your web page. The full syntax, including options is as follows:

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

The optional speed parameter allows you to indicate whether the fade out should occur slowly, quickly, or within a certain amount of milliseconds. The available values for indicating this are “slow”, “fast”, or a number indicating how many milliseconds you want the fade out to take.

As w3schools indicates (at https://www.w3schools.com/jquery/jquery_fade.asp, under the “jQuery fadeOut() Method” heading), “the optional callback parameter is a function to be executed after the fading completes”.

A demonstration of the fadeOut() Effect Method can be found here.