1
00:00:00,110 --> 00:00:00,530
Todo bien.

2
00:00:00,530 --> 00:00:01,500
Dar una buena acogida.

3
00:00:01,500 --> 00:00:03,350
Así que comencemos a escribir un código.

4
00:00:03,480 --> 00:00:07,290
Y lo primero que vamos a aprender a hacer es cómo seleccionar elementos.

5
00:00:07,290 --> 00:00:13,190
Así que al igual que con la relación dominante dominante o la fonología Sí, necesitamos seleccionar cosas y luego manipularlas.

6
00:00:13,380 --> 00:00:17,880
Sé que estoy un poco roto, pero es un proceso realmente importante seleccionar y luego cambiar

7
00:00:17,880 --> 00:00:18,300
las cosas.

8
00:00:18,300 --> 00:00:23,790
video se centrará principalmente en seleccionar elementos con J Query para dos objetivos principales aquí.

9
00:00:23,790 --> 00:00:24,230
Este

10
00:00:24,390 --> 00:00:30,600
El primero es aprender a seleccionar elementos con la función de signo de dólar y luego también usar el

11
00:00:30,740 --> 00:00:33,500
método de evaluación C para elementos de estilo.

12
00:00:33,630 --> 00:00:38,160
Así que no solo estamos obteniendo cosas selectas, solo las imprimimos, pero para hacerlo más visual.

13
00:00:38,160 --> 00:00:44,010
Las seleccionaremos y luego cambiaremos el color de fondo y la consulta de Jay, podremos seleccionar todo lo que queramos

14
00:00:44,010 --> 00:00:45,210
usando solo una función.

15
00:00:45,570 --> 00:00:46,800
El signo de dólar.

16
00:00:46,920 --> 00:00:52,860
Así que a diferencia de vanilla J. S. los elementos get de un nombre de clase obtienen elementos por nombre de etiqueta.

17
00:00:52,920 --> 00:00:55,650
donde tenemos el documento que obtiene el elemento mediante el selector de consulta del selector de consultas de id. todos

18
00:00:55,650 --> 00:01:00,660
Hay tantas formas diferentes de seleccionar el signo de dólar y la consulta de Jay las reemplazará a todas.

19
00:01:00,990 --> 00:01:07,230
Básicamente funciona como selector de consultas, todo eso le damos un selector de estilo C Ss.

20
00:01:07,320 --> 00:01:12,370
Y luego, la consulta Jay devuelve todos los elementos coincidentes que coinciden con el selector que le damos.

21
00:01:12,720 --> 00:01:18,360
Así que tengo un ejemplo aquí si queremos seleccionar todas las etiquetas de imagen en la

22
00:01:18,360 --> 00:01:25,460
página, simplemente se ve así si quisiéramos seleccionar todos los elementos con clase de escala que hacemos escala de puntos.

23
00:01:25,620 --> 00:01:28,380
Recuerde que esto se establece selectores de estilo.

24
00:01:28,380 --> 00:01:33,840
hacer cosas más avanzadas como esta seleccionando todas las etiquetas de anclaje que están dentro de los elementos de la lista.

25
00:01:33,840 --> 00:01:39,000
Entonces, para una identificación necesitamos el arco para Thorpe para una clase que necesita el punto y también podemos

26
00:01:39,360 --> 00:01:41,900
Así que haré una demostración rápida aquí de cómo funciona esto.

27
00:01:42,060 --> 00:01:47,750
Así que tenemos nuestro demo de Jake Querrey a su cargo en nuestra página donde tengo el Cdn incluido.

28
00:01:48,300 --> 00:01:53,190
Y no importa si usamos la palabra N o si desea usar la copia descargada, funcionará de

29
00:01:53,190 --> 00:01:54,180
la misma manera.

30
00:01:54,180 --> 00:01:58,110
Entonces necesitamos esa secuencia de comandos aquí y luego necesitamos un poco de contenido para jugar.

31
00:01:58,110 --> 00:02:00,410
Así que voy a mantener el H-1 S. J. demostración central

32
00:02:00,510 --> 00:02:05,970
Cambiaré a estos aliados para que sean un poco más únicos, así que lo llenaré con algunos de mis animales favoritos.

