jquery
  1. jquery-selectors

JQuery Selectors

JQuery Selectors are a powerful feature of jQuery that give you the ability to select and manipulate elements within your web page's Document Object Model (DOM).

Syntax

The syntax of a jQuery selector is similar to that of a CSS selector. To select an element, you will use the $ function followed by the selector in quotation marks. Here is an example:

$("element-selector")

Use

JQuery selectors are used to find and manipulate elements on a web page in real-time. This can be particularly useful for dynamically updating a page's content, targeting specific elements for styling modifications, or iterating over a set of elements to perform similar actions.

Example

Here is an example of using a JQuery selector to target a specific set of elements:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World Example</title>
    <!-- Include jQuery library -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <p>hello world</p>
    <script>
        // Use $(document).ready() to ensure the DOM is fully loaded before executing the script
        $(document).ready(function() {
            $("p").css("color", "red");
        });
    </script>
</body>
</html>
Try Playground

In this example, we are using the $("p") selector to target all <p> elements on the page and using the css() method to set their color to red. This simple example demonstrates the power of JQuery selectors in being able to select and manipulate elements with ease.

Summary

JQuery Selectors are a powerful feature of jQuery that give you the ability to select and manipulate elements within your web page's Document Object Model (DOM). With the ability to target specific elements, perform iterations, and modify styles dynamically, Selectors are an important tool for developers looking to add interactivity and dynamic behavior to their web pages.

Published on: