1
00:00:00,270 --> 00:00:05,870
Een paar video's geleden introduceerde ik het concept van het selecteren van elementen en vervolgens te manipuleren.

2
00:00:06,120 --> 00:00:14,660
Daarom selecteren wij een H1 of alle image-tags en dan kunnen we de kleur veranderen of animeren hen of ze iets doen als u klikt op hen.

3
00:00:14,670 --> 00:00:18,360
Tot nu toe hebben we alleen betrekking op het selecteren helft en deze video.

4
00:00:18,360 --> 00:00:24,090
We gaan een paar van de vele manieren om elementen te manipuleren zodra we ze hebben gekozen te introduceren.

5
00:00:24,120 --> 00:00:26,760
Dus hier zijn de vier belangrijkste dingen die ik wil om over te praten.

6
00:00:26,970 --> 00:00:29,320
De eerste is hoe kunnen we veranderen een element stijl.

7
00:00:29,340 --> 00:00:32,050
Hoe kunnen we maken het blauw of te verbergen.

8
00:00:32,070 --> 00:00:34,070
Verander de lettergrootte.

9
00:00:34,080 --> 00:00:40,920
Next up we praten over het toevoegen en verwijderen van klassen met javascript en dan veranderen van de inhoud van een tag.

10
00:00:41,010 --> 00:00:44,490
Dus hoe kan ik de tekst binnen van een H-1 tag bijvoorbeeld veranderen.

11
00:00:44,490 --> 00:00:46,590
En dan tot slot het veranderen van attributen.

12
00:00:46,590 --> 00:00:52,040
Dus hoe kunnen we veranderen de bron op een afbeelding tag of de scheidsrechter op een AA-tag.

13
00:00:52,230 --> 00:00:55,260
We gaan aan de slag door te praten over de eigenschap stijl.

14
00:00:55,260 --> 00:01:11,220
Dus toen de DOM wordt gebouwd en een individueel knooppunt is gemaakt of een object is gemaakt voor elk element is er een eigenschap genaamd stijl en de eigenschap stijl is een groot object honderden objecten één voor elke CSSA eigenschap die we konden stellen.

15
00:01:11,370 --> 00:01:15,460
Dus we kunnen javascript die vervolgens zal gaan stijl en element anders schrijven.

16
00:01:15,480 --> 00:01:24,730
Dus hier ben ik het selecteren van een element door zijn Id hoogtepunt dus selecteert u deze opslaan in een variabele met de naam tag en vervolgens manipuleren.

17
00:01:24,750 --> 00:01:26,370
En wat ik doe Ik ben het opzetten.

18
00:01:26,370 --> 00:01:34,190
Tag dot dot stijl kleur is blauw tag dot stijl dot grens is gelijk aan 10 pixels solide rood.

19
00:01:34,200 --> 00:01:37,830
Het is belangrijk op te merken dat de rechterzijde een string moet zijn.

20
00:01:38,280 --> 00:01:43,430
Dus ook al in C Ss we niet hoeven te aanhalingstekens rond blauw of rond 70 P x zetten.

21
00:01:43,440 --> 00:01:44,730
Dit is niet C Ss.

22
00:01:44,730 --> 00:01:45,720
Dit is javascript.

23
00:01:45,720 --> 00:01:48,820
Dus we hebben nog steeds de reguliere javascript regels te volgen.

24
00:01:49,080 --> 00:01:53,550
Dus ik heb een eenvoudige webpagina opgezet die ik ga gebruiken om een ​​aantal van deze eigenschappen aan te tonen.

25
00:01:54,240 --> 00:02:00,190
Dus deze webpagina is super eenvoudig slechts één H-1 een paragraaf in plaats van die paragraaf.

26
00:02:00,200 --> 00:02:05,310
Er is een sterke tag en vervolgens twee beelden van twee schattige corgi mixen.

27
00:02:05,640 --> 00:02:13,770
Dus wat ik ga doen is naar de consul en ik moet om te beginnen door iets te selecteren en ik ga naar de kleur en de grens van de H-1 te veranderen.

28
00:02:13,770 --> 00:02:22,800
Dus ik nodig om het te selecteren en er zijn meerdere manieren om dat te doen in een nieuw document dat vraagt ​​selector H-1.

