1
00:00:00,300 --> 00:00:03,940
Dus nu hebben we besproken waarom je moet de zorg over de Domm waarom het is spannend.

2
00:00:03,990 --> 00:00:07,640
En we hebben ook gesproken over wat het is wat het document object model betekent.

3
00:00:07,680 --> 00:00:15,130
Het feit dat het is gewoon een model van elk element op een pagina met behulp van JavaScript-objecten het hoogste niveau object wordt het document genoemd.

4
00:00:15,240 --> 00:00:18,340
Dus dat is geweldig, maar we hebben niet gezien hoe je nog niets doen.

5
00:00:18,390 --> 00:00:23,460
Dus in deze video ga ik het proces van het manipuleren van de dingen met behulp van de hond kort voor te stellen.

6
00:00:23,790 --> 00:00:29,630
Dus ik heb door het hele proces gekookt om twee zoekwoorden te selecteren en te manipuleren.

7
00:00:29,670 --> 00:00:47,840
Dus net als zien beoordelen waar we een selector schrijven om iets met de klas van bijzondere of alle h degenen of alle image-tags selecteren we elementen en dan passen we stijlen zoals achtergrondkleur paarse grens één pixel stevige zwarte met javascript en Dom en de bevolking te selecteren.

8
00:00:47,850 --> 00:00:51,380
We selecteren ook elementen, hoewel we het op een heel andere manier.

9
00:00:51,480 --> 00:01:01,260
We schrijven javascript code die verder gaat en selecteert elementen en keert ze terug naar ons en dan veranderen we advertenties op hen, zodat we iets te kiezen en vervolgens te manipuleren we het.

10
00:01:01,290 --> 00:01:09,750
Dus in de komende paar slides Ik ga om te laten zien hoe hij dit H-1 mijn kop zou kunnen kiezen, en hoe we kunnen veranderen in roze zijn.

11
00:01:09,750 --> 00:01:15,290
Ik heb gezegd dit een stuk in de laatste paar video's, maar ik wil niet dat je te concentreren op de syntax zo veel als de concepten.

12
00:01:15,330 --> 00:01:18,930
De volgende paar video's zal krijgen in de Nitty Gritty van het selecteren en manipuleren.

13
00:01:18,930 --> 00:01:21,150
Dit is slechts een overzicht van hoe het werkt.

14
00:01:21,150 --> 00:01:25,600
Dus op deze dia Ik ga om te laten zien hoe u dat H1 zou kunnen kiezen, net als met C.

15
00:01:25,620 --> 00:01:28,580
Er is een heleboel verschillende manieren van het selecteren van een bepaald element.

16
00:01:28,800 --> 00:01:36,920
In dit geval is deze regel code document dot queries selector H-1 gaat naar de H-1 selecteren op deze pagina.

17
00:01:37,050 --> 00:01:40,960
Dus ik heb hier gemarkeerd met dit groene doos, zodat u kunt zien wat er wordt gekozen.

18
00:01:41,340 --> 00:01:48,640
Dus nogmaals var H-1 Dit is zomaar een variabele die we willen gelijk document die vraag selector 8: 1.

19
00:01:48,690 --> 00:01:52,420
Dus we veel meer tijd doorbrengen met queries selector en bepalen wat het is en hoe het werkt.

20
00:01:52,470 --> 00:01:59,920
Maar retourneert een object dat H1 vertegenwoordigt en het bespaart dat de H-1 variabele.

21
00:01:59,970 --> 00:02:02,190
Dus dat is de selectie proces.

22
00:02:02,190 --> 00:02:11,170
Het volgende deel is het zo te manipuleren om het te manipuleren kan ik allerlei dingen en alles wat ik ga doen hier doen is het veranderen van de kleur roze te zijn.

23
00:02:11,490 --> 00:02:18,470
Dus we gewoon schrijven H-1 dat is onze variabele die het object dat de H-1 dot stijl heeft.

24
00:02:18,510 --> 00:02:25,580
Dat is een eigenschap en die eigenschap stijl is een groot object met een heleboel andere eigenschappen en de kleur is een van hen.

25
00:02:25,920 --> 00:02:28,920
Dus H-1 doet stijl, maar de kleur is gelijk aan roze.

26
00:02:28,920 --> 00:02:30,240
En dan is dat alles wat we moeten doen.

27
00:02:30,270 --> 00:02:37,500
En de browser ziet dat ik dat veranderen woning aan roze en het automatisch bijgewerkt wat wordt weergegeven door te draaien roze.

28
00:02:37,500 --> 00:02:41,140
Dus we gekozen hier en dan gemanipuleerd we.

29
00:02:42,120 --> 00:02:43,560
Dus ik heb nog een voorbeeld hier.

