1 00:00:01,470 --> 00:00:02,790 OK welkom terug. 2 00:00:02,790 --> 00:00:05,340 Dus deze video gaat een beetje anders te zijn. 3 00:00:05,340 --> 00:00:11,410 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. 4 00:00:11,640 --> 00:00:13,860 Dus we gaan om te spelen met de Google-startpagina. 5 00:00:13,950 --> 00:00:20,080 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. 6 00:00:20,340 --> 00:00:23,780 En we gaan gewoon wat leuke dingen, zoals veranderen van het logo. 7 00:00:23,940 --> 00:00:32,220 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. 8 00:00:32,250 --> 00:00:43,710 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. 9 00:00:43,770 --> 00:00:49,440 We kunnen allemaal de beelden en dan loop selecteer door die lijst en de voor elke te wijzigen zijn bron. 10 00:00:49,470 --> 00:00:51,080 Dus ik ga je laten zien hoe ik dat hier zou doen. 11 00:00:51,300 --> 00:00:52,790 Dus we beginnen simpel. 12 00:00:53,100 --> 00:00:55,050 Laten we beginnen met het selecteren van dit logo. 13 00:00:55,380 --> 00:01:01,730 En een snelle kanttekening als je op Google op een dag waar ze een Google Doodle in plaats van deze reguliere logo. 14 00:01:01,860 --> 00:01:03,640 Het is misschien een afbeelding hier niet zijn. 15 00:01:03,780 --> 00:01:06,850 Soms hebben ze zin animaties of interactieve spelletjes. 16 00:01:06,930 --> 00:01:10,390 En in dat geval is ze misschien iets als een doek element. 17 00:01:10,470 --> 00:01:14,980 Dus als je tegenkomt dat wanneer u inspecteren Dat is goed je kunt gewoon dit deel kijken. 18 00:01:15,010 --> 00:01:22,100 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. 19 00:01:22,530 --> 00:01:26,680 Het is een beeld en het heeft een code die maakt het gemakkelijk. 20 00:01:26,850 --> 00:01:28,290 HP-logo. 21 00:01:28,410 --> 00:01:38,660 Dus laten we selecteren dat laten we noemen het ons logo is gelijk aan die vraag te documenteren selector HP-logo. 22 00:01:38,880 --> 00:01:42,090 En natuurlijk konden we gebruikte element hebben op ID ook. 23 00:01:42,390 --> 00:01:46,210 Dus eindigen we met Logo gelijk aan die. 24 00:01:46,320 --> 00:01:47,890 Dus we hebben nu gekozen dat. 25 00:01:48,030 --> 00:01:51,540 En als we willen het beeld veranderen Gaat veranderen we de bron. 26 00:01:51,540 --> 00:01:55,530 We moeten set attribuut gebruiken en ik heb net het beeld hier. 27 00:01:56,190 --> 00:01:57,650 Nice kitten. 28 00:01:57,660 --> 00:01:59,070 Dus ik ga dit Kidan je bent te nemen. 29 00:01:59,060 --> 00:02:04,540 Ik zal kopiëren dat en ik ga naar de bron van dit logo te werken om dat te doen. 30 00:02:04,650 --> 00:02:10,210 Doe logo dot set attribuut in plaats van angst. 31 00:02:10,380 --> 00:02:12,630 We gaan gewoon schrijven bron. 32 00:02:12,810 --> 00:02:21,160 En het tweede argument is de nieuwe bron en ik druk op enter en ik krijg mijn leuke kleine kat Roquette verschijnen. 33 00:02:21,210 --> 00:02:22,760 Je zou een bericht als dit te krijgen. 34 00:02:22,860 --> 00:02:24,720 Afhankelijk van de afbeelding die u gebruikt. 35 00:02:24,900 --> 00:02:26,770 Dus ik zal het kort uitleggen wat dit is. 36 00:02:26,910 --> 00:02:36,470 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. 37 00:02:36,570 --> 00:02:40,700 En om het kort HTP is veiliger dan HGP. 38 00:02:40,710 --> 00:02:46,400 Dus het is klagen dat het allemaal HTP Ja, we moeten niet iets minder veilig gebruiken moeten zijn. 39 00:02:46,410 --> 00:02:49,560 Dat is een heel eenvoudige versie, maar het laat ons nog steeds doen. 40 00:02:49,560 --> 00:02:53,630 Het is niet een groot probleem voor wat we proberen gewoon te doen hier gewoon spelen met Google. 41 00:02:53,670 --> 00:03:00,990 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. 42 00:03:01,020 --> 00:03:03,070 Dus terug naar de inhoud. 43 00:03:03,280 --> 00:03:11,230 Vond de breedte en lengte van deze kat veranderen zodat neemt dezelfde hoeveelheid ruimte die de oorspronkelijke Google logo deden. 44 00:03:11,460 --> 00:03:19,800 Ik kan eigenlijk zien dat de hoogte was oorspronkelijk 92 en was 272. 45 00:03:20,280 --> 00:03:22,130 En dus dat is wat hier gebeurt. 46 00:03:22,170 --> 00:03:36,300 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. 47 00:03:36,810 --> 00:03:39,720 Je kunt zien dat het strekt zich uit en ik kan hetzelfde doen. 48 00:03:39,750 --> 00:03:41,530 Verander het naar zijn duizend pixels. 49 00:03:41,970 --> 00:03:45,750 Hier krijg je een mooi gedeelte Kitty en kunnen we de breedte te veranderen. 50 00:03:45,870 --> 00:03:51,900 Ik bedoel de hoogte en laten we die 500 of slechte kat. 51 00:03:51,900 --> 00:03:55,410 Het is net gespannen all over the place. 52 00:03:55,590 --> 00:03:59,550 Dus laten we gaan vooruit en reset de hoogte tot iets een beetje meer geschikt. 53 00:03:59,730 --> 00:04:13,070 Laten we gaan voor de hoogte te zijn ongeveer 100 pixels en de breedte tot ongeveer 200 zijn. 54 00:04:13,080 --> 00:04:16,590 Oké dus dat zal werken voor ons nu slechts voor wat meer oefenen. 55 00:04:16,590 --> 00:04:34,130 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. 56 00:04:34,410 --> 00:04:45,750 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. 57 00:04:45,750 --> 00:04:48,980 Dus wat we gaan doen is het selecteren van alle van het anker tags op de pagina. 58 00:04:48,990 --> 00:04:50,740 Er is een heleboel links op deze pagina. 59 00:04:50,820 --> 00:04:57,290 We gaan ieder nemen en verander de ref attribuut te gaan naar een andere website in plaats van waar ze naartoe gaan. 60 00:04:57,510 --> 00:05:02,830 Dus om te beginnen moeten we alle ankertags kiezen dus we hebben een heleboel manieren om dat te doen. 61 00:05:02,880 --> 00:05:07,170 Ik ga het links zijn links te bellen en we zullen document doen. 62 00:05:07,170 --> 00:05:23,470 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. 63 00:05:23,550 --> 00:05:35,750 We kunnen niet zomaar doen banden dot set attribuut dat niet bestaat vertelt koppeling begint op attribuut het is niet een functie. 64 00:05:35,880 --> 00:05:40,860 En dat is omdat gezegd attribuut alleen bestaat op individuele elementen en links. 65 00:05:40,860 --> 00:05:42,640 Is deze verzameling van knooppunten. 66 00:05:42,750 --> 00:05:47,960 Dus ik moet lus door het enkel als ik zou lus door een andere array-achtig object. 67 00:05:48,330 --> 00:05:51,590 Dus ik kan niet gebruiken voor elke want het is niet echt een array. 68 00:05:51,660 --> 00:05:54,880 Dus ik moet een te gebruiken voor lus of technisch niet kon ik een tijdje lus. 69 00:05:54,900 --> 00:05:56,310 De meeste mensen zouden gebruik maken van een lus. 70 00:05:56,490 --> 00:06:14,160 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. 71 00:06:14,340 --> 00:06:18,040 En laten we beginnen door gewoon afdrukken van de inhoud van de tekst. 72 00:06:18,060 --> 00:06:22,850 Dus links die tekstinhoud en we zullen annuleren die log die. 73 00:06:24,090 --> 00:06:35,140 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. 74 00:06:35,420 --> 00:06:40,050 Dus we druk op enter en je kunt zien is dit de tekst inhoud van alle links op de pagina. 75 00:06:40,200 --> 00:06:50,460 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. 76 00:06:50,520 --> 00:07:05,570 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 . 77 00:07:05,910 --> 00:07:19,990 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. 78 00:07:20,800 --> 00:07:25,050 En als we druk op enter je kunt zien Ik zal de console te sluiten. 79 00:07:25,080 --> 00:07:27,790 Alle links op de pagina zijn nu Pink. 80 00:07:27,810 --> 00:07:29,120 Ik heb een achtergrond die is roze. 81 00:07:29,280 --> 00:07:31,680 Dus dit ding hier is een link. 82 00:07:31,750 --> 00:07:34,490 Al deze saaie zijn items in het teken in te drukken. 83 00:07:34,830 --> 00:07:35,890 Het is ook een link. 84 00:07:36,270 --> 00:07:37,910 Dus laten we nog een ding. 85 00:07:38,010 --> 00:07:39,140 Laten we lus door weer. 86 00:07:39,210 --> 00:07:43,870 Raak de pijl omhoog en laten we een paar dingen dus laten we het doen stijl. 87 00:07:43,910 --> 00:07:52,060 Grens gelijk aan één pixel en laten we het doen Dasht paars. 88 00:07:52,410 --> 00:08:04,980 En op de volgende regel verbindt I stijl en laten we de kleur oranje te zijn. 89 00:08:05,520 --> 00:08:07,880 Dus die twee druk op enter. 90 00:08:07,890 --> 00:08:16,010 En je kunt zien we deze echt mooi links op onze pagina roze achtergrond kleine paarse grens niet zomaar een grens. 91 00:08:16,110 --> 00:08:18,090 Het is Dasht zeer speciaals. 92 00:08:18,180 --> 00:08:20,610 En we krijgen sommige oranje tekst in daar ook. 93 00:08:21,240 --> 00:08:27,640 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. 94 00:08:27,750 --> 00:08:31,230 Dus ik wil ze allemaal te veranderen naar WDW. 95 00:08:31,270 --> 00:08:36,590 Omdat dot com behoeften naar de con. En ik heb al mijn links geselecteerd. 96 00:08:36,630 --> 00:08:41,620 Deze enorme collectie en ik al dat lus geschreven, dus ik ga het hergebruiken. 97 00:08:42,540 --> 00:08:45,680 En alleen maar om nogmaals dit is iets dat veel zal doen. 98 00:08:45,690 --> 00:08:51,070 Dus maak je comfortabel als je deze vier lussen, waar we niet kunnen gebruik maken van een voor elk kan schrijven. 99 00:08:51,090 --> 00:08:52,610 Dus moeten we gebruik maken van een lus. 100 00:08:52,680 --> 00:08:53,770 We doen dit de hele tijd. 101 00:08:53,790 --> 00:08:59,050 En vanaf hier op uit, totdat we bij Jey vraag gaan we schrijven dit type lijn veel. 102 00:08:59,310 --> 00:09:02,080 Dus we gaan verbindt I. 103 00:09:02,430 --> 00:09:08,580 En we gaan beginnen, maar gewoon uit te printen waar elke licht, zodat logboek gaat annuleren. 104 00:09:10,050 --> 00:09:16,060 En we gaan dat log get attribuut van atra annuleren. 105 00:09:18,240 --> 00:09:19,770 Gewoon zo. 106 00:09:20,400 --> 00:09:25,740 En we niet technisch moeten uitvinden dat maar gewoon zodat het makkelijker voor u om te zien. 107 00:09:26,250 --> 00:09:40,290 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. 108 00:09:40,380 --> 00:09:45,090 Dit is de link naar dit ding javascript forward nul of nee. 109 00:09:45,150 --> 00:10:01,710 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. 110 00:10:01,770 --> 00:10:02,310 OK. 111 00:10:02,490 --> 00:10:04,730 Dus laten we ze nu veranderen. 112 00:10:04,890 --> 00:10:11,230 Compton-Rock Blog Links Ik werd ingesteld attribuut en we hoeven niet constant te loggen in te stellen attribuut. 113 00:10:11,430 --> 00:10:17,400 En laten we ze te veranderen om te zijn wat we willen HGF we willen HPF veranderen W.W worden .. 114 00:10:17,430 --> 00:10:25,930 Dat doen HTP colon slash slash BW dot Bing dot com net als dat. 115 00:10:26,340 --> 00:10:27,930 En we druk op enter. 116 00:10:27,930 --> 00:10:29,570 Het maakt niet uit als er iets veranderd. 117 00:10:29,880 --> 00:10:32,650 Als we het type banden en we kijken alleen op wat we hebben. 118 00:10:32,820 --> 00:10:42,480 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. 119 00:10:42,780 --> 00:10:45,870 En het laatste wat we doen om het te testen is om één klik. 120 00:10:45,990 --> 00:10:52,860 Dus laten we snel op de knop Aanmelden of laten we stoppen met Gmail en je kunt zien het opent het zijn voor mij. 121 00:10:53,580 --> 00:11:07,470 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. 122 00:11:07,500 --> 00:11:19,500 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. 123 00:11:19,500 --> 00:11:22,470 Dus dat is een patroon dat we gaan veel te gebruiken in de komende paar video's.