33
00:02:06,480 --> 00:02:08,260
Entonces el final es para Newt.

34
00:02:08,520 --> 00:02:14,100
La parte favorita de mi canción de cinco años del alfabeto animal se agregará a otro de mis

35
00:02:14,410 --> 00:02:15,510
álbumes favoritos, Monkey.

36
00:02:15,870 --> 00:02:19,050
Y luego, por último, el pino Martin.

37
00:02:19,680 --> 00:02:24,820
Y si nunca has visto la marta de pino, son animales igualmente adorables y terroríficos.

38
00:02:24,950 --> 00:02:27,190
Entonces puedes ver bastante adorable aquí.

39
00:02:28,060 --> 00:02:32,690
Pero si les echas un vistazo en acción, son depredadores locos y bastante atemorizantes.

40
00:02:33,000 --> 00:02:33,270
DE ACUERDO.

41
00:02:33,300 --> 00:02:38,770
Así que algunos de mis animales favoritos en la lista se guardarán y vamos a abrir esto ahora.

42
00:02:39,720 --> 00:02:41,150
Asegúrate de que estamos en el directorio correcto.

43
00:02:41,200 --> 00:02:47,730
Demostración de Jay quarded que cada Chimo y lo que haré es mover esto en su propia ventana y vamos a entrar en la

44
00:02:47,730 --> 00:02:53,190
consola para agrandar el tamaño de la fuente y vamos a utilizar una consulta para seleccionar algunas de estas cosas.

45
00:02:53,640 --> 00:02:56,100
Así que recuerda que un signo de dólar es una función.

46
00:02:56,520 --> 00:03:00,490
Y si solo escribo el signo de dólar sin los paréntesis.

47
00:03:00,720 --> 00:03:06,930
Así es como yo escribiendo la alerta sin paréntesis o con. dot log sin los paréntesis realmente no

48
00:03:06,930 --> 00:03:08,700
hace nada excepto dígame.

49
00:03:08,940 --> 00:03:12,610
Sí, sé sobre ese código, pero en realidad no lo ejecuta.

50
00:03:13,170 --> 00:03:16,860
Comencemos seleccionando el único H-1 en la página para hacer eso.

51
00:03:16,860 --> 00:03:24,550
Podemos usar el signo de dólar y el selector s para seleccionar h solo es H-1 y presionamos enter.

52
00:03:24,600 --> 00:03:27,480
Puedes ver que devuelve la demostración J queery H-1.

53
00:03:27,630 --> 00:03:30,110
Entonces también note que está dentro de una lista.

54
00:03:30,300 --> 00:03:36,480
Por lo tanto, a diferencia del selector de consultas, donde devuelve la primera instancia para el selector de signo de dólar.

55
00:03:36,480 --> 00:03:42,360
Query devolverá una lista incluso si solo hay un elemento que es realmente útil y lo

56
00:03:42,360 --> 00:03:43,310
veremos un poco.

57
00:03:43,320 --> 00:03:51,570
Así que vamos a intentar seleccionar todos los aliados ahora para poder hacer algo así como aliados de Dollar Sign y

58
00:03:51,570 --> 00:03:53,150
obtenemos tres aliados así.

59
00:03:53,490 --> 00:03:59,130
También podemos seleccionar el cuerpo escribiendo cuerpo y hacer las cosas un poco más interesantes.

60
00:03:59,130 --> 00:04:08,550
Volvamos a nuestro correo electrónico de edad y agreguemos un I. RE. a pine martin lo llamaremos adorable como la

61
00:04:08,550 --> 00:04:16,560
identificación y luego también podemos en nuestro mono aullador agregar un mono aullador A y solo irá a monkey

62
00:04:16,620 --> 00:04:20,430
com com y esto será simplemente monkey com com.

63
00:04:20,730 --> 00:04:28,640
Y si actualizamos si quiero seleccionar ese enlace, usaría el signo de dólar y podría hacer una etiqueta de anclaje y

64
00:04:29,130 --> 00:04:30,550
eso me lo dará.

65
00:04:30,600 --> 00:04:34,740
También podría decir la etiqueta de anclaje dentro de un aliado.

66
00:04:34,980 --> 00:04:40,040
También podría si realmente quisiera decir solo las etiquetas de anclaje dentro de aliados que son en lugar de una voluntad.

67
00:04:41,100 --> 00:04:43,990
Y en todos los casos, hasta ahora, esos son idénticos.

68
00:04:44,160 --> 00:04:51,270
Pero si agrego otra etiqueta de ancla justo en la parte inferior de la página, Google com com y yo actualizamos.

69
00:04:51,810 --> 00:04:55,290
Y ahora hago mi etiqueta de anclaje de signo de dólar.

70
00:04:55,290 --> 00:04:57,350
Obtengo ambas etiquetas de anclaje.

71
00:04:57,820 --> 00:05:05,370
Si hago un signo de dólar UL con un aliado con una etiqueta de anclaje, solo me da esta etiqueta de

72
00:05:05,370 --> 00:05:05,820
anclaje.

73
00:05:05,970 --> 00:05:13,660
O podrían haberlo acortado a esto aquí y allá vamos a seleccionar el elemento con la idea adorable que funciona

74
00:05:13,950 --> 00:05:19,700
como selección queery o todo o selector de consulta o C Ss para el caso

75
00:05:19,770 --> 00:05:27,890
en que necesito el símbolo Ártico o hash Plus el ID nombre adorable y eso me da la aliada de pino marta.

76
00:05:27,940 --> 00:05:32,250
Así que hemos visto cómo seleccionamos y no es muy emocionante solo imprimir cosas en la consola

77
00:05:32,250 --> 00:05:33,660
o simplemente verlas de vuelta aquí.

78
00:05:33,670 --> 00:05:38,530
a hacer que las cosas sean visuales y nos ayudará a modificar el estilo para que

79
00:05:38,520 --> 00:05:43,300
El método se llama Dotsie SS y la forma en que funciona es que escribimos un

80
00:05:43,300 --> 00:05:51,060
signo de dólar selector y un selector y luego podemos agregar Dotsie SS al final de eso y pasarlo en algunas propiedades y valores para cambiar.

81
00:05:51,060 --> 00:05:57,580
Pero lo que realmente quiero hacer es introducir un método, vamos a ver muchos más métodos en los próximos videos, pero voy

82
00:05:57,610 --> 00:06:00,440
a mostrar uno en este momento que nos ayudará

83
00:06:00,450 --> 00:06:07,150
Así que aquí hay un ejemplo. Estoy seleccionando algo con la idea de especial y luego estoy ejecutando CSSA en él

84
00:06:07,140 --> 00:06:11,220
y cambiando el borde para que sea de dos píxeles rojo sólido.

85
00:06:11,500 --> 00:06:13,190
Entonces permítanme demostrar eso.

86
00:06:13,300 --> 00:06:15,400
Hagámoslo a la H-1.

87
00:06:15,390 --> 00:06:21,390
Así que seleccioné el signo de dólar H-1 Dotsie SS Justo así.

88
00:06:21,610 --> 00:06:30,380
Y luego, en vez de aquí, cambiemos el color para que sea amarillo así.

89
00:06:30,630 --> 00:06:31,480
Y presiono enter.

90
00:06:31,600 --> 00:06:34,980
Y puedes ver que cambia a amarillo, lo cual es increíble.

91
00:06:35,310 --> 00:06:39,420
Por lo tanto, siempre es bueno tener en cuenta cómo harías esto sin j Querrey.

92
00:06:39,630 --> 00:06:49,270
Entonces haríamos algo así como un documento que obtenga y hagamos el selector de consulta de documentos H-1 dot y B no tenga ese

93
00:06:49,260 --> 00:06:54,840
C Ss. Así que tenemos que hacer un estilo de punto dot color equals.

94
00:06:54,940 --> 00:06:56,700
Y cambiemos a naranja.

95
00:06:57,690 --> 00:06:58,400
Y ahí vamos.

96
00:06:58,440 --> 00:07:04,110
aquí es mucho más poderosa y puede hacer mucho más de lo que podemos hacer con esta línea única aquí.

97
00:07:04,380 --> 00:07:06,300
Lo cambiamos a naranja, pero esta línea

98
00:07:06,550 --> 00:07:11,490
Así que supongamos que quería cambiar varios estilos sobre este H-1. Quería cambiar el color,

99
00:07:11,680 --> 00:07:14,100
el color de fondo y el borde.

100
00:07:14,110 --> 00:07:19,240
Lo que puedo hacer es definir mis estilos en un objeto y pasar un objeto.

101
00:07:19,480 --> 00:07:24,250
Por lo tanto, no tengo que hacer una cadena de Porter con el valor de Porter.

102
00:07:24,550 --> 00:07:29,920
Puedo definir un objeto con varias propiedades con múltiples pares de valores clave y pasarlo y

103
00:07:29,910 --> 00:07:31,070
todos serán aplicados.

104
00:07:31,360 --> 00:07:32,500
Así que hagámoslo ahora.

105
00:07:32,760 --> 00:07:37,080
Definamos nuestros estilos y no tenemos que hacer un objeto separado.

106
00:07:37,120 --> 00:07:38,250
Te mostraré eso.

107
00:07:38,350 --> 00:07:50,220
Y en lugar de aquí, dirá que el color debe ser de fondo rojo, debe ser de color rosa y lo que haremos es

108
00:07:50,230 --> 00:07:56,340
que el borde sea de dos píxeles de color púrpura sólido así.

109
00:07:56,740 --> 00:08:02,460
Y si pulsamos Enter, ahora tenemos nuestro objeto de estilos y, una vez más, se puede llamar cualquier cosa.

110
00:08:02,740 --> 00:08:05,060
Y luego lo que haremos es seleccionar el H-1.

111
00:08:05,310 --> 00:08:14,200
Entonces, el signo de dólar H-1 nuevamente nos agudiza y simplemente pasamos nuestro objeto de estilos y se aplican todos

112
00:08:14,190 --> 00:08:14,950
esos estilos.

113
00:08:15,190 --> 00:08:19,720
Entonces, hacer eso sin una consulta j requeriría que hiciéramos tres líneas separadas.

114
00:08:19,750 --> 00:08:26,830
Debería hacer un documento que permita que su estilo H-1 de color oscuro sea igual al rojo y luego el fondo del punto de estilo de

115
00:08:26,880 --> 00:08:32,400
punto sea igual al rosa y luego ese estilo ese borde sea igual a dos píxeles de color púrpura sólido.

116
00:08:32,710 --> 00:08:35,580
Con suerte, ya puedes ver eso con solo unas pocas líneas.

117
00:08:35,640 --> 00:08:38,240
J Query ya ha demostrado ser bastante poderoso.

118
00:08:38,520 --> 00:08:44,020
Y si bien podemos hacer todo sin él, definitivamente nos ahorrará tiempo y hará que nuestro código sea más limpio.

119
00:08:44,710 --> 00:08:51,330
característica del método dot CSSA que hace que sea aún más útil mostrar ahora que lo que podemos hacer es

120
00:08:51,340 --> 00:08:57,570
diseñar varios elementos a la vez en lugar de solo seleccionar el primero y hacerlo de color amarillo.

121
00:08:57,580 --> 00:08:58,160
Hay otra

122
00:08:58,260 --> 00:09:03,290
Podríamos seleccionar todos o todos los aliados y solo necesitamos una línea para hacer eso.

123
00:09:03,340 --> 00:09:04,110
Entonces te mostraré eso.

124
00:09:04,110 --> 00:09:06,430
Ahora vamos a hacer todas las mentiras.

125
00:09:06,970 --> 00:09:09,580
Entonces para hacer eso necesito seleccionar aliados.

126
00:09:09,730 --> 00:09:11,550
Así que solo así.

127
00:09:11,550 --> 00:09:12,650
Y si presiono enter.

128
00:09:12,780 --> 00:09:19,120
azul así y presionaré Enter y notará este la línea cambia los tres aliados.

129
00:09:19,120 --> 00:09:28,410
Verás que me da los tres aliados y luego tengo que encadenar C S y solo le daré un color de

130
00:09:28,410 --> 00:09:31,940
propiedad único y lo cambiaré para que sea

131
00:09:32,350 --> 00:09:34,610
Definitivamente muy poderoso.

132
00:09:34,650 --> 00:09:41,990
Todo lo que hacemos es seleccionar con nuestro selector de signo de dólar aliado y eso nos da tres aliados y al hacer

133
00:09:42,000 --> 00:09:46,030
Dotsie SS en una matriz aquí de ALWIS esta lista de aliados.

134
00:09:46,240 --> 00:09:51,310
En realidad, los hará todos azules y ni siquiera tenemos que pasarlos manualmente como lo haríamos

135
00:09:51,340 --> 00:09:52,320
sin una consulta.

136
00:09:52,360 --> 00:09:58,410
recordarle que si quiero cambiarlos todos para que sean ecológicos sin consulta, primero debo seleccionarlos todos.

137
00:09:58,480 --> 00:09:59,360
Entonces, para

138
00:09:59,500 --> 00:10:06,570
Entonces, var aliados es igual al documento que el selector de consulta pasa todo en la cadena aliada.

139
00:10:06,790 --> 00:10:08,390
Y luego necesito pasar.

140
00:10:08,520 --> 00:10:15,350
Entonces para var I es igual a cero es menor que Elvises a lo largo I plus plus.

141
00:10:16,260 --> 00:10:22,410
Y luego, dentro del ciclo, tenemos que hacer aliados. Yo estilo que ese color es

142
00:10:25,170 --> 00:10:30,100
igual y vamos a hacer verde así y vamos a presionar Enter.

143
00:10:30,390 --> 00:10:32,850
Y puedes ver que todos cambian a verde.

144
00:10:32,860 --> 00:10:36,800
Así que de nuevo es posible sin una consulta, pero es mucho más código.

145
00:10:36,900 --> 00:10:40,780
Necesitamos seleccionarlos todos primero e incluso solo seleccionarlos es doloroso.

146
00:10:40,770 --> 00:10:43,820
Esto es mucho más que solo un signo de dólar.

147
00:10:43,870 --> 00:10:49,060
Y luego también tenemos que realizar un bucle de forma manual con un bucle for o un

148
00:10:49,060 --> 00:10:53,450
bucle while y luego cambiar cada uno individualmente y luego hemos terminado con una consulta.

149
00:10:53,560 --> 00:11:01,030
Todo lo que tuvimos que hacer para volver a cambiar a azul es seleccionar todos los aliados Dotsie SS y luego pasar en nuestra

150
00:11:01,090 --> 00:11:02,900
propiedad, que es de color azul.

151
00:11:03,420 --> 00:11:05,260
Voy a demostrar algunos ejemplos más aquí.

152
00:11:05,430 --> 00:11:13,710
tamaño de su fuente sea más grande para que el tamaño de la fuente sea de 40 píxeles y ahí vamos.

153
00:11:13,710 --> 00:11:20,970
Vamos a seleccionar todas las etiquetas de anclaje como esta, una etiqueta que C Ss hará que el

154
00:11:20,980 --> 00:11:27,460
Obtenemos enlaces grandes También mostraré que podemos definir un objeto lleno de estilos como lo hicimos antes

155
00:11:27,450 --> 00:11:31,140
y podemos usarlo para diseñar múltiples elementos, no solo uno.

156
00:11:31,240 --> 00:11:39,120
Así que seleccionaremos todas las mentiras y las combinaremos y, en lugar de simplemente hacer las SS y

157
00:11:39,120 --> 00:11:44,890
pasar una cadena como el color, le daremos un objeto y lo definiremos aquí.

158
00:11:45,550 --> 00:11:47,920
Y agregaremos algo de espacio aquí para escribir.

159
00:11:48,420 --> 00:11:52,340
Y lo primero que haremos será cambiar el tamaño de fuente de todos ellos.

160
00:11:52,540 --> 00:12:00,300
el tamaño de la fuente es el tamaño de la fuente Dasch o la altura y el tamaño en javascript y en la consulta J tenemos que usar camel case.

161
00:12:00,310 --> 00:12:01,300
Así que NCSA como

162
00:12:01,480 --> 00:12:09,540
Así que el tamaño de la fuente no tiene espacio ni ningún guión, pero tenemos el miembro en mayúscula

163
00:12:09,820 --> 00:12:20,930
que es la caja de Kimbal y los haremos 10 y haremos 10 píxeles y luego agregaremos un borde y este será de tres píxeles violeta.