30
00:02:43,610 --> 00:02:45,230
Het is een beetje ingewikkelder.

31
00:02:45,240 --> 00:02:52,940
We zijn bezig met een zeer eenvoudige animatie waarin elke seconde veranderen we de achtergrondkleur van het lichaam tussen blauw en wit.

32
00:02:52,950 --> 00:02:58,620
Dus wat moeten we eerst doen is het selecteren van het lichaam en vervolgens manipuleren om zo te selecteren.

33
00:02:58,740 --> 00:03:06,720
Ik heb een andere lijn met behulp document dump vraag selector die weer gaan we om terug te komen in de volgende video document die vraag selector lichaam.

34
00:03:06,780 --> 00:03:15,450
Dus dat geeft me het lichaam element waar het in feite geeft me het object representatie van het model van het dat ik op te slaan in het lichaam variabele.

35
00:03:15,450 --> 00:03:23,940
Dan moet ik deze variabele is blauw dat is gewoon een boolean die ik ga gebruiken omdat ik moet weten als ik ga van blauw naar wit of wit naar blauw.

36
00:03:24,030 --> 00:03:28,870
het begint zo uit als vals en ik ben met behulp van set interval die we een paar jaar geleden bedekt.

37
00:03:28,920 --> 00:03:32,230
Als je niet meer weet hoe het werkt het in principe heeft twee argumenten.

38
00:03:32,340 --> 00:03:39,030
De eerste is een code een functie uitgevoerd en de tweede is een nummer of een tijd in milliseconden.

39
00:03:39,150 --> 00:03:46,230
Dus het duurt dit aantal milliseconden dat is duizend of een seconde en elke één seconde zal deze code noemen.

40
00:03:46,560 --> 00:03:51,080
Dus wat deze code doet is het controleert of de achtergrond is op dit moment blauw als het is.

41
00:03:51,180 --> 00:03:56,330
We veranderen het dan wit te zijn als de achtergrond is wit dan veranderen wij het blauw te zijn.

42
00:03:56,610 --> 00:04:00,030
Dus om een ​​kijkje we nemen onze wanneer is blauw.

43
00:04:00,120 --> 00:04:01,640
Dus dat is gewoon een variabele.

44
00:04:01,650 --> 00:04:02,900
Het begint als vals.

45
00:04:02,910 --> 00:04:07,890
Dus de allereerste keer dat de pagina laadt de achtergrond is wit is blauw is vals.

46
00:04:07,920 --> 00:04:16,570
Dus deze lijn niet lopen, maar deze doet anders lichaam doet stijl donkere achtergrond is gelijk aan deze hexadecimale kleur die is blauw.

47
00:04:16,770 --> 00:04:18,840
Dus dat verandert de achtergrond van blauw zijn.

48
00:04:19,140 --> 00:04:22,960
Dus toen we verander gewoon onze blauw is variabel van false in true.

49
00:04:23,130 --> 00:04:27,690
En dat is een mooi soort manier om het te doen met het uitroepteken of het niet operator.

50
00:04:27,780 --> 00:04:32,550
Dus dan is deze code wordt uitgevoerd volgende keer weer blauw is nu al waar is.

51
00:04:32,850 --> 00:04:36,870
Dus deze code wordt uitgevoerd lichaam doet stijl, maar de achtergrond is gelijk aan wit.

52
00:04:36,870 --> 00:04:38,550
Dus nu zijn we weer terug naar wit te gaan.

53
00:04:38,670 --> 00:04:42,980
Dit betekent niet lopen en dan veranderen we blauw terug naar vals.

54
00:04:43,290 --> 00:04:44,980
En dat blijft gaan voor altijd.

55
00:04:45,090 --> 00:04:49,950
Dus niet dat je ooit iets zo storend als een achtergrondkleur die elke seconde verandert zou willen.

56
00:04:50,190 --> 00:04:57,450
Maar dat wil gaan om te laten zien dat we de dingen complexer is dan alleen het veranderen van een H1 van zwart tot roze kunnen doen.

57
00:04:57,450 --> 00:05:06,260
Dus om dit alles tot twee woorden wrap selecteer manipuleren we selecteren We grijpen sommige objecten die elementen te vertegenwoordigen en dan is er iets voor hen doen we.

58
00:05:06,750 --> 00:05:12,370
Zodat de rest van dit toestel zal worden gericht op verschillende manieren om te selecteren en vervolgens op verschillende manieren te manipuleren.

59
00:05:12,390 --> 00:05:17,190
Dus de volgende video gaat diep duiken in de verschillende manieren van het selecteren van elementen met behulp van javascript.

60
00:05:17,190 --> 00:05:19,470
We hebben een queery selector gezien al.