OK, witamy z powrotem.
Więc ten film będzie trochę inaczej.
Nie zamierzamy wprowadzać żadnych nowych sposobów manipulowania DOM, ale mamy zamiar podjąć, czego nauczyliśmy się i zrobić trochę kodu razem.
Więc mamy zamiar grać stronie głównej Google.
Więc polecam, aby otworzyć Google albo zrobić to razem ze mną, czy to zrobić na własną rękę po obejrzeć film.
A my będziemy po prostu zrobić kilka rzeczy zabawnych, jak zmienić logo.
Zrobimy to obraz kotek tym razem, tylko żeby być fair w stosunku do tych wszystkich miłośników kotów zmieni wszystkie linki tak, że idą do bycia com kropka albo coś w tym stylu.
Jeden punkt, który chcę podkreślić w tej lekcji jest to, że możemy użyć pętli manipulować wiele elementów, więc nie zawsze trzeba wybrać jedno i zmienić jego kolor lub wybierz jedno zdjęcie i zmienić jego źródło.
Możemy wybrać wszystkie obrazy i następnie pętli tej listy, a dla każdego z nich zmienić swoje źródło.
Więc mam zamiar pokazać, jak miałbym to zrobić tutaj.
Więc zacznijmy proste.
Zacznijmy wybierając to logo.
A szybkie marginesie, jeśli jesteś w Google w dniu, w którym mają one Google Doodle zamiast regularny logo.
To nie może być tutaj obraz.
Czasami mają fantazyjne animacje i interaktywne gry.
I w tym przypadku może to być coś podobnego elementu canvas.
Więc jeśli nie napotka że podczas inspekcji To wszystko prawda można tylko oglądać tę część.
Widzieliśmy już, jak zmienić źródło obrazu, ale po prostu chcę pokazać, że można to zrobić na stronie niczyjej aby go wybrać.
Jest to obraz i ma identyfikator, dzięki czemu ułatwia.
Logo HP.
Warto więc wybrać, które nazwijmy to nasze logo równa udokumentować, że wybierak zapytania HP logo.
I oczywiście, że mógł użyć elementu przez ID, jak również.
Tak więc skończyć z logo równej.
Więc my teraz, że wybrana.
A jeśli chcemy zmienić obraz zrobimy zmienić źródło.
Musimy wykorzystać zestaw atrybutów i ja właśnie obraz tutaj.
Ładny kotek.
Więc mam zamiar wykorzystać tę Kidan jesteś.
Będę skopiować to i mam zamiar zaktualizować źródło tego logo, aby to zrobić.
Czy logo kropka atrybut zamiast strachu.
Idziemy po prostu napisać źródło.
I drugi argument jest nowe źródło i nacisnąć enter i dostaję mój miły mały kota Roquette pojawić.
Może pojawić się komunikat jak poniżej.
W zależności od obrazu, którego używasz.
Więc ja krótko wyjaśnić, co to jest.
To tylko wspomnieć, że jesteśmy na stronie obciążonej TTP jak widać, że pojawiają się i obraz, który mam ustawić źródło do B jest H TTP.
I aby to krótkie HTP jest bardziej bezpieczny niż HGP.
Więc to skarży, że powinno być wszystko HTP Tak nie powinno być za pomocą czegoś mniej bezpieczny.
To bardzo prosta wersja, ale nadal pozwala nam to zrobić.
Nie jest to ogromny problem dla co my po prostu staramy się zrobić tutaj po prostu grając z Google.
To jest coś, a jednak, że warto rozważyć, jeśli robi coś takiego we własnej aplikacji i byłoby problemem wtedy.
Wracając do treści tutaj.
Znaleziono zmienić szerokość i wysokość tego kota tak, że zajmuje tyle samo miejsca, że ​​oryginalne logo Google zrobił.
Widzę, że rzeczywiście wysokość wynosiła 92 oryginalnie i było dwieście siedemdziesiąt dwa.
A więc to, co się tutaj dzieje.
Można sprawdzić, czy chcę to zmienić mogę zrobić coś takiego logo stylu kropka kropki i pobiera ciąg i po prostu zmienić na 500 pikseli.
Widać, że rozciąga się i mogę robić to samo.
Zmień go za tysiąc pikseli.
Uzyskać ładny rozciągania kotka i możemy zmienić szerokość.
Mam na myśli wysokość i zróbmy to 500 lub słabe kota.
To jest po prostu coraz rozciągnięte w każdym miejscu.
Więc śmiało i zresetować wysokość do czegoś trochę bardziej odpowiednie.
Chodźmy na wysokość wynosi około 100 pikseli i szerokość wynosi około 200.
Dobrze więc, że będzie pracować dla nas na razie tylko na trochę więcej praktyki.
Załóżmy również nadać mu ramkę wokół tego obrazu tak, że logo styl obramowania równa i zrobimy solidną fioletowy granicy dwóch pikseli i jest naszym wspaniałym partnerem wokół tego obrazu.
OK, więc teraz przejdźmy do tego, co przedstawiłem na początku filmu, który jest wybranie kilka elementów na raz i za pomocą pętli do manipulowania nimi zamiast zrobić to indywidualnie.
Więc co mamy zamiar zrobić, to wybrać wszystkie znaczniki kotwicznych na stronie.
Jest dużo linków na tej stronie.
Jedziemy do podjęcia każdego z nich i zmienić atrybut ref, aby przejść do innej strony internetowej, a nie tam, gdzie idą.
Więc zacząć musimy wybrać wszystkie znaczniki zakotwiczenia więc mamy kilka sposobów robić.
Zamierzam go Linki są linki zadzwonić i zrobimy dokument.
Mogliśmy zrobić do nas zapytania wszystko, ale mam zamiar zrobić uzyskać elementy wg nazwy tag tag kotwicy i jeśli spojrzymy na linki widać mamy sporo na tej stronie, więc jedziemy do pętli przez to.
Nie możemy po prostu zrobić linki dot ustawiony atrybut, który nie istnieje mówi nam związek zaczyna się od atrybutu nie jest funkcją.
A to dlatego, że atrybut istnieje tylko na poszczególnych elementów i linki.
Jest to zbiór węzłów.
Więc muszę pętli przez nią tak jak bym pętli jakiejkolwiek innej tablicy podobnego przedmiotu.
Więc nie można użyć dla każdego, ponieważ nie jest prawdziwa tablica.
Więc muszę użyć pętli for lub technicznie mogę użyć pętli while.
Większość ludzi użyłby pętli for.
Więc gdyż są równe zero jest mniejsza niż długość i linki, które doda 1, a następnie wewnątrz pętli mamy zamiar wejść do każdego z poszczególnych linków linku Hi.
I zacznijmy po prostu drukując jej zawartość tekstową.
Więc linków zawartość tekstową, a my anulować które zalogować tym.
Więc jest to wspólny wzór pętli przez kilka elementów i robić coś może nie drukując go w konsoli, ale pokazujemy go w jakiś sposób zmienia coś o to zmieniając jego kolor.
Tak trafiliśmy wejść i można zobaczyć, to jest treść tekstu wszystkie linki na stronie.
Tak więc mamy wiedzieć takie rzeczy jak zdjęcia i przetłumaczyć Google Plus YouTube napędu odgrywają te wszystkie linki są gdzieś na tej stronie, która ma sens widząc, że jest to strona główna Google.
Tak więc, zamiast po prostu wydrukować rzeczy w przeboju strzałki w górę i wrócić do tej pętli i niech zacząć zmieniając styl, dzięki czemu możemy zobaczyć długości łatwiej zróbmy je na inny kolor i zróbmy je mieć obramowanie wokół nich ,
Więc mam zamiar pozbyć mojej konsoli, które zalogować i zamierzam zrobić lynx I styl, a my zmienić tło do rozpoczęcia i zróbmy to na różowo.
A jeśli nacisnąć enter widać będę zamknąć konsolę.
Wszystkie linki na stronie są teraz Różowy.
Mam doświadczenie, co jest różowe.
Więc to coś tu jest link.
Wszystkie te tandetne są pozycje w przycisk Zaloguj.
Jest też link.
Więc zróbmy jeszcze jedno.
Spójrzmy prawdzie w pętlę przez ponownie.
Hit strzałki w górę i zróbmy kilka rzeczy, więc zróbmy styl.
Granica jest równa jeden piksel i zróbmy Dasht fioletowy.
A w następnej linii I łączy styl i zmieńmy kolor będzie pomarańczowy.
Więc te dwa wciśnij enter.
I widać możemy uzyskać te naprawdę piękne linków na stronie różowym tle maleńkiej purpurowy nie granicy zwykłym granicznej.
To Dasht bardzo fantazyjne.
A my trochę pomarańczowy tekst również tam.
Ale jeśli je kliknięciem można zobaczyć, że pułapki jeszcze nie zmieniło i to ma sens, bo ich nie zmieniło.
Więc chcę zmienić je wszystkie, aby przejść do WDW.
Będąc dot com potrzeby, aby przejść do con. I mam już wybrane moje linki.
Ten ogromny zbiór, a ja już, że pętla napisany tak będę go używać ponownie.
I tylko powtórzyć to jest coś, co będzie robić dużo.
Tak się komfortowo, jeśli można pisząc te cztery pętle, gdzie nie można użyć dla każdego.
Więc musimy użyć pętli for.
Robimy to cały czas.
I od tego momentu, aż dojedziemy do Jey zapytania będziemy pisać tego typu linią partii.
Więc mamy zamiar linki I.
I mamy zamiar zacząć, ale po prostu drukuje się, gdzie każde światło idzie tak anulować ten dziennik.
I mamy zamiar zrezygnować tego atrybutu dziennika get ATRA.
Właśnie tak.
A my nie technicznie trzeba wymyślić to, ale tak to jest łatwiejsze do zobaczenia.
A my brakuje naszym stałym drukiem zamknięcia dziennika, aby zobaczyć tu i teraz możemy uzyskać listę wszystkich łączy, a to ciekawe widać, że niektóre z nich.
Ten link do tej rzeczy javascript przodu zerowej lub nie.
Dlatego niektóre z nich są po prostu pusta nie mieć 8 Tref niektóre z nich trafiają do oddzielnych stron internetowych lub niektóre z nich są ścieżki względne jak ten tutaj, a niektóre z nich są absolutne jak ten tutaj.
OK.
Więc teraz je zmienić.
Compton-Rock blogach linki mam ustawiony atrybut i nie muszą stale zalogować go ustawić atrybut.
I zmieńmy je za to, co chcemy HGF chcemy zmienić HPF być W.W ..
To zrobić ukośnik HTP dwukropek ukośnik BW dot Bing dot com tak po prostu.
A my wciskamy enter.
To nie wygląda jak coś się zmieniło.
Jeśli typ połączenia i po prostu patrzeć na to, co mamy.
Każdy jeden idzie teraz do bycia dot com i możemy również sprawdzić jeden i widzimy w Inspektorze element, to idzie do bycia dot com.
I ostatnia rzecz, którą robimy, żeby go przetestować to kliknąć jeden.
Warto więc szybkie przycisk Zaloguj się lub niech zrezygnować z Gmaila i widać, że otwiera się do góry dla mnie.
Więc Podsumowując wybraliśmy pęczek rzeczy zbiór linków a następnie przez pętlę tej kolekcji z pętli for a następnie wewnątrz pętli for, że możemy zrobić coś dla każdego pojedynczego elementu, który zostanie następnie powtarzane do wszystkich z nich.
Więc zmieniłem kolor tła granicy kolor czcionki zmieniliśmy ref i mieliśmy tylko napisać kilka wierszy i nałożono na nie wiem, 20 lub 30 różnych długościach na tej stronie.
Więc to jest wzór, który mamy zamiar używać dużo w ciągu najbliższych kilku filmów.