1
00:00:00,300 --> 00:00:03,940
Więc teraz mamy omówione dlaczego należy dbać o Domm dlaczego to jest ekscytujące.

2
00:00:03,990 --> 00:00:07,640
I my też o to, co jest, co oznacza model obiektowy dokumentu.

3
00:00:07,680 --> 00:00:15,130
Fakt, że jest to tylko model każdego elementu na stronie za pomocą JavaScript obiektów górny poziom obiektu nazywa się dokument.

4
00:00:15,240 --> 00:00:18,340
Więc to jest super, ale nie widzieliśmy, jak zrobić coś z nim jeszcze.

5
00:00:18,390 --> 00:00:23,460
Więc w tym filmie zamierzam pokrótce przedstawić proces manipulowania rzeczy przy użyciu psa.

6
00:00:23,790 --> 00:00:29,630
Więc mam sprowadzić cały proces do dwóch słów kluczowych zaznaczyć i manipulować.

7
00:00:29,670 --> 00:00:47,840
Więc tak jak zobaczyć ocenić, gdzie piszemy wybieraka, aby wybrać coś z klasą specjalnych lub wszystkie godz nich lub wszystkich znaczników obrazu dobieramy elementy, a następnie zastosować style, takie jak kolor tła fioletowy granicy jednego piksela czerni z JavaScript i DOM i ludności.

8
00:00:47,850 --> 00:00:51,380
Mamy również wybrać elementy, chociaż robimy to w zupełnie inny sposób.

9
00:00:51,480 --> 00:01:01,260
Piszemy kodu javascript, który jedzie i dobiera elementy i zwraca je do nas, a potem zmienić właściwości na nich więc wybrać coś, a potem manipulować.

10
00:01:01,290 --> 00:01:09,750
Tak więc w ciągu najbliższych kilku slajdach mam zamiar pokazać, jak mógł wybrać tę H-1 mój nagłówek i jak możemy zmienić to być różowe.

11
00:01:09,750 --> 00:01:15,290
Mówiłem to wiele w ciągu ostatnich kilku filmach, ale nie chcę, aby skupić się na składni tak samo jak pojęć.

12
00:01:15,330 --> 00:01:18,930
Następnych kilka filmów będzie dostać się do Nitty Gritty wyboru i manipulacji.

13
00:01:18,930 --> 00:01:21,150
Jest to tylko przegląd, jak to działa.

14
00:01:21,150 --> 00:01:25,600
Więc na tym slajdzie mam zamiar pokazać, jak można wybrać tę H1 podobnie jak C.

15
00:01:25,620 --> 00:01:28,580
Istnieje wiele różnych sposobów, wybierając dany element.

16
00:01:28,800 --> 00:01:36,920
W tym przypadku ta linia kodu dokumentu selektor zapytań dot H-1 ma zamiar wybrać H-1 na tej stronie.

17
00:01:37,050 --> 00:01:40,960
Tak już podkreślono tu z tym zielonym polu, dzięki czemu można zobaczyć, co się wybiera.

18
00:01:41,340 --> 00:01:48,640
Więc znowu var H-1 to po prostu każda dowolna zmienna chcemy równa udokumentować, że selektor zapytania 8: 1.

19
00:01:48,690 --> 00:01:52,420
Więc będziemy spędzać dużo więcej czasu z selektorem zapytań i określić, co to jest i jak to działa.

20
00:01:52,470 --> 00:01:59,920
Ale to zwraca obiekt, który reprezentuje tę H1 i oszczędza, że ​​w zmiennej H-1.

21
00:01:59,970 --> 00:02:02,190
Więc to jest proces zaznaczania.

22
00:02:02,190 --> 00:02:11,170
Kolejna część manipuluje się tak manipulować go można zrobić różne rzeczy i wszystko, co mam zamiar zrobić tutaj jest zmienić kolor być różowe.

23
00:02:11,490 --> 00:02:18,470
Więc po prostu napisać H-1, który jest naszą zmienną, która ma na celu reprezentujący dot stylu H-1.

24
00:02:18,510 --> 00:02:25,580
To jedna własność i że własność styl jest ogromny obiekt o kilka innych właściwości i koloru jest jednym z nich.

25
00:02:25,920 --> 00:02:28,920
Więc H-1 ma styl, ale kolor jest równa różowe.

26
00:02:28,920 --> 00:02:30,240
A potem to wszystko, co mamy do zrobienia.

27
00:02:30,270 --> 00:02:37,500
A przeglądarka widzi, że mogę zmienić tę właściwość, aby różowe i automatycznie aktualizuje co wyświetlane obracając ją różowym.

28
00:02:37,500 --> 00:02:41,140
Więc wybraliśmy tutaj, a następnie manipulować.

29
00:02:42,120 --> 00:02:43,560
Więc mam tu jeszcze jeden przykład.

