jQuery – Universal * selector example

The universal * selector is used to select all elements, everything.

Examples

$(‘*’): selects all elements in the document.
$(‘div > *’): selects all elements that are children of a <div> element.

In general, using the universal alone didn’t make sense, at least i can’t think of any use cases. But, it’s always used to combined with other elements to form a new custom selector expression.

jQuery Example

A simple example to show the use of the jQuery universal * selector.

<html>
<head>
<title>jQuery universal example</title>
 
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
 
<style type="text/css">
	div{
		padding:8px;
	}
</style>
</head>
 
<body>
 
<h1>jQuery universal example</h1>
 
<div class="div-class1">
	This is div-class1
	<div class="div-class2">
		This is div-class1
	</div>
	<div class="div-class3">
		This is div-class3
	</div>
</div>
 
<br/><br/>
<button>*</button>
<button>div > *</button>
<button id="refresh">Refresh</button>
 
<script type="text/javascript">
    $("button").click(function () {
       var str = $(this).text();
       $(str).css("border", "1px solid #ff0000");
    });
 
    $('#refresh').click(function() {
    	location.reload();
    });
 
</script>
 
</body>
</html>