jQuery Universal (*) Selector

jQuery | Universal (*) Selector: Learn about the jQuery Universal (*) Selector with its usages, syntax, and examples.
Submitted by Pratishtha Saxena, on November 03, 2022

Universal (*) Selector

In jQuery, selectors are a parameter through which we can select the HTML element. Selectors can comprise – class names, ids, tag names, attributes, etc. Basically, by using selectors, the appropriate HTML-DOM element can be selected and hence performed actions on it. Here, we are discussing the jQuery * Selector.

The jQuery * selector selects every element present on the DOM page. It includes – HTML elements, head, body, etc. When just the * passes, it selects overall elements, but when it is used with some other element, then it selects all the elements within that domain.

Universal (*) Selector Syntax

$('*');

Once the elements are selected, you can access those and perform the actions that you want to perform on them. The example given below shows the selection of all the elements present in the parent div tag. Once selected, they are faded out on click.

jQuery Universal (*) Selector Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <title>Document</title>
</head>
<body>
    <h2>jQuery * Selector</h2>
    <p>Click the button to Select all the child elements within the div.</p>
    <button>Select All</button>
    <hr>
    <div>
        <p style="color:darkblue; font-size: large; font-weight: bold;">Welcome to Include Help !</p>
        <p>This is a jQuery Tutorial for Selectors.</p>
        <p style="color:darkblue; font-size: large; font-weight: bold;">Thanks for visiting !</p>
    </div>
    <hr>
    <h3></h3>
</body>

  <script type="text/javascript">
    $(document).ready(function(){
        $('button').click(function(){
            $('div *').fadeOut();
            $('h3').html('Elements Faded Out.')
        });
    });
  </script>
</html>

Output:

Example 1: jQuery Universal (*) Selector

After clicking on "Select All" button.

Example 2: jQuery Universal (*) Selector

jQuery .Class Selector

jQuery Element Selector

Comments and Discussions!

Load comments ↻