BeginnersBook

  • Home
  • Java
    • Java OOPs
    • Java Collections
    • Java Examples
  • C
    • C Examples
  • C++
    • C++ Examples
  • DBMS
  • Computer Network
  • Python
    • Python Examples
  • More…
    • jQuery
    • Kotlin
    • WordPress
    • SEO
    • JSON
    • JSP
    • JSTL
    • Servlet
    • MongoDB
    • XML
    • Perl

jQuery Multiple Elements Selector

Last Updated: July 29, 2021 by Chaitanya Singh | Filed Under: jQuery

In the previous tutorials we have learned what are jQuery selectors and what is an element selector. In this guide, we will learn jQuery multiple elements selector.

Syntax

To select multiple elements of an html page using multiple elements selector, we pass the element names inside parenthesis, in double quotes, separated by commas.

$("element1, element2, element3")

For example: $(“div, p, h2”) this will select all the div, p and h2 elements of a page.

jQuery Multiple Elements Selector Example

In the following example we are selecting and changing the background colour of three elements (h2 heading element, a element, button element) on the button click event.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("h2, a, button").css("background-color", "green");
  });
});
</script>
</head>
<body>

<h2>jQuery multiple elements selector example</h2>
<p>This tutorial is published on
<a href="https://beginnersbook.com">Beginnersbook</a> website</p>
<h2>This is another h2 heading</h2>
<button>Click Me!</button>
</body>
</html>

Output:
Before the button is clicked:
jQuery Multiple Elements Selector
After the button is clicked:
jQuery Multiple Elements Selector Example

❮ PreviousNext ❯

Top Related Articles:

  1. jQuery html() method
  2. jQuery Selectors
  3. jQuery multiple classes Selector
  4. jQuery removeClass() Method
  5. jQuery val()

About the Author

I have 15 years of experience in the IT industry, working with renowned multinational corporations. Additionally, I have dedicated over a decade to teaching, allowing me to refine my skills in delivering information in a simple and easily understandable manner.

– Chaitanya

Leave a Reply Cancel reply

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

jQuery Tutorial

  • jQuery Tutorial
  • jQuery Selectors
  • jQuery Events

jQuery Effects

  • jQuery Show & Hide
  • jQuery Fading
  • jQuery Sliding
  • jQuery Animate
  • jQuery stop()
  • jQuery Callback Function
  • jQuery Chaining

jQuery HTML/CSS

  • jQuery html()
  • jQuery addClass()
  • jQuery hasClass()
  • jQuery removeClass()
  • jQuery toggleClass()
  • jQuery after()
  • jQuery before()
  • jQuery append()
  • jQuery appendTo()
  • jQuery clone()
  • jQuery insertBefore()
  • jQuery insertAfter()
  • jQuery attr()
  • jQuery text()
  • jQuery val()
  • jQuery css()
  • jQuery prepend()
  • jQuery remove()
  • jQuery empty()
  • jQuery detach()

Copyright © 2012 – 2025 BeginnersBook . Privacy Policy . Sitemap