1
00:00:00,210 --> 00:00:22,330
Oké dus is het tijd voor onze eerste Jay queery de manier waarop deze werken uit te oefenen is dat ik ga u enkele voorbeelden in de leeftijd gezangboek geven divs sommige hebben klassen sommige hebben ideeën en ze zullen die nemen voor divs en zet ze in je eigen leeftijd HTML-bestand en je nodig hebt om Jay vraag correct onder aan jou hoe je het doet dat als je wilt naar een CDN te gebruiken of als u wilt om het te downloaden.

2
00:00:22,650 --> 00:00:32,040
En dan zijn er nog vier snelle uitdagingen die ik wil dat je om te proberen met behulp van Jay Querrey en in het bijzonder het dollarteken te selecteren en Dot zie SS stijl.

3
00:00:32,070 --> 00:00:33,130
Zodat de eerste.

4
00:00:33,270 --> 00:00:36,590
Selecteer alle divs en geef ze een paarse achtergrond.

5
00:00:36,870 --> 00:00:43,200
De volgende is selecteert de divs met klasse hoogtepunt en maken ze 200 pixels breed.

6
00:00:43,200 --> 00:00:51,930
De derde is om de div met ID derde selecteren en geef het een oranje rand aan u hoe breed en welke stijl van de grens.

7
00:00:52,110 --> 00:00:58,630
En dan is de bonus is om de eerste div alleen kiezen en verander het lettertype kleur roze te zijn.

8
00:00:58,650 --> 00:01:00,120
Dus ga je gang geven dit een schot.

9
00:01:00,120 --> 00:01:01,710
Je nodig hebt om een ​​video te plaatsen.

10
00:01:01,710 --> 00:01:03,280
Maak een New Age HTML-bestand.

11
00:01:03,330 --> 00:01:09,660
Inclusief een vraag en dan deze code kopiëren of typ het op jezelf en dan je nodig hebt om deze vier uitdagingen op te lossen.

12
00:01:09,660 --> 00:01:11,130
Dus ga je gang post een video.

13
00:01:11,130 --> 00:01:21,730
Ik kom terug in een paar seconden met de oplossing al.

14
00:01:21,750 --> 00:01:24,700
Laten we doorgaan en typ een snelle oplossing voor dit.

15
00:01:25,050 --> 00:01:29,070
Zoals altijd het eerste wat we moeten doen is ons telkens bestand.

16
00:01:29,070 --> 00:01:30,220
Dus ik heb een nieuw bestand.

17
00:01:30,240 --> 00:01:48,780
Ik riep het uit te oefenen dat html en ik zal het op te slaan en voeg vervolgens in mijn gewone h tim l standaardtekst en we zullen gewoon noemen J-query oefening in de titel en dan zal ik verder gaan en aan onze voorgerecht DML en ik 'll gewoon kopiëren in plaats van te typen.

18
00:01:49,520 --> 00:01:52,080
OK dus hebben we de vier elementen.

19
00:01:52,080 --> 00:01:54,660
Laten we nu eens gaan en voeg Jay Querrey.

20
00:01:54,780 --> 00:02:00,330
Onthoud, wij hebben twee manieren om dat we het lokaal kan bevatten of we kunnen koppelen aan een CDN.

21
00:02:00,480 --> 00:02:03,150
Dus ik zal zowel de eerste tonen.

22
00:02:03,510 --> 00:02:05,710
Ik ben gewoon gaan om het bestand te kopiëren.

23
00:02:06,030 --> 00:02:10,430
Dus ik moet versie hier te wijzigen gewoon c commando V. commando

24
00:02:10,620 --> 00:02:14,350
Dus ik heb het nu in dezelfde map als mijn oefening die Simmo verouderen.

25
00:02:14,580 --> 00:02:31,000
En dan zal ik hierheen te gaan en het eerste wat ik wil doen is het toevoegen van een script tag script en dan zal ik voeg de bron is gelijk aan en dan moet ik ervoor zorgen dat ik overeenkomen met die correct dat Jay dash van punt 1.4 mannen.

26
00:02:31,080 --> 00:02:32,110
Ja.

27
00:02:32,190 --> 00:02:38,230
Dus Jay queery dash naar een punt voor Dot mannen wijzen.

28
00:02:38,390 --> 00:02:45,640
Jezus dat bewaren we en open het in onze browser en doen onze kleine test om te zien of het werkt.

29
00:02:46,650 --> 00:02:47,950
Het lijkt erop dat het bestand gevonden.

30
00:02:47,970 --> 00:02:56,910
Anders zou het ons een foutmelding geven en we kunnen altijd proberen iets als een dollarteken div te doen en te zien wat we krijgen.

31
00:02:57,030 --> 00:02:57,910
En het werkt.

32
00:02:57,900 --> 00:03:00,060
Het is de selectie van onze 4 divs.

