Sei sulla pagina 1di 2

J<!

doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Progressbar - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-
ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#progressbar" ).progressbar({
value: 37
});
} );
</script>
</head>
<body>

<div id="progressbar"></div>

</body>
</html>
I filtri del motore di selezione si presentano con una sintassi molto simile aglii
pseudoselettori CSS, cioè preceduti dai due punti “:“.

Attraverso questi selettori speciali (spesso un’estensione dei selettori nativi


CSS) è possibile non solo raffinare la selezione degli elementi, ma raggruppare
molto velocemente degli elementi specifici.

Il primo gruppo di filtri riguarda gli “elementi figli“, ed è in grado di fornire


un metodo di selezione degli elementi in base alla loro posizione rispetto
all’elemento contenitore. Nell’esempio qui sotto, il primo selettore troverà solo
il primo elemento della lista con id menu, mentre per selezionare l’ultimo useremo
il secondo:

$("#menu li:first-child");
$("#menu li:last-child");
Infine per ricercare solo gli elementi singoli utilizzeremo:

$("#menu li:only-child");
Un caso più complesso è quello del filtro :nth-child() che accetta, tra le
parentesi, varie opzioni:

even: solo elementi pari


odd: solo elementi dispari
indice: un numero che indichi la posizione (pertendo da 1)
equazione: un’equazione
Ecco una pagina di esempio sui possibili utilizzi di questi filtri.

Filtri per gli elementi ed il contenuto


In questa categoria si trovano tutti quei selettori per filtrare gli elementi di
una pagina in base a specifici criteri come per esempio la visibilità:

$("div:hidden"); //tutti i tag div nascosti


o ancora in base al loro contenuti:

$("#menu li:has(ul)"); //tutte voci di menu con sottomenu


o, in negativo, in base a ciò che non sono:

$("a:not(.external)"); //tutti i link eccetto quelli con classe external


Anche per questo tipo di filtri non manca la possibilità di filtrare gli elementi
in base alla loro posizione nel documento. In questo caso, però, non viene tenuto
conto della loro posizione relativamente agli altri elementi adiacenti, bensì
vengono presi in considerazione tutti gli elementi anche se ad un livello superiore
(esempio):

$("#menu li:first"); //il primo tag lista


$("#menu li:odd"); //tutti gli elementi dispari di una lista
$("#menu li:eq(3)"); // il terzo elemento di una lista
Filtri per i form
Un gruppo di filtri molto interessante è quello dei form. Permette infatti di
lavorare con molta facilità sugli elementi dei moduli, un esempio:

$("input[type='text']");
può essere scritto anche:

$(":text");
Con la stessa brevità possiamo ricercare elementi gli elementi disabilitati, magari
per abilitarli dinamicamente:

$(":disabled").removeAttr("disabled");
o ancora trovare velocemente i checkbox selezionati dall’utente:

$(":checked");