1
00:00:00,270 --> 00:00:05,870
Kilka filmów temu wprowadził tę koncepcję doboru elementów i manipulowania nimi.

2
00:00:06,120 --> 00:00:14,660
Więc wybrać wszystkie znaczniki H1 lub obrazu, a następnie możemy zmienić kolor lub animować je lub uczynić je zrobić coś po kliknięciu na nich.

3
00:00:14,670 --> 00:00:18,360
Do tej pory omówiliśmy jedynie wybranie pół i ten film.

4
00:00:18,360 --> 00:00:24,090
Mamy zamiar przedstawić kilka z wielu sposobów na manipulowanie elementami raz wybraliśmy je.

5
00:00:24,120 --> 00:00:26,760
Więc tutaj są cztery główne rzeczy, które chcę o tym mówić.

6
00:00:26,970 --> 00:00:29,320
Pierwszy z nich to w jaki sposób zmienić styl elementu.

7
00:00:29,340 --> 00:00:32,050
W jaki sposób możemy zrobić to niebieskie lub uczynić go ukryć.

8
00:00:32,070 --> 00:00:34,070
Zmiana rozmiaru czcionki.

9
00:00:34,080 --> 00:00:40,920
Następna w kolejce porozmawiamy o dodawanie i usuwanie klas z JavaScript, a następnie zmieniając zawartość znacznika.

10
00:00:41,010 --> 00:00:44,490
Więc jak mogę zmienić tekst wewnątrz z H-1 znacznikiem na przykład.

11
00:00:44,490 --> 00:00:46,590
A potem wreszcie zmienia atrybuty.

12
00:00:46,590 --> 00:00:52,040
Jak więc zmienić źródło na tag obrazu lub ref na znacznik AA.

13
00:00:52,230 --> 00:00:55,260
Mamy zamiar zacząć od rozmowy o właściwość stylu.

14
00:00:55,260 --> 00:01:11,220
Więc kiedy DOM jest skonstruowany i indywidualny węzeł jest wykonany lub obiekt jest dla każdego elementu istnieje właściwość nazywa styl i właściwość stylu jest ogromny setki przedmiot własności po jednym dla każdej nieruchomości CSSA że możemy ustawić.

15
00:01:11,370 --> 00:01:15,460
Tak więc możemy napisać skrypt, który będzie następnie przejść styl i elementu inaczej.

16
00:01:15,480 --> 00:01:24,730
Więc tutaj jestem wybierając element jego Id podświetleniem więc wybierz go zapisać go do zmiennej o nazwie znacznika, a następnie manipulować go.

17
00:01:24,750 --> 00:01:26,370
A co robię ja ustawienie.

18
00:01:26,370 --> 00:01:34,190
Tag styl kropka kropki kolor jest niebieski znak kropki stylu dot granicy wynosi 10 pikseli stałe czerwone.

19
00:01:34,200 --> 00:01:37,830
Ważne jest, aby pamiętać, że po prawej stronie musi być ciągiem.

20
00:01:38,280 --> 00:01:43,430
Więc nawet jeśli w C Ss nie musimy umieścić w cudzysłowie niebieskim lub wokół 70 P x.

21
00:01:43,440 --> 00:01:44,730
Nie jest Css.

22
00:01:44,730 --> 00:01:45,720
To JavaScript.

23
00:01:45,720 --> 00:01:48,820
Więc nadal musimy przestrzegać zasady regularnego javascript.

24
00:01:49,080 --> 00:01:53,550
Więc mam prostą stronę internetową skonfigurować, które mam zamiar wykorzystać w celu wykazania niektóre z tych właściwości.

25
00:01:54,240 --> 00:02:00,190
Więc ta strona jest bardzo proste, wystarczy jeden H-1 akapit zamiast tego ustępu.

26
00:02:00,200 --> 00:02:05,310
Istnieje silna znacznik, a następnie dwa wizerunki dwóch uroczych mieszanek corgi.

27
00:02:05,640 --> 00:02:13,770
Więc co mam zamiar zrobić, to udać się do konsula i muszę zacząć wybierając coś i mam zamiar zmienić kolor i granicy tego H-1.

28
00:02:13,770 --> 00:02:22,800
Więc muszę go wybrać i nie ma wiele sposobów na to, że w nowym dokumencie, który odpytuje przycisk H-1.

