Saltear al contenido principal

Curso de JavaScript (y jQuery)

5.4. Selección de nodos

Como ya hemos podido ver, una de las funciones principales de jQuery es proporcionarnos conjuntos de nodos de acuerdo con algún criterio de selección. Veremos a continuación las distintas formas que existen para indicar a jQuery qué nodos son los que queremos seleccionar para aplicarles alguna acción. No haremos una revisión exhaustiva, por lo que para ver la referencia completa de selectores redirigimos al lector a la dirección: http://api.jquery.com/category/selectors/.

5.4.1 Selección mediante sintaxis CSS

La sintaxis utilizada por jQuery para indicar el criterio coincide con la que se utiliza en CSS cuando se define una regla de estilo. Indicamos a continuación algunos ejemplos de selección por sintaxis CSS: –> Selecciona todos los elementos de tipo h3:

$( ‘h3’ )

–> Selecciona todos los elementos de tipo h3, p e img:

$(‘h3,p,img’)

–> Selecciona los elementos de tipo p que son el primer hermano de un elemento h1:

$(‘h1+p’)

–> Selecciona todos los elementos de tipo strong que sean descendientes (esto es: hijo, nieto, bisnieto, etc) de un elemento div:

$(‘div strong’)

–> Selecciona todos los elementos em que sean hijos de un elemento p:

$(‘p > em’)

–> Selecciona todos los elementos de clase “eng”:

$(‘.eng’)

–> Selecciona el elemento cuyo id es “uno”:

$(‘#uno’)

–> Selecciona todos los elementos:

$(‘*’)

–> Selecciona todos los elementos td que tienen un atributo colspan:

$(‘td[colspan]’)

–> Selecciona todos los elementos li que tengan un atributo llamado obligatorio con un valor que sea si:

$(‘li[obligatorio=”si”]’)

 

5.4.2 Selección mediante pseudo-selectores

Podemos restringir aún más el conjunto de nodos utilizando algunos pseudo-selectores, también al estilo de CSS, como por ejemplo los siguientes: → Selecciona todos los h1 que contengan, dentro de su texto, la secuencia de caracteres “ejemplo” (distinguiendo mayúsculas y minúsculas):

$(‘h1:contains(”ejemplo”)’)

Selecciona todos los elementos p vacíos:

$(‘p:empty’)

→ Selecciona los elementos del formulario que están habilitados (con :disabled seleccionaría los desabilitados):

$(‘input:enabled’)

→ Selecciona la imagen que ocupa la posición 3, que sería la cuarta, dado que comienza a contar en cero. También es posible usar :gt , :lt, :first y :last; esto es: mayor que, menor que, primero y último, respectivamente:

$(‘img:eq(3)’)

→ Selecciona todos los div que NO sean de la clase “numerado”:

$(‘div:not( ”.numerado” )’)

Como hemos indicado anteriormente, en http://api.jquery.com/category/selectors/ está la referencia completa con todos los selectores y pseudo-selectores disponibles.

5.4.3 Selectores transversales y selector this

jQuery incorpora un conjunto de métodos para modificar (aumentando o reduciendo) el conjunto de nodos devuelto por un selector previamente aplicado. Son los denominados selectores transversales, algunos de los cuales son muy similares a los pseudo-selectores vistos anteriormente. A continuación indicamos los selectores transversales que se utilizan con más frecuencia:

 

.add( selector )) añade al conjunto de nodos ya existente, los nuevos nodos que satisfacen el requisito del selector indicado

por ejemplo:

$( ‘table’ ).css( ‘border’, ‘1px solid blue’).add( ‘li’ ).css( ‘background-color’, ‘red’ );

La sentencia anterior definiría un borde azul para todas las tablas, y un color de fondo rojo para todas las tablas, pero también para todos los elementos li.

.children( [selector] )

Selecciona todos los hijos (se pueden filtrar opcionalmente con un selector) del conjunto de nodos sobre el que se aplica

Por ejemplo:

$(‘h3’).children( ‘strong’ ).css( ‘font-family’, ‘Arial’ );

Establecería la fuente a “Arial” de todos aquellos elementos strong hijos de un elemento h3.

.each( function( indice ) )
aplica una función a cada uno de los elementos del conjunto devuelto. Se puede saber el número de elemento mediante el parámetro índice

Por ejemplo:

$(‘input:text’).each( function( i ) { this.value=this.value.toUpperCase();})

Convertiría a mayúsculas todos los campos de tipo texto que hubiese en la página.

.first():
selecciona el primer nodo del conjunto; existen también los métodos last() (para seleccionar el último), y eq( posicion ) (para seleccionar el que está en una determinada posición)
.slice( inicio, final )
permite seleccionar los nodos que están entre las posiciones inicio a final, incluyendo el nodo que ocupa la posición de inicio, pero no la de la posición final. Si no es necesario, no tenemos que indicar el nodo final, con que se tomarán todos los nodos que haya desde el indicado en inicio.
.end()
es posiblemente uno de los más utilizados, dado que permite “deshacer” la última selección que hayamos aplicado

Por ejemplo:

$(‘p’).eq(2).css( ‘text-align’, ‘center’).end().first().css( ‘border’,’2px dashed blue’ );

En este caso, comenzaría por seleccionar todos los párrafos; posteriormente se quedaría sólo con el tercero ( eq(2) ) y le aplicaría alineación centrada; a continuación, vuelve al conjunto inicial de nodos ( end() ), de entre los cuales elegiría el primero ( first() ) al cual pondría un border azul.

.next()
añade al conjunto de nodos, el primer hermano de cada uno de dichos nodos. .nextAll() añade todos los hermanos; análogamente existen .prev() y .prevAll(), así como .siblings(), que selecciona todos los hermanos
parent()
selecciona los elementos padre de los nodos seleccionados
.filter( selector o función(índice) )
reduce el conjunto de elementos a aquellos que cumplen una determinada condición; la condición viene indicada bien mediante un selector, bien mediante una función que devuelve true (el elemento se queda en el conjunto) o false (el elemento sale del conjunto)
.find()
reemplaza el conjunto de nodos por los descendientes de los mismos; se puede indicar también un selector

Por ejemplo:

$(‘p’).css( ‘color’, ‘red’).find( ‘strong’ ).css( ‘color’, ‘blue’ );

Dicha sentencia establecería a rojo el texto de todos los párrafos, y a azul el texto de las etiquetas strong que sean descendientes de un párrafo.

Finalmente, un selector muy especial es $(this), especialmente útil cuando estamos definiendo manejadores de eventos dado que hace referencia al elemento que está sufriendo el evento.

5.4.4 Ejemplo de uso de selectores

Mostramos a continuación un ejemplo un poco más elaborado en que se hacen uso de algunos de los elementos anteriores. El lector queda avisado de que hay en jQuery formas más eficientes de conseguir el mismo efecto, pero nos hemos restringido al uso de la acción .css() que es la que única que hemos visto hasta ahora. Además, dada la gran variedad de selectores disponibles, es posible conseguir el mismo resultado utilizando otra secuencia de acciones a la aquí mostrada.

El ejemplo es muy simple: cada DIV de clase “pestaña” lleva dentro de él otro DIV que actúa a modo de “título” y además un par de párrafos. Todos los DIV aparecen en gris, dando la sensación de estar desactivados. Al pasar el ratón por el DIV de clase “titulo” se activa la pestaña que lo contiene; al salir el ratón, se vuelve a “desactivar”. Gráficamente el resultado es el mostrado en la siguiente figura:

ejemplo jQuery: resaltado de 'div' al pasar ratón
Volver arriba