29
00:02:25,320 --> 00:02:33,030
En dan ga ik je laten zien H-1 stijl die is een gigantisch object tonnen en tonnen van eigenschappen.

30
00:02:33,600 --> 00:02:41,680
Dus ik ga proberen het veranderen van een van hen, zoals H-1 stijl donkere kleur en maken dat geel.

31
00:02:42,520 --> 00:02:45,560
En je kon zien dat het onmiddellijk veranderd naar geel.

32
00:02:45,570 --> 00:02:54,300
Hetzelfde met de grens H-1, die stijl die grens gelijk laten we vijf pixels stevige roze.

33
00:02:56,100 --> 00:02:56,950
En daar gaan we.

34
00:02:57,210 --> 00:03:01,190
Dus natuurlijk als we wilden dit naar geel met een roze rand zijn.

35
00:03:01,290 --> 00:03:04,910
Vanaf het moment dat de pagina geladen is er geen reden om javascript te gebruiken om dat te doen.

36
00:03:04,920 --> 00:03:18,670
We hebben het gewoon in onze CSSA bestand dat we zouden gebruiken javascript als we wilden het bleek geel en hebben een roze rand wanneer de gebruiker op de pagina is geweest gedurende vijf seconden of als hij wilde het gebeuren wanneer de gebruiker gescrold om een ​​specifiek deel van de pagina of de gebruiker heeft geklikt op iets.

37
00:03:18,690 --> 00:03:23,450
Het draait allemaal om het maken van dingen interactief en we zullen zien hoe dat binnenkort doen.

38
00:03:24,960 --> 00:03:38,150
Nou, de leuke ding over het gebruik van het onroerend goed stijl is dat als je merkt dat je het manipuleren van een bos van bestanden op een individueel element alsof ik hier aan het doen en het veranderen van vijf verschillende eigenschappen op deze ene tag is er zeker een betere manier.

39
00:03:38,460 --> 00:03:40,740
En er zijn een paar redenen dat er een betere manier.

40
00:03:40,740 --> 00:03:43,350
De eerste is dat dit niet erg droog code.

41
00:03:43,350 --> 00:03:46,740
Er is een hoop herhaalde uitgetikt stijl tag stijl.

42
00:03:46,740 --> 00:03:50,670
Belangrijker nog is dat er dit concept genaamd de scheiding van bezorgdheid.

43
00:03:50,820 --> 00:03:57,210
Dus de scheiding van zorgen is dit concept dat onze H M L R C S is niet javascript.

44
00:03:57,210 --> 00:04:00,840
Zijn elk verantwoordelijk voor hun eigen kleine domein en we willen het niet.

45
00:04:00,840 --> 00:04:02,830
We willen niet veel cross-over tussen hen.

46
00:04:02,850 --> 00:04:12,930
Dus in dit schema kun je zien dat er een beetje van crossover tussen elk team met wat de structuur en de javascript die dat gedrag en dan zien te beoordelen, is de presentatie.

47
00:04:12,930 --> 00:04:25,840
En er is een kleine overlap met H html javascript maar vergeet niet dat het vroeger vóór C Ss kwam moest je je stijlen individueel te schrijven in elk element waar we eigenlijk de stijl attribuut.

48
00:04:26,130 --> 00:04:33,500
In dat geval is de presentatie was de styling eigenlijk verweven in de structuur en met C Ss nu hebben we ze afgescheiden.

49
00:04:33,570 --> 00:04:38,710
Dus onze HMO is pure structuur en dan ons succes is pure stijl.

50
00:04:38,880 --> 00:04:52,620
Dus wat javascript past is dat het gedrag van een pagina moet controleren en soms is dat betekent dat het veranderen van hoe de dingen te kijken, maar in plaats van alleen het veranderen van de eigenschappen in de javascript daadwerkelijk doen van de styling in de javascript.

51
00:04:52,680 --> 00:04:57,530
Wat we wel kunnen doen is zet ze in en uit de binnenkant van de CSSA bestand.