29
00:02:25,320 --> 00:02:33,030
A potem mam zamiar pokazać wam H-1, styl, który jest olbrzymi mnóstwo obiektów i mnóstwo właściwości.

30
00:02:33,600 --> 00:02:41,680
Więc mam zamiar spróbować zmienić jeden z nich jak H-1 w stylu ciemnego koloru i sprawiają, że kolor żółty.

31
00:02:42,520 --> 00:02:45,560
I można zobaczyć natychmiast zmieniła kolor na żółty.

32
00:02:45,570 --> 00:02:54,300
To samo z pogranicza H-1, który w stylu, że granica wynosi zróbmy pięć pikseli stałe różowe.

33
00:02:56,100 --> 00:02:56,950
I tam idziemy.

34
00:02:57,210 --> 00:03:01,190
Tak oczywiście, jeśli chcieliśmy tylko, że jest to żółty z różowym obramowaniem.

35
00:03:01,290 --> 00:03:04,910
Od czasu, gdy strona załadowanego nie ma powodu, aby użyć javascript, aby to zrobić.

36
00:03:04,920 --> 00:03:18,670
Po prostu umieścić go w naszym pliku CSSA użylibyśmy JavaScript gdybyśmy chcieli okazało żółty i mieć różowy obramowanie, gdy użytkownik jest na stronie przez pięć sekund lub jeśli chce to się stało, gdy użytkownik przewija do określonej części strona lub użytkownik kliknął na czymś.

37
00:03:18,690 --> 00:03:23,450
To wszystko o tworzeniu rzeczy interaktywne i zobaczymy, jak to zrobić w najbliższym czasie.

38
00:03:24,960 --> 00:03:38,150
Dobrze Zaletą pomocą właściwości stylu jest to, że jeśli okaże się manipulacji kilka plików na pojedynczym elemencie jak tu robię i zmieniając pięć różnych właściwości na tym jednym znacznikiem jest zdecydowanie lepszy sposób.

39
00:03:38,460 --> 00:03:40,740
I jest kilka powodów, że istnieje lepszy sposób.

40
00:03:40,740 --> 00:03:43,350
Pierwszym z nich jest to, że nie jest bardzo suche kodu.

41
00:03:43,350 --> 00:03:46,740
Jest wiele powtarzających się oznakowanego stylu oznakowanego stylu.

42
00:03:46,740 --> 00:03:50,670
Co ważniejsze, choć nie jest to koncepcja zwana separacja obawy.

43
00:03:50,820 --> 00:03:57,210
Więc oddzielenie problemów jest to, że nasza koncepcja H M L R C S nie jest JavaScript.

44
00:03:57,210 --> 00:04:00,840
Czy każdy jest odpowiedzialny za ich własnym małym domeny i nie chcemy go.

45
00:04:00,840 --> 00:04:02,830
Nie chcemy dużo rozjazd między nimi.

46
00:04:02,850 --> 00:04:12,930
Więc w tym wykresie widać, że jest tam trochę rozjazd pomiędzy każdym zespołem, z którym jest struktura i JavaScript, który jest, że zachowanie, a następnie sprawdzić oceny jest prezentacja.

47
00:04:12,930 --> 00:04:25,840
I tam jest trochę pokrywają się z H html javascript, ale pamiętam, że kiedyś przed C Ss przyszedł trzeba było napisać swoje style indywidualnie w każdym elemencie gdzie my właściwie użyć atrybutu stylu.

48
00:04:26,130 --> 00:04:33,500
W tym przypadku naszego prezentacji stylizacji faktycznie wplecione w strukturę i Css teraz oddzielają je.

49
00:04:33,570 --> 00:04:38,710
Więc nasz HMO jest czysta struktura i wtedy nasz sukces jest czystym stylu.

50
00:04:38,880 --> 00:04:52,620
Więc co javascript pasuje to, że powinien on kontrolować zachowanie strony, a czasami to oznacza zmianę, jak wyglądają sprawy, ale zamiast po prostu zmieniając właściwości wewnątrz javascript rzeczywiście robi stylizacji w javascript.

51
00:04:52,680 --> 00:04:57,530
Co możemy zrobić, to włączyć i wyłączyć wewnątrz pliku CSSA.

52
00:04:57,570 --> 00:05:08,380
Więc jeden z wzorów to bardzo powszechne jest to, że możemy zdefiniować klasę CSSA jak podświetleniem i że klasa kulminacyjnym będzie miał pięć albo sześć albo jakkolwiek wiele różnych właściwości, które jesteśmy zmienia.

53
00:05:08,380 --> 00:05:13,210
A potem możemy następnie wybierz element z javascript i nadać mu tę klasę podświetlenia.

54
00:05:13,210 --> 00:05:18,930
Więc w JavaScript z jednej linii możemy dodać klasę, która będzie następnie zmienić pięć różnych właściwościach.

55
00:05:19,150 --> 00:05:22,660
Rzućmy okiem na to, jak miałoby to być realizowane w JavaScript.

56
00:05:22,690 --> 00:05:36,200
Więc zamiast wybierając znacznik, a następnie zmieniając styl, ale kolor na niebieski, a następnie będzie się stylizowany granicę być 10 piksel świeci na czerwono, co możemy zrobić zamiast tego jest znalezienie klasa w tej klasie można nazwać cokolwiek.

57
00:05:36,250 --> 00:05:41,940
Zazwyczaj ma to być w pewnym stopniu odzwierciedla to, co sensowne, tak klasa ma robić.

58
00:05:42,040 --> 00:05:45,040
Czy jest coś, co jest podświetlone, czy jest to poprawna odpowiedź.

59
00:05:45,040 --> 00:05:49,840
Wysoki wynik z jakiegokolwiek powodu, że jesteś stosowania klasę starając wymyślić dobrego imienia.

60
00:05:50,170 --> 00:05:57,820
Więc nie jest to dobra nazwa, ale niektóre klasy niektóre klasy zmienia kolor będzie niebieski i czerwony granicy stałe 10 pikseli.

61
00:05:57,820 --> 00:06:13,790
Wtedy wszystko, co mam zrobić, to wybrać mój znacznik, a następnie oznaczyć listę klasy kropka kropka dodać jakąś klasę i że da mi znak z ideą podświetleniem nowa klasa o nazwie niektóre klasy w każdym z tych stylów będzie stosowana.

62
00:06:13,810 --> 00:06:16,030
Jest jeszcze kilka innych rzeczy, które możemy zrobić z listy klasy.

63
00:06:16,270 --> 00:06:30,760
Tak więc w tym przykładzie pokażę trzy metody dodawania które już widział co jest, jak możemy dodać klasę usuń która przyjmuje nazwę klasy i usuwa tę nazwę klasy z listy klas, a następnie listę klasy przełącznik, który jest niezwykle przydatny.

64
00:06:30,760 --> 00:06:31,960
Zajmuje nazwę klasy.

65
00:06:32,080 --> 00:06:39,270
A jeśli dany element ma już tej klasy będzie następnie usunąć go, jeśli element nie posiada tej klasy to będę go włączyć.

66
00:06:39,280 --> 00:06:40,550
Tak bardzo, bardzo przydatna.

67
00:06:40,630 --> 00:06:42,180
Będziemy go używać cały czas później.

68
00:06:42,400 --> 00:06:46,990
Więc pozwól mi pokazać, że do ciebie, zanim wrócę do mojego przykład tutaj.

69
00:06:46,990 --> 00:06:49,300
Ja rzeczywiście będzie zdefiniować nową klasę.

70
00:06:49,690 --> 00:07:00,390
Więc zamiast tworzenia nowego arkusza stylów i za pomocą łącza Ja tylko zamiar użyć tagu styl po prostu ze względu na czas.

71
00:07:00,530 --> 00:07:04,140
Więc idę do zdefiniowania klasy jesteś po prostu będzie nazwać to duże.

72
00:07:04,990 --> 00:07:14,670
I co mam zamiar zrobić, to zmienić rozmiar czcionki być 100 pikseli i zmienić kolor na pomarańczowo.

73
00:07:15,010 --> 00:07:22,540
A potem wreszcie dajmy mu granicę stałe czerwonym pięć pikseli.

74
00:07:22,960 --> 00:07:24,280
Więc zostawiam go na to.

75
00:07:24,370 --> 00:07:30,900
Gdybym odświeżyć moją stronę nic się nie zmienia oczywiście, ale kiedy chcę zrobić, to zastosować tę klasę do czegoś.

76
00:07:30,950 --> 00:07:37,120
Więc idę, aby ten ustęp mają dużą klasę do zrobienia, że ​​trzeba go wybrać do tej pory.

