ASP.NET: Selección de elementos mediante jQuery

En jQuery se utiliza el signo de dólar ($) como acceso directo para encontrar elementos en una página web. El conjunto de elementos que son encontrados y devueltos se conocen como “matched set”. La sintaxis básica para el  método $ es la siguiente:

$('Selector Here’);

Entre las comillas (puedes usar comillas simples o dobles) se introducen uno o más selectores, que analizaremos más adelante. El método $ devuelve cero o más elementos que se pueden modificar utilizando uno de los muchos métodos de jQuery. Por ejemplo, para aplicar un poco de CSS a todos los elementos h2, se utiliza el método “css”:

$('h2').css('padding-bottom', '10px');

Esto aplica un padding de diez píxeles en la parte inferior de todos los elementos de tipo h2 de la página. La parte interesante de muchos de los métodos de jQuery es que, además de aplicar un cierto diseño o comportamiento al conjunto de elementos (o "matched set"), devuelven el "matched set" de nuevo. Esto permite realizar una concatenación de llamadas a métodos. Este concepto se denomina encadenamiento en el que se utiliza el resultado de un método como la entrada de otro, lo que permite crear una cadena de efectos. Por ejemplo, el siguiente código primero cambia el tamaño de fuente de todos los elementos h2 en la página y luego los desvanece durante cinco segundos hasta que son invisibles:

$('h2').css('font-size','40px').fadeOut(5000); // tiempo de espera en milisegundos

No es aconsejable el uso de las propiedades CSS en línea de esta manera. Es mucho mejor definir clases CSS y asignarlas a los elementos HTML. Esto se verá más adelante.

Selectores  Básicos

Los selectores jQuery permiten encontrar uno o más elementos en el DOM (Document Object Model) de una página para que se les pueda aplicar todo tipo de métodos jQuery. Lo bueno de los selectores jQuery es que probablemente ya sepas cómo funcionan. En lugar de inventar una nueva técnica para encontrar elementos de la página, los diseñadores de jQuery decidieron utilizar una sintaxis basada en selectores existente con la que ya estarás familiarizado: CSS. En jQuery se pueden utilizar exactamente los mismos selectores que en CSS.

Selector Universal

Al igual que su contraparte de CSS, el selector universal coincide con todos los elementos de la página. Por ejemplo, para establecer la propiedad "font-family" del atributo "style" para cada elemento de la página, se utiliza el siguiente código:

$('*').css('font-family','Arial');

Selector de Elementos

Este selector devuelve una referencia a cero o más elementos que coinciden con un nombre de etiqueta específico. Por ejemplo, el siguiente código cambia el color del texto de todos los elementos h2 a azul:

$('h2').css('color', 'blue');

Selector de ID

Este selector busca y recupera un elemento por su ID, lo mismo que se haría en CSS. Por ejemplo, para establecer la clase CSS para un botón llamado "Button1", se utilizaría el siguiente código:

$('#Button1').addClass('NewClassName');

Cuando el código anterior establece la clase CSS (utilizando el método "addClass"), se aplican las reglas CSS estándar. Eso significa que para que este código funcione y cambie el aspecto del botón, la clase "NewClassName" tiene que estar a disposición de la página, ya sea a través de un fichero CSS externo o mediante una hoja de estilos incrustada.

Sin embargo, en algunos casos se pueden encontrar ejemplos en los que se añade una clase CSS que no existe en un fichero CSS externo. Con esta técnica lo que se consigue es "etiquetar" los elementos para que se puedan seleccionar de nuevo más tarde mediante un selector de clase.

Selector de clase

El selector de clase devuelve una referencia a cero o más elementos que coinciden con un nombre de clase específico. Considera el siguiente fragmento HTML:

<h1 class="Highlight">Encabezado 1</h1>
<h2>Encabezado 2</h2>
<p class="Highlight">primer párrafo</p>
<p>segundo párrafo</p>

Observa cómo dos de los cuatro elementos tienen una clase CSS llamada "Highlight". El siguiente código jQuery cambia el color de fondo del primer título y el primer párrafo a rojo, dejando los otros elementos sin modificar:

$('.Highlight').css('background-color','red');

Selectores agrupados y combinados

Al igual que en CSS, se pueden agrupar y combinar selectores. El siguiente selector agrupado cambia el color del texto de todos los elementos h1 y h2 en una página:

$('h1,h2').css('color','orange');

Con un selector combinado, puedes encontrar elementos específicos que caen dentro de otros. Por ejemplo, la siguiente sentencia jQuery modifica sólo los párrafos que caen dentro del elemento MainContent, dejando todos los demás párrafos sin modificar:

$('#MainContent p').css('border','1px solid red');

Hasta aquí el post de selectores. En el próximo post veremos cómo funcionan  los filtros mediante un ejemplo práctico.

Fuente: Beginning ASP.NET 4: in C# and VB