Tropiezo 1 - Selección de elementos

(Parto con tropiezo 1 porque paso es mucho decir)

Por motivos laborales me he visto en la obligación de investigar jQuery.

Debo decir que los primeros dos dias fueron frustrantes y pesados. Estando acostumbrado a trabajar en c# en codebehind esta tecnología(jQuery)  se me hizo críptica, inhóspita y demasiado extensa como para abordarla hasta que afortunadamente di con el libro Learning Jquery 1.3 publicado por la gente del sitio http://www.learningjquery.com/ .

Me ha ayudado bastante para comprender la filosofia y modo de trabajo de jQuery, acá publicaré los apuntes que voy sacando de este material esperando ayudar a rellenar los vacíos que pueden quedar cuando uno comienza a buscar documentación a tientas en internet.

Entrando en materia

 Asumiendo que ya se descargaron jquery y lo tienen disponible para usar y que lo han referenciado y que saben como es un css lo básico es que podemos seleccionar cualquier elemento del DOM con la sintaxis

$(algo) , donde algo puede ser un tag, un id o una clase

Selección jerárquica

$(elementopadre > elementohijo)

selecciona todos los hijos del elemento padre.

Ejemplo:

$(‘#selected-plays > li’).addClass(‘horizontal’);

Añade la clase horizontal a todos los elementos li encontrados en los elementos de clase selected-plays.

 Filtrando la selección

$(‘#selected-plays li:not(.horizontal)’).addClass(‘subLevel’);

Este otro ejemplo selecciona aquellos li contenidos en selected-plays que no tienen la clase horizontal y les agrega la clase sublevel.

Selección por atributo

Es posible seleccionar elementos por un atributo HTML, para ello se indica el atributo en paréntesis cuadrados. Por ejemplo, para seleccionar todos los elementos img de una página que tienen definido un alt se puede hacer del modo siguiente:

$(‘img[alt]’)

Comodines

Es posible filtrar lo buscado con comodines, usando los siguientes símbolos:

^: Texto al inicio

$: Texto al final

*: Texto en cualquier parte

Esto se puede combinar con los métodos de selección vistos previamente, por ejemplo:

$(‘a[href^=mailto]’) selecciona todos los elementos que tienen href y este en su comienzo dice mailto

$(‘a[href$=.pdf]’) selecciona todos los elementos que tienen href y este al final dice .pdf

Además, estos pueden combinarse y aplicarse sucesivamente, por ejemplo:

$(‘a[href^=http][href*=henry]’) selecciona todos los elementos que tienen href y este empieza con http y en alguna parte del texto restante en href dice henry

 

Alternar css entre tr’s de una tabla

En el html definimos la siguiente tabla

As You Like It	Comedy
All's Well that Ends Well	Comedy	1601
Hamlet	Tragedy	1604
Macbeth	Tragedy	1606
Romeo and Juliet	Tragedy	1595
Henry IV, Part I	History	1596
Henry V	History	1599

En un css se agregan estas clases

tr {

background-color: #fff;

}

.alt {

background-color: #ccc;

}

Luego en un script lo siguiente

$(document).ready(function() {

$('tr:odd').addClass('alt');

});

Al colocar odd en el selector de tr se están tomando solo las filas pares dentro de una tabla y aplica a estas la clase .alt

El resultado sería este;

El único problema que presenta este método es que no distingue los tr’s entre tablas, por tanto, el primer tr de la siguiente tabla tendría un fondo gris. Para evitar esto se modifica el filtro de la siguiente forma:

$(document).ready(function() {

$('tr:nth-child(even)').addClass('alt');

});

Luego, podríamos necesitar destacar algo dentro de esta tabla. Agregamos, por ejemplo,  al css la siguiente clase

.highlight {font-weight:bold; font-style: italics;}

Luego modificamos nuevamente nuestro selector de la siguiente forma:

$(document).ready(function() {

$('tr:nth-child(even)').addClass('alt');

$('td:contains(Henry)').addClass('highlight');

});

El código anterior hace lo siguiente:

1.       Aplica la clase tr del css a todos los tr

2.       A los tr impares asocia la clase alt del css

3.       A aquellos td que contienen el texto Henry, asocia la clase highlight del css

Así como se puede evaluar la paridad o imparidad de la numeración de elementos con even y odd, es posible evaluar la igualdad con eq

El resultado sería este:

Si en lugar de destacar la columna del título para aquellos tr que tienen un td con el texto Henry, quisiéramos destacar  la segunda columna, podríamos usar el siguiente comando:

$(document).ready(function() {

$('td:contains(Henry)').next().addClass('highlight');

});

.next() le indica que debe seleccionar el siguiente elemento del mismo tipo y en este caso a este aplicar la clase highlight.

Así el resultado es el siguiente:

Así como tenemos .next(),  existen otros selectores para elementos del mismo tipo, son estos:

.next()                 : El elemento del mismo tipo a este nivel siguiente a este.

.nextAll()            : Todos los elementos del mismo tipo a este nivel siguientes a este.

.prev()                  : El elemento del mismo tipo a este nivel previo a este.

.prevAll()            : Todos los elementos del mismo tipo a este nivel previos a este

.siblings()           : Todos los elementos del mismo tipo a este nivel

.andSelf()           : El elemento en si

.parent()             : El elemento que contiene al elemento actual

.children()          : los elementos contenidos en el elemento actual

Selectores FORM

Cuando se trabaja con forms es posible acceder a sus elementos con esta sintaxis

$(‘:elementoForm’), donde :elementoForm puede ser un :text, :checkbox o cualquiera de los descritos en la siguiente imagen: 

Combinando estos selectores podemos, por ejemplo, hacer lo siguiente:

$(':radio:checked')

Esto es, seleccionar los elementos form de tipo radio que están checkeados.

Acceder a una propiedad de un elemento del dom

var myTag = $('#my-element')[0].tagName;

En este caso, en myTag estamos almacenando el tagName de $('#my-element')[0]

Con [0] estamos seleccionando el primer elemento de la colección $('#my-element'), si hemos entregado un nombre univoco entonces siempre nuestra colección será de cardinalidad no mayor a 1, por tanto no existiría un $('#my-element')[n] con n>0