1
00:00:01,470 --> 00:00:02,790
OK歡迎回來。

2
00:00:02,790 --> 00:00:05,340
所以這個視頻將是一個有點不同。

3
00:00:05,340 --> 00:00:11,410
我們不會引進操縱DOM的任何新的方法，但我們會採取什麼我們學到並沿做的代碼一點點。

4
00:00:11,640 --> 00:00:13,860
因此，我們將與谷歌的主頁上玩。

5
00:00:13,950 --> 00:00:20,080
所以，我建議你打開谷歌做這一點跟我在一起，或你這樣做你自己，你看視頻了。

6
00:00:20,340 --> 00:00:23,780
而我們將只是做一些有趣的事情，比如修改標誌。

7
00:00:23,940 --> 00:00:32,220
我們會做一個小貓的圖片這段時間只是要公平對待所有那些愛貓人士，讓他們去為點com或類似的東西，這將改變所有鏈接。

8
00:00:32,250 --> 00:00:43,710
在一個點，我確實想在本課程強調的是，我們可以使用一個循環來操作多個元素，因此我們並不總是要選擇一件事，改變其顏色或選擇一個圖像，改變它的來源。

9
00:00:43,770 --> 00:00:49,440
我們可以通過該列表中選擇所有圖像，然後循環並為每一個改變它的來源。

10
00:00:49,470 --> 00:00:51,080
所以我要告訴你我會怎麼做，在這裡。

11
00:00:51,300 --> 00:00:52,790
所以我們從簡單的開始。

12
00:00:53,100 --> 00:00:55,050
讓我們選擇這個標誌開始。

13
00:00:55,380 --> 00:01:01,730
和快速側面說明，如果你在谷歌的某一天，他們有一個谷歌塗鴉，而不是這種定期的標誌。

14
00:01:01,860 --> 00:01:03,640
它可能不是這裡的圖像。

15
00:01:03,780 --> 00:01:06,850
有時，他們有花哨的動畫或互動遊戲。

16
00:01:06,930 --> 00:01:10,390
而在這情況下，他們可能是這樣的canvas元素。

17
00:01:10,470 --> 00:01:14,980
所以，如果你遇到，當你檢查這是你可以只是看這部分的所有權利。

18
00:01:15,010 --> 00:01:22,100
我們已經看到了如何改變圖像源，但我只是想證明你可以做到這一點對任何人的網站，所以選擇它。

19
00:01:22,530 --> 00:01:26,680
這是一個形象，它有一個ID，這樣很容易。

20
00:01:26,850 --> 00:01:28,290
HP標誌。

21
00:01:28,410 --> 00:01:38,660
因此，讓我們選擇讓我們稱之為我們的標誌等於記錄的查詢選擇HP標誌。

22
00:01:38,880 --> 00:01:42,090
當然，我們可以通過ID已經使用的元素以及。

23
00:01:42,390 --> 00:01:46,210
因此，我們最終與標誌相等。

24
00:01:46,320 --> 00:01:47,890
所以，我們現在已經選擇了。

25
00:01:48,030 --> 00:01:51,540
如果我們想改變形象，我們能改變的來源。

26
00:01:51,540 --> 00:01:55,530
我們需要使用一套屬性，我在這裡有剛的形象。

27
00:01:56,190 --> 00:01:57,650
漂亮的小貓。

28
00:01:57,660 --> 00:01:59,070
所以我要利用這個基丹給你。

29
00:01:59,060 --> 00:02:04,540
我會複製，我要更新這個標誌的源頭做到這一點。

30
00:02:04,650 --> 00:02:10,210
做標誌點設置屬性，而不是恐懼。

31
00:02:10,380 --> 00:02:12,630
我們打算只寫源。

32
00:02:12,810 --> 00:02:21,160
第二個參數是新的來源，我回車，我把我可愛的小貓咪羅蓋特出現。

33
00:02:21,210 --> 00:02:22,760
你可能會得到這樣的消息。

