Empezando

Marzo 5th, 2010 by jQuery | Posted under plugins.

Lo básico:
Lo primero de todo es configurar una pagina para hacer uso de la librería jQuery.
Si aun no tienes un archivo de prueba !crea uno ahora mismo! y escribe lo siguiente:

  <html>
  <head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">

    </script>
  </head>
  <body>
    <a href="http://jquery.com/">jQuery</a>
  </body>
  </html>

jQuery tiene una sintaxis muy sencilla. Los comandos se reconocen por comenzar con el simbolo
“$”.
Y la forma que tiene una sentencia es la siguiente:

$(elemento).evento(funcion-o-parametro);

Pongamos un ejemplo real que muestre un alert() cuando se haga click a cualquier enlace de una pagina.

$("a").click( function(){alert("nada");} );

Asi de sencilo. Ahora vamos  ver como quedaria dentro del codigo de la pagina.

<html xmlns="http://www.w3.org/1999/xhtml"> <head>  <title>Prueba de jQuery</title>

    <script src="jquery.js" type="text/javascript"></script>        <script type="text/javascript">            $(document).ready(function (){                //Aqui asignamos el click al elemento <a>                $("a").click(function (){                    alert("Presionaste un <a>");                });            });        </script>

    </head> <body>    <a href="#"> Presioname! </a> </body></html>

Como se puede ver, se ha añadido algo “$(document).ready()” . Pues todo lo que este dentro del ready() sera ejecutado cuando el arbol DOM del documento este creado.
Es una manera de saber cuando empezar a ejecutar nuestro codigo javascript y saber que podemos acceder a todos los elementos de la pagina y que no queda ninguno por ser inicializado.

Con jQuery podemos hacer muchas cosas de una manera muy sencilla, como por ejemplo:

  • Insertar o eliminar elementos.
  • Modificar las propiedades de los elementos, (class, id, value…) o su contenido.
  • Asignar funciones mediante eventos.
  • Peticiones AJAX.
  • Pequeñas animaciones.

Y todo mediante la formula:

$(elemento).evento(funcion-o-parametro);

Para continuar aprendiendo mediante ejemplos, por favor vea la seccion TUTORIALES.



Have any comments?

Spam Protection by WP-SpamFree Plugin