jQuery select multiple elements; In this tutorial, i am going to show you how to select multiple html elements by id, class, name and tag, etc.
jQuery Select Multiple HTML Elements
There are two ways available to select multiple html elements using jQuery selectors:
- element selector
- * selector
Syntax of jQuery Element Selector
$("element1, element2, element3, ...");
Syntax of jQuery * Selector
Using the above syntax select multiple html elements.
$("*");
Using the above syntax select all html elements.
Paramaters of jquery multiple selector
- element: This parameter is required to specify the html elements to be selected.
Example 1 – jquery select multiple elements by id
See the following example for how to use multiple selector from selected html elements by id:
<!DOCTYPE html>
<html>
<head>
<title>jQuery Multiple Selector</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function() {
$(".multiple").click(function(){
$("#m1, #m2, #m3, #m4").css("background-color", "green");
});
});
</script>
</head>
<body>
<center>
<h2 style="margin-top: 10px;" id="m1">Welcome to Tutsmake.com</h2>
<h3 id="m2">Hello</h3> <h2 id="m3">Hello</h2>
<p><span id="m4">Jquery</span></p>
<button type="button" class="multiple">Click Me!</button>
</center>
</body>
</html>
Demo for jquery select multiple elements by id
Welcome to LaraTutorials.com
Hello
Hello
Jquery
Example 2 – jquery select All elements by * Selector
This example will demostrate you how to use * selector from selected html elements. * Selector select all html elements.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Multiple Selector</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function() {
$(".multiple_star").click(function(){
$("*").css("background-color", "green");
});
});
</script>
</head>
<body>
<center>
<h2 style="margin-top: 10px;" id="m1">Welcome to Tutsmake.com</h2>
<h3 id="m2">Hello</h3> <h2 id="m3">Hello</h2>
<p><span id="m4">Jquery</span></p>
<button type="button" class="multiple_star">Click Me!</button>
</center>
</body>
</html>
Demo for jquery select All elements by * Selector
Welcome to Laratutorials.com
Hello
Hello
Jquery
When you click on button, at that time it will perform multiple selectors events of jquery and select all html elements.
Recommended jQuery Tutorials
Recommended:-jQuery slideDown() Animation Example
Recommended:-jQuery SlideUp() Animation Example
Recommended:-jQuery SlideToggle Animation Effect Example
Recommended:-jQuery Replace HTML Content in Element
Recommended:-jQuery Replace Text in Div,Span, p, Textarea
Recommended:-jQuery Get and Set Input box By Name, Id
Recommended:-Get and Set CSS Property in jQuery
Recommended:-jQuery Insert Content Before or After an Element
Recommended:-jQuery HTML Append Prepend Example
Recommended:-jQuery Remove Text & Element From HTML
Recommended:-jQuery Add Remove Class on onClick
Recommended:-jQuery Set Checkbox Checked
Recommended:-jQuery Get Checkbox Checked Value
Recommended:-Get and Set Data Attribute Value in jQuery
Recommended:-jQuery Get Multiple Checkbox Value
Be First to Comment