¿Qué es jQuery querySelector?
jQuery querySelector selecciona o busca un elemento DOM (modelo de objeto de documento) en un documento HTML. JQuery nos permite manipular los elementos HTML. Se utiliza para seleccionar uno o más elementos HTML basados en id, nombre, tipos, atributos, clase, valores de atributos, etc. Se basa en selectores CSS existentes.
Introducción a querySelector
El método querySelector () solo devuelve el primer elemento que coincide con un selector CSS seleccionado en el documento. Si se usa una ID en el documento más de una vez, devolverá el primer elemento coincidente.
Sintaxis de querySelector
A continuación se muestra la sintaxis de querySelector:
- querySelector (selectores CSS)
- Devuelve el primer elemento que coincide con los selectores especificados.
- Para devolver todos los elementos que coinciden, usamos el método querySelectorAll ().
- Los selectores CSS que pasamos deben ser de tipo cadena.
- Es obligatorio pasar los selectores CSS.
- La cadena que estamos pasando debe ser un selector CSS válido.
- Si la cadena pasada no es válida, se genera una SYNTAX_ERRexception.
- Si no se encuentra ninguna coincidencia, devolverá nulo.
- La coincidencia del primer elemento se realiza utilizando un recorrido transversal de primer orden de profundidad del documento.
- Especifica uno o más selectores CSS para que coincida con el elemento.
- Para selectores múltiples, separe con una coma.
- Los caracteres que no forman parte de la sintaxis CSS estándar deben escapar utilizando un carácter de barra diagonal inversa.
Ejemplos para el método querySelector ()
A continuación se muestran los ejemplos de métodos querySelector ():
En jQuery, puede seleccionar elementos en una página usando muchas propiedades diferentes del elemento que son Tipo, Clase, ID, Posesión de atributo, Valores de atributo, etc. A continuación se muestra el ejemplo de Jquery usando type.
Ejemplo # 1 - Selección por tipo
1. El siguiente selector de consultas contiene dos <a>
Explicación del código anterior: en este ejemplo, podemos observar que hemos usado dos etiquetas de anclaje y dentro de la etiqueta de anclaje hemos pasado el hipervínculo de dos imágenes. Mediante el uso de querySelector ("a"). Style.backgroundColor = "red"; hemos pasado la etiqueta de anclaje ("a") al querySelector. En el método querySelector (), si pasamos los selectores múltiples, devolverá el primer elemento que coincida con los selectores especificados. Aunque contiene dos etiquetas de anclaje, la primera etiqueta de anclaje que se encuentra, aplicó su style.backgroundColor = "red"; solo para la primera etiqueta de anclaje.
Salida 1: Antes de hacer clic en el botón ("Haga clic en mí").
Salida 2: después de hacer clic en el botón ("Hacer clic"), el color de fondo de la flor cambia a "rojo".
Salida 3: Al hacer clic en los hipervínculos, se abrirán las imágenes respectivas.
2. Este querySelector también contiene dos, pero en el siguiente ejemplo he cambiado la secuencia de la imagen. He mantenido el hipervínculo del desierto primero y luego el hipervínculo de la flor en segundo lugar.
Explicación del código anterior: en este ejemplo también podemos observar que hemos usado dos etiquetas de anclaje y dentro de la etiqueta de anclaje hemos pasado el hipervínculo de dos imágenes. Mediante el uso de querySelector ("a"). Style.backgroundColor = "red"; hemos pasado la etiqueta de anclaje ("a") al selector de consultas. Esta vez en querySelector () encontrará primero el hipervínculo "Desierto" a medida que cambiamos la secuencia. Aunque contiene dos etiquetas de anclaje, la primera etiqueta de anclaje que se encuentra, aplicó su style.backgroundColor = "red"; solo para la primera etiqueta de anclaje.
Salida 1: En la salida, podemos observar que la primera imagen es Desierto. Entonces, debido al método querySelector (), el color de fondo de Desert cambió a rojo.
Salida 2: Al hacer clic en el hipervínculo, se abrirá la imagen del desierto.
Salida 3: Al hacer clic en el hipervínculo de la flor, se abrirá la imagen de la flor.
Ejemplo # 2 - Seleccionando por clase
En el siguiente ejemplo estamos seleccionando usando el nombre de la clase.
Explicación del código anterior: en el ejemplo anterior, estamos usando el nombre de la clase y aquí el nombre de la clase es Selector. Se pasa el mismo nombre de clase tanto para h2 (etiqueta de encabezado) como para la etiqueta de párrafo. Para el método querySelector () estamos pasando el nombre de la clase, verificará el nombre de la clase en particular en el programa. Ahora ha encontrado esas etiquetas que tienen el mismo nombre de clase que se menciona. Al utilizar el recorrido de preorden del documento de profundidad primero, se realiza la coincidencia del primer elemento. El primer elemento en el ejemplo que contiene el nombre de la clase como Selector es h2 (etiqueta de encabezado). El método querySelector () obtiene la etiqueta h2 y por style.backgroundColor aplica el color de fondo particular a la etiqueta h2.
Salida 1: antes de hacer clic en el botón ("haga clic en mí"), el contenido de la etiqueta h2 no cambia el color de fondo a azul.
Salida 2: después de hacer clic en el botón ("haga clic en mí"), el contenido de la etiqueta h2 cambia su color de fondo a azul.
Ejemplo # 3 - Selección por ID
En el siguiente ejemplo estamos seleccionando usando id.
Explicación del código anterior: en el ejemplo, estamos seleccionando usando id, la identificación aquí es Selector. Para el método querySelector () estamos pasando la identificación que verificará para el nombre de identificación particular en el programa. Ahora ha encontrado la etiqueta que tiene el mismo nombre de identificación mencionado. Al utilizar el recorrido de preorden del documento de profundidad primero, se realiza la coincidencia del primer elemento. El elemento en el ejemplo que contiene el nombre de identificación como Selector es la etiqueta de párrafo. El método querySelector () obtiene la etiqueta de párrafo y aplica los cambios particulares al contenido de acuerdo con el código mencionado.
Salida 1: Antes de hacer clic en el botón "haga clic en mí", el contenido de la etiqueta del párrafo será "Este es un elemento ap con id =" selector ".
Resultado 2: después de hacer clic en el botón "haga clic en mí", el contenido de la etiqueta del párrafo cambiará a "Cambiar en el texto".
Usos de jQuery querySelector
A continuación se muestran los dos puntos que explican los usos de querySelector:
- Los códigos de jQuery son más precisos, más cortos y más simples que los códigos JavaScript estándar. Puede realizar una variedad de funciones.
- La llamada a querySelector () devuelve el primer elemento, ya que está eligiendo uno, por lo que es más rápido y más corto de escribir.
Artículos recomendados
Esta es una guía para jQuery querySelector. Aquí discutimos qué es jQuery querySelector, introducción a querySelector, sintaxis y el ejemplo de Jquery usando type. También puede consultar nuestros otros artículos relacionados para obtener más información:
- jQuery Events
- Usos de JQuery
- Métodos jQuery
- ¿Cómo instalar Jquery?
- Eventos HTML
- Los 5 principales atributos de eventos HTML con ejemplos
- Lanzamiento vs Lanzamientos | Las 5 principales diferencias que debes saber
- Guía de ejemplos de la barra de progreso de JQuery