34
00:02:22,860 --> 00:02:24,720
根據所使用的圖像。

35
00:02:24,900 --> 00:02:26,770
所以，我會簡單介紹一下這是什麼。

36
00:02:26,910 --> 00:02:36,470
這只是提的是，我們是滿載TTP，你可以看到出現的，而我的源設置到B的圖像是H TTP一個頁面上。

37
00:02:36,570 --> 00:02:40,700
並使其短HTP比HGP更安全。

38
00:02:40,710 --> 00:02:46,400
因此，它的抱怨，這應該是所有HTP是的，我們不應該使用不太安全的事。

39
00:02:46,410 --> 00:02:49,560
這是一個非常簡單的版本，但它仍然可以讓我們做到這一點。

40
00:02:49,560 --> 00:02:53,630
這不是什麼，我們只是想在這裡做的只是玩弄谷歌一個巨大的問題。

41
00:02:53,670 --> 00:03:00,990
這是東西，雖然你會想考慮，如果你在你自己的應用程序做這樣的事情，這將是一個問題呢。

42
00:03:01,020 --> 00:03:03,070
所以回到這裡的內容。

43
00:03:03,280 --> 00:03:11,230
實測值改變這個貓的寬度和高度，以便它佔用的原始谷歌標誌沒有空間相同的量。

44
00:03:11,460 --> 00:03:19,800
其實我可以看到，高度為92最初與是272。

45
00:03:20,280 --> 00:03:22,130
所以這就是這裡發生了什麼。

46
00:03:22,170 --> 00:03:36,300
你可以看到，如果我想改變這一點，我可以做這樣的事情的標誌點式的圓點，並採取一個字符串，然後更改為500像素。

47
00:03:36,810 --> 00:03:39,720
你可以看到它伸出我可以做同樣的事情。

48
00:03:39,750 --> 00:03:41,530
將其更改為一千像素。

49
00:03:41,970 --> 00:03:45,750
得到一個很好的舒展小貓，我們可以改變的寬度。

50
00:03:45,870 --> 00:03:51,900
我指的是高度，讓我們的500或可憐的貓。

51
00:03:51,900 --> 00:03:55,410
它剛剛伸展所有的地方。

52
00:03:55,590 --> 00:03:59,550
因此，讓我們繼續前進，高度恢復到更合適些一點點。

53
00:03:59,730 --> 00:04:13,070
我們去的高度為約100個像素並且寬度為大約200。

54
00:04:13,080 --> 00:04:16,590
好吧，這樣會為我們工作，現在只是一些更多的練習。

55
00:04:16,590 --> 00:04:34,130
讓我們也給它的邊框圍繞圖像，這樣的標誌，樣式邊框平等相待，我們會做一個兩像素堅實紫色的邊界有我們周圍的圖像精彩的合作夥伴。

56
00:04:34,410 --> 00:04:45,750
行，所以現在讓我們來說明是什麼我在這一次選擇了一堆元素，並使用循環來操縱它們，而不是單獨做視頻年初推出。

57
00:04:45,750 --> 00:04:48,980
所以，我們要做的就是選擇頁面上的所有錨標籤。

58
00:04:48,990 --> 00:04:50,740
有很多的這個頁面上的鏈接。

59
00:04:50,820 --> 00:04:57,290
我們將採取每一個，改變裁判的屬性去一些其他的網站，而不是無論身在何處。

60
00:04:57,510 --> 00:05:02,830
因此，要啟動，我們需要選擇所有的錨標籤，所以我們有一大堆這樣做的方法。

61
00:05:02,880 --> 00:05:07,170
我打算把它鏈接的鏈接，我們將盡文檔。

62
00:05:07,170 --> 00:05:23,470
我們可以做一個查詢信所有，但我會做得到按標籤名稱錨標記元素，如果我們看一下鏈接，你可以看到，我們得到了不少在此頁面上，所以我們要通過這個去循環。

