Qué es jquery y cómo seleccionar elementos del dom

jQuery es una librería JavaScript de código abierto, rápida, pequeña y con una gran cantidad de funciones para simplificar el desarrollo web. Una de sus características más importantes es su sistema de selectores, que permite encontrar y manipular elementos HTML del DOM (Document Object Model) de forma sencilla y eficiente.

Selectores jQuery: La base para la manipulación del DOM

Los selectores jQuery son la clave para interactuar con los elementos HTML. Permiten seleccionar elementos basándose en su nombre, ID, clases, tipos, atributos, valores de atributos y mucho más. Se basan en los selectores CSS existentes y, además, incluyen selectores propios.

Todos los selectores jQuery comienzan con el signo de dólar y paréntesis: $(). Dentro de los paréntesis se coloca el selector que define qué elementos se buscan.

Tipos de Selectores jQuery

Existen diversos tipos de selectores, cada uno con su propia sintaxis y funcionalidad:

• Selector de Elemento: Selecciona elementos basándose en su nombre de etiqueta. Por ejemplo, $("p") selecciona todos los elementos <p> de la página.
• Selector de ID (#id): Selecciona un elemento único mediante su atributo ID. Por ejemplo, $("#miElemento") selecciona el elemento con el ID "miElemento". Es importante recordar que un ID debe ser único en todo el documento HTML.
• Selector de Clase (.class): Selecciona todos los elementos que poseen una clase específica. Por ejemplo, $(".miClase") selecciona todos los elementos con la clase "miClase".
• Selector Universal (): Selecciona todos los elementos de la página. $("") selecciona todos los elementos.
• Selector de Atributos: Permite seleccionar elementos basándose en sus atributos. Existen varias formas de usarlos:
  • $[attribute] : Selecciona elementos que tienen el atributo especificado.
  • $[attribute=value] : Selecciona elementos que tienen el atributo con un valor específico.
  • $[attribute!=value] : Selecciona elementos que tienen el atributo con un valor diferente al especificado.
  • $[attribute^=value] : Selecciona elementos cuyo atributo comienza con el valor especificado.
  • $[attribute$=value] : Selecciona elementos cuyo atributo termina con el valor especificado.
  • $[attribute=value] : Selecciona elementos cuyo atributo contiene el valor especificado.
• Selector de Descendientes (espacio en blanco): Selecciona todos los descendientes de un elemento que coincidan con el selector. Por ejemplo, $("div p") selecciona todos los elementos <p> que son descendientes de un elemento <div>.
• Selector de Hijos (>): Selecciona todos los hijos directos de un elemento que coincidan con el selector. Por ejemplo, $("div > p") selecciona solo los elementos <p> que son hijos directos de un elemento <div>.
• Selector de Hermanos (+): Selecciona el siguiente hermano del elemento que coincida con el selector. Por ejemplo, $("p + ul") selecciona la lista desordenada (<ul>) que sigue inmediatamente después de un párrafo (<p>).
• Selector de Hermanos (~): Selecciona todos los hermanos siguientes del elemento que coincida con el selector. Por ejemplo, $("p ~ ul") selecciona todas las listas desordenadas (<ul>) que siguen a un párrafo (<p>).
• Combinaciones de Selectores: Es posible combinar los selectores anteriores para realizar selecciones más complejas. Por ejemplo, $("div.miClase p#miParrafo") selecciona el elemento <p> con el ID "miParrafo" que es descendiente de un elemento <div> con la clase "miClase".

Ejemplos de Selectores jQuery

Obtener todos los elementos por ID en jQuery

Para obtener un elemento por su ID en jQuery, se utiliza el selector $("#id"). Esto devuelve un objeto jQuery que representa el elemento con el ID especificado.

Ejemplo:

$("#miElemento").text("Nuevo texto"); // Cambia el texto del elemento

Si el elemento no existe, el selector devuelve un objeto jQuery vacío.

Número de Selectores jQuery

No existe un número fijo de selectores jQuery. La librería proporciona una gran variedad de selectores básicos, y la flexibilidad de su sintaxis permite crear combinaciones prácticamente ilimitadas para seleccionar elementos con gran precisión. Además de los selectores, jQuery ofrece métodos para manipular los conjuntos de elementos seleccionados, como add(), not(), find(), filter(), slice(), eq(), entre otros.

Función $() en jQuery

La función $()o jQuery()es la función principal de jQuery. Se utiliza para crear un objeto jQuery a partir de un selector o de un conjunto de elementos DOM. Además de seleccionar elementos, puede utilizarse para:

• Crear nuevos elementos: $("

  Nuevo párrafo

  ") crea un nuevo elemento <p>.

• Manipular el DOM: Proporciona métodos para añadir, eliminar, modificar o copiar nodos DOM.
• Gestionar eventos: Facilita la gestión de eventos en la página web.
• Realizar animaciones: Ofrece funciones para realizar animaciones en los elementos.
• Efectos: Permite aplicar efectos visuales a los elementos.

La función $()es el punto de partida para casi cualquier tarea en jQuery, proporcionando la funcionalidad de selección de elementos y un gran número de métodos para manipularlos y trabajar con ellos.

Conclusión

jQuery simplifica la manipulación del DOM gracias a sus potentes y versátiles selectores. Comprender cómo funcionan estos selectores es fundamental para cualquier desarrollador web que utilice jQuery. La combinación de selectores y métodos permite realizar tareas complejas de manera eficiente y con un código limpio y legible.

Si quieres conocer otros artículos parecidos a Qué es jquery y cómo seleccionar elementos del dom puedes visitar la categoría Libros y Librerías.