Accessing jQuery
There are two ways of including the jQuery library.
Local Copy
<head>
<script src="./jquery-3.7.1.min.js"></script>
</head>
Google CDN:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
Microsoft CDN:
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.7.1.min.js"></script>
</head>
Be sure to 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 embed 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()
NOTE: the following is NOT a comprehensive list of all selectors. This is just a sampling of the ones most commonly used.
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.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, opacity, 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);
We usually write it this way for readability:
$("#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");