Primeros pasos con jQuery

En el post anterior, “Introducción a jQuery”,  vimos que jQuery es una librería de JavaScript muy importante y relativamente sencilla de usar, sin siquiera tener conocimientos avanzados de JavaScript.

Ahora, vamos a comenzar con los primeros pasos en jQuery, con explicaciones básicas y necesarias para comenzar con esta librería.  Como en el post anterior, ya hicimos un “Hola Mundo”, ahora, partimos de ahí, suponiendo que tenemos el entorno configurado.

 Lo básico, la función “$”

La función básica de jQuery, nos permite seleccionar elementos del DOM, para luego hacer cosas con ellos. Reemplaza el document.getElementById() de JavaScript, solo que con muchas mejoras…
por ejemplo:

 
//selectores básicos

$('*')   // Selecciona todos los elementos de la página

$('a')   // Selecciona todos los enlaces de la página

$('#contenedor')    // Selecciona el elemento con id "contenedor"

$('a.menu')      // Selecciona todos los a  con clase "menu"

$("#categoryGrid table")  //selecciona todas las tablas, dentro de #categoryGrid

//selectores un poco más avanzados

$('input[name="email"]')    //selecciona el input que contenga el atributo name="email"

$('p[a]') // Selecciona todos los p que tengan como mínimo un enlace adentro

$("#contenedor h1:first-child") //selecciona el primer h1 dentro de #contenedor

$('h2:contains("Blog")')    //selecciona todos los h2 que contengan la palabra "Blog" en su texto

La lista con todos los selectores está aqui: http://api.jquery.com/category/selectors/ si tienen tiempo de leerla, la recomiendo, no es muy larga, pero si muy potente y fácil de entender, ademas, cada caso tiene un ejemplo.

Empezando a jugar…  Ejemplos prácticos

Supongamos que seleccionamos una div con $(‘#contenedor’) ahora, podemos empezar a hacerle cambios, de estilo, posición, etc…

 
$('#contenedor').text("Este es el nuevo texto")  //reemplaza todo el texto que contenía la div #contenedor por "Este es el nuevo texto" 

$('#precio').replaceWith("$299.00"); //la función replaceWith, reemplaza todo el elemento #precio, con un elemento nuevo 

$("#categoryGrid table").before("Refine your search..."); //la función before() nos permite agregar algo, antes del elemento seleccionado. (Tambien existe la función after() ) 

$('#widgetVendors .top').css("border","none");  //la función css() nos permite agregar estilos CSS al objeto seleccionado. 

$("#widgetBlogRecentPosts").appendTo("#contenido"); //esto nos permite mover un elemento, al interior de otro

Esos son ejemplos de algunas de las funciones simples, más usadas de jQuery. La lista de todas las funciones con ejemplos, la pueden encontrar en este sitio:  http://api.jquery.com/

En el próximo post sobre jQuery, vamos a usar los eventos y efectos visuales.

Si te sirvió, comentá.  Saludos!