Sommario
Questi elementi o selettori possono essere manipolati con Jquery e css per creare effetti e ottenere contenuto, nasconderlo o aggiungerlo e applicarvi qualche effetto, facilitando il lavoro dei programmatori. Alcuni selettori sono meglio conosciuti per il codice CSS, ad esempio:IDENTIFICATORI
Sono elementi della gerarchia più alta e definiscono i parametri generali per gli elementi di un blocco, sono definiti come #id e sono solitamente applicati a liste o blocchi.
Questo è il selettore di ID paragrafo
Paragrafo senza selettore
LEZIONI
Sono elementi di gerarchia inferiore e vengono utilizzati per singoli elementi o per definire classi all'interno di un'identificazione, come ad esempio:
Questo è il selettore di ID paragrafo
Paragrafo blu con p
Paragrafo blu con divParagrafo rosso con div
Mentre la classe indipendente .parrafoazul può applicare l'elemento p che non dipende da nessuno, possiamo anche applicarlo ad altri elementi come div, ma se proviamo ad applicare la classe parraforojo indipendentemente dall'identificatore #paragrafo vedremo che lo fa non funziona poiché non soddisfa la gerarchia che impone il suo identificatore #paragrafo.
Ci sono molti selettori che possiamo usare qui ne vedremo alcuni
Selettore pari (pari) e dispari (dispari)
Questo selettore viene applicato a un array di elementi che utilizzano la stessa classe e può influenzare elementi pari o dispari, ad esempio coloriamo lo sfondo di un elenco di paragrafi.
PARAGRAFI
L'utente 1 ha lasciato un messaggio
L'utente 2 ha lasciato un messaggio
L'utente 3 ha lasciato un messaggio
L'utente 4 ha lasciato un messaggio
ELENCO UL
- L'utente 1 ha lasciato un messaggio
- L'utente 2 ha lasciato un messaggio
- L'utente 3 ha lasciato un messaggio
- L'utente 4 ha lasciato un messaggio
SELETTORE PRIMO (Primo) E ULTIMO (Ultimo)
Questi selettori ci permettono di manipolare il primo e l'ultimo elemento di una certa lista, ad esempio impostiamo la lista in grigio, il primo elemento in verde e l'ultimo elemento in blu.
ELENCO UL
- L'utente 1 ha lasciato un messaggio
- L'utente 2 ha lasciato un messaggio
- L'utente 3 ha lasciato un messaggio
- L'utente 4 ha lasciato un messaggio
SELETTORE FUOCO
Il focus su un elemento si attiva quando si fa clic su un elemento e si disattiva quando si fa clic su un'altra area del web o su un altro elemento. Vedremo un esempio con un form di login, creiamo la classe .focologin e poi la applichiamo sull'identificatore del form #login per influenzare tutti gli elementi che contiene. Possiamo anche applicarlo a un blocco layer o div e posizionare il modulo all'interno del blocco.
MODULO
Password utente:
Assegna o modifica uno stile CSS a un elemento con AddClass
Se vogliamo assegnare uno stile css in modo dinamico o cambiarlo in base a qualche condizione stabilita, utilizzeremo AddClass. In questo caso abbiamo un pulsante class .green e al tipo di input text assegniamo la class .box da Jquery. L'input del tipo di password non è interessato e il pulsante di invio non è interessato poiché non abbiamo assegnato loro alcuna classe css.
MODULO DI REGISTRAZIONE
Nome:
Indirizzo:
Telefono:
E-mail:
Questo selettore permette di identificare un elemento di un array di elementi in base alla posizione in cui si trova una cella di tabella, ad esempio, bisogna tenere presente che gli elementi sono elencati come gli indici di una matrice a partire da 0,1,2, ecc .
| Titolo A | Titolo B | Titolo C |
|---|---|---|
| Cella 0 | Cella 1 | Cella 2 |
| Cella 3 | Cella 4 | Cella 5 |
Proseguendo con le tabelle e l'applicazione dei selettori, vedremo come creare un disegno di sfondo in modo alternato nei colori delle righe di una tabella, simile a quanto precedentemente applicato con paragrafi ed elenchi. Non aggiungiamo così tanto css o design in modo che l'effetto sia fondamentalmente apprezzato.
SELETTORE ennesimo figlio
Continuando con l'esempio precedente, possiamo usare il selettore n-esimo figlio come complemento, simile al selettore eq, ma la differenza è che con n-esimo figlio le posizioni possono essere indicate sotto forma di un'operazione aritmetica. Viene utilizzato per selezionare uno o più elementi ma con la condizione che sia l'ennesimo figlio del suo genitore. Questo selettore è utile per selezionare il secondo paragrafo di un blocco o il terzo elemento di un elenco, ecc. Gli elementi non vengono presi come array ma in ordine primo, secondo, ecc.
Ad esempio, se nello script precedente aggiungiamo
In questo caso verranno selezionate le colonne dispari
- Colonne dispari n-esimo figlio (2n + 1)
- Colonne accoppiate nth-child (2n)
- Prima e quarta colonna n-esimo figlio (3n + 1)
