¿Que es jQuery?
jQuery es una libreria de javascript rapida y concisa creada por John Resig en 2006, con un bonito lema: Write less, do more (Escribe menos, haz más). jQuery
simplifica el desplazamiento a traves de HTML, manejo de eventos,
animacion, y las interacciones para el desarrollo web rapido. jQuery es un conjunto de herramientas javascript diseñadas para simplificar diversas tareas escribiendo menos codigo. Aqui se muestra una lista de las principales caracteristicas importantes soportadas por jQuery:
Manipulacion DOM: jQuery hace que sea mas facil seleccionar elementos DOM, atravesar y modificar su contenido mediante motor selector de codigo fuente abierto entre navegadores llamado Sizzle.
Gestion de eventos: jQuery ofrece una forma elegante para capturar una gran variedad de eventos, tal como cuando un usuario hace clic en un enlace, sin necesidad de recargar el propio codigo HTML con los controladores de eventos.
Soporte AJAX: jQuery le ayuda mucho para desarrollar un sitio responsivo y rico en caracteristicas utilizando la tecnologia AJAX.
Animaciones: jQuery viene con un monton de efectos integrados de animacion que se puede utilizar en sus sitios web.
Peso ligero: jQuery es una biblioteca muy ligera.
Soporte de navegador: jQuery tiene soporte multi-navegador.
¿Como instalo jQUery?
Para llevar a cabo la configuracion de jQuery solo son necesarios dos sencillos pasos:
1.- Vamos a la pagina y bajamos la ultima version disponible
2.- Ahora colocamos el archivo jquery.version.min.js en algun directorio de nuestro sitio, por ejemplo js/.
La version minificada no contiene nuevas lineas ni comentarios, lo que hace que sea mas pequeña y rapida.
jQuery no requiere ninguna instalacion especial similar a javascript, no necesitamos ninguna fase de compilacion para usar jQuery.
¿Como utilizar la libreria jQuery?
Ahora puede incluir su libreria jQuery en el HTML de la siguiente manera:
<html>
<head>
<title>Ejemplo de jQuery</title>
<script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
// Aqui agregas tu codigo javascript que tu quieras
</script>
</head>
<body>
........
</body>
</html>
¿Como llamar funciones de la libreria jQuery?
Como casi todo lo que hacemos al usar jQuery manipula el document object model (DOM), tenemos que asegurarnos de comenzar a añadir eventos tan pronto como el DOM este listo. Si quieres un evento para trabajar con tu pagina, deberias llamar la funcion $(document).ready(). El cual se cargara tan pronto se cargue el DOM y antes de que el contenido de la pagina sea cargado. Para ello se registra un evento ready en el documento de la siguiente manera:
$(document).ready(function(){
// Hacer alguna cosa cuando el DOM este cargado
});
Podemos llamar cualquier funcion de la libreria jQuery usando las etiquetas script HTML como se muestra a continuacion:
<html>
<head>
<title>Ejemplo de jQuery</title>
<script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").click(function(){
alert("Hola Mundo");
});
});
</script>
</head>
<body>
<div id="nuevacapa">
De clic aqui para mirar el contenido de un cuadro de dialogo.
</div>
</body>
</html>
¿Como usar scripts personalizados?
Es mejor escribir nuestro codigo personalizado, en un archivo de javascript personalizado: custom.js, de la siguiente manera:
/* Archivo: custom.js */
$(document).ready(function(){
$("div").click(function(){
alert("Hola Mundo!");
});
});
Ahora podemos incluir nuestro archivo custom.js en nuestro HTML de la siguiente manera:
<html>
<head>
<title>Ejemplo de jQuery</title>
<script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
</head>
<body>
<div id="nuevacapa">
De clic aqui para mirar el contenido de un cuadro de dialogo.
</div>
</body>
</html>
Uso de multiples librerias:
Puede utilizar varias librerias todas juntas sin entrar en conflicto con las demas. Por ejemplo, usted puede usar las librerias jQuery y Moontool juntas.
Muchas librerias de javascript utilizan $ como una funcion o nombre de la variable, tal como lo hace jQuery. En el caso de jQuery, $ es solo un alias para jQuery, por lo que todas las funciones de jQuery estan disponibles sin utilizar $.
El metodo $.noConflict() da el control de $ como primer puesto a la otra libreria que usarás. Esto ayuda asegurarse de que jQuery no entre en conflicto con $ los objetos de otras librerias.
Aqui esta la manera sencilla de evitar cualquier conflicto:
// Importamos otra libreria
// Importamos jQuery
$.noConflict();
// El codigo que usa la otra libreria puede utilizar $ siguiendo desde aqui...
Esta tecnica es especialmente eficaz en combinacion con la capacidad del metodo .ready() para crear un alias del objeto jQuery, como en ready podemos usar $ si lo deseamos sin temor a conflictos posteriores:
// Importamos otra libreria
// Importamos jQuery
$.noConflict();
jQuery(document).ready(function($){
// Podemos utilizar $ desde aqui
});
// Codigo de alguna otra libreria utilizando $ puede seguir desde aqui..
¿Que es lo siguiente?
No se preocupe demasiado si usted no entendio los ejemplos anteriores. Usted lo va entender muy pronto en los tutoriales siguientes.
Este texto ha sido traducido de la pagina web TutorialesPoint.
No hay comentarios:
Publicar un comentario