Conceptos iniciales de jquery
Páginas: 5 (1158 palabras)
Publicado: 31 de marzo de 2011
jQuery
Tutorial de jQuery
Por Lunatic Lycanthrop el 08 de Marzo de 2007 con 389,897 visitas.
HTML, CSS y Javascript Otros tutoriales por Lunatic Lycanthrop.
jQuery es una liviana libreria de JavaScript, pensada para interactuar con los elementos de una web por medio del DOM. Lo que la hace tan especial es su sencillez y su reducido tamaño.
¿Por que debería usarlo?
La sencillez desu sintaxis y la poca extension del codigo que necesitas escribir son las caracteristicas más notables. Si hicieras lo que hace jQuery con getElementById y window.onload no solo tendrias que escribir mucho, si no que podrian haber diversos problemas.
¿Como empiezo a usarlo?
Lo primero que debes hacer, es descargarlo de la web oficial: jQuery. Una vez descargada la libreria (son más o menos16k) puedes proceder a tu primer script:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Prueba de jQuery</title>
<script src="jquery.js" type="text/javascript"></script>
</head>
<body>
</body></html>
Lo primero que hacemos es linkear el jQuery a nuestro documento. Facil, no?
Ejecución y sintaxis básica
jQuery tiene una sintaxis muy sencilla. Los comandos se reconocen por comenzar con el simbolo "$". Ahora, la forma de una sentencia es la siguiente:
$(elemento).evento(funcion-o-parametro);
La manera de inicializar jQuery es muy util:$(document).ready(function(){
//Aqui tu codigo
});
Ready es un método propio de jQuery, que revisa si el DOM está listo para usarse. Es más util que el window.onload, pues este debe esperar a que todos los elementos de la pagina esten cargados (como scripts e imagenes) paa ejecutar. El "ready", en cambio, espera solo a la estructura.
Acceso a elementosy eventos
Acceder a los elementos de la página es sencillo pues se usa la misma nomenclatura que en CSS:
Tipo de elemento | Modo de llamado |
Etiqueta | Nombre de la etiqueta. Ejemplos: "a", "strong", "div" |
Elemento con un Id | Id precedido por el signo "#". Ejemplos: "#principal","#texto" |
Elemento con una clase (class) | Clase precedida por un punto (.). Ejemplos: ".codigo",".titulo" |
Nota: Tambien funcionan muchos de los selectores de CSS como ">", "*", etc. Un ejemplo de su uso seria:
$("* > a").click( function(){alert("nada");});
Los eventos que se pueden usar son los mismos que usariamos normalmente. El unico cambio es la supresión del "on" inicial: mouseover, click, focus, etc
Veamos todo junto
Veamos un ejemplo de lo visto hastaahora:
<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>
Al presionar cualquier etiqueta "a" del documento, se ejecutaria el alert.
Añadir o retirar clases
Cuando queremos que un elemento pueda interactuar con un css ya establecido, usamos las clases. Con jQuery, estas pueden ser asignadas dinamicamente:...
Tutorial de jQuery
Por Lunatic Lycanthrop el 08 de Marzo de 2007 con 389,897 visitas.
HTML, CSS y Javascript Otros tutoriales por Lunatic Lycanthrop.
jQuery es una liviana libreria de JavaScript, pensada para interactuar con los elementos de una web por medio del DOM. Lo que la hace tan especial es su sencillez y su reducido tamaño.
¿Por que debería usarlo?
La sencillez desu sintaxis y la poca extension del codigo que necesitas escribir son las caracteristicas más notables. Si hicieras lo que hace jQuery con getElementById y window.onload no solo tendrias que escribir mucho, si no que podrian haber diversos problemas.
¿Como empiezo a usarlo?
Lo primero que debes hacer, es descargarlo de la web oficial: jQuery. Una vez descargada la libreria (son más o menos16k) puedes proceder a tu primer script:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Prueba de jQuery</title>
<script src="jquery.js" type="text/javascript"></script>
</head>
<body>
</body></html>
Lo primero que hacemos es linkear el jQuery a nuestro documento. Facil, no?
Ejecución y sintaxis básica
jQuery tiene una sintaxis muy sencilla. Los comandos se reconocen por comenzar con el simbolo "$". Ahora, la forma de una sentencia es la siguiente:
$(elemento).evento(funcion-o-parametro);
La manera de inicializar jQuery es muy util:$(document).ready(function(){
//Aqui tu codigo
});
Ready es un método propio de jQuery, que revisa si el DOM está listo para usarse. Es más util que el window.onload, pues este debe esperar a que todos los elementos de la pagina esten cargados (como scripts e imagenes) paa ejecutar. El "ready", en cambio, espera solo a la estructura.
Acceso a elementosy eventos
Acceder a los elementos de la página es sencillo pues se usa la misma nomenclatura que en CSS:
Tipo de elemento | Modo de llamado |
Etiqueta | Nombre de la etiqueta. Ejemplos: "a", "strong", "div" |
Elemento con un Id | Id precedido por el signo "#". Ejemplos: "#principal","#texto" |
Elemento con una clase (class) | Clase precedida por un punto (.). Ejemplos: ".codigo",".titulo" |
Nota: Tambien funcionan muchos de los selectores de CSS como ">", "*", etc. Un ejemplo de su uso seria:
$("* > a").click( function(){alert("nada");});
Los eventos que se pueden usar son los mismos que usariamos normalmente. El unico cambio es la supresión del "on" inicial: mouseover, click, focus, etc
Veamos todo junto
Veamos un ejemplo de lo visto hastaahora:
<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>
Al presionar cualquier etiqueta "a" del documento, se ejecutaria el alert.
Añadir o retirar clases
Cuando queremos que un elemento pueda interactuar con un css ya establecido, usamos las clases. Con jQuery, estas pueden ser asignadas dinamicamente:...
Leer documento completo
Regístrate para leer el documento completo.