Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de jQuery

Programar en javascript puede ser más fácil sabiendo utilizar jQuery


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 66

Visitas el mes pasado: 154

logo
WEB-GRAFÍA

Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:


Manual jQuery : desarrollo web
Desarrollo Web
jQuery Tutorial
w3schools.com
jQuery API - (página oficial)
jquery.com
Manual de jQuery
lawebera.es
Fundamentos de jQuery
librojquery.com
Introducción al jQuery
www.comocreartuweb.com

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




jQuery (II)

Fundamentos de jQuery

imagen jquery

Funcionamiento de jQuery

jQuery utiliza la programación orientada a objetos de javascript para crear nuevos objetos, los cuales tienen a su vez propiedades y métodos que son los que crean una nueva manera de programar.

El principal objeto utilizado es el objeto jQuery(), el cual podemos escribirlo también de manera abreviada: $().

Este objeto actúa directamente sobre los elementos de la página (elementos del DOM), seleccionandolos y modificándolos con sus métodos y propiedades.

Dentro del paréntesis, el objeto admite varios parámetros, el primero de ellos indicará el lugar de la página o elemento que queremos modificar, por ejemplo $("h1"), nos indicará que queremos modificar todos los elementos de título 1 (con html <h1> ...</h1>).

a partir de ahi le añadimos al código las propiedades o métodos que indiquen lo que queremos hacer con este elemento o elementos, o también podemos indicárselo mediante una función.


Trabajar con jQuery

lo primero que debemos hacer para poder usar jQuery en una página, es enlazar el archivo jquery.js que hemos descargado (ver página anterior de este manual) a la página en la que lo vamos a utilizar. Para ello bastará con poner un link en la cabecera del documento, como este:

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

El atributo src indica la ruta hacia el archivo jQuery, por lo que si lo hemos guardado en otra carpeta o hemos llamado al archivo de otra manera, deberemos modificarlo para que coincida.

a partir de aquí, en otro script tipo javascript meteremos el código relativo a jquery. Este segundo script debe ponerse siempre después del primero, pues debe haberse cargado el archivo jquery.js para poder llamar a sus métodos.

El modo de trabajar de jQuery es buscar en la página el elemento que deseemos para luego modificarlo. Por lo tanto para encontrar el elemento, cuando se llama a la función que lo busca, éste debe estar ya cargado. En javascript esto lo solemos hacer mediante la función anónima:

window.onload=function() { ... }

sin embargo al usar jQuery sustituimos esta funcion por esta otra:

$(document).ready(function(){ ... });

Donde hemos puesto los puntos suspensivos colocaremos el código para trabajar con los elementos de la página. Existen sin embargo diferencias entre estas dos funciones. La función de jQuery no necesita que la página esté totalmente cargada, sino que comprueba que los elementos con los que vamos a trabajar estén cargados. Por otra parte podemos poner esta función varias veces en la misma página, cosa que no podemos hacer con el window.onload=function().


Sintaxis de jQuery

La sintaxis de jQuery se basa en el objeto jQuery o $(). Este objeto tiene sus métodos, por lo que la forma más común sería la siguiente:

$("selector").metodo(argumentos);

En esta sintaxis básica observamos las siguientes partes:


Ejemplo con jQuery

Haremos aquí un pequeño ejemplo para ver como funciona jquery. Para ello lo primero que hacemos es colocar un div en el código html de la página:

<div id="capa1"></div>

El div esta vacío, más tarde lo rellenaremos con javascript y jquery. Sin embargo para poder verlo, en la hoja de estilos pondremos el siguiente estilo:

#capa1 {width: 250px; height: 100px; border: 2px solid black; float: right;}

Nosotros hemos adaptado el estilo para poder verlo en esta misma página (a la derecha). Si tu sigues el ejemplo, puedes cambiar los estilos para que se adapten a tu ejemplo.

En el HTML pondremos también un botón para que al pulsarlo cambie el texto para poder contar los clicks que hemos hecho. El botón tendrá el siguiente código:

<input type="button" value="añadir texto" id="boton1" />

Veamos ahora el código javascript, junto con el jQuery. Este lo pondremos dentro de un script tipo <script type="text/javascript"> ... </script> . Tenemos pues el siguiente código:

$(document).ready(function(){ 
   num=0;
   $("#capa1").html('<p>aún no has pulsado</p>');
   $("#boton1").click(function(){
      num++;
      $("#capa1").html('<p>has pulsado '+num+' veces</p>');
   });
});

Hemos puesto el div aquí a la izquierda y a continuación ponemos el botón. Así podemos comprobar como funciona el código anterior.




Aunque explicaremos más detalladamente en páginas posteriores el funcionamiento de jQuery, vamos a ver el código que hemos usado:

Más adelante explicaremos con más detalle todo este tipo de funciones. Aquí lo que nos interesa es mostrar como usando jQuery, con unas pocas líneas de código hemos resuelto una situación en la que usando sólo javavascript nos habría costado bastantes más líneas y bastante más esfuerzo.






En la próxima página veremos cómo trabajar con el código creado para jQuery.

El código básico



Manual de jQuery

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com