1
00:00:00,210 --> 00:00:05,100
Va bene quindi è il momento per il nostro primo esercizio di Jay queery in cui

2
00:00:05,100 --> 00:00:11,370
questo funziona è che ti darò qualche sample hymnal di età per le immersioni alcuni hanno classi alcune hanno idee

3
00:00:11,370 --> 00:00:18,270
e prenderanno quelle per div e le metteranno in il tuo file HTML di tua età e dovrai includere correttamente la query

4
00:00:18,270 --> 00:00:22,330
di Jay su come farlo se vuoi usare un Cdn o se vuoi scaricarlo.

5
00:00:22,650 --> 00:00:27,720
E poi ci sono quattro sfide veloci che voglio che tu tenti di usare Jay Querrey e in

6
00:00:27,990 --> 00:00:32,040
particolare il simbolo del dollaro per selezionare e Dot vedi SS per lo stile.

7
00:00:32,070 --> 00:00:33,130
Quindi il primo.

8
00:00:33,270 --> 00:00:36,590
Seleziona tutte le div e dai loro uno sfondo viola.

9
00:00:36,870 --> 00:00:43,200
Il prossimo seleziona le div con l'evidenziazione di classe e le ingrandisce di 200 pixel.

10
00:00:43,200 --> 00:00:49,800
Il terzo è quello di selezionare il div con ID terzo e dargli un bordo arancione fino a te quanto è

11
00:00:49,920 --> 00:00:51,930
largo e quale stile del bordo.

12
00:00:52,110 --> 00:00:58,630
E poi il bonus è selezionare solo il primo div e cambiare il suo colore del font in rosa.

13
00:00:58,650 --> 00:01:00,120
Quindi vai avanti, dai una possibilità.

14
00:01:00,120 --> 00:01:01,710
Dovrai pubblicare un video.

15
00:01:01,710 --> 00:01:03,280
Crea un file HTML New Age.

16
00:01:03,330 --> 00:01:08,730
e quindi copiare questo codice o digitare da solo e quindi sarà necessario risolvere queste quattro sfide.

17
00:01:08,730 --> 00:01:09,660
Includere una query

18
00:01:09,660 --> 00:01:11,130
Quindi, vai avanti, pubblica un video.

19
00:01:11,130 --> 00:01:13,500
Tornerò tra pochi secondi con la

20
00:01:20,970 --> 00:01:21,730
soluzione già.

21
00:01:21,750 --> 00:01:24,700
Andiamo avanti e scriviamo una soluzione rapida a questo.

22
00:01:25,050 --> 00:01:29,070
Come sempre, la prima cosa che dobbiamo fare è creare il nostro file ogni volta.

23
00:01:29,070 --> 00:01:30,220
Quindi ho un nuovo file.

24
00:01:30,240 --> 00:01:37,740
nel titolo e poi andrò avanti e aggiungerò il nostro DML e I lo copierò piuttosto che digitarlo.

25
00:01:37,740 --> 00:01:45,760
L'ho chiamato esercizio che html e lo salverò e poi aggiungerò il mio normale file h tim l e

26
00:01:46,060 --> 00:01:48,780
chiameremo questo esercizio di query J

27
00:01:49,520 --> 00:01:52,080
OK, quindi abbiamo i quattro elementi.

28
00:01:52,080 --> 00:01:54,660
Ora andiamo ad aggiungere Jay Querrey.

29
00:01:54,780 --> 00:02:00,330
Ricorda che abbiamo due modi per farlo che possiamo includerlo localmente o collegarci a un CDN.

30
00:02:00,480 --> 00:02:03,150
Quindi mostrerò sia il primo che il primo.

31
00:02:03,510 --> 00:02:05,710
Sto solo andando a copiare il file.

32
00:02:06,030 --> 00:02:10,430
Quindi devo modificare qui la versione solo per comandare il comando V.

33
00:02:10,620 --> 00:02:14,350
Così ora lo ho nella stessa directory del mio esercizio che invecchia Simmo.

34
00:02:14,580 --> 00:02:21,540
E poi andrò da queste parti e la prima cosa che voglio fare è aggiungere uno script tag script

35
00:02:21,600 --> 00:02:28,620
e poi aggiungerò i sorgenti uguali e quindi devo assicurarmi di farlo corrispondere correttamente che è Jay dash to

36
00:02:28,660 --> 00:02:31,000
point 1 . 4 uomini.

37
00:02:31,080 --> 00:02:32,110
Sì.

38
00:02:32,190 --> 00:02:38,230
Quindi Jay si precipita a puntare un punto per gli uomini Dot.

39
00:02:38,390 --> 00:02:45,640
Gesù lo salveremo e lo apriremo nel nostro browser e faremo il nostro piccolo test per vedere se funziona.

40
00:02:46,650 --> 00:02:47,950
Sembra che abbia trovato il file.

41
00:02:47,970 --> 00:02:55,920
Altrimenti ci darebbe un errore e possiamo sempre provare a fare qualcosa come un div di segno del dollaro e

42
00:02:55,920 --> 00:02:56,910
vedere cosa otteniamo.

43
00:02:57,030 --> 00:02:57,910
E sta funzionando.

44
00:02:57,900 --> 00:03:00,060
Sta selezionando i nostri 4 div.

45
00:03:00,060 --> 00:03:02,670
Possiamo anche includere CDN di richieste A-J.

46
00:03:03,180 --> 00:03:04,600
E io google solo per quello.

47
00:03:04,680 --> 00:03:07,510
Jay quercetina e poi scegli la nostra versione.

48
00:03:07,980 --> 00:03:09,690
Quindi non vogliamo 3. 0.

49
00:03:09,930 --> 00:03:10,670
Sono sicuro che funziona bene.

50
00:03:10,680 --> 00:03:12,940
Ma questa è la versione più recente ed è ancora un alfa.

51
00:03:13,050 --> 00:03:15,070
Quindi ci sono probabilmente alcuni bug e alcuni problemi.

52
00:03:15,150 --> 00:03:22,500
Quindi per puntare a un punto quattro è la versione stabile più recente, quindi copieremo questo URL e poi aggiungeremo un altro tag

53
00:03:22,500 --> 00:03:27,870
script e li lascerò entrambi qui e ne commenterò uno e reimpostare la sorgente uguale a quello

54
00:03:27,870 --> 00:03:28,830
che sei sbagliato.

55
00:03:28,950 --> 00:03:33,920
Quindi uno dei due lavori userò il Cdn dato che ho già provato che tutti

56
00:03:37,260 --> 00:03:38,460
noi usiamo il Cdn.

57
00:03:38,490 --> 00:03:42,360
Dal momento che ho già dimostrato che questo ha funzionato solo per l'amor di varietà.

58
00:03:42,510 --> 00:03:47,180
Quindi salveremo, quindi aggiorneremo e ricontrolleremo che il nostro codice funzioni ancora.

59
00:03:47,460 --> 00:03:49,830
Sì, sta trovando i segni del dollaro bene.

60
00:03:49,830 --> 00:03:51,510
È connesso a J Qwerty.

61
00:03:51,600 --> 00:03:58,320
Un punto che vorrei fare è che includiamo J queery in cima alla testa e che usiamo

62
00:03:58,320 --> 00:04:01,330
nei nostri script che scriviamo nel corpo.

63
00:04:01,590 --> 00:04:06,930
E il motivo per cui lo facciamo ricorda che le cose si caricano nell'ordine in cui sono state dichiarate. Quindi vogliamo

64
00:04:07,200 --> 00:04:11,120
che la query di Arjay si carichi definitivamente prima di usarla al posto di uno script.

65
00:04:11,430 --> 00:04:18,620
Quindi il nostro script che dobbiamo definire è dove scriveremo il nostro codice e lo chiameremo semplicemente esercizio.

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

67
00:04:19,850 --> 00:04:28,200
E poi abbiamo bisogno di fare quell'esercitazione di file che J us e lo metteremo proprio qui nella stessa directory e quello che possiamo fare

68
00:04:29,550 --> 00:04:36,210
è un test davvero semplice per vedere se è collegato sia al nostro file h tim che alla query J

69
00:04:36,210 --> 00:04:41,790
se è in grado di vedere e utilizzare il metodo di query J, faremo qualcosa del genere.

70
00:04:41,820 --> 00:04:54,140
Se J query else farà qualcos'altro quindi se c'è una query J avviseremo una query caricata

71
00:04:54,130 --> 00:04:59,780
altrimenti avviseremo Jay Trerrey faccia triste e salveremo.

72
00:05:00,020 --> 00:05:03,540
E se aggiorniamo ora, viene caricata la query J.

73
00:05:03,760 --> 00:05:05,240
Quindi questo ci dice due cose.

74
00:05:05,260 --> 00:05:12,020
Uno di questi script sta facendo esercizio che Gesù è connesso e due sono stati in grado di usare i metodi di

75
00:05:12,010 --> 00:05:12,570
Jay Querrey.

76
00:05:12,820 --> 00:05:20,200
Se lo abbiamo fatto in ordine inverso e ho inserito query Jay dopo aver incluso il mio esercizio Jay Sì e ho salvato e

77
00:05:20,200 --> 00:05:26,350
aggiornato otteniamo un errore che ci dice che la query J non è definita in modo da poter vedere l'importanza

78
00:05:26,410 --> 00:05:28,260
dell'ordine in cui mettiamo le cose in.

79
00:05:28,510 --> 00:05:34,660
Quindi vogliamo sempre mettere le nostre librerie in modo che il nostro codice dipenda in cima alla testa almeno che

80
00:05:34,690 --> 00:05:37,540
vogliamo metterle prima dei nostri script che le usano.

81
00:05:37,720 --> 00:05:42,850
Torniamo al compito e la prima cosa che dobbiamo fare è includere correttamente Jay Querrey

82
00:05:42,850 --> 00:05:44,020
che abbiamo già fatto.

83
00:05:44,020 --> 00:05:48,670
Avanti, dobbiamo selezionare tutte le div e dare loro uno sfondo viola.

84
00:05:49,000 --> 00:05:55,530
Quindi andremo avanti e selezioneremo tutti i div usando il simbolo del dollaro invece delle virgolette.

85
00:05:55,690 --> 00:05:58,360
Tutto quello che dobbiamo fare è selezionare div con CSSA.

86
00:05:58,390 --> 00:06:02,520
Quindi basta div dot C S S e li renderemo viola.

87
00:06:02,560 --> 00:06:09,230
Quindi il colore o lo sfondo in questo caso è viola o avremmo potuto usare il nostro R. G. B tonalità di viola.

88
00:06:09,380 --> 00:06:14,320
E se non ricordi come facciamo il viola con RGV, allora devi andare a giocare al R. G. po 'di più.

89
00:06:14,320 --> 00:06:15,560
è diventato un

90
00:06:15,670 --> 00:06:20,110
Quindi questo è il primo che possiamo salvare e controllare che funzioni funzionando rinfrescando.

91
00:06:20,530 --> 00:06:22,910
E otteniamo quattro sfondi viola.

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

93
00:06:23,920 --> 00:06:25,050
Ecco.

94
00:06:25,090 --> 00:06:28,780
Quello è selezionare tutti i div e dare loro uno sfondo viola.

95
00:06:28,780 --> 00:06:32,360
Aggiungerò solo una piccola nota qui e la commenterò.

96
00:06:32,620 --> 00:06:38,670
Next up vogliamo selezionare i div con classe pari a highlight e renderli di 200 pixel di larghezza.

97
00:06:38,990 --> 00:06:45,340
Quindi funzionerà in modo molto simile ma per selezionare i div con classe uguale a evidenziare quello che dobbiamo fare è

98
00:06:45,340 --> 00:06:47,390
usare di nuovo il simbolo del dollaro.

99
00:06:47,950 --> 00:07:02,770
E invece di div possiamo usare l'evidenziatore di punti e poi fare C Ss con e che saranno 200 picchi.

