En esta ocasión, vamos a dar nuestro primer paso en jQuery. Por lo tanto es importante tener algunas bases claras:
- Conocimiento básico en Javascript y HTML
- Saber que es jQuery (más info.)
Ok, con estos requisitos podemos iniciar.
Paso 1: Antes de nada, debemos descargar la librería jQuery en
http://docs.jquery.com/Downloading_jQuery, aquí encontrarás varias versiones de jQuery, que desarrollan diferentes empresas como Google, recomiendo descargar la oficial del sitio y que sea la versión mini, la versión de desarrollo, se usa en caso de requerir hacer una mejora o adaptación a tu sitio, lo cual no recomiendo, porque más adelante veremos como hacer nuestros propios plugins de jQuery
Paso 2: Crea un archivo HTML llamado hellojQuery.html
Paso 3: Nuestro hello jQuery: una vez descargado la librería y creado el archivo, vamos ha insertar la librería de la siguiente manera
<html>
<head>
<script src="js/jquery-1.7.2.min.js"></script>
</head>
</body>
</body>
</html>
Debemos tener en cuenta que la librería jQuery (
<script src="js/jquery-1.7.2.min.js"></script> ), debe ir siempre insertada antes de usar cualquier otro archivo javascript (*.js) donde se haga uso de esta. Por lo contrario no funcionará
4. A probar nuestra primera función: ahora en el cuerpo del archivo, agregamos esta línea
<script>
$(document).ready(function() {
alert('Hola jQuery')
});
</script>
//Otra forma
<script>
$(function() {
alert('Hola jQuery')
});
</script>
En este ejemplo, vemos que se hace llamado a la función "
ready", la cual reemplaza "document.body.
onload", y solo afecta al elemento "
document".
Explicación de uso jQuery:
La forma de seleccionar un elemento es con el símbolo "
$" (dolar), las formas básicas de seleccionar son:
Seleccionar por '
tagName' (etiqueta) se hace así:
$('[
tagName]'): $('
body'),$('
input'),$('
label'), de esta forma podemos afectar a todos los elementos que cumplan con el "
tagName"
Para seleccionar por Id:
$('#[id]'): $('#texto'),$('#usuario')
Más adelante veremos formas más avanzadas de seleccionar un elemento
5. Guardamos nuestro archivo, y lo abrimos en nuestro navegador preferido
6. Ver ejemplo
http://todosobrejquery.blogspot.com/2012/04/ejemplo-hola-jquery-document.html
Con este ejemplo básico hemos terminado nuestro "Hello jQuery"
Espero todos sus comentarios y hagan su donación de forma gratuita en http://todosobrejquery.blogspot.com/p/como-donarayuda-gratis.html