The jQuery syntax is designed for selecting HTML elements and then performing some action on the selected element(s) once the document has loaded (usually).
Basic Syntax
The basic syntax is: $(selector).action()
- The $ sign defines that jQuery is to be used
- A (selector) is used to target the HTML element(s)
- A jQuery action() is specified to be performed on the selected element(s)
The following uses an element selector to target all paragraphs. It will “hide” from view all HTML paragraphs on the page.
$('p').hide()
The following will “hide” from view all HTML paragraphs and HTML div elements on the page.
Multiple selectors can be used in one jQuery statement by including all of them in the one set of quotation marks and separating them with commas.
$('p, div').hide()
$('p').html("Johnny's World");
or
$('p').html('Johnny/'s World');
There are an abundance of actions that can be used in jQuery. The full lists of each type of action can be found here along with their intended use and syntax:
The Document Ready Event
The document ready event occurs when the DOM (document object model) has been loaded and is ready for scripting.
In almost all cases, you would want your jQuery code to run ONLY after the full document page has finished loading. To do this, we use the following and place all our code between lines 1 and 5 so that the code only runs when the DOM is ready.
$(document).ready(function() {
// all code goes here
}); // end document load function
If you have a case where you need some jQuery to run even if the document has not finished loading, or even before loading the document, you would not use the document ready event.
We’d like to acknowledge that we learned a great deal of our coding from W3Schools and TutorialsPoint, borrowing heavily from their teaching process and excellent code examples. We highly recommend both sites to deepen your experience, and further your coding journey. We’re just hitting the basics here at 1SMARTchicken.
Why 1SMARTchicken?
See More →
Thanks for your support!
jQuery Books
All are affiliate links. Thank you for your support!
jQUERY NOTES:
- To use jQuery on your site, it must first be downloaded from the official jQuery site and linked to in your document
head, or linked to via a CDN in your documenthead - It is generally good practice to place your jQuery code/function inside the document load function so that the action takes place ONLY after the document has finished loading
- When using jQuery, single or double quotation marks are acceptable and work identically to one another; choose whichever you prefer, and stay consistent
Feedback
If you see an error on the page or the code itself is incorrect or incomplete, or just plain wrong, please let us know. We’re always learning. NOTE: we do not sell your information and will not send you spam emails.
