Muy bien, así que es hora de que nuestro primer ejercicio de Jay queery funcione de
la manera en que este sea. Voy a darte un ejemplo de himnario envejecido para los divs; algunos tienen clases; algunos
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
de Jay sobre cómo hacerlo si desea utilizar un Cdn o si desea descargarlo.
Y luego hay cuatro desafíos rápidos que quiero que intentes usando Jay Querrey y, en particular,
el signo de dólar para seleccionar y Dot ver SS para darle estilo.
Entonces el primero.
Selecciona todos los divs y dales un fondo morado.
El siguiente es selecciona los divs con clase resaltada y los convierte en 200 píxeles de ancho.
El tercero es seleccionar el div con el tercero ID y darle un borde naranja hasta qué ancho
y qué estilo del borde.
Y luego, la bonificación es seleccionar solo el primer div y cambiar el color de fuente para que sea de color rosa.
Así que adelante dale una oportunidad.
Necesitarás publicar un video.
Crea un archivo HTML New Age.
y luego copie este código o escríbalo usted mismo y luego tendrá que resolver estos cuatro desafíos.
Incluya una consulta
Así que adelante publica un video.
Volveré en solo unos segundos con la
solución ya.
Avancemos y escriba una solución rápida a esto.
Como siempre, lo primero que debemos hacer es crear nuestro archivo de cada vez.
Entonces tengo un nuevo archivo.
título y luego continuaré y agregaré nuestro DML de inicio y yo Solo lo copiaré en lugar de tipearlo.
Lo llamé "ejercicio de html" y lo guardaré y luego agregaré mi repetición regular de h tim l y llamaremos
este ejercicio de consulta J en el
OK, entonces tenemos los cuatro elementos.
Ahora vamos y agreguemos a Jay Querrey.
Recuerde que tenemos dos formas de hacerlo, podemos incluirlo localmente o podemos vincularlo a un CDN.
Entonces mostraré ambos el primero.
Solo voy a copiar el archivo.
Así que tengo que modificar la versión aquí solo para comandar el comando c V.
Así que ahora lo tengo en el mismo directorio que mi ejercicio esa edad Simmo.
Y luego iré aquí y lo primero que quiero hacer es agregar un guión de secuencia de comandos y luego
voy a agregar fuente igual y luego tengo que asegurarme de que coincida con el que es Jay dash al
punto 1 . 4 hombres
Sí.
Así que Jay queery se apresura a señalar un punto para los hombres Punto.
Jesús guardaremos eso y lo abriremos en nuestro navegador y haremos nuestra pequeña prueba para ver si funciona.
Parece que encontró el archivo.
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
lo que obtenemos.
Y está funcionando.
Está seleccionando nuestros 4 divs.
También podemos incluir A-J consultas CDN.
Y yo solo google para eso.
Jay quercetin y luego elige nuestra versión.
Entonces no queremos 3. 0.
Estoy seguro de que funciona bien.
Pero esa es la versión más nueva y sigue siendo un alfa.
Entonces, probablemente haya algunos errores y algunos problemas.
Entonces, para apuntar un punto cuatro es la versión estable más reciente, copiaremos esta URL y luego agregaremos otra etiqueta de
script y los dejaré aquí y solo comentaré uno y restableceré la fuente igual a la
que está incorrecto.
Entonces cualquiera de los dos funciona, usaré el Cdn ya que ya te probé que
todos usamos el Cdn.
Ya probé que este funcionó solo por diversión.
Así que guardaremos y luego actualizaremos y comprobaremos si nuestro código aún funciona.
Sí, es encontrar signos de dólar sin problemas.
Está conectado a J Qwerty.
Un punto que me gustaría destacar es que incluimos J queery arriba en la cabeza y lo usamos
en nuestros scripts que escribimos en el cuerpo.
Y la razón por la que hacemos eso recuerda que las cosas se cargan en el orden en que están declaradas Entonces
queremos que la consulta de Arjay se cargue definitivamente antes de usarla en lugar de un script.
Entonces nuestro script que necesitamos definir es donde escribiremos nuestro código y lo llamaremos ejercicio.
J s.
Y luego tenemos que hacer ese ejercicio de archivos que J usamos y lo pondremos aquí en el mismo directorio y lo que podemos
hacer es una prueba muy simple para ver si está conectado tanto a nuestro archivo h tim como a
la consulta J si puede ver y utilizar el método de consulta J, haremos algo como esto.
Si J consulta else hará otra cosa así que si hay una consulta J alertaremos una consulta cargada, de
lo contrario las alertas lo sabremos y lo salvaremos.
Y si actualizamos ahora, obtenemos la consulta J cargada.
Entonces eso nos dice dos cosas.
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
Jay Querrey.
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é
recibimos un error que nos dice que la consulta J no está definida para que pueda ver la importancia del orden
en que ponemos las cosas en.
Por lo tanto, siempre queremos poner en nuestras bibliotecas que nuestro código depende de la parte superior de la cabeza, por lo
menos queremos ponerlos antes de nuestros scripts que los usan.
Volvamos a la tarea y lo primero que debemos hacer es incluir correctamente a Jay Querrey,
que ya hemos hecho.
A continuación, debemos seleccionar todos los divs y darles un fondo morado.
Por lo tanto, procederemos y seleccionaremos todos los divs mediante el uso del signo de dólar en lugar de las comillas.
Todo lo que tenemos que hacer es seleccionar div con CSSA.
Así que solo div punto C S S y los haremos purpúreos.
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.
Y si no recuerdas cómo hacemos púrpura con RGV, entonces necesitas jugar la R. GRAMO. un poco más
se convirtió
Así que ese es el primero que podemos guardar y verificar que eso funcionó de forma refrescante.
Y obtenemos cuatro fondos morados.
DE ACUERDO.
Entonces eso es eso
Eso es seleccionar todos los divs y darles un fondo morado.
Solo agregaré una pequeña nota aquí y la comentaré.
A continuación, queremos seleccionar los divs con clase igual a resaltar y hacerlos de 200 píxeles de ancho.
Entonces eso funcionará de manera muy similar, pero para seleccionar los divs con clase igual para resaltar lo que tenemos que hacer
es usar el signo de dólar nuevamente.
Y en lugar de div podemos usar punto highlight y luego hacer C Ss y eso será 200 picos.
Vale la pena señalar que esto selecciona técnicamente todo lo que tiene una clase de resaltado.
Si quiere que sea explícito y diga solo los divs que tienen la clase de resaltado podríamos tener
una etiqueta de anclaje o un párrafo que también tenga esa clase, escribiríamos este selector.
Y esto es C S que dice todos los divs con la clase de resaltado.
Pero en este caso hará la diferencia.
Así que 200 píxeles con actualización y puede ver estos dos div tienen la clase de resaltar el segundo y
el cuarto div y tienen un con 200 píxeles.
OK, el siguiente es seleccionar el div con la idea de tercero.
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
nuestro para Thorpe.
Y luego el nombre de la ID que ordenan las SS y depende de nosotros.
Todo lo que dije fue que el color es naranja.
hagamos un borde naranja sólido de dos píxeles y guardemos y actualicemos, y ahora tenemos ese borde naranja justo ahí.
Así que
Lo haré un poco más grande para que se vea mejor en el screencast.
Aquí vamos.
Y eso es alrededor de un tercer div que tiene la ID de la palabra.
Entonces, el último desafío que fue una bonificación es seleccionar solo el primer div y cambiar el color
de fuente a rosa de la manera que seleccionará el primer div usando un pseudo selector CSSA.
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
videos del selector de CSSA.
Y luego lo haremos rosado, es el color SS en color rosa, guardaremos y actualizaremos y podrás ver que
el color es rosado.
La otra opción que tenemos es que en realidad hay un atajo de consulta J integrado que es solo
Colan primero y que también funciona bien.
Una nota interesante es que el uso de dos puntos primero es en realidad un poco más lento que el primero de
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.
Entonces no es Cs nativo, es solo un poco más lento.
Entonces usaría primero de tipo.
OK, así que eso es todo por este ejercicio en los próximos videos.
Vamos a aprender sobre otras formas de manipular cosas en lugar de simplemente cambiar el SEUS nosotros