Aprendiendo: Selectores de jQuery - 2

By clcanela, 6 June, 2013
Título en forma de selector

Ya estoy de vuelta con la prometida segunda parte de éste Aprendiendo, en la primera parte comenzamos a ver un poco el formato que utiliza jQuery para delimitar los elementos que se van a elegir, pero vamos a dar una pequeña repasada a lo que planteamos en la entrega anterior.

Los selectores de jQuery nos sirven para poder, como el nombre lo indica, seleccionar un elemento o un conjunto de elementos que coincidan con un filtro específico, éstos filtros son muy similares a los que se utilizan en CSS, por lo que las convenciones utilizadas para clases y ID's en las hojas de estilo, aplican exáctamente de la misma forma en jQuery. Con lo anterior, es posible percatarse que jQuery utiliza los mismos formatos que en CSS, pero además, ha implementado algunas otras convenciones con el fin de poder hacer más específica una selección de elementos, dandonos una flexibilidad que va de lo general a lo específico.

Pasemos ahora a selectores un poco más complejos, en la entrega pasada vimos que es posible seleccionar elementos por su etiqueta (llamese divap, form, h1, h2, span, etc.), por su clase (antecedido por un '.' punto) y por su ID (antecedido por un '#' numeral o gato). Ahora vamos a ver algunos otros selectores que también están disponibles en CSS pero que no son tan comunes o que son soportados sólo por algunos navegadores web.

SELECCIONAR TODO ('*')

Es posible indicarle a jquery que seleccione todos los elementos de una sección, o simplemente todos los elementos de una página, para ésto se utiliza el selector (asterísco)

//seleccionamos todos los elementos de la página
$("*"); //sí, así de simple
//seleccionamos todos los elementos dentro del divisor con clase wrap
$("#wrap *"); //una probadita de padres, hijos y decendencia

SELECCIÓN POR ATRIBUTO ('[atributo="valor"]')

Éste selector también se encuentra disponible en CSS, aunque con jQuery tenemos muchas opciones. En principio éste selector nos permite seleccionar todos los elementos que contengan un atributo y que a su vez ése atributo sea de un valor específico. Existen siete tipos de selectores por atributo, los cuales son:

  • Atributo Igual A [atributo='valor'] : Éste es quiza el más fácil de los selectores por atributo, pues limita la búsqueda a elementos cuyo atributo sea exáctamente a un valor, por ejemplo, si quisieramos seleccionar todos los input de una forma que sean de tipo text, lo haríamos de la siguiente manera:
    $("input[type='text']");
    

    Si quisieramos seleccionar todas las imágenes que tengan como título la palabra "inicio", sería así:

    $("img[title='inicio']");
    
  • Atributo Diferente A [atributo!='valor'] : Éste selector es lo contrario al selector anterior, ya que nos devuelve todos los elementos cuyo atributo NO SEA igual al valor proporcionado. Por ejemplo si quisieramos seleccionar de una forma todos los input, excepto el campo de nombre "telefono" sería:
    $("input[name!='telefono']");
    

    También si quisieramos seleccionar todas las formas que no se envían por GET, lo haríamos así:

    $("form[mehtod!='GET']");
    
  • Atributo Comienza Con [atributo^='valor'] : Se comienza a complicar un poco el asunto, o quizás no. Éste selector nos permite seleccionar todos los elementos donde el valor de un atributo inicie con el texto indicado en el selector. En pocas palabras, todo atributo, independientemente del valor que tenga, si inicia con ése mismo texto, lo seleccionará jQuery. Ejemplo, si deseamos elegir todos los elementos cuya clase inicie con la palabra "placa", se haría así:
    $("*[class^='placa']");//recordar que el * asterísco selecciona TODOS los elementos
    

    También es posible seleccionar todos los campos de una forma cuyo nombre inicie con la palabra "usuario"

    $("input[name^='usuario']");
    
  • Atributo Termina Con [atributo$='valor'] : Similar al Atributo Comienza Con, sólo que en éste caso, buscamos valores que terminen con el texto que indicamos en el selector. Por ejemplo, si queremos seleccionar todos los elementos de una forma cuyo nombre termine en "oblig":
    $("input[name$='oblig']");
    

    Si usamos el atributo rel, podemos seleccionar todos los elementos cuyo atributo rel termine en 'r':

    $("a[rel$='r']");//no sé por qué querrías hacer eso, pero se puede
    
  • Atributo Contiene [atributo*='valor'] : En éste caso, nuestro critério se buscará en cualquier parte del valor del atributo. En los dos selectores pasados buscamos unicamente al final y al inicio, éste selector nos permite buscar en cualquier posición, incluido el inicio y el final. Si quisieramos elegir todas las imágenes cuyo título contiene el texto "pic" lo haríamos así:
    $("img[title*='pic']");
    

    También es posible buscar todos los elementos cuyo título contenga la letra "j":

    $("*[title*='j']");
    
  • Atributo Contiene Palabra [atributo~='valor'] : Muy similar al selector Atributo Contiene pero con la diferencia de que en éste caso busca una palabra completa, es decir, si usamos éste selector para buscar en los valores la palabra "boton", únicamente nos devolvería los elementos que tienen esa palabra completa, y no algo como "boton_inicio", ya que en éste caso, la palabra es boton_inicio y no boton, y por el otro lado si el valor fuera "Este boton es un ejemplo", ése elemento sería una coincidencia, pues sí contiene a boton como palabra.
    $("a[title~='boton']");
    

    Si quisieramos elegir todos los elementos cuyo título contenga la palabra galería:

    $("*[title~='galeria']");
    
  • Atributo Contiene Prefijo [atributo|='valor'] : Éste selector es similar al selector de Atributo Comienza Con, pero con una diferencia importante, el valor dado debe estar sólo o ser un prefijo, y en éste caso, un prefijo se define por contar con la unión de un guión '-', es decir si buscamos todos los elementos que tengan el prefijo "but", elegiría todos aquellos elementos cuyo valor sea unicamente "but" o que inicien con "but-":
    $("a[class='but']");
    
  • Tiene Atributo [atributo] : Finalmente, éste selector nos ayuda a buscar todos los elementos que contengan el atributo dado, independientemente del valor que tenga. Por ejemplo, si quisieramos seleccionar todos las las anclas que tienen un ID:
    $("a[id]");
    

    Si necesitamos elegir todos los divisores que tienen una clase definida, la que sea, sería:

    $("div[class]");//aunque como no se revisa el valor, sólo la exitencia del atributo, podría no tener una clase en sí
    

