JQuery, iniciándome en los frameworks

Hace tiempo que trasteo código en Javascript pero siempre cosas básicas y puntuales: la validación de un formulario, ocultar y mostrar bloques, etc. Normalmente hago mas caso al CSS e incluso al PHP y al pobre JS lo tengo olvidado, pero desde que probé JQuery que le estoy cogiendo el truquillo a esto del Javascript.

JQuery es una librería (o framework, como queráis llamarlo) llena de funciones que nos harán la vida más fácil, ya que nos ahorran mucho código y encima son compatibles con todos los navegadores, un sueño hecho realidad, vamos.

Lo primero que tenemos que hacer para poder utilizar este framework es llamarlo, para eso podemos utilizar la Api de bibliotecas Ajax de Google así no hará falta que subamos la librería a nuestro servidor y podemos tener la tranquilidad de que siempre estará disponible.


Sobra decir que con el código anterior podemos cargar cualquier otra librería, e incluso indicar otra versión de ésta a utilizar.

La función principal de JQuery es la función dolar, que sería algo así como un atajo a la función document.getElementById(); pero mejorado, ya que podemos seleccionar elementos con múltiples opciones:

$('p'); //seleccionamos todos los párrafos
$('p.texto'); //seleccionamos solo los párrafos que tengan la clase .texto
$('div:hidden'); //seleccionamos todos los divs ocultos

Aquí podéis ver una lista completa de los selectores que podemos utilizar, tenéis que echarle un vistazo a la documentación de la página oficial, aunque está en inglés nos puede servir de mucha ayuda.

Y bueno, para no alargarme mucho más con este artículo os voy a dejar un ejemplo práctico para que comprobéis lo fácil que resulta trabajar con jquery:

//al cargar el html oculto el elemento con id="submenu"
$(document).ready( function(){
   $("#submenu").hide();
});

//creo una función que muestre #submenu cuando pase el ratón por encima de #menu
//y vuelva a ocultar #submenu cuando salga del área de #menu
$(function(){
	$('#menu').hover(function(){
		$("#submenu").show();
	}, function(){
		$("#submenu").hide();
	});
});

Y listo, con esto ya tendríamos la base para un menú desplegable por ejemplo ¿A que es fácil? :P

  • 14 octubre 2009
  • Maquetación
  • , ,

5 comments on “JQuery, iniciándome en los frameworks”

  1. He encontrado tu blog merodeando entre enlaces, y parece que tienes la respuesta a una cosa con la que estoy atascado en el nuevo diseño de mi blog: el menú. Casualmente tengo en la plantilla la librería JQuery, y el enlace sobre los selectores me van a ser de más que ayuda, te lo digo en serio.

    Gracias por compartir, y me suscribo para no perderte la pista.

    Un saludo.

  2. Hola José!
    Muchas gracias a ti por pasarte por aquí y dejar tu marca, saber que lo que escribes sirve de algo anima mucho! xD
    Si puedo echarte una mano con algo, ya sabes.

    Un saludo!

  3. También te sigo por Twitter ;) Estoy rediseñando mi blog, pero estoy atascado… Pero por falta de ideas, sobre todo… Y lo que me va saliendo no me gusta.

    En esa clase de temas no tengo mucho que ofrecerte, pero si necesitas alguna cosa de mi, puedes encontrarme en el blog que enlaza mi nick, o en Yenodeblogs.

    Gracias a ti y un saludo.

  4. Buenas José!
    No te amargues, los rediseños de blogs siempre son crudos sobre todo si son personales, te lo digo x experiencia que en menos de dos años lo he cambiado al menos 5 veces xD
    Lo mejor es ir pensando en estilos y cuando te llegue la inspiración, entonces ponerte a ello, si no puedes quemarte antes de tiempo..
    Mucha suerte con ese rediseño y ya me avisarás cuando lo termines :D

    Saludos!!

  5. Eso haré, deshacer lo que tengo hecho, pensar lo que quiero hacer y luego ponerme a ello. Gracias por el consejo.

    Por cierto, los cambios no son visibles, estoy en un blog de pruebas. Cuando termine sustituiré mi querida Minima Dark ligeramente modificada de golpe por la que quiero hacer, aunque invitaré a algunas personas a que le echen un vistazo antes de hacerlo.

    Un cordial saludo para ti y gracias también por los ánimos.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *