jQuery Syntax
jQuery is a JavaScript library that makes it easier to work with HTML documents and handle events, animations, and AJAX requests. The library provides a simple syntax that is designed to be easy to read and write.
Here are some examples of jQuery syntax:
- Select an element: $(“selector”) This code selects an element in the HTML document that matches the given selector. For example, to select all paragraphs on the page, you could use $(“p”) .
- Add an event listener: $(“selector”).on(“event”, function() { … }); This code adds an event listener to the selected element. For example, to add a click event listener to all paragraphs on the page, you could use $(“p”).on(“click”, function() { … }); .
- Change the CSS of an element: $(“selector”).css(“property”, “value”); This code changes the value of a CSS property for the selected element. For example, to change the background color of all paragraphs on the page to red, you could use $(“p”).css(“background-color”, “red”); .
- Add a class to an element: $(“selector”).addClass(“class”); This code adds a class to the selected element. For example, to add a class of “highlight” to all paragraphs on the page, you could use $(“p”).addClass(“highlight”); .
- Remove a class from an element: $(“selector”).removeClass(“class”); This code removes a class from the selected element. For example, to remove the class of “highlight” from all paragraphs on the page, you could use $(“p”).removeClass(“highlight”); .
- Toggle a class on an element: $(“selector”).toggleClass(“class”); This code toggles a class on the selected element. For example, to toggle the class of “highlight” on all paragraphs on the page when they are clicked, you could use $(“p”).on(“click”, function() { $(this).toggleClass(“highlight”); }); .
These are just a few examples of the many things you can do with jQuery. The syntax is designed to be flexible and easy to use, so you can accomplish a wide variety of tasks with just a few lines of code.
The Document Ready Event
The document ready event is a jQuery event that is triggered when the DOM (Document Object Model) has been fully loaded and is ready to be manipulated. Frequently employed to guarantee the execution of code within the event handler solely once the DOM’s loading is complete, ensuring the webpage is entirely rendered and primed for manipulation.
The syntax for the document ready event is as follows:
$(document).ready(function() { // Code to be executed when the document is ready });
Alternatively, you can use the shorthand syntax for the document ready event, which is simply:
$(function() { // Code to be executed when the document is ready });
Both of these syntaxes are equivalent and can be used interchangeably.
Here’s an example of how to use the document ready event to manipulate the DOM:
$(document).ready(function() { // Select the "button" element and add a click event listener $("button").on("click", function() { // Select the "p" element and change its text $("p").text("The button was clicked!"); }); });
In this example, the code inside the document ready event handler adds a click event listener to a “button” element, and when the button is clicked, it selects a “p” element and changes its text to “The button was clicked!”. The code inside the event handler will not be executed until the document is fully loaded and ready to be manipulated.