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


Selectores de jQuery: Cómo seleccionar o controlar elementos del DOM

Extenso post para hablar de los selectores de jQuery que 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 selector en jQuery?

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 de jQuery CSS básicos

Vamos a comenzar con los más básicos y 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

Avanzamos en la materia y vamos a ver unos ejemplos algo más complicados, 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. Tenéis más info y ejemplos de los selectores hijo en el siguiente post:

Selectores de jQuery 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 jquery de posición

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

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

Otros selectores

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
Aviso de cookies