In this tutorial you will learn how to write the jQuery code.

Standard jQuery Syntax

A jQueryÂ syntaxÂ typically starts with the dollar sign ($) and ends with a semicolon (;).

In jQuery, the dollar sign ($) is just an alias for jQuery. Let’s consider the following example code which demonstrates the most basic statement of the jQuery.

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

The above example simply displays an alert message “Hello World!” to the user.

Explanation of code

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 â€” Since jQuery is just a JavaScript library, so the jQuery code can be placed inside theÂ <script>Â element. However, if you want to place it in an external JavaScript file, which is preferred, you just remove this part.
TheÂ $(document).ready(handler);Â â€” This statement is typically known as ready event. Where theÂ handlerÂ is basically a function that is passed to theÂ ready()method to be executed safely as soon as the document is ready to be manipulated i.e. when the DOM hierarchy has been fully constructed.

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

<script type="text/javascript">
    $(function(){
        // Some code to be executed...
        alert("Hello World!");
    });
</script>

Tip:You can use any jQuery syntax you like as both the syntax are equivalent. However, the document ready event is easier to understand when reading the code.

Further, inside an event handler function you can write the jQuery statements to perform any action following the basic syntax, like:Â $(selector).action();

Where, theÂ $(selector)Â basically selects the HTML elements from the DOM tree so that it can be manipulated and theÂ action()Â applies some action on the selected elements such as changes the CSS property value, or sets the element’s contents, etc. Let’s consider another example that sets the paragraph text after the DOM is ready:

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

In the jQuery statement of the example above (line no-10) the “p” is a jQuery selector which select all the paragraphs i.e. theÂ <p>Â elements in the document, later theÂ text()Â method set the paragraph’s text content to “Hello World!” text.

The paragraph text in the example above is replaced automatically when the document is ready. But what if we want the user to perform some action before executing the jQuery code to replace the paragraph text. Let’s consider one last example:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery Click Handler Demo</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript">
        $(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>

In the above example the paragraph text is replaced only when a click event is occur on the “Replace Text”Â <button>Â that simply means when a user click this button.

Now that you have a basic understanding of how the jQuery works, in the upcoming chapters you will learn about the terms we’ve discussed here in detail.

Note:You should place the jQuery code inside the document ready event so that your code executes when the document is ready to be worked on.