Hace tiempo escribí un artículo hablando de rendimiento de jQuery y el uso de selectores dobles con jQuery, pero lo que no he hecho es explicar como funciona un selector de jQuery. La idea es que esto no sea «la guía definitiva de jQuery», ni nada por el estilo, sino un breve apunte para los lectores, la visión mas básica del uso de jQuery.
En este artículo voy a exponer como seleccionar de forma mas que simple utilizando un tag (etiqueta de html), una clase de css y un id. jQuery es un ente muy inteligente y por tanto, sabrá si lo que le estamos pidiendo es que convierta una etiqueta a jQuery o que la busque.
- Buscar por tag con jQuery: este junto con el de clase, son métodos de búsqueda de poco rendimiento y que pueden dar como resultado varios objetos (ya que un tag se puede repetir), se indicaría a jQuery el nombre del tag.
- Buscar por clase con jQuery: al igual que el anterior, es de bajo rendimiento y dará como resultado un array de objetos, ya que una clase se puede repetir.
- Buscar por id con jQuery: es el mas optimo y el que se ha de usar siempre que sea posible. Devolverá un único objeto ya que los id’s en teoría no se repiten.
Ahora vista un poco la teoría viene la practica. Lo primero es entender como se hace la llamada a jQuery, que tiene 2 formas, la original que es usando la función jQuery o la corta que es usando su alias a la función $. Veamos un ejemplo genérico de esto y luego uno por cada selector.
var selectorjQuery = jQuery("#mi_id_a_seleccionar");
var selectorAlias = $("#mi_id_a_seleccionar");
En el ejemplo anterior, el resultado sería el mismo, ya que es similar utilizar la función jQuery que la función $. Ahora veamos un ejemplo con los selectores, con un código en html y otro de código javascript.
<p> <a href="#">Mi link 1</a> <a href="#" class="enlace">Mi link 2</a> <a href="#" class="enlace" id="myLink">Mi link 3</a> </p>
Ahora vamos a hacer lo siguiente, con estos enlaces, vamos a poner el color del enlace en negro para todos los enlaces, rojo para los enlaces que tienen una clase enlace y azul para el id myLink
//ponemos todos los enlaces a negro
$("a").css("color", "#000");
//los enlaces con la clase .enlace los dejamos en rojo
$(".enlace").css("color", "#ff0000");
//el enlace con el id myLink lo ponemos azulado
$("#myLink").css("color", "#336699");
Como podemos observar, las etiquetas se indican con su nombre, las clases como si de css se tratase, con un punto delante, al igual que los ids, que al igual que css utilizan una almohadilla.
