A jQuery statement usually begins with the dollar sign ($) and ends with a semicolon (;).
In jQuery, the dollar sign ($) is simply a shorthand for jQuery itself. Here's an example code snippet that illustrates the most basic form of a jQuery statement.
<script>
$(document).ready(function(){
// Some code to be executed...
alert("Hello World!");
});
</script>The example above simply shows an alert message "Hello World!" to the user.
If you're new to jQuery, you might be wondering about the purpose of that code. Let's break down each part of this script step by step.
<script> element — Since jQuery is essentially a JavaScript library, jQuery code can be placed inside the <script> element. However, if you prefer, you can place it in an external JavaScript file, which is often recommended.$(document).ready(handler); — This statement is commonly known as the ready event. Here, the handler is a function passed to the ready() method to be executed safely as soon as the document is fully loaded and ready to be manipulated, meaning when the DOM hierarchy has been completely constructed.The jQuery ready() method is typically used with an anonymous function. Therefore, the example above can also be written in shorthand like this:
<script>
$(function(){
// Some code to be executed...
alert("Hello World!");
});
</script>Tip: You can use either syntax, as both are equivalent. However, the document ready event syntax is generally easier to understand when reading the code.
Furthermore, inside an event handler function, you can write jQuery statements to perform actions following the basic syntax, like: $(selector).action();
Here, $(selector) selects HTML elements from the DOM tree for manipulation, while action() applies an action to the selected elements, such as changing CSS property values or setting the element's contents. Let's look at another example that sets the paragraph text after the DOM has finished loading:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Document Ready Demo</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("p").text("Hello World!");
});
</script>
</head>
<body>
<p>Not loaded yet.</p>
</body>
</html>In the jQuery statement in the example above (line no-10), p is a jQuery selector that targets all paragraphs, i.e., <p> elements, in the document. The text() method then sets the text content of these paragraphs to "Hello World!".
In the example, the paragraph text is updated automatically when the document is ready. However, if we want the user to perform an action before executing the jQuery code to change the paragraph text, let's consider one final example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Click Handler Demo</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-3.5.1.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>In the example above, the paragraph text is replaced only when a click event occurs on the "Replace Text" <button>. This means the text is changed only when a user clicks this button.
Now that you have a basic understanding of how jQuery works, in the upcoming chapters you will learn more about the concepts we've discussed here in detail.
Note: It's important to place your jQuery code inside the document ready event to ensure it executes only when the document is fully loaded and ready for manipulation.