Bueno, despues de mas o menos dos semanas, en donde hable de los selectores en jquery (mira el post), hoy vamos a ver algunos mas, no los veremos todos puesto que son bastantes, pero con el primero post y este vamos a tener las herramientas necesarias para poder trabajar con el framework jquery.

Hoy vamos a ver solo tres tipos de selectores para culminar dicho tema:

  1. Selector de descencia: Permite seleccionar todos los elementos que “pertenezcan” o esten dentro del alcanze del selector principal. La sintaxis general es: $(“selectorprincipal selectorsecundario”), si lo implementamos podemos tener algo como: $(“div p”), en este caso estamos diciendo que seleccione todos los p (párrafos) que esten dentro de un div, en este caso no importa si el parrafo no es hijo directo del div, es decir podemos tener una estructura asi:

    Primer Parrafo


    Segundo Parrafo


    Tercer Parrafo



    Grupo 1

    Cuarto Parrafo


    Quinto Parrafo




    ``y todos los parrafos seran seleccionados.
  2. Selector de descendencia directa: Permite seleccionar los elementos que sean hijos directos del selector principal. La diferencia de sintaxis con el selector anterior es que entre el selector principal y el selector secundario debemos ingresar el carácter >. La sintaxis es: $(“selectorprincipal > selector secundario”), siguiendo con el ejemplo anterior seria así: $(“div > p”) y en este caso solo los tres primeros parrafos seran seleccionados, pq descienden directamente del div, los otros dos (cuarto y quinto) no ya que si bien estan dentro del div, son hijos directos del fieldset (grupo 1)y no del div.
  3. Selector múltiple: Este selector es bastante util, en situaciones en las cuales necesitamos tener un look and feel muy consistente, digamos, que todos nuestros textos (label, parrafos, etc) tengan el mismo fondo, mismo color de letra, etc.Para poder usar este tipo de selector, cada uno de los tipos de selectores debe ir separados por una coma, es decir su sintaxis es: $(“selector1,selector2,selector3″), una implemetación sencilla sería: $(“div, p, label”); ademas es posible combinar con otro tipo de selector, digamos que vamos a aplicar el mismo fondo a todos los label, y a los parrafos que esten dentro de un fieldset, en ese caso hariamos algo como: $(“label,fieldset > p”).

Como siempre les dejo un ejemplo que implementa estos tipos de selectores.

Descarga del ejemplo !!

En el proximo post vamos a revisar como aplicar filtros a los selectores…..