Todo bien.
Dar una buena acogida.
Así que comencemos a escribir un código.
Y lo primero que vamos a aprender a hacer es cómo seleccionar elementos.
Así que al igual que con la relación dominante dominante o la fonología Sí, necesitamos seleccionar cosas y luego manipularlas.
Sé que estoy un poco roto, pero es un proceso realmente importante seleccionar y luego cambiar
las cosas.
video se centrará principalmente en seleccionar elementos con J Query para dos objetivos principales aquí.
Este
El primero es aprender a seleccionar elementos con la función de signo de dólar y luego también usar el
método de evaluación C para elementos de estilo.
Así que no solo estamos obteniendo cosas selectas, solo las imprimimos, pero para hacerlo más visual.
Las seleccionaremos y luego cambiaremos el color de fondo y la consulta de Jay, podremos seleccionar todo lo que queramos
usando solo una función.
El signo de dólar.
Así que a diferencia de vanilla J. S. los elementos get de un nombre de clase obtienen elementos por nombre de etiqueta.
donde tenemos el documento que obtiene el elemento mediante el selector de consulta del selector de consultas de id. todos
Hay tantas formas diferentes de seleccionar el signo de dólar y la consulta de Jay las reemplazará a todas.
Básicamente funciona como selector de consultas, todo eso le damos un selector de estilo C Ss.
Y luego, la consulta Jay devuelve todos los elementos coincidentes que coinciden con el selector que le damos.
Así que tengo un ejemplo aquí si queremos seleccionar todas las etiquetas de imagen en la
página, simplemente se ve así si quisiéramos seleccionar todos los elementos con clase de escala que hacemos escala de puntos.
Recuerde que esto se establece selectores de estilo.
hacer cosas más avanzadas como esta seleccionando todas las etiquetas de anclaje que están dentro de los elementos de la lista.
Entonces, para una identificación necesitamos el arco para Thorpe para una clase que necesita el punto y también podemos
Así que haré una demostración rápida aquí de cómo funciona esto.
Así que tenemos nuestro demo de Jake Querrey a su cargo en nuestra página donde tengo el Cdn incluido.
Y no importa si usamos la palabra N o si desea usar la copia descargada, funcionará de
la misma manera.
Entonces necesitamos esa secuencia de comandos aquí y luego necesitamos un poco de contenido para jugar.
Así que voy a mantener el H-1 S. J. demostración central
Cambiaré a estos aliados para que sean un poco más únicos, así que lo llenaré con algunos de mis animales favoritos.
Entonces el final es para Newt.
La parte favorita de mi canción de cinco años del alfabeto animal se agregará a otro de mis
álbumes favoritos, Monkey.
Y luego, por último, el pino Martin.
Y si nunca has visto la marta de pino, son animales igualmente adorables y terroríficos.
Entonces puedes ver bastante adorable aquí.
Pero si les echas un vistazo en acción, son depredadores locos y bastante atemorizantes.
DE ACUERDO.
Así que algunos de mis animales favoritos en la lista se guardarán y vamos a abrir esto ahora.
Asegúrate de que estamos en el directorio correcto.
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
consola para agrandar el tamaño de la fuente y vamos a utilizar una consulta para seleccionar algunas de estas cosas.
Así que recuerda que un signo de dólar es una función.
Y si solo escribo el signo de dólar sin los paréntesis.
Así es como yo escribiendo la alerta sin paréntesis o con. dot log sin los paréntesis realmente no
hace nada excepto dígame.
Sí, sé sobre ese código, pero en realidad no lo ejecuta.
Comencemos seleccionando el único H-1 en la página para hacer eso.
Podemos usar el signo de dólar y el selector s para seleccionar h solo es H-1 y presionamos enter.
Puedes ver que devuelve la demostración J queery H-1.
Entonces también note que está dentro de una lista.
Por lo tanto, a diferencia del selector de consultas, donde devuelve la primera instancia para el selector de signo de dólar.
Query devolverá una lista incluso si solo hay un elemento que es realmente útil y lo
veremos un poco.
Así que vamos a intentar seleccionar todos los aliados ahora para poder hacer algo así como aliados de Dollar Sign y
obtenemos tres aliados así.
También podemos seleccionar el cuerpo escribiendo cuerpo y hacer las cosas un poco más interesantes.
Volvamos a nuestro correo electrónico de edad y agreguemos un I. RE. a pine martin lo llamaremos adorable como la
identificación y luego también podemos en nuestro mono aullador agregar un mono aullador A y solo irá a monkey
com com y esto será simplemente monkey com com.
Y si actualizamos si quiero seleccionar ese enlace, usaría el signo de dólar y podría hacer una etiqueta de anclaje y
eso me lo dará.
También podría decir la etiqueta de anclaje dentro de un aliado.
También podría si realmente quisiera decir solo las etiquetas de anclaje dentro de aliados que son en lugar de una voluntad.
Y en todos los casos, hasta ahora, esos son idénticos.
Pero si agrego otra etiqueta de ancla justo en la parte inferior de la página, Google com com y yo actualizamos.
Y ahora hago mi etiqueta de anclaje de signo de dólar.
Obtengo ambas etiquetas de anclaje.
Si hago un signo de dólar UL con un aliado con una etiqueta de anclaje, solo me da esta etiqueta de
anclaje.
O podrían haberlo acortado a esto aquí y allá vamos a seleccionar el elemento con la idea adorable que funciona
como selección queery o todo o selector de consulta o C Ss para el caso
en que necesito el símbolo Ártico o hash Plus el ID nombre adorable y eso me da la aliada de pino marta.
Así que hemos visto cómo seleccionamos y no es muy emocionante solo imprimir cosas en la consola
o simplemente verlas de vuelta aquí.
a hacer que las cosas sean visuales y nos ayudará a modificar el estilo para que
El método se llama Dotsie SS y la forma en que funciona es que escribimos un
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.
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
a mostrar uno en este momento que nos ayudará
Así que aquí hay un ejemplo. Estoy seleccionando algo con la idea de especial y luego estoy ejecutando CSSA en él
y cambiando el borde para que sea de dos píxeles rojo sólido.
Entonces permítanme demostrar eso.
Hagámoslo a la H-1.
Así que seleccioné el signo de dólar H-1 Dotsie SS Justo así.
Y luego, en vez de aquí, cambiemos el color para que sea amarillo así.
Y presiono enter.
Y puedes ver que cambia a amarillo, lo cual es increíble.
Por lo tanto, siempre es bueno tener en cuenta cómo harías esto sin j Querrey.
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
C Ss. Así que tenemos que hacer un estilo de punto dot color equals.
Y cambiemos a naranja.
Y ahí vamos.
aquí es mucho más poderosa y puede hacer mucho más de lo que podemos hacer con esta línea única aquí.
Lo cambiamos a naranja, pero esta línea
Así que supongamos que quería cambiar varios estilos sobre este H-1. Quería cambiar el color,
el color de fondo y el borde.
Lo que puedo hacer es definir mis estilos en un objeto y pasar un objeto.
Por lo tanto, no tengo que hacer una cadena de Porter con el valor de Porter.
Puedo definir un objeto con varias propiedades con múltiples pares de valores clave y pasarlo y
todos serán aplicados.
Así que hagámoslo ahora.
Definamos nuestros estilos y no tenemos que hacer un objeto separado.
Te mostraré eso.
Y en lugar de aquí, dirá que el color debe ser de fondo rojo, debe ser de color rosa y lo que haremos es
que el borde sea de dos píxeles de color púrpura sólido así.
Y si pulsamos Enter, ahora tenemos nuestro objeto de estilos y, una vez más, se puede llamar cualquier cosa.
Y luego lo que haremos es seleccionar el H-1.
Entonces, el signo de dólar H-1 nuevamente nos agudiza y simplemente pasamos nuestro objeto de estilos y se aplican todos
esos estilos.
Entonces, hacer eso sin una consulta j requeriría que hiciéramos tres líneas separadas.
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
punto sea igual al rosa y luego ese estilo ese borde sea igual a dos píxeles de color púrpura sólido.
Con suerte, ya puedes ver eso con solo unas pocas líneas.
J Query ya ha demostrado ser bastante poderoso.
Y si bien podemos hacer todo sin él, definitivamente nos ahorrará tiempo y hará que nuestro código sea más limpio.
característica del método dot CSSA que hace que sea aún más útil mostrar ahora que lo que podemos hacer es
diseñar varios elementos a la vez en lugar de solo seleccionar el primero y hacerlo de color amarillo.
Hay otra
Podríamos seleccionar todos o todos los aliados y solo necesitamos una línea para hacer eso.
Entonces te mostraré eso.
Ahora vamos a hacer todas las mentiras.
Entonces para hacer eso necesito seleccionar aliados.
Así que solo así.
Y si presiono enter.
azul así y presionaré Enter y notará este la línea cambia los tres aliados.
Verás que me da los tres aliados y luego tengo que encadenar C S y solo le daré un color de
propiedad único y lo cambiaré para que sea
Definitivamente muy poderoso.
Todo lo que hacemos es seleccionar con nuestro selector de signo de dólar aliado y eso nos da tres aliados y al hacer
Dotsie SS en una matriz aquí de ALWIS esta lista de aliados.
En realidad, los hará todos azules y ni siquiera tenemos que pasarlos manualmente como lo haríamos
sin una consulta.
recordarle que si quiero cambiarlos todos para que sean ecológicos sin consulta, primero debo seleccionarlos todos.
Entonces, para
Entonces, var aliados es igual al documento que el selector de consulta pasa todo en la cadena aliada.
Y luego necesito pasar.
Entonces para var I es igual a cero es menor que Elvises a lo largo I plus plus.
Y luego, dentro del ciclo, tenemos que hacer aliados. Yo estilo que ese color es
igual y vamos a hacer verde así y vamos a presionar Enter.
Y puedes ver que todos cambian a verde.
Así que de nuevo es posible sin una consulta, pero es mucho más código.
Necesitamos seleccionarlos todos primero e incluso solo seleccionarlos es doloroso.
Esto es mucho más que solo un signo de dólar.
Y luego también tenemos que realizar un bucle de forma manual con un bucle for o un
bucle while y luego cambiar cada uno individualmente y luego hemos terminado con una consulta.
Todo lo que tuvimos que hacer para volver a cambiar a azul es seleccionar todos los aliados Dotsie SS y luego pasar en nuestra
propiedad, que es de color azul.
Voy a demostrar algunos ejemplos más aquí.
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.
Vamos a seleccionar todas las etiquetas de anclaje como esta, una etiqueta que C Ss hará que el
Obtenemos enlaces grandes También mostraré que podemos definir un objeto lleno de estilos como lo hicimos antes
y podemos usarlo para diseñar múltiples elementos, no solo uno.
Así que seleccionaremos todas las mentiras y las combinaremos y, en lugar de simplemente hacer las SS y
pasar una cadena como el color, le daremos un objeto y lo definiremos aquí.
Y agregaremos algo de espacio aquí para escribir.
Y lo primero que haremos será cambiar el tamaño de fuente de todos ellos.
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.
Así que NCSA como
Así que el tamaño de la fuente no tiene espacio ni ningún guión, pero tenemos el miembro en mayúscula
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.
Esos bordes discontinuos son siempre impresionantes.
Y luego agregue el fondo de color de fondo.
Y hagamos nuestra propia R. GRAMO. color.
Entonces R. GRAMO. SEGUNDO.
Y haremos nuestra G. PAG. A. actualmente.
Y el primero también lo leerá.
89 rojo 45 Verde 20 azul.
Y luego 0. 5 Alpha, que es el canal de opacidad o transparencia.
Y si presionamos enter, puede ver que todos se aplican a la vez.
Así que nuestro tamaño de fuente se encoge Tenemos 10 píxeles.
Tenemos estas impresionantes fronteras alrededor de los aliados que son de tres píxeles dasht violeta y luego tenemos el color de
fondo, que es lo que sea que este color tenga el aspecto de una especie
de color marrón claro.
Todo bien.
Así que con suerte puedes ver en esa demostración rápida dos cosas diferentes que estamos haciendo seleccionando
con signo de dólar y eso por sí solo es increíblemente poderoso.
Básicamente funciona como queery Slichter y el selector de queery todos combinados.
Y es una sintaxis mucho más corta y fácil de escribir.
Y luego está el método CSSA que también es extremadamente poderoso porque podemos cambiar las propiedades individuales como
lo hicimos aquí, pero también podemos firmar las propiedades de CSSA como lo hicimos aquí donde pasamos
un objeto lleno de pares clave de valores.
Probablemente la parte más importante de todo esto es que cuando selecciono una colección como todos los aliados,
como hice aquí, no tengo que pasar manualmente y aplicar algo de forma individual como lo hice aquí
donde tuvimos que recorrer todo el aliados y cambiar el color uno a la vez con la consulta J.
Si tengo una colección de elementos, automáticamente pasa por encima de eso y aplica la evaluación de
Dotsie a cada uno de ellos.
Entonces es extremadamente poderoso.
Y es por eso que, como nota al margen, es por eso que siempre devuelve una matriz aquí.
lo devuelve a la lista porque toda la lógica detrás de las escenas implica pasar por encima de esa lista.
Incluso si solo tengo un elemento con el ID adorable, siempre
Por lo tanto, pasará por alto esto y simplemente sucede que hay un elemento aquí.
Por lo tanto, no es realmente un bucle.
Simplemente pasa una vez.
De acuerdo, afortunadamente, disfruté de eso y estoy empezando a ver el poder del caballo de batalla