jQuery selectors

jQuery selectors are methods that allow you to target HTML elements using CSS-like syntax. They enable you to efficiently select and manipulate elements on a web page, simplifying DOM traversal and manipulation tasks.

Syntax:

 $("selector-name")

Elements Selector :

The Elements Selector in jQuery allows targeting HTML elements based on their tag names. It selects all elements of a specified type on a web page, enabling bulk manipulation or interaction with elements sharing the same tag.

Example : In this example, when the user clicks on button, the <h1> element gets hidden. Code :- html

<!DOCTYPE html>
<html>

<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
</head>

<body>
    <h1>Welcome to Geeks for Geeks !</h1>
    <h2>This is Web Technology section </h2>
    <br />
    <button>Hide</button>
    <script type="text/javascript">
        $("button").click(function () {
            $("h1").hide();
        });
    </script>
</body>

</html>

Output:

Id Selector :

The jQuery ID Selector targets an element on a web page by its unique identifier (ID). It uses the `#` symbol followed by the ID value to select and manipulate the specific element, offering efficient and precise DOM manipulation.

Example : In this example, when the user double clicks on button, the element with id = “gfg” gets hidden. Code:- html

<!DOCTYPE html>
<html>

<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
</head>

<body>
    <p id="gfg">Welcome to Geeks for Geeks !</p>
    <p id="GFG">Computer Science Portal </p>
    <br />
    <button>Hide</button>
    <script type="text/javascript">
        $("button").dblclick(function () {
            $("#gfg").hide();
        });
    </script>
</body>

</html>

Output:

Class Selector :

The jQuery Class Selector selects elements based on their class attribute. It uses the `.` symbol followed by the class name to target and manipulate multiple elements sharing the same class.

Example : In this example, when the user clicks on button, the element with class = “GFG” gets hidden. Code :- html

<!DOCTYPE html>
<html>

<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
</head>

<body>
    <p class="gfg">Welcome to Geeks for Geeks !</p>
    <p class="GFG">Explore More about GfG </p>
    <br />
    <button>Hide</button>
    <script type="text/javascript">
        $("button").click(function () {
            $(".GFG").hide();
        });
    </script>
</body>

</html>

Output: