1
00:00:00,210 --> 00:00:05,100
Muy bien, así que es hora de que nuestro primer ejercicio de Jay queery funcione de

2
00:00:05,100 --> 00:00:11,370
la manera en que este sea. Voy a darte un ejemplo de himnario envejecido para los divs; algunos tienen clases; algunos

3
00:00:11,370 --> 00:00:18,270
tienen ideas; los tomarán para los divs y los pondrán en su propio archivo HTML de edad y deberá incluir correctamente la consulta

4
00:00:18,270 --> 00:00:22,330
de Jay sobre cómo hacerlo si desea utilizar un Cdn o si desea descargarlo.

5
00:00:22,650 --> 00:00:27,720
Y luego hay cuatro desafíos rápidos que quiero que intentes usando Jay Querrey y, en particular,

6
00:00:27,990 --> 00:00:32,040
el signo de dólar para seleccionar y Dot ver SS para darle estilo.

7
00:00:32,070 --> 00:00:33,130
Entonces el primero.

8
00:00:33,270 --> 00:00:36,590
Selecciona todos los divs y dales un fondo morado.

9
00:00:36,870 --> 00:00:43,200
El siguiente es selecciona los divs con clase resaltada y los convierte en 200 píxeles de ancho.

10
00:00:43,200 --> 00:00:49,800
El tercero es seleccionar el div con el tercero ID y darle un borde naranja hasta qué ancho

11
00:00:49,920 --> 00:00:51,930
y qué estilo del borde.

12
00:00:52,110 --> 00:00:58,630
Y luego, la bonificación es seleccionar solo el primer div y cambiar el color de fuente para que sea de color rosa.

13
00:00:58,650 --> 00:01:00,120
Así que adelante dale una oportunidad.

14
00:01:00,120 --> 00:01:01,710
Necesitarás publicar un video.

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

16
00:01:03,330 --> 00:01:08,730
y luego copie este código o escríbalo usted mismo y luego tendrá que resolver estos cuatro desafíos.

17
00:01:08,730 --> 00:01:09,660
Incluya una consulta

18
00:01:09,660 --> 00:01:11,130
Así que adelante publica un video.

19
00:01:11,130 --> 00:01:13,500
Volveré en solo unos segundos con la

20
00:01:20,970 --> 00:01:21,730
solución ya.

21
00:01:21,750 --> 00:01:24,700
Avancemos y escriba una solución rápida a esto.

22
00:01:25,050 --> 00:01:29,070
Como siempre, lo primero que debemos hacer es crear nuestro archivo de cada vez.

23
00:01:29,070 --> 00:01:30,220
Entonces tengo un nuevo archivo.

24
00:01:30,240 --> 00:01:37,740
título y luego continuaré y agregaré nuestro DML de inicio y yo Solo lo copiaré en lugar de tipearlo.

25
00:01:37,740 --> 00:01:45,760
Lo llamé "ejercicio de html" y lo guardaré y luego agregaré mi repetición regular de h tim l y llamaremos

26
00:01:46,060 --> 00:01:48,780
este ejercicio de consulta J en el

27
00:01:49,520 --> 00:01:52,080
OK, entonces tenemos los cuatro elementos.

28
00:01:52,080 --> 00:01:54,660
Ahora vamos y agreguemos a Jay Querrey.

29
00:01:54,780 --> 00:02:00,330
Recuerde que tenemos dos formas de hacerlo, podemos incluirlo localmente o podemos vincularlo a un CDN.

30
00:02:00,480 --> 00:02:03,150
Entonces mostraré ambos el primero.

31
00:02:03,510 --> 00:02:05,710
Solo voy a copiar el archivo.

32
00:02:06,030 --> 00:02:10,430
Así que tengo que modificar la versión aquí solo para comandar el comando c V.

33
00:02:10,620 --> 00:02:14,350
Así que ahora lo tengo en el mismo directorio que mi ejercicio esa edad Simmo.

34
00:02:14,580 --> 00:02:21,540
Y luego iré aquí y lo primero que quiero hacer es agregar un guión de secuencia de comandos y luego

35
00:02:21,600 --> 00:02:28,620
voy a agregar fuente igual y luego tengo que asegurarme de que coincida con el que es Jay dash al

36
00:02:28,660 --> 00:02:31,000
punto 1 . 4 hombres

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

38
00:02:32,190 --> 00:02:38,230
Así que Jay queery se apresura a señalar un punto para los hombres Punto.

39
00:02:38,390 --> 00:02:45,640
Jesús guardaremos eso y lo abriremos en nuestro navegador y haremos nuestra pequeña prueba para ver si funciona.

40
00:02:46,650 --> 00:02:47,950
Parece que encontró el archivo.

41
00:02:47,970 --> 00:02:55,920
De lo contrario, nos daría un error y siempre podemos tratar de hacer algo así como un div signo de dólar y ver

42
00:02:55,920 --> 00:02:56,910
lo que obtenemos.

43
00:02:57,030 --> 00:02:57,910
Y está funcionando.

44
00:02:57,900 --> 00:03:00,060
Está seleccionando nuestros 4 divs.

45
00:03:00,060 --> 00:03:02,670
También podemos incluir A-J consultas CDN.

46
00:03:03,180 --> 00:03:04,600
Y yo solo google para eso.

47
00:03:04,680 --> 00:03:07,510
Jay quercetin y luego elige nuestra versión.

48
00:03:07,980 --> 00:03:09,690
Entonces no queremos 3. 0.

49
00:03:09,930 --> 00:03:10,670
Estoy seguro de que funciona bien.

50
00:03:10,680 --> 00:03:12,940
Pero esa es la versión más nueva y sigue siendo un alfa.

51
00:03:13,050 --> 00:03:15,070
Entonces, probablemente haya algunos errores y algunos problemas.

52
00:03:15,150 --> 00:03:22,500
Entonces, para apuntar un punto cuatro es la versión estable más reciente, copiaremos esta URL y luego agregaremos otra etiqueta de

53
00:03:22,500 --> 00:03:27,870
script y los dejaré aquí y solo comentaré uno y restableceré la fuente igual a la

54
00:03:27,870 --> 00:03:28,830
que está incorrecto.

55
00:03:28,950 --> 00:03:33,920
Entonces cualquiera de los dos funciona, usaré el Cdn ya que ya te probé que

56
00:03:37,260 --> 00:03:38,460
todos usamos el Cdn.

57
00:03:38,490 --> 00:03:42,360
Ya probé que este funcionó solo por diversión.

58
00:03:42,510 --> 00:03:47,180
Así que guardaremos y luego actualizaremos y comprobaremos si nuestro código aún funciona.

59
00:03:47,460 --> 00:03:49,830
Sí, es encontrar signos de dólar sin problemas.

60
00:03:49,830 --> 00:03:51,510
Está conectado a J Qwerty.

61
00:03:51,600 --> 00:03:58,320
Un punto que me gustaría destacar es que incluimos J queery arriba en la cabeza y lo usamos

62
00:03:58,320 --> 00:04:01,330
en nuestros scripts que escribimos en el cuerpo.

63
00:04:01,590 --> 00:04:06,930
Y la razón por la que hacemos eso recuerda que las cosas se cargan en el orden en que están declaradas Entonces

64
00:04:07,200 --> 00:04:11,120
queremos que la consulta de Arjay se cargue definitivamente antes de usarla en lugar de un script.

65
00:04:11,430 --> 00:04:18,620
Entonces nuestro script que necesitamos definir es donde escribiremos nuestro código y lo llamaremos ejercicio.

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

67
00:04:19,850 --> 00:04:28,200
Y luego tenemos que hacer ese ejercicio de archivos que J usamos y lo pondremos aquí en el mismo directorio y lo que podemos

68
00:04:29,550 --> 00:04:36,210
hacer es una prueba muy simple para ver si está conectado tanto a nuestro archivo h tim como a

69
00:04:36,210 --> 00:04:41,790
la consulta J si puede ver y utilizar el método de consulta J, haremos algo como esto.

70
00:04:41,820 --> 00:04:54,140
Si J consulta else hará otra cosa así que si hay una consulta J alertaremos una consulta cargada, de

71
00:04:54,130 --> 00:04:59,780
lo contrario las alertas lo sabremos y lo salvaremos.

72
00:05:00,020 --> 00:05:03,540
Y si actualizamos ahora, obtenemos la consulta J cargada.

73
00:05:03,760 --> 00:05:05,240
Entonces eso nos dice dos cosas.

74
00:05:05,260 --> 00:05:12,020
Una de estas secuencias de comandos se está ejecutando ejercicio que Jesús está conectado y dos fueron capaces de utilizar los métodos de

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

76
00:05:12,820 --> 00:05:20,200
Sin embargo, si hicimos esto en orden inverso y puse a Jay en consulta después de incluir mi ejercicio Jay Sí y guardo y actualicé

77
00:05:20,200 --> 00:05:26,350
recibimos un error que nos dice que la consulta J no está definida para que pueda ver la importancia del orden

78
00:05:26,410 --> 00:05:28,260
en que ponemos las cosas en.

79
00:05:28,510 --> 00:05:34,660
Por lo tanto, siempre queremos poner en nuestras bibliotecas que nuestro código depende de la parte superior de la cabeza, por lo

80
00:05:34,690 --> 00:05:37,540
menos queremos ponerlos antes de nuestros scripts que los usan.

81
00:05:37,720 --> 00:05:42,850
Volvamos a la tarea y lo primero que debemos hacer es incluir correctamente a Jay Querrey,

82
00:05:42,850 --> 00:05:44,020
que ya hemos hecho.

83
00:05:44,020 --> 00:05:48,670
A continuación, debemos seleccionar todos los divs y darles un fondo morado.

84
00:05:49,000 --> 00:05:55,530
Por lo tanto, procederemos y seleccionaremos todos los divs mediante el uso del signo de dólar en lugar de las comillas.

85
00:05:55,690 --> 00:05:58,360
Todo lo que tenemos que hacer es seleccionar div con CSSA.

86
00:05:58,390 --> 00:06:02,520
Así que solo div punto C S S y los haremos purpúreos.

87
00:06:02,560 --> 00:06:09,230
Entonces, el color o el fondo en este caso es púrpura o podríamos haber usado nuestra propia R. GRAMO. B sombra de púrpura.

88
00:06:09,380 --> 00:06:14,320
Y si no recuerdas cómo hacemos púrpura con RGV, entonces necesitas jugar la R. GRAMO. un poco más

89
00:06:14,320 --> 00:06:15,560
se convirtió

90
00:06:15,670 --> 00:06:20,110
Así que ese es el primero que podemos guardar y verificar que eso funcionó de forma refrescante.

91
00:06:20,530 --> 00:06:22,910
Y obtenemos cuatro fondos morados.

92
00:06:23,200 --> 00:06:23,770
DE ACUERDO.

93
00:06:23,920 --> 00:06:25,050
Entonces eso es eso

94
00:06:25,090 --> 00:06:28,780
Eso es seleccionar todos los divs y darles un fondo morado.

95
00:06:28,780 --> 00:06:32,360
Solo agregaré una pequeña nota aquí y la comentaré.

96
00:06:32,620 --> 00:06:38,670
A continuación, queremos seleccionar los divs con clase igual a resaltar y hacerlos de 200 píxeles de ancho.

97
00:06:38,990 --> 00:06:45,340
Entonces eso funcionará de manera muy similar, pero para seleccionar los divs con clase igual para resaltar lo que tenemos que hacer

98
00:06:45,340 --> 00:06:47,390
es usar el signo de dólar nuevamente.

99
00:06:47,950 --> 00:07:02,770
Y en lugar de div podemos usar punto highlight y luego hacer C Ss y eso será 200 picos.

100
00:07:02,870 --> 00:07:07,660
Vale la pena señalar que esto selecciona técnicamente todo lo que tiene una clase de resaltado.

101
00:07:07,660 --> 00:07:13,540
Si quiere que sea explícito y diga solo los divs que tienen la clase de resaltado podríamos tener

102
00:07:13,540 --> 00:07:18,470
una etiqueta de anclaje o un párrafo que también tenga esa clase, escribiríamos este selector.

103
00:07:18,670 --> 00:07:22,290
Y esto es C S que dice todos los divs con la clase de resaltado.

104
00:07:22,390 --> 00:07:24,370
Pero en este caso hará la diferencia.

105
00:07:24,380 --> 00:07:31,750
Así que 200 píxeles con actualización y puede ver estos dos div tienen la clase de resaltar el segundo y

106
00:07:31,750 --> 00:07:35,260
el cuarto div y tienen un con 200 píxeles.

107
00:07:35,890 --> 00:07:41,100
OK, el siguiente es seleccionar el div con la idea de tercero.

108
00:07:41,460 --> 00:07:50,320
Y para darle un borde naranja para seleccionar el div con ese signo de dólar Id otra vez y en lugar de punto, necesitamos

109
00:07:50,590 --> 00:07:51,850
nuestro para Thorpe.

110
00:07:52,300 --> 00:07:59,060
Y luego el nombre de la ID que ordenan las SS y depende de nosotros.

111
00:07:59,080 --> 00:08:00,680
Todo lo que dije fue que el color es naranja.

112
00:08:00,870 --> 00:08:10,420
hagamos un borde naranja sólido de dos píxeles y guardemos y actualicemos, y ahora tenemos ese borde naranja justo ahí.

113
00:08:10,420 --> 00:08:11,140
Así que

114
00:08:11,190 --> 00:08:14,680
Lo haré un poco más grande para que se vea mejor en el screencast.

115
00:08:14,680 --> 00:08:15,280
Aquí vamos.

116
00:08:15,500 --> 00:08:20,360
Y eso es alrededor de un tercer div que tiene la ID de la palabra.

117
00:08:20,650 --> 00:08:26,710
Entonces, el último desafío que fue una bonificación es seleccionar solo el primer div y cambiar el color

118
00:08:26,710 --> 00:08:32,380
de fuente a rosa de la manera que seleccionará el primer div usando un pseudo selector CSSA.

119
00:08:32,380 --> 00:08:41,030
Primero de tipo, div div primero el primer guión del tipo de guión con el que deberías estar familiarizado desde algunos de los

120
00:08:41,020 --> 00:08:42,710
videos del selector de CSSA.

121
00:08:42,910 --> 00:08:53,440
Y luego lo haremos rosado, es el color SS en color rosa, guardaremos y actualizaremos y podrás ver que

122
00:08:53,440 --> 00:08:55,730
el color es rosado.

123
00:08:55,730 --> 00:09:02,480
La otra opción que tenemos es que en realidad hay un atajo de consulta J integrado que es solo

124
00:09:02,920 --> 00:09:05,350
Colan primero y que también funciona bien.

125
00:09:05,380 --> 00:09:11,800
Una nota interesante es que el uso de dos puntos primero es en realidad un poco más lento que el primero de

126
00:09:11,810 --> 00:09:19,970
tipo porque el primero de tipo está integrado para ver si se trata de un selector de CSSA versus el primero es un acceso directo de consulta de J.

127
00:09:20,060 --> 00:09:23,590
Entonces no es Cs nativo, es solo un poco más lento.

128
00:09:23,770 --> 00:09:25,540
Entonces usaría primero de tipo.

129
00:09:25,880 --> 00:09:28,870
OK, así que eso es todo por este ejercicio en los próximos videos.

130
00:09:29,000 --> 00:09:33,360
Vamos a aprender sobre otras formas de manipular cosas en lugar de simplemente cambiar el SEUS nosotros