jQuery Tutorials
Categories: ,

Overview

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).

The 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()

Note

When using jQuery, single or double quotation marks are acceptable and work identically to one another. Choose whichever you prefer, and stay consistent. However, if you are writing a string to the page that contains either a double or single quote, you will need to either use the opposite set, or place a backslash prior to the quote.

$(‘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 is Ready

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.

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 document <head>
  • 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
If you like our content, and find it helpful, please consider making a small donation. Thank you!

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.