100
00:07:02,870 --> 00:07:07,660
Vale la pena notare che questo tecnicamente seleziona tutto ciò che ha una classe di evidenziazione.

101
00:07:07,660 --> 00:07:13,540
Se vuoi che sia esplicito e dica solo i div che hanno la classe di evidenziazione potremmo avere

102
00:07:13,540 --> 00:07:18,470
un tag di ancoraggio o un paragrafo che abbia anche quella classe scriverebbe questo selettore.

103
00:07:18,670 --> 00:07:22,290
E questo è C S S che dice tutte le div con la classe di highlight.

104
00:07:22,390 --> 00:07:24,370
Ma in questo caso farà la differenza.

105
00:07:24,380 --> 00:07:31,750
Quindi 200 pixel con aggiornamento e puoi vedere che questi due div hanno la classe di evidenziare il secondo e

106
00:07:31,750 --> 00:07:35,260
il quarto div e hanno un con 200 pixel.

107
00:07:35,890 --> 00:07:41,100
OK il prossimo è selezionare il div con l'idea di terzo.

108
00:07:41,460 --> 00:07:50,320
E per dargli un bordo arancione in modo da selezionare nuovamente il div con quel simbolo del dollaro di identificazione e invece di dot abbiamo

109
00:07:50,590 --> 00:07:51,850
bisogno del nostro Thorpe.

110
00:07:52,300 --> 00:07:59,060
E poi il nome dell'ID che SS ordina e tocca a noi.

111
00:07:59,080 --> 00:08:00,680
Tutto ciò che ho detto è che il colore è arancione.

112
00:08:00,870 --> 00:08:10,420
facciamo un bordo arancione solido a due pixel e salviamo e aggiorniamo e ora abbiamo quel bordo arancione proprio lì.

113
00:08:10,420 --> 00:08:11,140
Quindi

114
00:08:11,190 --> 00:08:14,680
Lo renderò un po 'più grande in modo che si mostri meglio nello screencast.

115
00:08:14,680 --> 00:08:15,280
Eccoci.

116
00:08:15,500 --> 00:08:20,360
E questo è circa un terzo div che ha l'ID della parola.

117
00:08:20,650 --> 00:08:26,710
Quindi l'ultima sfida che è stata un bonus è quella di selezionare solo il primo div e cambiare il suo

118
00:08:26,710 --> 00:08:32,380
colore del carattere in rosa nel modo in cui selezioneremo il primo div usando uno pseudo selettore CSSA.

119
00:08:32,380 --> 00:08:41,030
Per prima cosa digita il primo trattino del tipo "dash" che dovresti avere familiarità con alcuni dei video

120
00:08:41,020 --> 00:08:42,710
dei selettori CSSA.

121
00:08:42,910 --> 00:08:53,440
E poi lo renderemo rosa, il colore rosa SS, e lo salveremo e lo aggiorneremo e vedrai che

122
00:08:53,440 --> 00:08:55,730
il colore è rosa.

123
00:08:55,730 --> 00:09:02,480
L'altra opzione che abbiamo è in realtà una scorciatoia di query J incorporata che è solo Colan per

124
00:09:02,920 --> 00:09:05,350
prima e che funziona anche bene.

125
00:09:05,380 --> 00:09:11,800
Una nota interessante è che l'uso dei due punti è in realtà un po 'più lento del primo di

126
00:09:11,810 --> 00:09:19,970
tipo perché il primo di tipo è incorporato per vedere valutare che è un selettore CSSA rispetto al primo è una scorciatoia di query J.

127
00:09:20,060 --> 00:09:23,590
Quindi non è nativo C Ss è solo leggermente più lento.

128
00:09:23,770 --> 00:09:25,540
Quindi userei prima di tipo.

129
00:09:25,880 --> 00:09:28,870
OK, questo è tutto per questo esercizio nei prossimi video.

130
00:09:29,000 --> 00:09:33,360
Impareremo altri modi di manipolare le cose piuttosto che cambiare semplicemente noi