Selectores en JQuery

En esta ocasión voy a escribirles acerca de los selectores de JQuery que son muy prácticos y sencillos de comprender.

Si eres desarrollador Web ya debes de conocer JQuery o cualquier otro Framework como Mootools, Prototype, etc (los aquí mencionados son las mas famosos).
Algunas características de JQuery:
• Desarrollo de sitios mucho más rápido.
• Sin preocupaciones por la compatibilidad entre navegadores (el famoso DOM) como: Firefox 2.0+, Internet Explorer 6+, Safari 3+, Opera 9+, Chrome 1+.
• Es ligero.
• La curva de aprendizaje es más rápida que cualquier otro Framework de javascript.
• Documentación bastante extensa y bien detallada.
• Licencia MIT.
• Infinidad de plugin como galerías, validadores, cargas de archivos, animación, drag & drop, menús, AJAX, calendarios, y muchos otros que no están en la página oficial de JQuery.
Por solo mencionar algunas de las características mas importantes, si quieren profundizar en esta herramienta visiten la página de JQuery.

Primeramente vamos a partir de que un selector nos permite hacer referencia a un objeto, una vez referenciado podemos hacer lo que queramos con él. Por mencionar algunas formas de referencias: class, style, name, id, index, type, tag HTML, etc.

• $(“*”): Esto nos devolverá TODOS los objetos que haya en cargados en nuestra página.
• $(“[name=nameObj]”): hacemos referencia por la propiedad name, también podemos referenciar por cualquier otro atributo, incluso aquellos que no están definidos en el HTML estándar por ejemplo:

<code>
 <input name=”nombre” type=”text” numero=”5">
</code>

Donde el atributo “numero” no esta definido pero con JQuery podemos referenciarlo de la siguiente manera:

             <code>
             alert($(“[numero=5]”).val()); //muestra el valor del campo value
             </code>

$(“.className”): antes que poner el nombre de clase lo primero que debemos de poner es el “.” (punto) seguido del nombre de la clase, ejemplo:

            <code>
            <input name=”nombre” class=”miClase”>
            alert($(“.miClase”).val()); //muestra el valor del campo value
            </code>

Esta clase no tiene que estar definida en los archivos CSS.
• $(“#idObj”): primeramente debemos de poner el simbolo “#”, seguido del id de nuestro objeto, ejemplo:

<code>
&lt;input type=”text” id=”apellido”&gt;<br />
<br />
alert($(“#apellido).val()); //muestra el valor del campo value
</code>

• :eq(index): Seleccionamos un objeto por medio de un índice, esta forma considera a los objetos en forma de arreglo y la primera posición es 0 (cero), ejemplo:
        <code>
        <ul>

  <li>lista 1</li>

<li>lista 2</li>

<li>lista 3</li>

            </ul>

         alert($(“li:eq(1)”).text()); // En este caso se muestra el texto “lista 2”.

        </code>

• $(:typeObj): seleccionamos los objetos de cierto tipo, si hay muchos los obtendremos todos y la forma de recorrerlos es con un .each(), ejemplo:
         <code>

         <input type=”checkbox” name=”agua”>Agua

         <input type=”checkbox” name=”jamaica”>Jamaica

         <input type=”checkbox” name=”refresco”>Refresco

         $(“:checkbox”).each(function(){

            alert( $(this).attr(“name”));

          });

         </code>

En el ejemplo anterior obtenemos a todos los objetos de tipo checkbox y por cada uno que en cuentre nos mostrará en un alert() el atributo nombre.
• $(“tagHTML”): Seleccionamos a uno ó muchos objetos por su tag HTML, es decir, indicamos que objetos queremos obtener, ejemplo:
         <code>
         $(“li”).each(function(){
         //hacemos algo con cada objeto li encontrado
         });
         </code>

Cabe señalar que todas estas formas de seleccionar objetos las podemos mezclar, es decir, partir de algo general hasta algo especifico, a continuación mostraré un ejemplo de lo que estoy hablando:
         <code>
         alert($(“div”).children(“p”).next(“a”).attr(“href”));
          //muestra http://hfigueroas.blogspot.com en un alert

         <div>

           <p>Texto del párrafo</p>

           <a href=”http://hfigueroas.blogspot.com”>Mi blog</a>

         </div>
         </code>

Esto solo fue a manera de introducción y algo muy básico, si queremos profundizar en el tema podemos visitar la página oficial de JQuery y de los selectores.