OK welkom terug.
Dus deze video gaat een beetje anders te zijn.
We gaan niet elke nieuwe manieren van het manipuleren van de dom te voeren, maar we gaan om te nemen wat we hebben geleerd en doe een beetje een code mee.
Dus we gaan om te spelen met de Google-startpagina.
Dus adviseer ik dat u het openstellen van Google dit doen samen met mij of u dit doen op uw eigen nadat u de video te bekijken.
En we gaan gewoon wat leuke dingen, zoals veranderen van het logo.
We zullen een beeld van een kitten dit keer gewoon eerlijk om al die katten liefhebbers zullen alle links te veranderen zodat ze naar zijn dot com of iets dergelijks te zijn.
Het enige punt dat ik wil benadrukken in deze les is dat we een lus kunnen gebruiken om meerdere elementen te manipuleren zodat we niet altijd een ding zijn kleur te selecteren en te wijzigen of selecteer een afbeelding en verander de bron.
We kunnen allemaal de beelden en dan loop selecteer door die lijst en de voor elke te wijzigen zijn bron.
Dus ik ga je laten zien hoe ik dat hier zou doen.
Dus we beginnen simpel.
Laten we beginnen met het selecteren van dit logo.
En een snelle kanttekening als je op Google op een dag waar ze een Google Doodle in plaats van deze reguliere logo.
Het is misschien een afbeelding hier niet zijn.
Soms hebben ze zin animaties of interactieve spelletjes.
En in dat geval is ze misschien iets als een doek element.
Dus als je tegenkomt dat wanneer u inspecteren Dat is goed je kunt gewoon dit deel kijken.
We hebben al gezien hoe beeldbronnen te veranderen, maar ik wil gewoon laten zien dat je het kunt doen op de website van iemands dus selecteren.
Het is een beeld en het heeft een code die maakt het gemakkelijk.
HP-logo.
Dus laten we selecteren dat laten we noemen het ons logo is gelijk aan die vraag te documenteren selector HP-logo.
En natuurlijk konden we gebruikte element hebben op ID ook.
Dus eindigen we met Logo gelijk aan die.
Dus we hebben nu gekozen dat.
En als we willen het beeld veranderen Gaat veranderen we de bron.
We moeten set attribuut gebruiken en ik heb net het beeld hier.
Nice kitten.
Dus ik ga dit Kidan je bent te nemen.
Ik zal kopiëren dat en ik ga naar de bron van dit logo te werken om dat te doen.
Doe logo dot set attribuut in plaats van angst.
We gaan gewoon schrijven bron.
En het tweede argument is de nieuwe bron en ik druk op enter en ik krijg mijn leuke kleine kat Roquette verschijnen.
Je zou een bericht als dit te krijgen.
Afhankelijk van de afbeelding die u gebruikt.
Dus ik zal het kort uitleggen wat dit is.
Het is gewoon te vermelden dat we op een pagina vol met TTP zoals je kunt zien die verschijnen en het beeld dat ik de bron naar B is H TTP.
En om het kort HTP is veiliger dan HGP.
Dus het is klagen dat het allemaal HTP Ja, we moeten niet iets minder veilig gebruiken moeten zijn.
Dat is een heel eenvoudige versie, maar het laat ons nog steeds doen.
Het is niet een groot probleem voor wat we proberen gewoon te doen hier gewoon spelen met Google.
Het is iets wel dat je zou willen overwegen als je zoiets als dit te doen in uw eigen applicatie en het zou een probleem zijn dan.
Dus terug naar de inhoud.
Vond de breedte en lengte van deze kat veranderen zodat neemt dezelfde hoeveelheid ruimte die de oorspronkelijke Google logo deden.
Ik kan eigenlijk zien dat de hoogte was oorspronkelijk 92 en was 272.
En dus dat is wat hier gebeurt.
U kunt zien als ik wil veranderen kan ik iets doen als dit logo dot dot stijl met en neemt een string en verander gewoon dat zijn 500 pixels.
Je kunt zien dat het strekt zich uit en ik kan hetzelfde doen.
Verander het naar zijn duizend pixels.
Hier krijg je een mooi gedeelte Kitty en kunnen we de breedte te veranderen.
Ik bedoel de hoogte en laten we die 500 of slechte kat.
Het is net gespannen all over the place.
Dus laten we gaan vooruit en reset de hoogte tot iets een beetje meer geschikt.
Laten we gaan voor de hoogte te zijn ongeveer 100 pixels en de breedte tot ongeveer 200 zijn.
Oké dus dat zal werken voor ons nu slechts voor wat meer oefenen.
Laten we het ook een rand rond dat het zo logo die stijl grens gelijk en we zullen twee pixel stevige paarse grens te doen en er is onze geweldige partner rond die afbeelding.
OK dus laten we nu overgaan tot wat ik geïntroduceerd aan het begin van de video, die is het selecteren van een heleboel elementen in een keer en het gebruik van een lus om hen eerder te manipuleren dan het hebben van om het individueel te doen.
Dus wat we gaan doen is het selecteren van alle van het anker tags op de pagina.
Er is een heleboel links op deze pagina.
We gaan ieder nemen en verander de ref attribuut te gaan naar een andere website in plaats van waar ze naartoe gaan.
Dus om te beginnen moeten we alle ankertags kiezen dus we hebben een heleboel manieren om dat te doen.
Ik ga het links zijn links te bellen en we zullen document doen.
We zouden een vraagbrief alles doen, maar ik ga doen krijgen elementen op tag naam ankercode en als we kijken naar links die u kunt zien we nogal wat op deze pagina dus we gaan naar lus door dit.
We kunnen niet zomaar doen banden dot set attribuut dat niet bestaat vertelt koppeling begint op attribuut het is niet een functie.
En dat is omdat gezegd attribuut alleen bestaat op individuele elementen en links.
Is deze verzameling van knooppunten.
Dus ik moet lus door het enkel als ik zou lus door een andere array-achtig object.
Dus ik kan niet gebruiken voor elke want het is niet echt een array.
Dus ik moet een te gebruiken voor lus of technisch niet kon ik een tijdje lus.
De meeste mensen zouden gebruik maken van een lus.
Dus voor ARE gelijk aan nul is kleiner dan links die lengte en zal toevoegen 1 en vervolgens in de loop gaan we voor toegang tot elke individuele link links Hi.
En laten we beginnen door gewoon afdrukken van de inhoud van de tekst.
Dus links die tekstinhoud en we zullen annuleren die log die.
Dus dit is een gemeenschappelijk patroon lus door een bos van elementen en iets te doen misschien niet printen in de console, maar het tonen van een of andere manier of er iets aan het veranderen van de kleur verandert.
Dus we druk op enter en je kunt zien is dit de tekst inhoud van alle links op de pagina.
Dus we krijgen je weet dingen zoals foto's en vertalen Google Plus-station te spelen YouTube al die links zijn ergens op deze pagina wat logisch is te zien dat het Google-startpagina.
Dus in plaats van alleen maar dingen uit te printen in een klap de pijl omhoog en ga terug naar deze lus en laten we daadwerkelijk beginnen met het veranderen van de stijl, zodat we de lengtes kunnen zien gemakkelijker laten we ze een andere kleur en laten we hen hebben een rand om hen heen .
Dus ik ga om zich te ontdoen van mijn console die te loggen en ik ga lynx I stijl te doen en we zullen de achtergrond te starten en laten we dat een roze veranderen.
En als we druk op enter je kunt zien Ik zal de console te sluiten.
Alle links op de pagina zijn nu Pink.
Ik heb een achtergrond die is roze.
Dus dit ding hier is een link.
Al deze saaie zijn items in het teken in te drukken.
Het is ook een link.
Dus laten we nog een ding.
Laten we lus door weer.
Raak de pijl omhoog en laten we een paar dingen dus laten we het doen stijl.
Grens gelijk aan één pixel en laten we het doen Dasht paars.
En op de volgende regel verbindt I stijl en laten we de kleur oranje te zijn.
Dus die twee druk op enter.
En je kunt zien we deze echt mooi links op onze pagina roze achtergrond kleine paarse grens niet zomaar een grens.
Het is Dasht zeer speciaals.
En we krijgen sommige oranje tekst in daar ook.
Maar als we hen klikt kunt u zien dat de vallen nog niet zijn gewijzigd en dat is logisch, want we ze niet zijn veranderd.
Dus ik wil ze allemaal te veranderen naar WDW.
Omdat dot com behoeften naar de con. En ik heb al mijn links geselecteerd.
Deze enorme collectie en ik al dat lus geschreven, dus ik ga het hergebruiken.
En alleen maar om nogmaals dit is iets dat veel zal doen.
Dus maak je comfortabel als je deze vier lussen, waar we niet kunnen gebruik maken van een voor elk kan schrijven.
Dus moeten we gebruik maken van een lus.
We doen dit de hele tijd.
En vanaf hier op uit, totdat we bij Jey vraag gaan we schrijven dit type lijn veel.
Dus we gaan verbindt I.
En we gaan beginnen, maar gewoon uit te printen waar elke licht, zodat logboek gaat annuleren.
En we gaan dat log get attribuut van atra annuleren.
Gewoon zo.
En we niet technisch moeten uitvinden dat maar gewoon zodat het makkelijker voor u om te zien.
En we missen onze constante log sluiten afdruk te zien hier en nu krijgen we een overzicht van alle links en het is interessant te zien dat een aantal van hen.
Dit is de link naar dit ding javascript forward nul of nee.
Zodat een aantal van hen zijn gewoon leeg ze niet beschikt over een 8 Tref een aantal van hen naar afzonderlijke websites of sommige van hen zijn relatieve paden als dit hier en sommige van hen zijn absolute zoals deze hier.
OK.
Dus laten we ze nu veranderen.
Compton-Rock Blog Links Ik werd ingesteld attribuut en we hoeven niet constant te loggen in te stellen attribuut.
En laten we ze te veranderen om te zijn wat we willen HGF we willen HPF veranderen W.W worden ..
Dat doen HTP colon slash slash BW dot Bing dot com net als dat.
En we druk op enter.
Het maakt niet uit als er iets veranderd.
Als we het type banden en we kijken alleen op wat we hebben.
Stuk voor stuk gaat nu naar zijn dot com en we kunnen ook inspecteren een en we kunnen zien in het element inspecteur Het gaat om zijn dot com.
En het laatste wat we doen om het te testen is om één klik.
Dus laten we snel op de knop Aanmelden of laten we stoppen met Gmail en je kunt zien het opent het zijn voor mij.
Dus kort samengevat selecteerden we een heleboel dingen die een verzameling links en toen we doorlopen die collectie met een lus en vervolgens in die lus kunnen we iets om elk individueel element, die vervolgens zal worden herhaald om ze allemaal te doen.
Dus ik veranderde de achtergrondkleur van de grens de tekstkleur we de ref veranderd en we hadden alleen om een ​​paar regels te schrijven en het werd toegepast op Ik weet niet 20 of 30 verschillende lengtes op deze pagina.
Dus dat is een patroon dat we gaan veel te gebruiken in de komende paar video's.