52
00:04:57,570 --> 00:05:08,380
Dus een van de patronen dat is echt gemeen hebben is dat we definiëren een CSSA klasse als hoogtepunt en dat hoogtepunt klasse zal vijf of zes of echter veel verschillende eigenschappen die we hebben veranderende.

53
00:05:08,380 --> 00:05:13,210
En dan kunnen we dan selecteert u een element met javascript en geef het dat hoogtepunt klasse.

54
00:05:13,210 --> 00:05:18,930
Dus in Javascript met één lijn kunnen we een klasse die vervolgens vijf verschillende eigenschappen zal veranderen toe te voegen.

55
00:05:19,150 --> 00:05:22,660
Laten we eens kijken hoe dit in Javascript zouden worden uitgevoerd.

56
00:05:22,690 --> 00:05:36,200
Dus in plaats van het selecteren van een tag en dan het veranderen van stijl, maar de kleur blauw te zijn en dan gestyled tot grens naar 10 pixel stevige rode wat we in plaats daarvan kunnen doen is het vinden van een klasse in deze klasse kan van alles worden genoemd.

57
00:05:36,250 --> 00:05:41,940
Meestal je wilt dat iets zinvol zijn, zodat als gevolg van wat de klas verondersteld wordt te doen.

58
00:05:42,040 --> 00:05:45,040
Is het iets dat wordt gemarkeerd of is het een juist antwoord.

59
00:05:45,040 --> 00:05:49,840
Een hoge score voor welke reden dan ook dat je het toepassen van de klas het proberen te komen met een goede naam.

60
00:05:50,170 --> 00:05:57,820
Dus dit is niet een goede naam, maar sommige klasse wat klasse is het veranderen van de kleur blauw en de grens 10 pixel solide rood.

61
00:05:57,820 --> 00:06:13,790
Dan is alles wat ik moet doen is het selecteren van mijn label en dan taggen dot dot klasse lijst toe te voegen wat klasse en dat zal mijn tag met het idee van het hoogtepunt van een nieuwe klasse met de naam een ​​klasse in al deze stijlen zal worden toegepast geven.

62
00:06:13,810 --> 00:06:16,030
Er is een paar andere dingen die we kunnen doen met klasse lijst.

63
00:06:16,270 --> 00:06:30,760
Dus in dit voorbeeld toon ik drie methoden toe te voegen die we al zagen dat is hoe we een klasse te verwijderen die een klasse naam dankt kunt toevoegen en het verwijdert die klasse naam uit de klas lijst en klasse lijst toggle, die is uiterst nuttig.

64
00:06:30,760 --> 00:06:31,960
Het duurt een klasse naam.

65
00:06:32,080 --> 00:06:39,270
En als het opgegeven element heeft die klasse al zal het dan verwijderen als het element niet hebben dat klasse dan zal ik deze in te schakelen.

66
00:06:39,280 --> 00:06:40,550
Dus heel erg nuttig.

67
00:06:40,630 --> 00:06:42,180
We gebruiken de hele tijd later.

68
00:06:42,400 --> 00:06:46,990
Dus laat me laten zien dat je voordat ik terug naar mijn voorbeeld hier te gaan.

69
00:06:46,990 --> 00:06:49,300
Ik ben eigenlijk van plan om een ​​nieuwe klasse te definiëren.

70
00:06:49,690 --> 00:07:00,390
Dus in plaats van het maken van een nieuwe stijl blad en met behulp van een link Ik ga gewoon naar een stijl tag alleen omwille van de tijd.

71
00:07:00,530 --> 00:07:04,140
Dus ik ga een klasse je gewoon gaat om het grote roepen definiëren.

72
00:07:04,990 --> 00:07:14,670
En wat ik ga doen is de lettergrootte 100 pixels en de kleur oranje te zijn.

73
00:07:15,010 --> 00:07:22,540
En dan tot slot laten we het eens een grens van vijf pixel stevige rode.

74
00:07:22,960 --> 00:07:24,280
Dus zal ik het bij laten.

75
00:07:24,370 --> 00:07:30,900
Als ik mijn pagina verandert er niets natuurlijk vernieuwen, maar als ik wil doen is toe te passen die klasse iets.

76
00:07:30,950 --> 00:07:37,120
Dus ik ga maken deze paragraaf hebben de grote klasse te doen dat ik nodig om het zo ver te selecteren.