164
00:12:21,340 --> 00:12:23,610
Esos bordes discontinuos son siempre impresionantes.

165
00:12:23,980 --> 00:12:27,840
Y luego agregue el fondo de color de fondo.

166
00:12:28,140 --> 00:12:30,490
Y hagamos nuestra propia R. GRAMO. color.

167
00:12:30,660 --> 00:12:31,670
Entonces R. GRAMO. SEGUNDO.

168
00:12:31,710 --> 00:12:33,540
Y haremos nuestra G. PAG. A. actualmente.

169
00:12:33,690 --> 00:12:36,640
Y el primero también lo leerá.

170
00:12:37,070 --> 00:12:43,340
89 rojo 45 Verde 20 azul.

171
00:12:43,480 --> 00:12:49,490
Y luego 0. 5 Alpha, que es el canal de opacidad o transparencia.

172
00:12:49,620 --> 00:12:54,490
Y si presionamos enter, puede ver que todos se aplican a la vez.

173
00:12:54,630 --> 00:12:58,110
Así que nuestro tamaño de fuente se encoge Tenemos 10 píxeles.

174
00:12:58,260 --> 00:13:05,910
Tenemos estas impresionantes fronteras alrededor de los aliados que son de tres píxeles dasht violeta y luego tenemos el color de

175
00:13:05,910 --> 00:13:11,620
fondo, que es lo que sea que este color tenga el aspecto de una especie

176
00:13:11,620 --> 00:13:13,060
de color marrón claro.

177
00:13:13,090 --> 00:13:13,360
Todo bien.

178
00:13:13,360 --> 00:13:18,330
Así que con suerte puedes ver en esa demostración rápida dos cosas diferentes que estamos haciendo seleccionando

179
00:13:18,340 --> 00:13:22,070
con signo de dólar y eso por sí solo es increíblemente poderoso.

180
00:13:22,090 --> 00:13:26,390
Básicamente funciona como queery Slichter y el selector de queery todos combinados.

181
00:13:26,640 --> 00:13:29,620
Y es una sintaxis mucho más corta y fácil de escribir.

182
00:13:29,910 --> 00:13:36,270
Y luego está el método CSSA que también es extremadamente poderoso porque podemos cambiar las propiedades individuales como

183
00:13:36,270 --> 00:13:42,300
lo hicimos aquí, pero también podemos firmar las propiedades de CSSA como lo hicimos aquí donde pasamos

184
00:13:42,310 --> 00:13:45,040
un objeto lleno de pares clave de valores.

185
00:13:45,100 --> 00:13:51,270
Probablemente la parte más importante de todo esto es que cuando selecciono una colección como todos los aliados,

186
00:13:51,280 --> 00:13:57,550
como hice aquí, no tengo que pasar manualmente y aplicar algo de forma individual como lo hice aquí

187
00:13:57,550 --> 00:14:03,830
donde tuvimos que recorrer todo el aliados y cambiar el color uno a la vez con la consulta J.

188
00:14:03,930 --> 00:14:10,710
Si tengo una colección de elementos, automáticamente pasa por encima de eso y aplica la evaluación de

189
00:14:10,710 --> 00:14:12,990
Dotsie a cada uno de ellos.

190
00:14:12,990 --> 00:14:14,600
Entonces es extremadamente poderoso.

191
00:14:14,770 --> 00:14:19,770
Y es por eso que, como nota al margen, es por eso que siempre devuelve una matriz aquí.

192
00:14:19,890 --> 00:14:25,260
lo devuelve a la lista porque toda la lógica detrás de las escenas implica pasar por encima de esa lista.

193
00:14:25,270 --> 00:14:28,370
Incluso si solo tengo un elemento con el ID adorable, siempre

194
00:14:28,470 --> 00:14:31,860
Por lo tanto, pasará por alto esto y simplemente sucede que hay un elemento aquí.

195
00:14:31,890 --> 00:14:33,030
Por lo tanto, no es realmente un bucle.

196
00:14:33,040 --> 00:14:34,540
Simplemente pasa una vez.

197
00:14:34,890 --> 00:14:38,070
De acuerdo, afortunadamente, disfruté de eso y estoy empezando a ver el poder del caballo de batalla