[Guida] JQuery selettore * – Che cos’è? Come funziona?

0
1674

Nella guida di oggi andremo a capire e vedere come utilizzare il selettore * di JQuery.

Che cos’è il selettore * ?

Il selettore * serve per selezionare tutti gli elementi del documento, compreso l’ HTML, head e il body.

Se il selettore * viene utilizzato insieme con un altro elemento, seleziona tutti gli elementi figlio all’interno dell’elemento specificato. Suggerimento: Attenzione il selettore * può risultare pesante in fase di elaborazione per alcuni browser.

Come si usa il selettore * ?

Se vogliamo selezionare tutti gli elementi del documento possiamo scrivere:

$("*").hide();

Se vogliamo utilizzare il selettore per selezionare tutti gli elementi all’ interno del body possiamo scrivere:

$("body *").css("background-color", "yellow");

Utilizzando il selettore possiamo selezionare anche tutti gli elementi contenuti all’interno di particolari elementi:

$("p.list*").css("background-color", "yellow");

Esempio:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("body *").css("background-color", "yellow");
});
</script>
</head>
<body>
<h1>Benvenuti</h1>
<p class="intro">Test p 1.</p>
<p>Test p 2.</p>
<p>Test p 3.</p>
<p>Who is your favourite:</p>
<ul id="choose">
<li>Pippo</li>
<li>Topolino</li>
<li>Pluto</li>
</ul>
</body>
</html>

 

Per qualsiasi chiarimento fateci sapere.