jQuery Api Selector | To Select Multiple HTML Elements

How to select multiple html elements? In this jQuery Tutorial, You will learn how to select multiple html elements using jQuery.

Multiple elements Selector By jQuery

There are two ways available to select multiple html elements using jQuery selectors.

  • 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 demostrate 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

jQuery Multiple Selector

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

Multiple Selector Demo

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.

Spread the love

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *