Elección de Selectores de JQuery
Elección de Selectores de JQuery
La elección de buenos selectores es un punto importante cuando se desea mejorar el rendimiento del código. Una pequeña especificidad — 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 especificidad 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 simplificaciones 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 etiquetas.
Si desea conocer más sobre este asunto, Paul Irish realizó una gran presentación sobre mejoras de rendimiento en JavaScript (en ingles), la cual posee varias diapositivas centradas en selectores.
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) { … }
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 significado 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 de modifica.
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 refinar 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
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
:file
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’
Utilizando pseudo-selectores en elementos de formularios
$(‘#myForm :input’); // obtiene todos los elementos inputs
// dentro del formulario #myForm
Trabajar con Selecciones
Una vez realizada la selección de los elementos, es posible utilizarlos en conjunto con diferentes métodos. éstos, generalmente, son de dos tipos: obtenedores (en inglés getters) y establecedores (en inglés setters). Los métodos obtenedores devuelven una propiedad del elemento seleccionado; mientras que los métodos establecedores fijan una propiedad a todos los elementos seleccionados.
Encadenamiento
Si en una selección se realiza una llamada a un método, y éste devuelve un objeto jQuery, es posible seguir un “encadenado” de métodos en el objeto.
Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros