by Bob Downs
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:
w3schools explains the parts:
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”.
The jQuery element selector selects elements based on the element name.
You can select all
<p> elements on a page like this:
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
A demonstration of the element Selector & click() Event Method can be found here.
Here's how to fade out a visible element on your web page. The full syntax, including options is as follows:
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
A demonstration of the fadeOut() Effect Method can be found here.