77
00:07:37,120 --> 00:07:44,900
Paragraaf gelijk documenteren die vraag selector paragraaf.

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

79
00:07:48,010 --> 00:07:53,130
En laten we beginnen met het nemen van een blik op de klasse lijst en je kunt zien dat het leeg is.

80
00:07:53,140 --> 00:07:55,970
Er zijn geen lessen nog toegewezen aan deze paragraaf.

81
00:07:56,140 --> 00:08:05,310
Dus als ik wil een toewijzen alles wat ik moet doen is zeggen P-Dub class lijst dot toe te voegen en ik wil de klasse grote voegen.

82
00:08:06,190 --> 00:08:07,240
En daar gaan we.

83
00:08:07,720 --> 00:08:11,370
Dus het weerspiegelt automatisch de nieuwe veranderingen ten opzichte van mijn style sheet.

84
00:08:11,440 --> 00:08:13,540
Alles wat ik moest doen is het toevoegen van de grote klasse.

85
00:08:13,780 --> 00:08:18,880
Dus hopelijk kun je zien dat dit een stuk gemakkelijker en dat we het scheiden van de verantwoordelijkheden.

86
00:08:18,880 --> 00:08:27,610
Dus al die javascript doet is blijkt aan of uit een specifiek deel van de SS in plaats van daadwerkelijk handmatig manipuleren van individuele eigenschappen.

87
00:08:27,610 --> 00:08:32,120
We zijn nu alleen het veranderen van de dingen zo weinig mogelijk in plaats van onze Javascript.

88
00:08:32,470 --> 00:08:45,940
Dus als ik wil om het te verwijderen alles wat ik moet doen is te doen klasse klassenloze niet groot te verwijderen en mijn favoriet, die ik noemde is super handig is toggle.

89
00:08:45,940 --> 00:08:52,940
Dus als ik raakte toggle op dit moment en druk op enter er is geen klasse toegewezen dus het is de klasse groot zal toewijzen.

90
00:08:53,320 --> 00:08:56,420
Nu groot is al toegewezen, dus het zal verwijderen.

91
00:08:56,440 --> 00:09:09,610
Dus dit is nuttig duidelijk niet in dit geval om deze gekke oranje in grote lettertype klasse te maken, maar wat we zouden kunnen doen is op zoiets als een to do lijst als we willen dat de gebruiker in staat om klik erop om te doen.

92
00:09:09,880 --> 00:09:11,440
En dat zal doorkruisen.

93
00:09:11,650 --> 00:09:15,400
Maar ze kunnen weer klikken en dan zal het uncross out of gewoon terug naar normaal.

94
00:09:15,430 --> 00:09:16,400
Dat zou gebeuren.

95
00:09:16,410 --> 00:09:23,700
Of we kunnen doen met de toets een klasse, dus we konden hebben een klasse met de naam gedaan en ik klik toegepast klik nogmaals.

96
00:09:23,800 --> 00:09:24,820
Het is verwijderd.

97
00:09:24,820 --> 00:09:27,000
Dat is slechts één voorbeeld van wanneer je zou kunnen gebruiken toggle.

98
00:09:27,100 --> 00:09:29,740
Maar het is echt heel handig.

99
00:09:29,740 --> 00:09:34,090
Het laatste punt dat ik zal brengen over klasse lijst is dat het technisch gezien niet een array.

100
00:09:34,090 --> 00:09:37,840
Dus dat betekent dat we een advertentie gebruiken om een ​​klasse toe te voegen.

101
00:09:37,870 --> 00:09:39,900
We kunnen niet iets zoals push te doen.

102
00:09:40,150 --> 00:09:44,000
Dus gewoon een kleine opmerking, maar het is belangrijk om te weten dat het technisch gezien niet een array.

103
00:09:44,470 --> 00:09:48,260
Dus we bedekt twee verschillende manieren van het manipuleren van stijl door middel van onze javascript.

104
00:09:48,280 --> 00:09:55,340
De eerste is het manueel doet een eigenschap in een tijd dat het is eerlijk gezegd prima als je gewoon een of twee dingen aan het doen zijn.