63
00:05:23,550 --> 00:05:35,750
我們不能只是做鏈接點不存在告訴我們鏈接開始於屬性它不是一個函數來設置屬性。

64
00:05:35,880 --> 00:05:40,860
那是因為所說的屬性只對單個元素和鏈接存在。

65
00:05:40,860 --> 00:05:42,640
這是集合節點。

66
00:05:42,750 --> 00:05:47,960
所以，我需要遍歷它，就像我會通過任何其他陣列狀物體循環。

67
00:05:48,330 --> 00:05:51,590
所以，因為它不是一個真正的數組，我不能使用每個。

68
00:05:51,660 --> 00:05:54,880
所以，我需要使用一個for循環或技術上我可以用一個while循環。

69
00:05:54,900 --> 00:05:56,310
大多數人會使用一個for循環。

70
00:05:56,490 --> 00:06:14,160
因此，對於是平等的零小於鏈接，長度將增加1，然後在循環中，我們要訪問各個環節的聯繫你好。

71
00:06:14,340 --> 00:06:18,040
讓我們通過剛剛打印出的文本內容入手。

72
00:06:18,060 --> 00:06:22,850
所以鏈接的文本內容，我們將取消該日誌。

73
00:06:24,090 --> 00:06:35,140
所以這是一個常見的模式，通過一束元素循環和做的事情也許不是打印出來的控制台，但不知何故顯示它或改變一些事情改變其顏色。

74
00:06:35,420 --> 00:06:40,050
因此，我們按下回車鍵，你可以看到這是所有網頁上的鏈接的文本內容。

75
00:06:40,200 --> 00:06:50,460
所以，我們讓你知道的東西如照片和翻譯谷歌，加上驅動器播放YouTube所有這些鏈接是這個頁面這是有意義的看到，這是谷歌的主頁上的某個地方。

76
00:06:50,520 --> 00:07:05,570
因此，而不是只是打印東西出來一擊向上的箭頭，並返回到這個循環，讓我們實際上通過改變風格開始，這樣我們就可以看到長度更容易讓我們做他​​們不同的顏色，讓我們讓他們有他們周圍的邊框。

77
00:07:05,910 --> 00:07:19,990
所以，我要擺脫我的控制台登錄的，我會做我猞猁的風格和我們將改變開始，讓我們做一個粉紅色的背景。

78
00:07:20,800 --> 00:07:25,050
如果我們按下回車鍵，你可以看到，我會關閉控制台。

79
00:07:25,080 --> 00:07:27,790
所有頁面上的鏈接現在粉色。

80
00:07:27,810 --> 00:07:29,120
我有一個背景是粉紅色。

81
00:07:29,280 --> 00:07:31,680
所以這個事情在這裡是一個鏈接。

82
00:07:31,750 --> 00:07:34,490
所有這些蹩腳的是在按鍵符號項目。

83
00:07:34,830 --> 00:07:35,890
這也是一個鏈接。

84
00:07:36,270 --> 00:07:37,910
所以，讓我們做一件事。

85
00:07:38,010 --> 00:07:39,140
讓我們遍歷一次。

86
00:07:39,210 --> 00:07:43,870
打向上箭頭，讓我們做幾件事情讓我們做款式。

87
00:07:43,910 --> 00:07:52,060
邊境等於一個像素，讓我們做什特紫色。

88
00:07:52,410 --> 00:08:04,980
並在下一行鏈接我的風格，讓我們改變顏色為橙色。

89
00:08:05,520 --> 00:08:07,880
因此，這兩個回車。

90
00:08:07,890 --> 00:08:16,010
你可以看到，我們得到我們的網頁粉紅色的背景微小的紫色邊框不只是一個普通的邊界，這些真的很美鏈接。

91
00:08:16,110 --> 00:08:18,090
這是什特很花哨。

92
00:08:18,180 --> 00:08:20,610
而我們在那裡得到一些橙色文本。

93
00:08:21,240 --> 00:08:27,640
但是，如果我們點擊它們，你可以看到，陷阱還沒有改變，這是有道理的，因為我們並沒有改變他們。