SELECCIÓN DE FILTRO BÁSICO (':')

Éste selector contiene algunas convenciones de CSS pero también propias de jQuery, y nos permite seleccionar elementos que cumplen con una propiedad en específico, ya sea desde elegir el primer elemento, hasta elegir todos los elementos que se están animando en un cierto momento, éstos son:

  • :animated - Éste selector, cuando es ejecutado, nos devuelve los elementos que estaban en proceso de animación justo en el momento que se ejecutó la llamada del filtro, no confundir con seleccionar todos los elementos que se animan, ya que ésto no es posible con selectores normales. Ejemplo, seleccionar todos los divisores que se están animando en éste momento:
    $("div:animated");
    
  • :eq() - Dado un conjunto de elementos, nos permite seleccionar unicamente uno de éstos elementos. Recordemos que los selectores nos pueden devolver más de un elemento que haya coincidido con nuestra búsqueda, dentro de éste grupo de resultados, podemos elegir unicamente uno de éstos elementos, ya que internamente jQuery los enumera del 0 a N, por lo que: si queremos seleccionar el tercer link del menú de navegación, lo haríamos así:
    $("ul.menu-nav li:eq(2)"); //la cuenta comienza en 0, por lo que el tercer elemento es 0->1->2, el dos.
    
  • :even, :odd - Éstos filtros nos devuelven todos los elementos dentro de un grupo cuya posición, en el conjunto, sea par(even) o impar(odd). Recordemos de nuevo que jQuery numera internamente a los elementos que resultan de una búsqueda, por lo que podríamos: Listar unicamente los elementos pares de una lista:
    $("li:even");
    

    Seleccionar los párrafos nones de un texto en un divisor de clase contenido:

    $("div.contenido p:odd");
    
  • :first, :last - De igual forma que con :even :odd, éstos selectores nos permiten elegir del grupo únicamente al primer o al último elemento, es decir: listar el primer link del menú:
    $(".menu a:first");
    

    Seleccionar el último link del footer:

    $("#footer a:last");
    
  • :gt(), :lt() - Similar de alguna forma a :even y :odd, sólo que en éste caso podemos filtrar todos los elementos a partir de una posición en el grupo, ya sean todos los elementos antes o todos los elementos después del índice indicado. Por ejemplo, si quieremos seleccionar de una lista, todos los elementos li desde el tercer elemento hasta el final:
    $("li:gt(1)");//la condición debe ser MAYOR al elemento, para incluir al elemento deseado, nos tendríamos que bajar un nivel
    

    Recordemos que la numeración inicia en cero, por lo que el elemento número tres, en realidad es el dos. Con lo anterior podemos seleccionar los primeros 5 párrafos de un divisor de clase textos:

    $("div.textos p:lt(5)");//ponemos el 5 por que buscamos seleccionar los que sean menores al índice 5, es decir 0,1,2,3,4 que son los primeros cinco párrafos
    
  • :not() - Éste selector nos permite eliminar de una selección los elementos que no coincidan con la búsqueda, por ejemplo, si tenemos un menú y queremos elegir todas las anclas que no están activas, lo haríamos así:
    $("a:not(.activa)");
    

    Como notarán en el ejemplo, definimos una selección de clase dentro del selector :not(), ésto es posible ya que el filtro not acepta otros selectores detro de sí mismo, por ejemplo si queremos elegir todos los párrafos, excepto el cuarto párrafo, de un divisor clase contenidos:

    $("div.contenidos p:not(:eq(4))");
    

Dentro de ésta catégoría de selectores de filtro básico hay algunos otros que no son muy usados o que como introducción podrían causar más dudas que respuestas, por lo que pueden consultarlos en la página del API oficial de jQuery.

Con ésto concluímos la segunda parte de éste Aprendiendo, si no revisaron la primera parte, es un buen inicio, la pueden revisar aquí. En la tercera parte de los selectores veremos más sobre cómo combinar selectores, y también explicaré el concepto de padres, hijos, y descendientes, lo que nos permitirá hacer selecciones más robustas y menos genéricas.

Hasta entonces, 

Aarón Marquez (not verified)

8 years 3 months ago

Me salvaste (Y) de los mejores blogs

Comments

Powered by Drupal