Tutto ok.
Ben tornato.
Quindi iniziamo a scrivere del codice.
E la prima cosa che impareremo a fare è come selezionare gli elementi.
Quindi, proprio come nella normale relazione dominante o nella fonologia. Sì, dobbiamo selezionare le cose e poi manipolarle.
So che sono un po 'un disco rotto lì, ma è un processo molto importante selezionare e poi cambiare
le cose.
video sarà principalmente focalizzato sulla selezione di elementi con J Query per due obiettivi principali qui.
Questo
Il primo sta imparando come selezionare gli elementi con la funzione del segno del dollaro e quindi anche usando
il metodo C valutato per gli elementi di stile.
Quindi non stiamo solo selezionando alcune cose, ma stampandole, ma rendendole più visive. Li
selezioneremo e poi cambieremo il colore di sfondo e la query di Jay possiamo selezionare tutto ciò che vogliamo
usando una sola funzione.
Il segno del dollaro.
Quindi a differenza della vaniglia J. S. di un nome di classe ottengono gli elementi in base al nome del tag.
dove abbiamo il documento che ottiene l'elemento dal selettore di query del selettore dell'interrogazione di query tutti ottengono gli elementi
Ci sono tanti modi diversi per selezionare il simbolo del dollaro e la query di Jay sostituirà tutti.
Funziona fondamentalmente come il selettore di query in quanto gli diamo un selettore di stile C Ss.
E poi la query di Jay restituisce tutti gli elementi corrispondenti che corrispondono al selettore che gli diamo.
Quindi qui ho un esempio se volessimo selezionare tutti i tag immagine sulla pagina che
assomiglia a questo se volessimo selezionare tutti gli elementi con classe di scala che facciamo scala dei punti.
Ricorda che questo è impostato sui selettori di stile.
anche fare cose più avanzate come questa selezionando tutti i tag di ancoraggio che si trovano all'interno degli elementi della lista.
Quindi per un ID abbiamo bisogno dell'arco per Thorpe per una classe che ha bisogno del punto e possiamo
Quindi farò una breve demo qui su come funziona.
Quindi abbiamo la nostra demo di Jake Querrey che gli ha invecchiato la nostra pagina dove ho incluso il Cdn.
E non importa se usiamo la parola N o se vuoi usare la copia scaricata, funzionerà
allo stesso modo.
Quindi abbiamo bisogno di questo script qui e quindi abbiamo bisogno di alcuni contenuti con cui giocare.
Quindi terrò l'H-1 S. J. demo principale.
Cambierò questi alleati per renderli un po 'più unici, quindi lo riempirò con alcuni dei miei animali preferiti.
Quindi la fine è per Newt.
La parte preferita del mio animale da cinque anni della canzone alfabeto animale aggiungerà in un altro dei
miei album preferiti Monkey.
E infine la pineta.
E se non hai mai visto la martora, sono animali altrettanto adorabili e terrificanti.
Quindi puoi vedere piuttosto adorabile qui.
Ma se li guardi in azione sono dei pazzi predatori e piuttosto spaventosi.
OK.
Quindi alcuni dei miei animali preferiti nella lista salveranno e apriamolo ora.
Assicurati di essere nella giusta directory.
Jay ha estratto la demo che ogni Chimo e quello che farò è spostarlo nella sua finestra e andremo nella
console per aumentare le dimensioni del carattere e useremo una query per selezionare alcune di queste cose.
Quindi ricorda che un simbolo del dollaro è una funzione.
E se scrivo solo il simbolo del dollaro da solo senza le parentesi.
È proprio come me che digito avviso senza parentesi o contro. il diario dei punti senza le parentesi non fa
veramente nulla se non dirmelo.
Sì, so di quel codice ma in realtà non lo esegue.
Iniziamo selezionando l'unico H-1 sulla pagina per farlo.
Possiamo usare il simbolo del dollaro e il selettore s per selezionare h è solo H-1 e premiamo Invio.
Potete vedere che restituisce la demo di J queery H-1.
Quindi, nota anche che è all'interno di una lista.
Quindi, a differenza del selettore di query, dove restituisce la prima istanza per il selettore del simbolo del dollaro.
Query restituirà una lista anche se c'è un solo elemento che è effettivamente utile e lo vedremo tra
un po '.
Quindi proviamo a selezionare tutti gli alleati ora in modo che possiamo fare qualcosa come alleati di Dollar Sign e otteniamo
tre alleati proprio così.
Possiamo anche selezionare il corpo digitando il corpo e rendere le cose un po 'più interessanti.
Torniamo alla nostra e-mail di età e aggiungiamo una I. D. a pino martin lo chiameremo adorabile come id
e poi potremo anche aggiungere alla scimmia urlatrice una scimmia urlatrice a tag A e andrà solo a scimmia
dot com e questo sarà semplicemente scimmia dot com.
E se aggiorniamo se voglio selezionare quel collegamento, utilizzerei il simbolo del dollaro e potrei semplicemente fare il tag di ancoraggio e
questo me lo darà.
Potrei anche dire tag di ancoraggio all'interno di un alleato.
Potrei anche se volessi davvero dire solo i tag di ancoraggio all'interno degli alleati che sono invece di una volontà.
E in tutti i casi finora sono identici.
Ma se aggiungo un altro tag di ancoraggio nella parte inferiore della pagina Google dot com e aggiorno.
E ora faccio il mio segno di ancoraggio del segno del dollaro.
Ottengo entrambi i tag di ancoraggio.
Se faccio un segno di dollaro UL con un alleato con un tag di ancoraggio all'interno di questo mi dà solo questo tag di
ancoraggio.
Oppure avrebbero potuto accorciarlo a questo qui e lì andiamo a selezionare l'oggetto con l'idea adorabile funziona come selezione di
queery o tutto o il selettore di query o C Ss per quella materia in
cui ho bisogno del simbolo artico o hash più il Nome ID adorabile e che mi dà l'alleata della martora.
Quindi abbiamo visto come selezioniamo e non è molto eccitante solo stampare le cose alla console
o semplicemente vederle restituite qui.
visive e aiutarci a modificare lo stile in modo che il metodo si chiama Dotsie
SS e il modo in cui funziona è che digitiamo un selettore con il simbolo
del dollaro e qualche selettore e quindi possiamo aggiungere Dotsie SS alla fine di quello e passarlo in alcune proprietà e valori per cambiare.
Ma in realtà voglio fare è introdurre un metodo che vedremo molti più metodi nei prossimi video, ma ne mostrerò
uno adesso che ci aiuterà a rendere le cose
Quindi ecco un esempio sto selezionando qualcosa con l'idea di speciale e poi sto correndo su CSSA su di
esso e cambiando il bordo per essere due pixel rosso fisso.
Quindi fammelo dimostrare.
Facciamolo per l'H-1.
Quindi seleziono il simbolo del dollaro H-1 Dotsie SS Proprio come questo.
E poi invece di qui cambiamo il colore per essere giallo proprio così.
E ho colpito invio.
E puoi vedere che cambia in giallo che è fantastico.
Quindi è sempre bene tenere a mente come si farebbe senza j Querrey.
Quindi dovremmo fare qualcosa come il documento che ottiene e facciamo il selettore di query documentali H-1 punto e B non hanno quel C Ss
Quindi abbiamo bisogno di fare il punto di colore del punto di stile equals.
E cambiamo in arancione.
E noi andiamo.
qui è in realtà molto più potente e può fare molto più di quello che possiamo fare con questa singola linea qui.
L'abbiamo modificato in arancione, ma questa linea
Supponiamo quindi che volessi cambiare più stili riguardo a questo H-1. Volevo cambiare il colore,
il colore dello sfondo e il bordo.
Quello che posso fare è definire i miei stili in un oggetto e passare un oggetto dentro
Quindi non devo solo fare una stringa Porter virgola il valore per Porter.
Posso definire un oggetto con più proprietà coppie di valori chiave multipli e passarlo e
saranno tutti applicati.
Quindi facciamolo ora.
Definiamo i nostri stili e non dobbiamo creare un oggetto separato.
Te lo mostrerò.
E invece di qui dirà che il colore dovrebbe essere rosso lo sfondo dovrebbe essere rosa e faremo
il bordo dovrebbe essere due pixel viola solido proprio così.
E se premiamo Invio, ora abbiamo i nostri stili oggetto e di nuovo che può essere chiamato qualsiasi cosa.
E poi quello che faremo è selezionare l'H-1.
Quindi il simbolo del dollaro H-1 di nuovo ci gusta più e passiamo semplicemente nel nostro oggetto di stile e tutti questi stili
sono applicati.
Quindi per farlo senza j query ci richiederebbe di fare tre linee separate.
Dovresti fare un documento che querist lasci che il tuo colore scuro in stile H-1 sia uguale al rosso e quindi lo sfondo punto in stile
punto è uguale al rosa e quindi quello stile quel bordo è uguale a due pixel in tinta unita viola.
Spero che tu possa già vederlo con poche righe.
J Query ha già dimostrato di essere piuttosto potente.
E mentre possiamo fare tutto senza di esso, ci sta sicuramente risparmiando un po 'di tempo e rendendo il nostro codice più pulito.
caratteristica del metodo CSSA puntino che rende ancora più utile mostrare che ora quello che possiamo fare è
in realtà lo stile di più elementi contemporaneamente piuttosto che selezionare solo il primo e renderlo giallo.
C'è un'altra
Potremmo selezionare tutti quelli o tutti gli alleati e abbiamo solo bisogno di una riga per farlo.
Quindi te lo mostrerò.
Ora facciamo tutte le bugie.
Quindi per farlo ho bisogno di selezionare gli alleati.
Quindi proprio così.
E se premo invio.
così e premo Invio e noterò questo la linea cambia tutti e tre gli alleati.
Vedrai che mi dà i tre alleati e poi ho bisogno di incatenarmi su C Ss e gli darò un singolo colore
di proprietà e lo cambierò in blu proprio
Quindi decisamente molto potente.
Tutto ciò che facciamo è selezionare con il nostro selettore alleato del segno del dollaro e questo ci dà tre alleati e facendo
Dotsie SS su un array qui di ALWIS questa lista di alleati.
In realtà li renderà tutti blu e non dovremo nemmeno eseguire il ciclo manualmente come faremmo
senza una query.
per ricordarti se voglio cambiarli tutti per essere verdi senza query, devo prima selezionarli tutti.
Quindi, solo
Quindi i vari alleati sono uguali al documento che il selettore di query passa tutti nella stringa alleata.
E poi ho bisogno di collegarmi.
Quindi per var I uguale a zero è inferiore a Elvises di lunghezza I plus plus.
E poi dentro al loop dobbiamo fare alleati con lo stile che il colore è
uguale e faremo il verde proprio così e faremo clic su enter.
E puoi vedere che tutti cambiano in verde.
Quindi di nuovo è fattibile senza una query, ma è significativamente più codice.
Dobbiamo prima selezionarli tutti e anche solo selezionarli è doloroso.
Questo è molto più lungo di un semplice segno di dollaro.
E poi abbiamo anche bisogno di fare un ciclo manualmente con un ciclo for o un
ciclo while e poi cambiarne uno singolarmente e poi abbiamo finito con una query.
Tutto quello che dovevamo fare per tornare al blu è selezionare tutti gli alleati Dotsie SS e poi passare nella nostra proprietà che
è blu di colore blu.
Mostrerò qualche altro esempio qui.
dimensioni del loro carattere più grandi in modo che la dimensione del font e sarà 40 pixel e ci andiamo.
Selezioniamo tutti i tag di ancoraggio proprio come questo un tag che C Ss e renderà le
Otteniamo grandi collegamenti Mostrerò anche che possiamo definire un oggetto pieno di stili come abbiamo fatto in precedenza
e possiamo usarlo per modellare più elementi non solo uno.
Quindi selezioneremo tutte le bugie e le combineremo insieme e invece di fare solo le SS e passare
una stringa come il colore, gli daremo un oggetto e lo definiremo qui.
E aggiungeremo qui uno spazio per scrivere.
E la prima cosa che faremo è cambiare la dimensione del carattere di tutti loro.
dimensione del font è la dimensione del font Dasch o altezza e dimensione in javascript e in J query dobbiamo usare il caso cammello.
Quindi NCSA come
Quindi la dimensione del font non ha spazio o nessun trattino, ma il membro di maiuscole è
il caso Kimbal e noi li faremo 10 facciamo ancora 10 pixel e poi aggiungeremo un bordo e questo sarà tre pixel tratteggiati viola.
Quei bordi tratteggiati sono sempre stupendi.
E infine aggiungere lo sfondo del colore di sfondo.
E facciamo solo la nostra R. G. colore.
Quindi R. G. B.
E faremo il nostro G. P. UN. in realtà.
E anche il primo leggerà.
89 rosso 45 Verde 20 blu.
E poi 0. 5 Alpha che è il canale di opacità o trasparenza.
E se premiamo Invio, puoi vedere che tutti quelli sono applicati contemporaneamente.
Quindi la nostra dimensione del carattere si restringe. Abbiamo 10 pixel.
Abbiamo questi splendidi bordi attorno agli alleati che sono tre pixel viola tratteggiati e quindi abbiamo il colore di
sfondo che è ciò che questo colore si è rivelato essere una sorta di
colore marrone chiaro.
Tutto ok.
Quindi, si spera, puoi vedere da quella rapida dimostrazione solo due cose diverse che stiamo selezionando
con il simbolo del dollaro e che da solo è incredibilmente potente.
Funziona fondamentalmente come Slichter di queery e selettore di queery tutto combinato.
Ed è una sintassi molto più breve e più facile da scrivere.
E poi c'è il metodo CSSA che è anche estremamente potente perché possiamo modificare singole proprietà come abbiamo
fatto qui, ma possiamo anche massasare le proprietà CSSA come abbiamo fatto proprio qui dove passiamo in
un oggetto pieno di coppie di valori chiave.
Probabilmente la parte più importante di tutto questo è che quando seleziono una raccolta come tutti gli alleati
come ho fatto proprio qui, non devo eseguire manualmente il looping e applicare qualcosa individualmente come ho fatto
quassù dove dovevamo scorrere tutto il alleati e cambiare il colore uno alla volta con la query J.
Se ho una collezione di elementi, essa scorre automaticamente su di essa e applica
Dotsie a ciascuna di esse.
Quindi è estremamente potente.
Ed è per questo che una nota a margine è per questo che restituisce sempre un array qui.
adorabile, lo ritorna sempre nell'elenco perché tutta la logica dietro le quinte coinvolge l'elenco.
Anche se ho solo un elemento con l'ID
Quindi andrà in loop su questo e succede solo che c'è un elemento qui.
Quindi non fa davvero un loop.
Va solo una volta.
Bene, mi auguro si sia divertito e sto iniziando a vedere il potere di Equerry