jQuery * Selector

Quiz

The (*) selector in jQuery is used to select all elements inside the document. This selector is used by itself without any additional parameters. When used, it selects all elements within the specified context, including HTML elements, texts, and comments. It matches any element in the DOM structure.

If the * selector is used on a parent element that has child elements, all the child elements of that parent element will also be selected.

Note: The * (all or universal) selector is extremely slow. This means it can be heavy for some browsers to process.

Syntax

Following is the syntax of the jQuery * selector −

$("*")

Parameters

The * selector is used by itself without any additional parameters.

Return value

This doesn't return anything; instead, it selects all the elements inside the document.

Example 1

In the following example, we are using the jQuery * selector to select all elements on the page and change their text color to blue −

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  $('*').css('color', 'green');
});
</script>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<div>This is a div.</div>
</body>
</html>

If we execute the above program, all the elements inside the document has changed its color to blue.

Example 2

In this example, the jQuery * selector selects all elements on the page and hides them −

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  $('*').hide();
});
</script>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<div>This is a div.</div>
</body>
</html>

After executing the above program, all the elements inside the document will be hidden.

Example 3

In this example, the jQuery * selector selects all elements on the page and adds a 2px solid black border to each of them −

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  $('*').css('border', '2px solid green');
});
</script>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<div>This is a div.</div>
</body>
</html>

After executing the above program, border will be added to all the elements inside the document.

jquery_ref_selectors.htm

Print Page