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
Home / jQuery / jQuery * Selector

jQuery * Selector

By Chaitanya Singh

In the previous tutorial, we discussed what are jQuery Selectors. In this guide, we will discuss the jQuery * Selector, which is used to select all the elements of a Document Object Model (DOM). It includes all the elements such as html, head, body etc.

jQuery * Selector Syntax

To select all the elements of html page including html, head, body elements.

$("*")

To select all the child elements of a specified element

$("Element_name *")

jQuery * Selector Example

In the following example we are selecting all the elements of this html page using $(*) selector and when the Click Me! button is clicked we are changing the background colour to green for all the selected elements.

<!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(){
    $("*").css("background-color", "green");
  });
});
</script>
</head>
<body>

<h2>jQuery * selector example</h2>

<p>This example is published on beginnersbook.com</p>
<p>This is another paragraph. It contains some plain text</p>

<button>Click Me!</button>

</body>
</html>

Output:
Before the button is clicked: The following is the output of the above code in the browser, the button Click Me! is not yet clicked.
jQuery * Selector

After the button is clicked: The following screenshot is the output screen in the browser after the button is clicked.
jQuery * Selector output

jQuery * Selector to select all the child elements of a webpage

Here we will use the * selector to select all the child elements of a specified element. In the following example we have used the * selector like this: $(“div *”) which would select all the child elements of div elements. There are two child elements of div element in the following example so the background colour of these two paras would be changed on the button click.

<!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(){
    $("div *").css("background-color", "green");
  });
});
</script>
</head>
<body>

<h2>jQuery selector example to select all child elements</h2>
<div>
<p>This example is published on beginnersbook.com</p>
<p>This is another paragraph. It contains some plain text</p>
</div>
<button>Click Me!</button>

</body>
</html>

Output:
Before the button is clicked:
jQuery Selectors example: * selector example
After the button is clicked:
jQuery Selectors example: selecting all child elements example

❮ PreviousNext ❯

Posted Under: jQuery

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 – 2022 BeginnersBook . Privacy Policy . Sitemap