33
00:03:00,060 --> 00:03:02,670
We kunnen ook A-J vraagt ​​CDN.

34
00:03:03,180 --> 00:03:04,600
En ik google alleen voor dat.

35
00:03:04,680 --> 00:03:07,510
Jay quercetine en pak onze versie.

36
00:03:07,980 --> 00:03:09,690
Dus we willen niet dat 3.0.

37
00:03:09,930 --> 00:03:10,670
Ik weet zeker dat het werkt prima.

38
00:03:10,680 --> 00:03:12,940
Maar dat is de nieuwste versie en het is nog steeds een alpha.

39
00:03:13,050 --> 00:03:15,070
Dus er is waarschijnlijk een aantal bugs en sommige kwesties.

40
00:03:15,150 --> 00:03:28,830
Dus om een ​​punt vier punt is de meest recente stabiele versie dan zullen we deze URL te kopiëren en dan zullen we een ander script tag toe te voegen en ik zal ze zowel hier te verlaten en gewoon commentaar één uit en reset de bron gelijk is aan dat jullie fout.

41
00:03:28,950 --> 00:03:38,460
Dus of men werkt Ik zal de CDN te gebruiken omdat ik al aan u bewezen dat we allemaal de CDN te gebruiken.

42
00:03:38,490 --> 00:03:42,360
Omdat ik al bewezen dat dit werkte voor diverse sake.

43
00:03:42,510 --> 00:03:47,180
Dus we zullen slaan en vervolgens te vernieuwen en dubbel check heeft onze code nog steeds werken.

44
00:03:47,460 --> 00:03:49,830
Ja, het is het vinden van dollartekens prima.

45
00:03:49,830 --> 00:03:51,510
Het is aangesloten op J Qwerty.

46
00:03:51,600 --> 00:04:01,330
Een punt dat ik wil maken is dat we onder andere J queery up top in het hoofd en we gebruiken het in onze scripts die we opschrijven in het lichaam.

47
00:04:01,590 --> 00:04:11,120
En de reden waarom doen we dat niet vergeten dingen lading in de volgorde waarin ze verklaarde Dus willen we Arjay query om zeker te laden voordat we het gebruiken in plaats van een script.

48
00:04:11,430 --> 00:04:18,620
Dus onze script dat we nodig hebben om te bepalen is waar we onze code zullen schrijven en we noemen het oefenen.

49
00:04:18,640 --> 00:04:19,720
J s.

50
00:04:19,850 --> 00:04:41,790
En dan moeten we dat bestand oefening die J ons en wij dat hier in dezelfde map zal zetten en wat we kunnen doen is een heel eenvoudige test om te zien of deze is aangesloten zowel voor onze h tim-bestand en de J-query maken als het in staat om te zien en gebruik maken van de J-query methode zullen we net zoiets als dit te doen.

51
00:04:41,820 --> 00:04:59,780
Als J-query anders iets anders zal doen dus als er J vraag zullen we een query geladen anders zullen we waarschuwingen weten Jay Querrey droevig gezicht en op te slaan te waarschuwen.

52
00:05:00,020 --> 00:05:03,540
En als we nu krijgen we frissen J-query geladen.

53
00:05:03,760 --> 00:05:05,240
Dus dat vertelt ons twee dingen.

54
00:05:05,260 --> 00:05:12,570
Men dit script wordt uitgevoerd oefening die Jezus is aangesloten en twee waren in staat om de Jay Querrey methoden te gebruiken.

55
00:05:12,820 --> 00:05:28,260
Als we deden dit in omgekeerde volgorde al en ik zette Jay vraag nadat ik mijn oefening Jay Ja inbegrepen en ik op te slaan en te vernieuwen krijgen we een fout die ons vertelt J query wordt niet gedefinieerd, zodat u het belang van de orde dat we de dingen kunnen zien in.

56
00:05:28,510 --> 00:05:37,540
Dus we willen altijd onze bibliotheken die onze code hangt af van de top in het hoofd op zijn minst willen we hen voor onze scripts die ze gebruiken te zetten.

57
00:05:37,720 --> 00:05:44,020
Laten we terug gaan naar de opdracht en het eerste wat we moeten doen is juist onder Jay Querrey die we al hebben gedaan.

58
00:05:44,020 --> 00:05:48,670
Next up moeten we alle divs te selecteren en geef ze een paarse achtergrond.

59
00:05:49,000 --> 00:05:55,530
Dus we gaan en selecteer alle divs met behulp van dollarteken in plaats van aanhalingstekens.

60
00:05:55,690 --> 00:05:58,360
Alles wat we moeten doen is kiezen div met CSSA.

61
00:05:58,390 --> 00:06:02,520
Dus gewoon div dot C S S en we zullen ze paars te maken.

62
00:06:02,560 --> 00:06:09,230
Dus kleur of achtergrond in dit geval is paars of we konden onze eigen R.G. hebben gebruikt B schaduw van paars.

