Topics

jQuery Syntax

A jQuery statement usually starts with the dollar sign ($) and then ends with a semicolon (;). The dollar sign($) is just an alias for jQuery. The example below will demonstrate the most basic statement of the jQuery.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery Syntax</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<script>
		$(document).ready(function(){
			// Some code to be executed...
			alert("Hello World!");
		});
	</script>
</head>
<body>
	<!--Body Contents will be inserted here-->
</body>
</html>

Try with example

The example above simply displays an alert message ‘Hello World!’ to the user.

Explanation

If you are completely new to the jQuery, you might think what that code was all about. OK, let's go through each of the parts of this script one by one.

The <script> element: As you already know, jQuery is just a JavaScript library, therefore the jQuery code can be placed inside the <script> element. But, if you decide to place it in an external JavaScript file, which is preferred, you just remove this part.
The $(document).ready(handler): This statement is referred to as a 'ready event’, while the ‘handler’ is a function that is passed to the ready() method to be executed safely once the document is ready to be manipulated (i.e when the DOM hierarchy has been fully constructed).

The ready() method in jQuery is basically used with an anonymous function. therefore, the example above can be written in a shorthand notation like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery Shorthand Syntax</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<script>
		$(function(){
			// Some code to be executed...
			alert("Hello World!");
		});
	</script>
</head>
<body>
	<!--Contents will be inserted here-->
</body>
</html>

Try with example

jQuery

Moreso, inside an event handler function the jQuery statement can be written to perform any action while following the basic syntax, like this: $(selector).action();

The $(selector) selects the HTML elements from the Document Object Model (DOM) tree so that they can be manipulated and the action() applies to action on the selected elements like changes to the CSS property value, or sets the element's contents, and so on. Let's look at this example that sets the paragraph text after the DOM is ready:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery Document Ready Demo</title>
    <link rel="stylesheet" type="text/css" href="/examples/css/style.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("p").text("Hello World!");
        });
    </script>
</head>
<body>
    <p>Not loaded yet.</p>
</body>
</html>

Try with example

From the example above, in the jQuery statement (in line no-10), p is a jQuery selector which selects all the paragraphs (i.e the <p> elements) in the document, then the text() method set the paragraph's text content to "Hello World!" text.

The paragraph text in the above example is automatically replaced if the document is ready. However, what if we want the user to perform an action before executing the jQuery code to replace the paragraph text. Check out this example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery Click Handler Demo</title>
    <link rel="stylesheet" type="text/css" href="/examples/css/style.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("p").text("Hello World!");
            });            
        });
    </script>
</head>
<body>
    <p>Not loaded yet.</p>
    <button type="button">Replace Text</button>
</body>
</html>

Try with example

From the example, the paragraph text is replaced only if a click event occurs on the "Replace Text" <button> and it simply means when a user clicks this button.

So far you have gotten some basic understanding of how the jQuery works, in the subsequent tutorial, you will learn about the terms we've discussed in this tutorial in detail.