Ejemplo Hola jQuery

2012-04-02T15:42:00.000-07:00

Ejemplo Hola jQuery
<script>

$(document).ready(function() {
  alert('Hola jQuery')
});

</script>

AL cargar esta página se mostrará el mensaje "Hola jQuery"

Iniciando en jQuery

2012-04-02T10:09:00.000-07:00

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

Todo sobre jQuery

Ejemplo Hola jQuery

Iniciando en jQuery