63
00:06:09,380 --> 00:06:15,560
En als je niet meer weet hoe we paars met RGV dan moet je om te gaan spelen R.G. werd een beetje meer.

64
00:06:15,670 --> 00:06:20,110
Dus dat is de eerste die we kunnen besparen en controleer of dat werkte door verfrissend.

65
00:06:20,530 --> 00:06:22,910
En we krijgen vier paars achtergronden.

66
00:06:23,200 --> 00:06:23,770
OK.

67
00:06:23,920 --> 00:06:25,050
Dus dat is dat.

68
00:06:25,090 --> 00:06:28,780
Dat is de selectie van alle divs en hen een paarse achtergrond.

69
00:06:28,780 --> 00:06:32,360
Ik kom net voeg een briefje hier en commentaar dat uit.

70
00:06:32,620 --> 00:06:38,670
Next up willen we de divs met klasse gelijk is aan markeren en maken ze 200 pixels breed te selecteren.

71
00:06:38,990 --> 00:06:47,390
Dus dat zal zeer op dezelfde manier, maar werken om de divs met klasse gelijk te selecteren om te benadrukken wat we moeten doen is het gebruik dollarteken weer.

72
00:06:47,950 --> 00:07:02,770
En in plaats van div we kunnen dot highlight gebruiken en dan doen C Ss met en dat zal 200 bergtoppen.

73
00:07:02,870 --> 00:07:07,660
Het is vermeldenswaard dat dit technisch selecteert alles wat een klasse van hoogtepunt heeft.

74
00:07:07,660 --> 00:07:18,470
Als je wilt dat het expliciet te zijn en zeggen dat alleen de divs dat de klasse van hoogtepunt hebben konden we een anker tag of een paragraaf die ook die klasse dat we zouden deze selector te schrijven.

75
00:07:18,670 --> 00:07:22,290
En dit is C S S dat alle divs met de klas van hoogtepunt zegt.

76
00:07:22,390 --> 00:07:24,370
Maar in dit geval zal het een verschil maken.

77
00:07:24,380 --> 00:07:35,260
Dus 200 pixels met vernieuwen en u kunt deze twee divs zien de klasse van hoogtepunt de tweede en de vierde div en ze hebben een met 200 pixels.

78
00:07:35,890 --> 00:07:41,100
OK de volgende is de div met het idee van derde selecteren.

79
00:07:41,460 --> 00:07:51,850
En om het een oranje rand, zodat de div met die Id dollarteken opnieuw te selecteren en in plaats van dot moeten we ons naar Thorpe.

80
00:07:52,300 --> 00:07:59,060
En dan de naam van de ID die SS orde en het is aan ons.

81
00:07:59,080 --> 00:08:00,680
Alles wat ik zei was de kleur is oranje.

82
00:08:00,870 --> 00:08:11,140
Dus laten we een twee pixel stevige oranje rand en op te slaan en te vernieuwen en we hebben nu dat oranje rand daar.

83
00:08:11,190 --> 00:08:14,680
Ik zal het een beetje groter te maken, zodat het beter in de screencast laat zien.

84
00:08:14,680 --> 00:08:15,280
Daar gaan we.

85
00:08:15,500 --> 00:08:20,360
En dat is ongeveer een derde div die de ID van het woord heeft.

86
00:08:20,650 --> 00:08:32,380
Dus de laatste uitdaging die een bonus is om de eerste div alleen kiezen en verander de tekstkleur die de manier waarop de eerste div selecteert wordt met behulp van een CSSA pseudo selector roze.

87
00:08:32,380 --> 00:08:42,710
Eerste type dus div colon eerste streepje van dash type dat je moet bekend zijn met van enkele van de CSSA selector video's zijn.

88
00:08:42,910 --> 00:08:55,730
En dan zullen we gewoon maken het roze dat is de SS kleur roze en we slaan en te vernieuwen en je kunt zien dat de kleur is roze.

89
00:08:55,730 --> 00:09:05,350
De andere optie die we hebben, is er eigenlijk een ingebouwde J-query snelkoppeling die net Colan eerste en dat werkt ook prima.

90
00:09:05,380 --> 00:09:19,970
Een interessante opmerking is dat het gebruik van de dikke darm eerste is eigenlijk een beetje trager dan de eerste van het type, omdat eerste type is gebouwd om te zien te beoordelen is het een CSSA selector versus eerste is een J-query snelkoppeling.

91
00:09:20,060 --> 00:09:23,590
Dus het is niet inheems C Ss het is gewoon ooit zo iets langzamer.

92
00:09:23,770 --> 00:09:25,540
Dus ik zou de eerste van het type te gebruiken.

93
00:09:25,880 --> 00:09:28,870
OK dus dat is het voor deze oefening in de komende paar video's.