OK bentornato.
Quindi questo video sarà un po 'diverso.
Non introdurremo nuovi modi di manipolare il dom, ma prenderemo ciò che abbiamo imparato e
faremo un po 'di codice.
Quindi giocheremo con la home page di Google.
Quindi ti consiglio di aprire Google o farlo insieme a me o lo fai da solo dopo
aver visto il video.
E faremo solo alcune cose divertenti come cambiare il logo.
Questa volta faremo una foto di un gattino solo per essere onesti con tutti quegli amanti dei gatti
che cambieranno tutti i link in modo che diventino dot com o qualcosa del genere.
L'unico punto che voglio sottolineare in questa lezione è che possiamo usare un ciclo per manipolare più
elementi in modo da non dover sempre selezionare una cosa e cambiarne il colore o selezionare un'immagine
e cambiarne l'origine.
Possiamo selezionare tutte le immagini e quindi scorrere l'elenco e per ognuna cambiare la sua fonte.
Quindi ti mostrerò come lo farei qui.
Quindi inizieremo in modo semplice.
Iniziamo selezionando questo logo.
E una breve nota a margine se sei su Google in un giorno in cui hanno un doodle di Google
invece di questo logo regolare.
Potrebbe non essere un'immagine qui.
A volte hanno animazioni fantasiose o giochi interattivi.
E in tal caso potrebbero essere qualcosa come un elemento di tela.
Quindi se lo incontri quando controlli, va bene, puoi solo guardare questa parte.
immagini, ma voglio solo dimostrare che puoi farlo sul sito di chiunque, quindi selezionalo.
Abbiamo già visto come cambiare le fonti di
È un'immagine e ha un ID così che lo rende facile.
Logo HP.
Quindi selezioniamo che chiamiamolo il nostro logo equivale al documento che seleziona
il logo HP.
E naturalmente avremmo potuto usare anche l'elemento per ID.
Quindi finiamo con Logo uguale a quello.
Quindi ora lo abbiamo selezionato.
E se vogliamo cambiare l'immagine, cambieremo la fonte.
Dobbiamo usare l'attributo set e ho solo l'immagine qui.
Bel gattino
Quindi prenderò questo Kidan che sei.
Lo copio e aggiornerò la fonte di questo logo per farlo.
Do set logo dot attributo invece di paura.
Stiamo per scrivere solo fonte.
E il secondo argomento è la nuova fonte e premo invio e vedo apparire il mio simpatico gattino Roquette.
Potresti ricevere un messaggio come questo.
A seconda dell'immagine che usi.
Quindi spiegherò brevemente di cosa si tratta.
Sta solo dicendo che siamo su una pagina caricata con TTP come puoi vedere e l'immagine
che ho impostato su B è H TTP.
E per farla breve HTP è più sicuro di HGP.
Quindi si lamenta che dovrebbe essere tutto HTP Sì, non dovremmo usare qualcosa di meno sicuro.
Questa è una versione molto semplice, ma ci consente comunque di farlo.
Non è un grosso problema per quello che stiamo cercando di fare qui semplicemente giocando con Google.
È qualcosa però che vorresti considerare se fai qualcosa di simile
nella tua applicazione e sarebbe un problema allora.
Quindi torna al contenuto qui.
Trovato per modificare la larghezza e l'altezza di questo gatto in modo che occupi la stessa quantità di spazio
del logo originale di Google.
Vedo in realtà che l'altezza era 92 originariamente e con era duecentosettantadue.
E questo è quello che sta succedendo qui.
Puoi vedere se voglio cambiarlo, posso fare qualcosa come questo punto con il logo dot style e prendere
una stringa e cambiarla solo per essere 500 pixel.
Puoi vederlo allungarsi e io posso fare la stessa cosa.
Cambiarlo per essere un migliaio di pixel.
Prendi un bel gattino elasticizzato e possiamo cambiare la larghezza.
Intendo l'altezza e facciamo quel 500 o povero gatto.
Si sta solo allungando dappertutto.
Andiamo avanti e ripristiniamo l'altezza per qualcosa di un po 'più appropriato.
Andiamo per l'altezza per essere circa 100 pixel e la
larghezza per essere circa 200.
Va bene, così lavoreremo per noi per ora solo per qualche altra pratica.
Diamo anche un bordo intorno all'immagine in modo che il logo che il bordo dello stile sia uguale e faremo
un bordo viola solido di due pixel e che ci sia il nostro meraviglioso partner attorno a quell'immagine.
OK, passiamo ora a ciò che ho introdotto all'inizio del video, che seleziona un
gruppo di elementi contemporaneamente e utilizza un ciclo per manipolarli invece di doverli fare individualmente.
Quindi quello che faremo è selezionare tutti i tag di ancoraggio nella pagina.
Ci sono molti link su questa pagina.
Prenderemo ognuno di questi e cambiamo l'attributo ref per andare su un altro sito web piuttosto che
dovunque vadano.
Quindi per iniziare dobbiamo selezionare tutti i tag di ancoraggio, quindi abbiamo un sacco di modi per farlo.
Ho intenzione di chiamarlo link sono collegamenti e faremo documenti.
Potremmo fare una lettera di interrogazione tutto, ma ho intenzione di ottenere elementi dal tag tag anchor del nome del tag
e se guardiamo i link potete vedere che ne otteniamo alcuni in questa pagina, quindi andremo a scorrere questo.
possiamo semplicemente fare attributo dei punti dot set che non esiste ci dice che il link parte dall'attributo non è una funzione.
Non
E questo perché detto attributo esiste solo su singoli elementi e collegamenti.
È questa raccolta di nodi.
Quindi ho bisogno di passarci sopra come farei un loop su qualsiasi altro array come oggetto.
Quindi non posso usare per ognuno perché non è un vero array.
Quindi ho bisogno di usare un ciclo for o tecnicamente potrei usare un ciclo while.
La maggior parte delle persone userebbe un ciclo for.
tale lunghezza e verrà aggiunto 1 e quindi all'interno del ciclo accediamo a ogni singolo link link Ciao.
Quindi per è uguale a zero è inferiore ai collegamenti
E iniziamo semplicemente stampando il suo contenuto di testo.
Quindi collega il contenuto del testo e cancelleremo quel registro.
Quindi questo è uno schema comune che passa attraverso un gruppo di elementi e fa
qualcosa che forse non lo stampa nella console ma lo mostra in qualche modo o cambia qualcosa cambiando il suo colore.
Quindi premiamo invio e puoi vedere che questo è il contenuto testuale di tutti i link sulla pagina.
Quindi ti facciamo conoscere cose come le foto e traduci Google e conduci il gioco su YouTube. Tutti questi link sono da qualche parte
in questa pagina, il che ha senso visto che si tratta della home page di Google.
Quindi piuttosto che stampare semplicemente le cose in un colpo con la freccia in su e tornare a questo ciclo e
iniziamo effettivamente cambiando lo stile in modo che possiamo vedere le lunghezze più semplici facendole diventare un colore diverso e
facciamo in modo che abbiano un bordo attorno a loro .
Quindi mi sbarazzerò della mia console che registra e farò lo stile di lynx I e
cambieremo lo sfondo per avviarlo e facciamolo diventare rosa.
E se colpiamo invio, puoi vedere che chiudo la console.
Tutti i link nella pagina sono ora rosa.
Ho uno sfondo che è rosa.
Quindi questa cosa qui è un link.
Tutti questi naff sono elementi nel pulsante di accesso.
È anche un link.
Quindi facciamo un'altra cosa.
Andiamo di nuovo in loop.
Colpisci la freccia verso l'alto e facciamo un po 'di cose, quindi facciamo stile.
Il bordo è uguale a un pixel e facciamo il viola a tratti.
E sulla prossima linea i link mi stile e cambiamo il colore per essere arancione.
Quindi quei due entrano.
E puoi vedere che otteniamo questi bellissimi link sulla nostra pagina rosa con un bordo viola minuscolo non solo
un bordo regolare.
È molto elegante.
E abbiamo anche del testo arancione.
Ma se li clicchiamo possiamo vedere che le trappole non sono ancora cambiate e questo ha senso perché non
le abbiamo cambiate.
Quindi voglio cambiarli tutti per andare a WDW.
Essere dot com deve andare alla truffa. E ho già selezionato i miei collegamenti.
Questa enorme collezione e ho già quel ciclo scritto così ho intenzione di riutilizzarlo.
E solo per ribadire questo è qualcosa che farà molto.
Quindi mettiti comodo se riesci a scrivere questi quattro anelli in cui non possiamo usarne uno per ciascuno.
Quindi dobbiamo usare un ciclo for.
Lo facciamo sempre.
E da qui in avanti fino a quando non arriveremo alla query di Jey scriveremo questo tipo di linea molto.
Quindi andremo ai link I.
E stiamo per iniziare, ma basta stampare dove va ogni luce in modo da cancellare quel registro.
E cancelleremo quel log get attributo di atra.
Proprio così.
E tecnicamente non abbiamo bisogno di inventarlo ma solo così è più facile per te vederlo.
E ci manca la nostra costante stampa di chiusura del registro per vedere qui e ora otteniamo un elenco di tutti i link ed
è interessante che tu possa vedere alcuni di loro.
Questo è il link a questa cosa javascript avanti zero o no.
o alcuni di loro sono percorsi relativi come questo qui e alcuni di loro sono assoluti come questo qui.
Quindi alcuni di loro sono solo vuoti, non hanno un 8 Tref, alcuni di loro vanno a siti web separati
OK.
Quindi cambiamoli ora.
Link al blog Compton-Rock Ho ottenuto l'attributo set e non è necessario registrarlo costantemente.
E cambiamoli per essere ciò che vogliamo che HGF vogliamo cambiare HPF per essere W. W. Questo fa sì che i punti HTP dei due punti tagliano BW punto Bing punto com proprio così.
E colpiamo invio.
Non sembra che qualcosa sia cambiato.
Se scriviamo i link e guardiamo solo quello che abbiamo.
Ognuno ora va ad essere dot
com e possiamo anche ispezionarne uno e possiamo vedere nell'ispettore elemento. Va ad essere dot com.
E l'ultima cosa che facciamo per testarlo è cliccare su uno.
Quindi apriamo rapidamente il pulsante di accesso o lasciamo Gmail e puoi vedere che si apre per me.
Quindi, per riassumere, abbiamo selezionato un gruppo di cose una raccolta di link e quindi abbiamo fatto
un ciclo attraverso quella raccolta con un ciclo for e quindi all'interno di quel ciclo
possiamo fare qualcosa per ogni singolo elemento che verrà poi ripetuto a tutti loro.
conoscere 20 o 30 lunghezze diverse su questa pagina.
Così ho cambiato il colore di sfondo del bordo il colore del carattere abbiamo cambiato il ref e abbiamo solo dovuto scrivere poche righe e questo è stato applicato a non
Questo è uno schema che utilizzeremo molto nei prossimi video.