jQuery Syntax

A typical jQuery statement begins with a dollar symbol ($) and concludes with a semicolon (;). The dollar symbol ($) is simply an alias for jQuery in jQuery. Consider the following sample code, which displays the simplest basic jQuery statement.

Code Explanation

If you're new to jQuery, you might be wondering what that code was all about. OK, let's go over each section of this script one by one.

• The <script> element: Because jQuery is only a JavaScript library, the jQuery code may be inserted within the <script> element. If you wish to put it in an external JavaScript file, which is preferable, simply remove this section.
• The $(document).ready(handler): This remark is sometimes referred to as a ready event. Where the handler is essentially a function that is supplied to the ready() method to be securely performed after the document is ready to be modified, i.e. when the DOM hierarchy has been fully created.

The jQuery ready() method is usually used in conjunction with an anonymous function. As a result, the above example may also be represented in shorthand notation as follows:

Additionally, within an event handler function, you may construct jQuery statements to do any action using the fundamental syntax, such as: $(selector).action();

Where the $(selector) picks HTML elements from the DOM tree so that they may be changed, and the action() performs some action on the selected elements such as changing the CSS property value, setting the element's contents, and so on. 

The p in the jQuery statement above is a jQuery selector that selects all the paragraphs, i.e. the <h1> elements in the document, and the text() function subsequently sets the headings text content to "Hello World!" text.

When the document is finished, the heading text in the preceding example is automatically color. But what if we want the user to do anything before the jQuery code to alter the heading text is executed? Consider this final example:

The paragraph text in the above example is altered only when a click event occurs on the "Color Change" <button>, which simply implies when a user clicks this button. Now that you have a fundamental idea of how jQuery works, you will learn about the terminology we've discussed in detail in the next chapters.