30
00:02:43,610 --> 00:02:45,230
To trochę bardziej skomplikowane.

31
00:02:45,240 --> 00:02:52,940
Robimy bardzo prostą animację, gdzie co drugi mamy zmianę koloru tła ciała pomiędzy niebieskim i białym.

32
00:02:52,950 --> 00:02:58,620
Więc co trzeba zrobić w pierwszej kolejności, to wybrać ciało, a następnie manipulować go tak, aby go wybrać.

33
00:02:58,740 --> 00:03:06,720
Mam inną linię przy użyciu wybieraka zapytania zrzutu dokument, który znów mamy zamiar wrócić w kolejnym dokumencie wideo, które ciała selektor zapytania.

34
00:03:06,780 --> 00:03:15,450
Tak, że daje mi element ciała, gdzie faktycznie daje mi reprezentacja obiektowego modelu tym, że mogę zapisać w zmiennej ciała.

35
00:03:15,450 --> 00:03:23,940
Wtedy mam zmienna ta jest niebieski, który jest po prostu logiczna, że ​​będę używać, bo muszę wiedzieć, czy będę z niebieskiego na biały lub białego na niebieski.

36
00:03:24,030 --> 00:03:28,870
Tak zaczyna się jako fałszywe, a następnie używam odmierzanie czasu, który omówiliśmy kilka lat temu.

37
00:03:28,920 --> 00:03:32,230
Jeśli nie pamiętasz, jak to działa to w zasadzie przyjmuje dwa argumenty.

38
00:03:32,340 --> 00:03:39,030
Pierwszy z nich przedstawiono kod do uruchomienia funkcji oraz drugi szereg lub czas w milisekundach.

39
00:03:39,150 --> 00:03:46,230
Więc trzeba tę liczbę milisekund, która jest tysiąc lub jedną sekundę i każdy drugi będzie to nazwać ten kod.

40
00:03:46,560 --> 00:03:51,080
Więc co ten kod robi to sprawdza, czy tło jest obecnie na niebieski, jeśli to jest.

41
00:03:51,180 --> 00:03:56,330
Następnie zmień go być białe, jeśli tło jest białe potem zmienić się na niebiesko.

42
00:03:56,610 --> 00:04:00,030
Tak, aby przyjrzeć się bliżej mamy, jeśli jest niebieski.

43
00:04:00,120 --> 00:04:01,640
Więc to tylko zmienne.

44
00:04:01,650 --> 00:04:02,900
Zaczyna się jako fałszywe.

45
00:04:02,910 --> 00:04:07,890
Tak więc po raz pierwszy strona ładuje tło jest białe jest niebieski jest fałszywe.

46
00:04:07,920 --> 00:04:16,570
Tak więc ta linia nie działa, ale ten nie ma innego ciała stylu ciemnym tle równa tym kolorze szesnastkowym, który jest niebieski.

47
00:04:16,770 --> 00:04:18,840
Tak, że zmienia się tło niebieskie.

48
00:04:19,140 --> 00:04:22,960
Więc po prostu zmienić nasz jest zmienna niebieski z false na true.

49
00:04:23,130 --> 00:04:27,690
I to jest miłe sortowania sposób to zrobić z wykrzyknikiem lub nie operatora.

50
00:04:27,780 --> 00:04:32,550
Tak więc ten kod jest uruchamiany ponownie, następnym razem, to niebieski jest już prawdą.

51
00:04:32,850 --> 00:04:36,870
Więc ten kod działa, ale ciało ma styl tła równa bieli.

52
00:04:36,870 --> 00:04:38,550
Więc teraz wracamy do białego.

53
00:04:38,670 --> 00:04:42,980
To nie działa, a następnie zmieniamy jest niebieski z powrotem na false.

54
00:04:43,290 --> 00:04:44,980
I że utrzymuje będzie zawsze.

55
00:04:45,090 --> 00:04:49,950
Więc nie, że kiedykolwiek chcesz coś tak rozpraszające jako kolor tła, który zmienia się co sekundę.

56
00:04:50,190 --> 00:04:57,450
Ale to nie udać, aby pokazać, że możemy robić rzeczy bardziej skomplikowane niż po prostu zmieniasz H1 z czarnego na różowo.

57
00:04:57,450 --> 00:05:06,260
Więc zawinąć to wszystko się dwoma słowami wybierz manipulować dobieramy Mamy chwycić niektóre obiekty, które reprezentują elementy, a następnie robimy coś dla nich.

58
00:05:06,750 --> 00:05:12,370
Więc reszta tej jednostki będzie koncentrowała się na różne sposoby wybierania i następnie różne sposoby manipulacji.

59
00:05:12,390 --> 00:05:17,190
Więc następny film będzie nurkować w głąb różnych sposobów doboru elementów przy użyciu JavaScript.

60
00:05:17,190 --> 00:05:19,470
Widzieliśmy już queery jednego selektora.