Java Articles

Advertisement

jQuery Select all HTML Elements

by Ram Satish

Share

jQuery selector syntax provides a simpler way to find all html elements using $(‘*’). The returned object is a jQuery object representing all the HTML elements. Any action on the returned jQuery object will apply to all the HTML elements on the page.

Selecting all HTML elements

In the below html code, we have used some common html elements like <h2>, <h3>, <div>, <span> etc. If you want to select all the nodes, you simply need to use the “*” selector.
After the DOM is ready, we will register click events for the button element. In our page, we have two buttons. The first one is for applying CSS class on all HTML elements and the other one is for applying CSS class just on the nested div elements. We will apply different styles so we can see the change:

$(document).ready(
function() {
$('#apply_all').click(function () {
$('*').addClass('selection');
});
$('#apply_nested_div').click(function () {
$('div > *').addClass('divSelection');
});
});

selectingAllElements.html:

Advertisement
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JQuery Selecting Elements Example</title>
<script src="jquery.js"></script>
<script src="selectingAllElements.js"></script>
<link rel="stylesheet" href="selectingAllElements.css" type="text/css" />
</head>
<body>
<h2>Selecting All Elements</h2>
This is an example on JQuery Selecting All HTML Elements
<h3>Some other elements</h3>
<div id="someDiv">
This is a div element
<div id="nestedDiv1">This is a nested div element 1</div>
<div id="nestedDiv2">This is a nested div element 2</div>
</div>
<span id="someSpan">This is a span element</span>
<pre>Predefined element</pre>
<label id="firstname-label" class="firstname">
<strong>First name</strong>
<input type="text" value="" name="FirstName" id="FirstName" spellcheck="false">
<input type="button" value="Apply All" id="apply_all">
<input type="button" value="Apply All Nested Div" id="apply_nested_div">
</label>
</body>
</html>

selectingAllElements.js:

$(document).ready(
function() {
$('#apply_all').click(function () {
$('*').addClass('selection');
});
$('#apply_nested_div').click(function () {
$('div > *').addClass('divSelection');
});
});

selectingAllElements.css:

.selection {
background: #222;
color: white;
text-shadow: none;
}
.divSelection {
background: #FFE7E7;
color: #666;
border: 1px solid #FFDBDB;
}

Run the jQuery Example

When you press the ‘Apply All’ button, the click event is triggered and its event handler is executed. The button’s click handler will change the background color of all selected elements to dark color and the text color to white. The second button ‘Apply All Nested Div’ will apply the change only on the nested div elements.

Select All HTML tags Example
Select All HTML tags Example
Apply CSS on all HTML tags
Apply CSS on all HTML tags
Apply CSS on all nested Div elements
Apply CSS on all nested Div elements

Download source code

This was an example about jQuery selecting all HTML elements.

You can download the source code here:selectAllHtml.zip

Share

Advertisement

Related

Advertisement

Latest

Advertisement