JQUERY: SELECCION DE ELEMENTOS

1. Conceptos Básicos de jQuery

1.1. $(document).ready()

Para poder interactuar con el contenido de una página de manera segura, el documento debe estar preparado para su manipulación. jQuery permite detectar dicho estado a través de la declaración $(document).ready() de forma tal que el bloque se ejecutará sólo una vez que la página este disponible.

    $(document).ready(function () {
        console.log('el documento está preparado');
    });

Existe una forma abreviada para $(document).ready() la cual podrá encontrar algunas veces; sin embargo, es recomendable no utilizarla en caso que este escribiendo código para gente que no conoce jQuery.

    $(function () {
        console.log('el documento esta preparado');
    });

Además es posible pasarle a $(document).ready() una función nombrada en lugar de una anónima:

    function readyFn(){
        //código a ejecutar cuando el documento este listo
    };
    $(document).ready(readyFn);

1.2. Selección de Elementos

El concepto más básico de jQuery es el de “seleccionar algunos elementos y realizar acciones con ellos”. La biblioteca soporta gran parte de los selectores CSS3 y varios más no estandarizados. A continuación se muestran algunas técnicas comunes para la selección de elementos:

Selección de elementos en base a su ID

    
    $('#myId'); // notar que los IDs deben ser únicos por página

Selección de elementos en base al nombre de clase

    
    $('div.myClass'); // si se especifica el tipo de elemento,
                      // se mejora el rendimiento de la selección

Selección de elementos por su atributo

    
    $('input[name=first_name]'); // tenga cuidado, que puede ser muy lento

Selección de elementos en forma de selector CSS

    
    $('#contents ul.people li');

Pseudo-selectores

    
    $('a.external:first'); // selecciona el primer elemento 'a'
                           // con la clase 'external'
    $('tr:odd'); // selecciona todos los elementos 'tr'
                 // impares de una tabla
    $('#myForm :input'); // selecciona todos los elementos del tipo 'input'
                         // dentro del formulario '#myForm'
    $('div:visible'); // selecciona todos los divs visibles
    $('div:gt(2)'); // selecciona todos los divs excepto los tres primeros
    $('div:animated'); // selecciona todos los divs actualmente animados

Nota: Cuando se utilizan los pseudo-selectores :visible y :hidden, jQuery comprueba la visibilidad actual del elemento pero no si éste posee asignados los estilos CSS visibility o display — en otras palabras, veriﬁca si el alto y ancho físico del elemento es mayor a cero. Sin embargo, esta comprobación no funciona con los elementos ; en este caso, jQuery comprueba si se está aplicando el estilo display y va a considerar al elemento como oculto si posee asignado el valor none. Además, los elementos que aún no fueron añadidos al DOM serán tratados como ocultos, incluso si tienen aplicados estilos indicando que deben ser visibles (En la sección Manipulación de este manual, se explica como crear y añadir elementos al DOM).

Elección de Selectores

La elección de buenos selectores es un punto importante cuando se desea mejorar el rendimiento del código. Una pequeña especiﬁcidad — por ejemplo, incluir el tipo de elemento (como div) cuando se realiza una selección por el nombre de clase — puede ayudar bastante. Por eso, es recomendable darle algunas “pistas” a jQuery sobre en que lugar del documento puede encontrar lo que desea seleccionar. Por otro lado, demasiada especiﬁcidad puede ser perjudicial. Un selector como #miTabla thead tr th.especial es un exceso, lo mejor sería utilizar #miTabla th.especial. jQuery ofrece muchos selectores basados en atributos, que permiten realizar selecciones basadas en el contenido de los atributos utilizando simpliﬁcaciones de expresiones regulares.

    
    // encontrar todos los 'a' cuyo atributo rel terminan en "thinger"
    $("a[rel$='thinger']");

Estos tipos de selectores pueden resultar útiles pero también ser muy lentos. Cuando sea posible, es recomendable realizar la selección utilizando IDs, nombres de clases y nombres de etiqueta.

1.2.1. Comprobar Selecciones

Una vez realizada la selección de los elementos, querrá conocer si dicha selección entregó algún resultado. Para ello, pueda que escriba algo así:

    
    if ($('div.foo')) { ... }

Sin embargo esta forma no funcionará. Cuando se realiza una selección utilizando $(), siempre es devuelto un objeto, y si se lo evalúa, éste siempre devolverá true. Incluso si la selección no contiene ningún elemento, el código dentro del bloque if se ejecutará. En lugar de utilizar el código mostrado, lo que se debe hacer es preguntar por la cantidad de elementos que posee la selección que se ejecutó. Esto es posible realizarlo utilizando la propiedad JavaScript length. Si la respuesta es 0, la condición evaluará falso, caso contrario (más de 0 elementos), la condición será verdadera.
Evaluar si una selección posee elementos

    
    if ($('div.foo').length) { ... }

1.2.2. Guardar Selecciones

Cada vez que se hace una selección, una gran cantidad de código es ejecutado. jQuery no guarda el resultado por si solo, por lo tanto, si va a realizar una selección que luego se hará de nuevo, deberá salvar la selección en una variable. Guardar selecciones en una variable

    
    var $divs = $('div');

Nota: En el ejemplo “Guardar selecciones en una variable”, la variable comienza con el signo de dólar. Contrariamente a otros lenguajes de programación, en JavaScript este signo no posee ningún signiﬁcado especial — es solamente otro carácter. Sin embargo aquí se utilizará para indicar que dicha variable posee un objeto jQuery. Esta práctica — una especie de Notación Húngara — es solo una convención y no es obligatoria.

Una vez que la selección es guardada en la variable, se la puede utilizar en conjunto con los métodos de jQuery y el resultado será igual que utilizando la selección original.

Nota: La selección obtiene sólo los elementos que están en la página cuando se realizó dicha acción. Si luego se añaden elementos al documento, será necesario repetir la selección o añadir los elementos nuevos a la selección guardada en la variable. En otras palabras, las selecciones guardadas no se actualizan “mágicamente” cuando el DOM se modiﬁca.

1.2.3. Refinamiento y Filtrado de Selecciones

A veces, puede obtener una selección que contiene más de lo que necesita; en este caso, es necesario reﬁnar dicha selección. jQuery ofrece varios métodos para poder obtener exactamente lo que desea.
Refinamiento de Selecciones

    
    $('div.foo').has('p'); // el elemento div.foo contiene elementos "p"
    $('h1').not('.bar'); // el elemento h1 no posse la clase 'bar'
    $('ul li').filter('.current'); // un item de una lista desordenada que posse la clase 'current'
    $('ul li').first(); // el primer item de una lista desordenada
    $('ul li').eq(5); // el sexto item de una lista desordenada

1.2.4. Selección de Elementos de un Formulario

jQuery ofrece varios pseudo-selectores que ayudan a encontrar elementos dentro de los formularios, éstos son especialmente útiles ya que dependiendo de los estados de cada elemento o su tipo, puede ser difícil distinguirlos utilizando selectores CSS estándar.

:button    --> Selecciona elementos button y con el atributo type='button'
:checkbox  --> Selecciona elementos input con el atributo type='checkbox'
:checked   --> Selecciona elementos input del tipo checkbox seleccionados
:disabled  --> Selecciona elementos del formulario que están deshabitados
:enabled   --> Selecciona elementos del formulario que están habilitados
:ﬁle       --> Selecciona elementos input con el atributo type='file'
:image     --> Selecciona elementos input con el atributo type='image'
:input     --> Selecciona elementos input, textarea y select
:password  --> Selecciona elementos input con el atributo type='password'
:radio     --> Selecciona elementos input con el atributo type='radio'
:reset     --> Selecciona elementos input con el atributo type='reset'
:selected  --> Selecciona elementos options que están seleccionados
:submit    --> Selecciona elementos input con el atributo type='submit'
:text      --> Selecciona elementos input con el atributo type='text'


//Ejemplo Utilizando pseudo-selectores en elementos de formularios

$('#myForm :input'); // obtiene todos los elementos inputs
                     // dentro del formulario #myForm