Asterisk Selector
jQuery refers to its $(“*”) selector as the Universal Selector. Its primary objective is to choose every element present in the document. Every HTML element on a page can be selected with the jQuery universal selector, which is represented by the asterisk (*). This implies that it will choose every element found in the Document Object Model (DOM), including basic components like and .
syntax:
$('*')Every jQuery selector, including the Universal Selector, begins with the notation $() and the dollar sign. All elements are symbolised by the * character, which is a star.
Return Value:
The asterisk * defines the $(“*”) selection; it does not take new parameters. For any selector, including the Universal Selector, $() returns a jQuery object, an array-like object. At least one DOM element matches this jQuery object’s selector. Like other jQuery selectors, it returns an array of discovered elements.
How it Works
The Universal Selector works with all DOM elements. Each page element can be selected with *. The * selector is typically useful when you wish to give each element on a page a CSS style or attribute, or when you can further refine the results in another way.
Important Things to Think About and Caution: The * character should be used with caution when utilising certain jQuery functions. By using $(‘*’)text(‘Not a good idea.’);, for example, the text of the outermost element usually the element will be replaced. You may see your entire HTML page change to simply the new text, such as Not a good idea..
A general rule of thumb for selector performance is to prioritise simplicity of creating and maintaining code, only compromising legibility for optimisation if performance is a quantifiable issue. This is true even though writing code for performance is vital. Micro-optimizations, which yield insignificant (unnoticeable) performance gains, are typically less significant from the client’s perspective.
Code Example:
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).ready(function () {
$("*").css("background-color",
"light yellow");
});
</script>
</head>
<body>
<center>
<h1>Welcome to Govindhtech Solutions</h1>
<p>My name is Kowsalya.</p>
<p>I live in Chittoor.</p>
<p>My best friend is Geetha.</p>
<p>Who is your favourite:</p>
<ul type="square">
<li>Vijay</li>
<li>sivakarthikeyan</li>
</ul>
</center>
</body>
</html>Output:
Welcome to Govindhtech Solutions
My name is Kowsalya.
I live in Chittoor.
My best friend is Geetha.
Who is your favourite:
Vijay
sivakarthikeyan