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.