Selectores en JQuery II

Posted on Actualizado enn


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:
    <div>
    <p>Primer Parrafo </p>
    <p>Segundo Parrafo </p>
    <p>Tercer Parrafo </p>
    <fieldset>
    <legend>Grupo 1</legend>
    <p>Cuarto Parrafo</p>
    <p>Quinto Parrafo</p>
    </fieldset>
    </div>
    </pre> 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…..

Un comentario sobre “Selectores en JQuery II

    Filtros en JQuery « Todo en Visual Basic.Net escribió:
    02/08/2011 en 00:51

    […] Hola a todos, en post pasados hablamos sobre algunos selectores en jquery (selectores I y selectores II), hoy vamos a revisar como podemos aplicar filtros a dichos […]

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s