Programación y ejemplos de PHP, jQuery, HTML5, WordPress, MySQL y htaccess


jQuery selectors: Cómo seleccionar o controlar elementos del DOM

Extenso post para hablar de los selectores, estos jQuery selectors nos ayudan a interactuar con los diferentes elementos que podamos tener en una página web.

Unos post que os pueden interesar son:

¿Qué es un jQuery Selector?

Los selectores de jQuery nos ayudan a seleccionar los diferentes elementos del DOM, bien sea por su nombre, tipo, valores o propiedades de los atributos. Por ejemplo son muy útiles para combinar con la función each() al recorrer elementos de un mismo tipo.

Comencemos a ver los diferentes selectores extraídos de su web oficial.

Selectores CSS básicos de jQuery

Vamos a comenzar con los jQuery selectors más básicos y más utilizados, estos son los que intereactuan con ids, clases y etiquetas tal y como se hace en las hojas de estilo CSS.

Con el “.” seleccionamos una clase, con el “#” seleccionamos un id y con el tag de la etiqueta una etiqueta:

Tal y cómo veis en el código superior podemos seleccionar elementos/etiquetas y elementos con determinados ids o clases.

Unos ejemplos prácticos y sencillos serían los siguientes:

Selectores de contenedores e hijos en jQuery

Avanzamos con los jQuery selectors y vamos a ver unos ejemplos algo más complicados, ahora vamos a ver cómo trabajar con selectores hijo y contenedores:

En este ejemplo controlamos los enlaces (etiqueta “a”) que están dentro de un párrafo (etiqueta “p”). Es decir, que los enlaces (elemento ‘a’) sean hijos directos de ‘p’. Si hubiese otro elemento/etiqueta como un “div” o “span” que contiene al elemento ‘a’ no se controlaría.

En este otro ejemplo estaríamos controlando los enlaces que están dentro de un párrafo que a su vez están en un elemento ‘li’ de una lista con clase = “miclase”.

En el código superior controlamos los enlaces (elemento ‘a’) que son precedidos inmediatamente por el elemento ‘div’, es decir que ‘a’ debe ir justo después de ‘div’ sin que ningún otro elemento se interponga entre ellos.

Con el código anterior seleccionamos los enlaces (elemento ‘a’) prececidos por cualquier hermano suyo en un ‘div’.

Ahora estaríamos seleccionando cualquier elemento del DOM.

jQuery selectors de atributos

Veamos cómo podemos seleccionar elementos mediante las propiedades de sus atributos. Comencemos controlando el tipo de atributo:

A continuación os dejo unos ejemplos para comprobar los atributos y sus valores:

Selectores de posición en jQuery

Ya hemos visto anteriormente cómo controlar los elementos hijo, ahora os pongo 4 sencillos ejemplos para controlar la posición de elementos dentro del DOM:

Ahora vamos a ver unos ejemplos más interesantes para realizar más controles sobre posición, tipo…:

Otros controles sobre posición dentro de un elemento padre:

Selectores para inputs en jQuery

Vamos a ver varios ejemplos para controlar mediante los jQuery selectors los diferentes inputs que podemos tener en una web:

Otros selectores en jQuery

Solo nos quedan por repasar los siguientes selectores:

comments powered by Disqus

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR