jQuery select multiple html elements; In this tutorial, you will learn how to select multiple html elements by id, name, class or same class, attribute tag etc., using jQuery multiple selectors.
jQuery Select Multiple elements Selector by id, name, class, tag and etc
There are two ways to select multiple html elements using jQuery selectors by id, name, class, tag and etc.
- element selector
- * selector
Syntax
$("element1, element2, element3, ...");
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 Of jQuery multiple selector
This example will demonstrate to you how to use multiple selector from selected 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").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>
In the above example, When you click on button, that time it can perform multiple selectors events of jquery.
Output
Welcome to Tutsmake.com
Hello
Hello
Jquery
Example 2 Using * 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>
Output
Welcome to Tutsmake.com
Hello
Hello
Jquery
In the above jquery $(*) example, When you click on button, that time it will perform multiple selectors events of jquery and select all html elements.
You can select multiple html elements using the provided two ways of jquery. The above example of this multiple selectors, it is very simple or basic example.
You may like
- How to Get & Set Data Attribute Value From Elements jQuery
- jQuery Remove Attribute and Disabled Attribute From Element
- jQuery | Event MouseUp By Example
- Event jQuery Mouseleave By Example
- jQuery Event Mouseenter Example
- Event jQuery MouseOver & MouseOut By Example
- keyup jquery event example
- Jquery Click Event Method with E.g.
- Event jQuery. Blur By Example
- jQuery form submit event with example
- keydown function jQuery
- List of jQuery Events Handling Methods with examples
- Jquery Selector by .class | name | #id | Elements
- How to Get the Current Page URL in jQuery
- jQuery Ajax Get() Method Example
- get radio button checked value jquery by id, name, class
- jQuery Set & Get innerWidth & innerHeight Of Html Elements
- jQuery Get Data Text, Id, Attribute Value By Example
- Set data attribute value jquery
- select multiple class in jquery
- How to Remove Attribute Of Html Elements In jQuery
- How to Checked Unchecked Checkbox Using jQuery
- jQuery removeClass & addClass On Button Click By E.g.
- To Remove whitespace From String using jQuery
- jQuery Ajax Post Method Example
- jQuery Ajax Get Method Example
- To Load/Render html Page in div Using jQuery Ajax $.load
- jQuery Sibling Methods – To Find Siblings Elements
- jQuery Find Siblings Elements with Class, id