77
00:07:37,120 --> 00:07:44,900
Ustęp równa dokument, który paragraf wyboru zapytania.

78
00:07:47,180 --> 00:07:47,820
OK.

79
00:07:48,010 --> 00:07:53,130
I niech po prostu zacząć od przyjrzenia się liście klasy i widać, że jest pusta.

80
00:07:53,140 --> 00:07:55,970
Brak zajęcia przypisane do niniejszego ustępu jeszcze.

81
00:07:56,140 --> 00:08:05,310
Więc jeśli chcesz przypisać jedną wszystko, co musisz zrobić, to powiedzieć, P-Dub Lista klas dot dodawać i chcę dodać klasę wielkiego.

82
00:08:06,190 --> 00:08:07,240
I tam idziemy.

83
00:08:07,720 --> 00:08:11,370
Więc automatycznie odzwierciedla nowe zmiany od mojego arkusza stylów.

84
00:08:11,440 --> 00:08:13,540
Wszystko co musiałem zrobić, to dodać wielką klasę.

85
00:08:13,780 --> 00:08:18,880
Więc mam nadzieję, że widać, że jest to o wiele łatwiejsze, a my rozdzielenie obowiązków.

86
00:08:18,880 --> 00:08:27,610
Więc wszyscy, którzy są javascript nie jest to powoduje włączenie lub wyłączenie określonej części SS zamiast faktycznie ręcznego manipulowania indywidualne właściwości.

87
00:08:27,610 --> 00:08:32,120
Jesteśmy teraz po prostu zmieniając rzeczy tak mało, jak to możliwe, zamiast naszej JavaScript.

88
00:08:32,470 --> 00:08:45,940
Więc jeśli chcesz go usunąć wszystko, co musisz zrobić, to zrobić klasy bezklasowego nie usuwać duże i moim ulubionym których wspomniałem jest bardzo przydatna jest przełącznik.

89
00:08:45,940 --> 00:08:52,940
Więc jeśli uderzę przełączania teraz i naciśnij enter nie ma klasy przypisany więc będzie to klasa duże przypisać.

90
00:08:53,320 --> 00:08:56,420
Teraz wielka jest już przypisany więc będzie go usunąć.

91
00:08:56,440 --> 00:09:09,610
Więc to jest przydatne oczywiście nie w tym przypadku uczynić ten szalony pomarańczowy w ogromnej klasy czcionki, ale co można zrobić, to na coś w rodzaju listy, aby zrobić, jeśli chcemy, aby użytkownik mógł kliknąć na nim zrobić.

92
00:09:09,880 --> 00:09:11,440
I że przetnie ją.

93
00:09:11,650 --> 00:09:15,400
Ale mogą kliknąć ponownie i wtedy będzie uncross się lub po prostu wrócić do normy.

94
00:09:15,430 --> 00:09:16,400
To będzie zrobione.

95
00:09:16,410 --> 00:09:23,700
Albo możemy to zrobić poprzez przełączanie klasę, więc możemy mieć klasy o nazwie zrobione i klikam stosowane kliknij ponownie.

96
00:09:23,800 --> 00:09:24,820
To usunięte.

97
00:09:24,820 --> 00:09:27,000
To tylko jeden z przykładów, kiedy można użyć przełącznika.

98
00:09:27,100 --> 00:09:29,740
Ale to naprawdę bardzo przydatna.

99
00:09:29,740 --> 00:09:34,090
Ostatnim punktem Przyniosę się o liście klasy jest to, że nie jest to technicznie tablicą.

100
00:09:34,090 --> 00:09:37,840
Więc to oznacza, że ​​mamy do wykorzystania reklamy, aby dodać klasę.

101
00:09:37,870 --> 00:09:39,900
Nie możemy zrobić coś takiego naciśnięciem.

102
00:09:40,150 --> 00:09:44,000
Więc po prostu drobna uwaga, ale ważne jest, aby wiedzieć, że nie jest to technicznie tablicą.

103
00:09:44,470 --> 00:09:48,260
Więc objęte dwa różne sposoby manipulowania styl pośrednictwem naszego javascript.

104
00:09:48,280 --> 00:09:55,340
Pierwszy z nich robi to ręcznie jedną właściwość, która w danej chwili jest to naprawdę w porządku, jeśli jesteś po prostu robi jedną lub dwie rzeczy.