94
00:08:27,750 --> 00:08:31,230
所以我想改變他們都去WDW。

95
00:08:31,270 --> 00:08:36,590
作為科網需要去的騙子。而且我已經有我的選擇鏈接。

96
00:08:36,630 --> 00:08:41,620
這個巨大的收藏，我已經有一個循環寫，所以我要重新使用它。

97
00:08:42,540 --> 00:08:45,680
而剛剛重申這一點是會做很多。

98
00:08:45,690 --> 00:08:51,070
因此，獲得舒適的，如果你能寫這四個循環，我們不能使用每個。

99
00:08:51,090 --> 00:08:52,610
因此，我們必須使用一個for循環。

100
00:08:52,680 --> 00:08:53,770
我們做這一切的時候。

101
00:08:53,790 --> 00:08:59,050
而從現在起直到我們得到JEY查詢我們要被寫這種類型的線很多。

102
00:08:59,310 --> 00:09:02,080
所以，我們要鏈接I.

103
00:09:02,430 --> 00:09:08,580
我們要開始只是打印出來，每一個燈熄滅所以取消該日誌。

104
00:09:10,050 --> 00:09:16,060
而我們將取消全反式維甲酸該日誌GET屬性。

105
00:09:18,240 --> 00:09:19,770
就這樣。

106
00:09:20,400 --> 00:09:25,740
而我們在技術上不創造一種只是所以它更容易給你看。

107
00:09:26,250 --> 00:09:40,290
而我們缺少我們不變的日誌收盤打印看到這裡，現在我們得到的所有鏈接的列表和它的有趣，你可以看到其中的一些。

108
00:09:40,380 --> 00:09:45,090
這一次是鏈接到這件事情的JavaScript向前零或沒有。

109
00:09:45,150 --> 00:10:01,710
所以，有些人只是空的，他們沒有一個8 Tref的一些人去獨立的網站或其中的一些是相對路徑這樣的位置，其中一些是絕對的像這樣的就在這裡。

110
00:10:01,770 --> 00:10:02,310
好。

111
00:10:02,490 --> 00:10:04,730
現在讓我們改變它們。

112
00:10:04,890 --> 00:10:11,230
康普頓岩石博客鏈接我得到了設置屬性，我們並不需要經常登錄其設置的屬性。

113
00:10:11,430 --> 00:10:17,400
而讓我們改變他們是我們想要什麼HGF我們想改變HPF是W.W ..

114
00:10:17,430 --> 00:10:25,930
這就是做結腸HTP斜線斜線點BW兵科網就這樣。

115
00:10:26,340 --> 00:10:27,930
我們按下回車鍵。

116
00:10:27,930 --> 00:10:29,570
它看起來並不像什麼改變。

117
00:10:29,880 --> 00:10:32,650
如果我們輸入的聯繫，我們只看我們所擁有的。

118
00:10:32,820 --> 00:10:42,480
每一個人現在去是點com，我們還可以檢查之一，我們可以在元素督察它去是科網看到的。

119
00:10:42,780 --> 00:10:45,870
同時，我們也來測試它的最後一件事是點擊之一。

120
00:10:45,990 --> 00:10:52,860
因此，讓我們快速的登錄按鈕，或者讓我們退出Gmail中，你可以看到它開闢了是我。

121
00:10:53,580 --> 00:11:07,470
所以總結起來，我們選擇了一堆東西的鏈接集合，然後我們遍歷集合有一個for循環，然後內部的循環，我們可以做一些事情來然後將重複到所有這些每個元素。

122
00:11:07,500 --> 00:11:19,500
所以我改變了背景顏色的字體顏色，我們改變裁判的邊界，我們只需編寫幾行並將其應用到我不知道這個網頁上20或30個不同的長度。

123
00:11:19,500 --> 00:11:22,470
所以，這是我們要在接下來的幾部影片使用了大量的模式。