Introducción a JQuery
Hola a todos, les quiero dar la bienvenida a mi blog. Mi nombre es Damián , soy técnico informático y ultimante más diseñador/programador web que otra cosa. En el blog solo pretendo poner algun que otro ejemplo de problemas que me encuentro dia a dia a la hora de hacer una página web. Más que nada serán ayudas para algunos y a mi personalmente me servirá de cuaderno de anotaciones por si algun día topo otra vez con el mismo problema.
No esperen actualizaciones diarias ni mucho menos , porque últimamente ando fatal de tiempo. Eso sí en la medida de lo posible pondre utilidades , recursos, noticias y lo que vaya encontrando por internet.
Una vez hecha las presentaciones, empiezo a explicar un poco de que trata JQuery.
Para simplificar, podríamos decir que jQuery es un framework o librería para Javascript(para el que no sabe aun que es Javascript , le recomiendo empezar con este libro) que simplemente nos hace la vida más fácil en todos los sentidos, haciendonos así ahorrar código y tiempo.
Por poner un ejemplo digamos que tenes el siguiente campo de texto:
<input id="campo1" name="campo1" type="text" value="Esto es un campo de texto" /> |
<input id="campo1" name="campo1" type="text" value="Esto es un campo de texto" />
Para seleccionar el valor de este campo con Javascript seria de la siguiente forma:
1 2 3 | //Mediante su id document.getElementById("campo1").value(); |
//Mediante su id document.getElementById("campo1").value();
Esto mismo con JQuery lo hariamos de la siguiente manera:
1 2 3 | //Mediante su id $('#campo1').text(); |
//Mediante su id $('#campo1').text();
Como pueden apreciar se ahorra mucho código para un operación tan sencilla como esa. Existen muchas otras formas de seleccionar un objeto:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | //Todos los objetos de una misma clase $(" .nombreDeLaClase") //Todos los div de la clase .noticias $("div .noticas") //Todos los link $("a") //Todos los elementos del tipo x hijos del elemento tipo y $("y >x") |
//Todos los objetos de una misma clase $(" .nombreDeLaClase") //Todos los div de la clase .noticias $("div .noticas") //Todos los link $("a") //Todos los elementos del tipo x hijos del elemento tipo y $("y >x")
Y como esto muchos más. Acá podes encontrar una lista completa de selectores.
También podemos manejar todos los eventos tales como click , onmouseover, blur, focus , ….etc . Se podria decir que el más importante que vamos a usar es el evento ready.
El evento ready sirve para ejecutar una función cuando termine de cargar el DOM de la página , tal y como hace su homólogo «window.onload=» en Javascript. La única (y más importante) diferencia es que mientras en Javascript solo podemos llamar a este evento para una sola función , con JQuery podremos ejecutar todas las funciones que querramos.
Veamos un ejemplo de como asignar un evento click a un enlace una vez que la página cargue todos los elementos:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
//La forma es la siguiente $(document).ready(function () {...funciones... });
//Para nuestro ejemplo asignaremos un evento click al enlance para que cambie de color un div asignado
//codigo Javascript que usualmente se coloca antes de la etiqueta
<script src="js/jquery-latest.js" type="text/javascript"></script> <script type="text/javascript"><!--
$(document).ready(function () {
$("#link_color").click( function(){
$("#div_colores").css("background-color","red");
});
});
// --></script>
//Codigo HTML del ejemplo
<input type="button" value="Cambiar a rojo" id="link_color">
<div id="div_colores" style="width: 50px; height: 50px; background-color: #191919;"></div> |
//La forma es la siguiente $(document).ready(function () {...funciones... }); //Para nuestro ejemplo asignaremos un evento click al enlance para que cambie de color un div asignado //codigo Javascript que usualmente se coloca antes de la etiqueta <script src="js/jquery-latest.js" type="text/javascript"></script> <script type="text/javascript"><!-- $(document).ready(function () { $("#link_color").click( function(){ $("#div_colores").css("background-color","red"); }); }); // --></script> //Codigo HTML del ejemplo <input type="button" value="Cambiar a rojo" id="link_color"> <div id="div_colores" style="width: 50px; height: 50px; background-color: #191919;"></div>
Ahora por ejemplo si quisieras crear un botón que alterne dos colores podriamos usar la función toggle de la siguiente manera:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | //codigo Javascript que usualmente se coloca antes de la etiqueta <script src="js/jquery-latest.js" type="text/javascript"></script> <script type="text/javascript"><!-- $(document).ready(function () { $("#link_color").toggle( function(){ $("#div_colores").css("background-color","red"); }, function(){ $("#div_colores").css("background-color","green"); } ); }); // --></script> //Codigo HTML del ejemplo <input type="button" value="Cambiar color" id="link_color2"> <div id="div_colores" style="width: 50px; height: 50px; background-color: #191919;"></div> |
//codigo Javascript que usualmente se coloca antes de la etiqueta <script src="js/jquery-latest.js" type="text/javascript"></script> <script type="text/javascript"><!-- $(document).ready(function () { $("#link_color").toggle( function(){ $("#div_colores").css("background-color","red"); }, function(){ $("#div_colores").css("background-color","green"); } ); }); // --></script> //Codigo HTML del ejemplo <input type="button" value="Cambiar color" id="link_color2"> <div id="div_colores" style="width: 50px; height: 50px; background-color: #191919;"></div>
Como hemos visto además del manejar los eventos podemos acceder a los estilos de una forma muy facil:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | //Para añadir una clase $("#div_colores").addClass("nombreclase"); //Para quitar una clase $("#div_colores").removeClass("nombreclase"); //Para cambiar multiple propiedades css $("#div_colores").css({"width":"120px","height":"20px"}); var cssObj = { 'background-color' : '#ddd', 'font-weight' : '', 'color' : 'rgb(0,40,244)' } $('#div_colores').css(cssObj); //Para cambiar una sola propiedad $('#div_colores').css("color","red"); |
//Para añadir una clase $("#div_colores").addClass("nombreclase"); //Para quitar una clase $("#div_colores").removeClass("nombreclase"); //Para cambiar multiple propiedades css $("#div_colores").css({"width":"120px","height":"20px"}); var cssObj = { 'background-color' : '#ddd', 'font-weight' : '', 'color' : 'rgb(0,40,244)' } $('#div_colores').css(cssObj); //Para cambiar una sola propiedad $('#div_colores').css("color","red");
Veamos otro ejemplo:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | $("p").hover(function () { $(this).css({'background-color' : 'yellow', 'font-weight' : 'bolder'}); }, function () { var cssObj = { 'background-color' : '#ddd', 'font-weight' : '', 'color' : 'rgb(0,40,244)' } $(this).css(cssObj); }); //codigo html <p> Pasa el rator por encima </p> <p> O pasalo por aca. </p> |
$("p").hover(function () { $(this).css({'background-color' : 'yellow', 'font-weight' : 'bolder'}); }, function () { var cssObj = { 'background-color' : '#ddd', 'font-weight' : '', 'color' : 'rgb(0,40,244)' } $(this).css(cssObj); }); //codigo html <p> Pasa el rator por encima </p> <p> O pasalo por aca. </p>
Y para terminar por hoy vamos a ver una de las cosas más atractivas de JQuery y un motivo por el cual la mayoría de nosotros empezamos a utilizarlo. Hablo de los efectos
Hay un monton de efectos , y si no encontramos el que queremos seguro que alguien habrá echo un plugin que lo traiga.
Para los efectos mejor veamos el Ejemplo 4 directamente.
Eso es todo para empezar. Espero que haya servido de ayuda. Saludos
Últimos Comentarios