jQuery Selector – Select Multiple HTML Elements By Example

jQuery Selector – Select Multiple HTML Elements By Example

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

jQuery Select Multiple elements Selector By E.g.

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.

You may like

  1. How to Get & Set Data Attribute Value From Elements jQuery
  2. jQuery Remove Attribute and Disabled Attribute From Element
  3. jQuery | Event MouseUp By Example
  4. Event jQuery Mouseleave By Example
  5. jQuery Event Mouseenter Example
  6. Event jQuery MouseOver & MouseOut By Example
  7. keyup jquery event example
  8. Jquery Click Event Method with E.g.
  9. Event jQuery. Blur By Example
  10. jQuery form submit event with example
  11. keydown function jQuery
  12. List of jQuery Events Handling Methods with examples
  13. Jquery Selector by .class | name | #id | Elements
  14. How to Get the Current Page URL in jQuery
  15. jQuery Ajax Get() Method Example
  16. get radio button checked value jquery by id, name, class
  17. jQuery Set & Get innerWidth & innerHeight Of Html Elements
  18. jQuery Get Data Text, Id, Attribute Value By Example
  19. Set data attribute value jquery
  20. select multiple class in jquery
  21. How to Remove Attribute Of Html Elements In jQuery
  22. How to Checked Unchecked Checkbox Using jQuery
  23. jQuery removeClass & addClass On Button Click By E.g.
  24. To Remove whitespace From String using jQuery
  25. jQuery Ajax Post Method Example
  26. jQuery Ajax Get Method Example
  27. To Load/Render html Page in div Using jQuery Ajax $.load
  28. jQuery Sibling Methods – To Find Siblings Elements
  29. jQuery Find Siblings Elements with Class, id

Leave a Reply

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