Escrito por: TiraCodigo
Etiquetas: jQuery, primeros pasos, basico, utilizar, página
A continuación vamos a mostrar como usar de una manera fácil jQuery, la cual es una potente librería hecha en JavaScript que nos va ayudar a hacer más cosas con menos código, para su uso es necesario que conozcas html, CSS y Javascript.
Entre las muchas cosas en las que nos ayuda jQuery es:
- Realizar más escribiendo menos código
- Utiliza la misma sintaxis de Javascript
- Tiene una extensión con controles de interfaz (UI)
- Es compatible con la mayoría de navegadores
Cargar el script de jQuery en la página
Para que jQuery funcione, primero debemos cargar el archivo, este lo podemos encontrar en http://jquery.com/download/
Recomiendo siempre utilizar la última versión. y de la misma manera utilizarla de forma local, ya que eso hace mas rapido la carga de la página.
Teniendo descargado el archivo, editamos nuestra página de HTML y entre los tags “Head” poner lo siguiente (suponiendo que bajamos la version 2.1.4):
<script type="text/javascript" src="/jQuery-2.1.4.js"></script>
Con lo anterior tendremos cargado jQuery, para comenzar a utilizarlo debemos definir la función ready, ya que esta se ejecuta automáticamente después de que los elementos del DOM están cargados, la cual se crea de la siguiente manera:
$(document).ready(function() {
// aqui el código
});
La función anterior, la puedes crear directamente en la página utilizando los tags <script> , o puedes definirla en un archivo js aparte, Ahora estamos listos para comenzar a utilizar las funcionalidades de jQuery.
Probando que todo funciona bien
Vamos a realizar un pequeño ejercicio el cual te ayudará a comprobar que tu página y jQuery funcionan correctamente, vamos a poner un botón, y al darle click, mostraremos una alerta, el ejemplo nos quedaría de la siguiente manera:
1.- En la sección del “Body” crearemos un botón:
<button id=”MiBoton” type="button">Click Me!</button>
2.- definimos la acción a realizarse en la función ready:
$(document).ready(function() {
$('#MiBoton').on('click', function (e) {
alert("Funciona!!");
});
});
Con lo anterior puedes empezar a utilizar esta potente herramienta, te recomiendo leer estos artículos que te ayudan en tus primeros pasos en jQuery:
A continuación los links para bajar el ejemplo y otro para ver el ejemplo funcionando