Buzz
Refer to the following article by Mytour to learn about the basic syntax of jQuery. Additionally, readers can check out other jQuery lessons available on Mytour to learn more about what jQuery is.
Basic syntax of jQuery
1. What is jQuery?
jQuery is a JavaScript library designed to make developing website functionalities easier, faster, and more feature-rich. Instead of writing JavaScript code from scratch, you can use jQuery to efficiently create and manage elements on your website. jQuery provides various modules, including:
- Ajax: Used to handle Ajax requests and responses, enabling website interaction with the server without page reloads.
2. Basic Syntax of jQuery
The jQuery command typically begins with the symbol ($) and ends with a semicolon (;). In jQuery, the symbol ($) is simply an alias for jQuery.
Let's examine the following example code, which illustrates the most basic jQuery statement.
Example: in the following example, we illustrate the simplest command in jQuery:
The returned result will display a warning to the user with the message Hello Mytour!
Explanation of the code in the above example
In the above example:
- The script element: Since jQuery is just a JavaScript library, the jQuery code can be placed inside the script element. However, if you want to put the jQuery code in an external JavaScript file, you just need to delete this part.
- $(document).ready(handler); This command is understood as the document ready event. Here, handler is a function passed to the ready() method to execute safely as soon as the document's DOM hierarchy is fully built.
The ready() method in jQuery is often used with anonymous functions. So in the example above, we can write it in a more concise form as below:
Tip: We can use any syntax because both syntaxes are equivalent. However, using the document ready event when reading the code will be easier.
In event handling functions, additional jQuery statements can be written to execute any actions, such as $(selector).action();
Where $(selector) selects HTML elements from the DOM tree for manipulation, and action() applies various actions to the selected elements, such as changing CSS attribute values or setting element content, etc.
Example: The following example illustrates how to set text content after the DOM is ready:
The output result returned will look like the following:
In the jQuery command in the example above (line 10), p is the jQuery selector used to select all text passages, meaning p elements in the document, then the text() method sets the text content of the passage to 'Hello Mytour'.
The text passage in the above example is automatically replaced when the document is ready. Refer to the following example to see what happens if we ask users to perform specific actions before executing the jQuery code to replace the text passage:
The output result returned is as follows:
In the example above, the text passage is only replaced when the user clicks the 'Replace text' button.
Note: It's advisable to place jQuery code inside the document ready event to ensure it executes when the document is ready for manipulation.
This tutorial by Mytour provides you with the basic syntax of jQuery. In the next lesson, Mytour will introduce you to jQuery Selectors.
If you have any questions or need clarification, feel free to leave your comments below the article.
