Va bene quindi è il momento per il nostro primo esercizio di Jay queery in cui
questo funziona è che ti darò qualche sample hymnal di età per le immersioni alcuni hanno classi alcune hanno idee
e prenderanno quelle per div e le metteranno in il tuo file HTML di tua età e dovrai includere correttamente la query
di Jay su come farlo se vuoi usare un Cdn o se vuoi scaricarlo.
E poi ci sono quattro sfide veloci che voglio che tu tenti di usare Jay Querrey e in
particolare il simbolo del dollaro per selezionare e Dot vedi SS per lo stile.
Quindi il primo.
Seleziona tutte le div e dai loro uno sfondo viola.
Il prossimo seleziona le div con l'evidenziazione di classe e le ingrandisce di 200 pixel.
Il terzo è quello di selezionare il div con ID terzo e dargli un bordo arancione fino a te quanto è
largo e quale stile del bordo.
E poi il bonus è selezionare solo il primo div e cambiare il suo colore del font in rosa.
Quindi vai avanti, dai una possibilità.
Dovrai pubblicare un video.
Crea un file HTML New Age.
e quindi copiare questo codice o digitare da solo e quindi sarà necessario risolvere queste quattro sfide.
Includere una query
Quindi, vai avanti, pubblica un video.
Tornerò tra pochi secondi con la
soluzione già.
Andiamo avanti e scriviamo una soluzione rapida a questo.
Come sempre, la prima cosa che dobbiamo fare è creare il nostro file ogni volta.
Quindi ho un nuovo file.
nel titolo e poi andrò avanti e aggiungerò il nostro DML e I lo copierò piuttosto che digitarlo.
L'ho chiamato esercizio che html e lo salverò e poi aggiungerò il mio normale file h tim l e
chiameremo questo esercizio di query J
OK, quindi abbiamo i quattro elementi.
Ora andiamo ad aggiungere Jay Querrey.
Ricorda che abbiamo due modi per farlo che possiamo includerlo localmente o collegarci a un CDN.
Quindi mostrerò sia il primo che il primo.
Sto solo andando a copiare il file.
Quindi devo modificare qui la versione solo per comandare il comando V.
Così ora lo ho nella stessa directory del mio esercizio che invecchia Simmo.
E poi andrò da queste parti e la prima cosa che voglio fare è aggiungere uno script tag script
e poi aggiungerò i sorgenti uguali e quindi devo assicurarmi di farlo corrispondere correttamente che è Jay dash to
point 1 . 4 uomini.
Sì.
Quindi Jay si precipita a puntare un punto per gli uomini Dot.
Gesù lo salveremo e lo apriremo nel nostro browser e faremo il nostro piccolo test per vedere se funziona.
Sembra che abbia trovato il file.
Altrimenti ci darebbe un errore e possiamo sempre provare a fare qualcosa come un div di segno del dollaro e
vedere cosa otteniamo.
E sta funzionando.
Sta selezionando i nostri 4 div.
Possiamo anche includere CDN di richieste A-J.
E io google solo per quello.
Jay quercetina e poi scegli la nostra versione.
Quindi non vogliamo 3. 0.
Sono sicuro che funziona bene.
Ma questa è la versione più recente ed è ancora un alfa.
Quindi ci sono probabilmente alcuni bug e alcuni problemi.
Quindi per puntare a un punto quattro è la versione stabile più recente, quindi copieremo questo URL e poi aggiungeremo un altro tag
script e li lascerò entrambi qui e ne commenterò uno e reimpostare la sorgente uguale a quello
che sei sbagliato.
Quindi uno dei due lavori userò il Cdn dato che ho già provato che tutti
noi usiamo il Cdn.
Dal momento che ho già dimostrato che questo ha funzionato solo per l'amor di varietà.
Quindi salveremo, quindi aggiorneremo e ricontrolleremo che il nostro codice funzioni ancora.
Sì, sta trovando i segni del dollaro bene.
È connesso a J Qwerty.
Un punto che vorrei fare è che includiamo J queery in cima alla testa e che usiamo
nei nostri script che scriviamo nel corpo.
E il motivo per cui lo facciamo ricorda che le cose si caricano nell'ordine in cui sono state dichiarate. Quindi vogliamo
che la query di Arjay si carichi definitivamente prima di usarla al posto di uno script.
Quindi il nostro script che dobbiamo definire è dove scriveremo il nostro codice e lo chiameremo semplicemente esercizio.
J s.
E poi abbiamo bisogno di fare quell'esercitazione di file che J us e lo metteremo proprio qui nella stessa directory e quello che possiamo fare
è un test davvero semplice per vedere se è collegato sia al nostro file h tim che alla query J
se è in grado di vedere e utilizzare il metodo di query J, faremo qualcosa del genere.
Se J query else farà qualcos'altro quindi se c'è una query J avviseremo una query caricata
altrimenti avviseremo Jay Trerrey faccia triste e salveremo.
E se aggiorniamo ora, viene caricata la query J.
Quindi questo ci dice due cose.
Uno di questi script sta facendo esercizio che Gesù è connesso e due sono stati in grado di usare i metodi di
Jay Querrey.
Se lo abbiamo fatto in ordine inverso e ho inserito query Jay dopo aver incluso il mio esercizio Jay Sì e ho salvato e
aggiornato otteniamo un errore che ci dice che la query J non è definita in modo da poter vedere l'importanza
dell'ordine in cui mettiamo le cose in.
Quindi vogliamo sempre mettere le nostre librerie in modo che il nostro codice dipenda in cima alla testa almeno che
vogliamo metterle prima dei nostri script che le usano.
Torniamo al compito e la prima cosa che dobbiamo fare è includere correttamente Jay Querrey
che abbiamo già fatto.
Avanti, dobbiamo selezionare tutte le div e dare loro uno sfondo viola.
Quindi andremo avanti e selezioneremo tutti i div usando il simbolo del dollaro invece delle virgolette.
Tutto quello che dobbiamo fare è selezionare div con CSSA.
Quindi basta div dot C S S e li renderemo viola.
Quindi il colore o lo sfondo in questo caso è viola o avremmo potuto usare il nostro R. G. B tonalità di viola.
E se non ricordi come facciamo il viola con RGV, allora devi andare a giocare al R. G. po 'di più.
è diventato un
Quindi questo è il primo che possiamo salvare e controllare che funzioni funzionando rinfrescando.
E otteniamo quattro sfondi viola.
OK.
Ecco.
Quello è selezionare tutti i div e dare loro uno sfondo viola.
Aggiungerò solo una piccola nota qui e la commenterò.
Next up vogliamo selezionare i div con classe pari a highlight e renderli di 200 pixel di larghezza.
Quindi funzionerà in modo molto simile ma per selezionare i div con classe uguale a evidenziare quello che dobbiamo fare è
usare di nuovo il simbolo del dollaro.
E invece di div possiamo usare l'evidenziatore di punti e poi fare C Ss con e che saranno 200 picchi.
Vale la pena notare che questo tecnicamente seleziona tutto ciò che ha una classe di evidenziazione.
Se vuoi che sia esplicito e dica solo i div che hanno la classe di evidenziazione potremmo avere
un tag di ancoraggio o un paragrafo che abbia anche quella classe scriverebbe questo selettore.
E questo è C S S che dice tutte le div con la classe di highlight.
Ma in questo caso farà la differenza.
Quindi 200 pixel con aggiornamento e puoi vedere che questi due div hanno la classe di evidenziare il secondo e
il quarto div e hanno un con 200 pixel.
OK il prossimo è selezionare il div con l'idea di terzo.
E per dargli un bordo arancione in modo da selezionare nuovamente il div con quel simbolo del dollaro di identificazione e invece di dot abbiamo
bisogno del nostro Thorpe.
E poi il nome dell'ID che SS ordina e tocca a noi.
Tutto ciò che ho detto è che il colore è arancione.
facciamo un bordo arancione solido a due pixel e salviamo e aggiorniamo e ora abbiamo quel bordo arancione proprio lì.
Quindi
Lo renderò un po 'più grande in modo che si mostri meglio nello screencast.
Eccoci.
E questo è circa un terzo div che ha l'ID della parola.
Quindi l'ultima sfida che è stata un bonus è quella di selezionare solo il primo div e cambiare il suo
colore del carattere in rosa nel modo in cui selezioneremo il primo div usando uno pseudo selettore CSSA.
Per prima cosa digita il primo trattino del tipo "dash" che dovresti avere familiarità con alcuni dei video
dei selettori CSSA.
E poi lo renderemo rosa, il colore rosa SS, e lo salveremo e lo aggiorneremo e vedrai che
il colore è rosa.
L'altra opzione che abbiamo è in realtà una scorciatoia di query J incorporata che è solo Colan per
prima e che funziona anche bene.
Una nota interessante è che l'uso dei due punti è in realtà un po 'più lento del primo di
tipo perché il primo di tipo è incorporato per vedere valutare che è un selettore CSSA rispetto al primo è una scorciatoia di query J.
Quindi non è nativo C Ss è solo leggermente più lento.
Quindi userei prima di tipo.
OK, questo è tutto per questo esercizio nei prossimi video.
Impareremo altri modi di manipolare le cose piuttosto che cambiare semplicemente noi