jQuery – Más que un JavaScript Framework
jQuery es un framework basado en javascript, en cortas palabras un framework es un conjunto de herramientas pre-diseñadas para realizar tareas complejas con pocas lineas de código, pero jQuery es mucho más que eso, jQuery es uno de los frameworks más famosos del mundo (y actualmente según “Best Frameworks” es el más usado globalmente). no obstante al dar opciones pre-programadas compatibles con TODOS los navegadores, ayuda a los programadores a usar las nuevas técnicas con mucha más facilidad (ej: como el uso de CSS3 el cual aun no es compatible al 100% con navegadores modernos).
jQuery se ha ganado su popularidad debido a la facilidad que resulta el usarlo y la alta fidelidad de los resultados que se obtienen, un ejemplo de la practicidad de este maravilloso framework
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
$(document).ready(function() {
$('#midiv').click(function (){
$(this).addClass("nuevaclase");
$(this).removeClass("viejaclase");
});
});
En este Script vemos algo muy simple, primero se llama a la libreria [en este caso uso los repositorios de google], y luego declaro que cuando el documento esté listo, haga que cuando se haga click en el objeto con el id “mi div” se le añada la clase “nueva clase” y se le quite la llamada “vieja clase”.
Con este ejemplo es fácil ver la sintaxis de jQuery; nos referimos a cualquier elemento con un Selector CSS, y todo es manejado con funciones, las cuales podemos consultar y aprender desde su pagina en la seccion de API.
Una de las ventajas más aprovechadas de jQuery no es tanto su facilidad y lo corto que es, sino que trae efectos gráficos complejos [como desvanecerse, esconder, deslizar, entre otros], que pueden usarse de manera fácil, muestro un ejemplo.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Ejemplo de jQuery</title>
<script type="text/javascript" src="jquery-ui-/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('div').mouseover(function (){
$(this).delay(500);
$(this).html("Un Puntero en mí! shu shu fuera Puntero");
});
$('div').mouseout(function (){
$(this).delay(500);
$(this).html("Fiu! se fue el Puntero!...");
});
});
</script>
</head>
<body>
<div style="width:400px;height:200px;color:#000;background:#ccc;">
Que Bien no hay punteros cerca....</div>
</body>
</html>
En el ejemplo observamos una interaccion un dificil de interpretar con javascript puro, pero en jquery se simplifica todo de tal manera que con solo 10 líneas es posible lograr esto, es un efecto simple de interacciones con el mouse, y un poco divertido con lo del puntero jeje.
Infinidades de cosas puedes hacer usando jQuery como Framework… Proximamente:
jQuery Corners: Plugin de jQuery para hacer Bordes redondeados compatible con todos los navegadores, Una alternativa a border-radius en css3
Más informacion de jQuery, puedes consultar en: