Hay dos formas de añadirlo a nuestro proyecto:
Localmente en un archivo externo
Content Delivery Network (CDN-Hosted)La copia local es simplemente un archivo externo que se encontrara en la misma carpeta que nuestro documento HTML. Prácticamente se hace de la misma forma que una hoja de estilo CSS externa o un archivo JavaScript externo.
La versión CDN-Hosted digamos que el archivo esta alojado en algún servidor y simplemente haciendo referencia a ese archivo podremos añadir jQuery a nuestro proyecto.
Normalmente los sitios web utilizan una copia local, por el tema de la fluidez y carga de la web. Sin embargo para el desarrollo es aconsejable utilizar una version CDN-Hosted.
1. Añadir jQuery a nuestro proyecto
1.1 De forma local
Su descarga esta disponible a través de jquery.com. Simplemente tendremos que descargar la ultima versión (en este articulo se va a usar "jquery-1.10.2.min.js").
Una vez descargado bastara con colocarlo en la misma carpeta que se ubique el documento HTML.
Para añadirlo a nuestro proyecto utilizaremos el elemento <script> haciendo uso del atributo "src" indicando el nombre del archivo:
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
Normalmente esta referencia se coloca en la parte de la cabeza <head> del documento HTML.
1.2 CDN-Hosted
Es ideal para el desarrollo y al estar alojado en un servidor simplemente tendremos que hacer referencia mediante código. Para encontrar las diferentes versiones de jQuery alojadas en un servidor podemos visitar: CDN-Hosted.
Para añadirlo a nuestro proyecto se utiliza la misma formula que el ejemplo anterior pero en este caso en vez de especificar el archivo en el atributo "src", indicaremos el enlace donde esta alojada la versión de jQuery. Por ejemplo para hacer referencia a la versión que vamos a utilizar en este articulo usaremos la siguiente sintaxis:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"> </script>
2. Funcion "ready()"
Podríamos decir que jQuery utiliza esta función para poder trabajar con elementos HTML antes de que la pagina web sea cargada, a parte de iniciar nuestro código jQuery. De esta manera podremos modificar, eliminar, añadir cualquier cosa a nuestro documento.
Un ejemplo de uso seria el siguiente:
<!doctype html> <html> <head> <title>jQuery</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> </head> <body> <h1>Funcion ready()</h1> <script type="text/javascript"> $(document).ready(function() { alert("Hola"); }); </script> </body> </html>Observando el <script>, iniciamos nuestro codigo jQuery a traves del signo del dolar "$()". En los paréntesis hacemos referencia al objeto "document" indicando que trabajaremos con el documento HTML.
A esa referencia le aplicamos la función "ready()" y ya dentro de ese paréntesis podemos escribir algo de código jQuery. En este caso hemos creado una "función anónima" ya que no dispone de nombre identificativo y por lo tanto se ejecutará automáticamente.
Y para terminar simplemente hacemos que se muestre un diálogo de alerta.
3. Seleccionar elementos
Podemos seleccionar prácticamente cualquier cosa, desde un texto hasta código HTML o CSS. Simplemente tendremos que crear un selector y seguir dos pasos: seleccionar el área a modificar y trabajar con la zona seleccionada
Hay tres selectores primarios o básicos que se utilizan con mayor frecuencia y podríamos dividirlos:
3.1 Por id
Selector HTML:
<div id="miSelector"></div>Selector jQuery:
$("#miSelector")
3.1 Por clase
Selector HTML:
<div class="miSelector"></div>Selector jQuery:
$(".miSelector")
3.1 Por elemento
Selector jQuery:
$("div")
4. Trabajar con jQuery
Con todo lo que hemos visto hasta ahora ya podemos empezar a trabajar con jQuery. A continuación se van a exponer varias funciones básicas de jQuery que nos permitirán hacer cosas como añadir o modificar elementos HTML, editar atributos o incluso cambiar estilos de CSS.
4.1 Añadir HTML a una pagina
JQuery nos permite añadir código HTML a nuestro proyecto, es una practica no muy recomendada ya que a la larga puede ser un poco engorroso. Su uso mas común es a la hora de crear mensajes de error o incluso añadir pequeños elementos a nuestra web.
Vamos a ver un pequeño ejemplo en el que hemos creado una lista desordenada y hemos añadido otro ítem a la lista a través de jQuery:
<!doctype html> <html> <head> <title>jQuery</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> </head> <body> <h1>Agregar HTML</h1> <ul id="lista"> <li>Posicion 1</li> <li>Posicion 2</li> </ul> <script type="text/javascript"> $(document).ready(function() { $("#lista").append("<li>Posicion 3</li>"); }); </script> </body> </html>Observando el código jQuery podemos ver que estamos creando una función anónima en la que creamos un selector por id (de la lista desordenada) y añadimos otro ítem gracias a la función jQuery "append()". Indicando entre los paréntesis el código que vamos a añadir a nuestra web.
4.2 Modificar elementos HTML
Partiendo del ejemplo anterior si queremos modificar los ítem de la lista desordenada, jQuery nos proporciona su propio bucle para no tener que estar modificando uno a uno. El nombre de la función es: "each()".
Cogiendo el ejemplo anterior vamos a ver como modificar todos los ítem de la lista a través de la función "each()" que se repetirá por cada ítem de la lista, en este caso tres veces:
<!doctype html> <html> <head> <title>jQuery</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> </head> <body> <h1>Agregar HTML</h1> <ul id="lista"> <li>Posicion 1</li> <li>Posicion 2</li> </ul> <script type="text/javascript"> $(document).ready(function() { $("#lista").append("<li>Posicion 3</li>"); $("#lista li").each(function() { var texto = $(this).text().substr(9,1); $(this).text("Item " + texto); }); }); </script> </body> </html>
Continuamos añadiendo el tercer ítem de la lista y justo debajo creamos un selector especifico "$("#lista li")" que afectara a todos lo elementos <li> que estén dentro de la lista.
Le aplicamos el bucle "each()" y creamos una función anónima. Dentro de la nueva función primero creamos una variable "texto" en la que almacenaremos la ultima letra de un ítem de la lista. Para ello primero creamos un selector utilizando la palabra clave "this" que nos permite hacer referencia a esto, es decir, a un ítem de la lista. Utilizando la función "text()" recuperamos el texto de un ítem de la lista y ya con la función "substr()" cogemos un trozo del texto recuperado, en este caso vamos a coger la ultima letra del ítem que es un numero.
Continuamos creando otro selector "$(this)" para hacer referencia al ítem de la lista con el que estamos trabajando y queremos modificar. Le volvemos a aplicar la función "text()" pero en este caso especificamos entre paréntesis el nuevo texto del ítem.
Si lo ejecutamos en un navegador observaremos que se cambia el texto de los tres items de la lista.
Otra manera de coger un trozo de un texto o buscar algo en una cadena de texto podría ser utilizar la función "match()", si cogemos el ejemplo anterior y sustituimos la variable "texto" por esta otra:
var texto = $(this).text().match(/[\d]/);Va a hacer exactamente lo mismo. La función "match()" es mucho mas completa y compleja a la vez, seria muy recomendable buscar en Google algo de información sobre esta función. En el ejemplo le estamos diciendo a la función que busque un dígito de la cadena de texto o ítem de la lista.
4.3 Modificar atributos
Otra función que nos proporciona jQuery es "attr()", que nos permitirá recuperar o modificar un atributo de un elemento HTML. En los paréntesis indicaremos lo que necesitemos hacer con el atributo seleccionado.
Vamos a ver un ejemplo un poco mas elaborado en el que se pasados dos segundos de visita en la pagina web, se mostrara el atributo "href" de un enlace a una pagina web en un diálogo de alerta. Y automáticamente al cerrar el diálogo de alerta, se cambiara una imagen de nuestra web.
<!doctype html> <html> <head> <title>jQuery</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> </head> <body> <h1>Modificar atributos</h1> <img alt="cuadrado" id="imagen" src="cuadrado.jpg"> <br /> <br /> <a id="enlace" class="enlaceCSS" href="http://elbauldeandroid.blogspot.com.es/"> El Baul de Android</a> <script type="text/javascript"> function cambiarImagen() { alert($("#enlace").attr("href")); $("#imagen").attr("src","circulo.jpg"); $("#imagen").attr("alt","circulo"); } $(document).ready(function() { setTimeout(cambiarImagen, 2000); }); </script> </body> </html>Primero tendremos que aprender a leer un atributo para mostrarlo en un diálogo de alerta y para ello simple mene creamos un selector jQuery "$("#enalce")" y le aplicaremos la función "attr()" indicando entre los paréntesis el atributo que queremos recuperar.
Para modificar un atributo tendremos que indicar entre los paréntesis el atributo a modificar y el nuevo valor para el atributo, separados siempre por una coma.
Comentar que en el ejemplo estamos modificando el atributo "src" de una imagen para así poder cambiar el fondo de una imagen. En este caso habrá que tener en cuenta el atributo "alt" ya que la nueva imagen puede que no se ajuste a la descripción de ese atributo.
Explicando un poco el ejemplo en general, hemos creado una función llamada "cambiarImagen()" a la que le hemos aplicado un retardo de 2 segundos gracias a la función "setTimeout()"
4.4 Cambiar estilos CSS
Y ya para terminar el articulo, podremos cambiar cualquier estilo CSS de dos maneras posibles, modificando el atributo "class" a través de la función "attr" o aplicando directamente la clase de estilo con la función "addClass()"
También podremos eliminar cualquier estilo gracias a la función "removeClass()"
En el siguiente ejemplo vamos a aplicar un estilo CSS de las dos maneras posibles y a parte veremos como eliminarlo:
<!doctype html> <html> <head> <title>jQuery</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <style type="text/css"> .marcoOriginal { border: 2px dotted red; } .marcoNuevo { border: 2px dashed green; } </style> </head> <body> <h1>Cambiar estilos CSS</h1> <img alt="circulo" id="imagen" src="circulo.jpg"/> <script type="text/javascript"> function eliminarMarco() { alert("Se va a eliminar el marco"); $("#imagen").removeClass("marcoNuevo"); } function modificarMarco () { alert("Se va a aplicar un nuevo marco"); $("#imagen").attr("class", "marcoNuevo"); setTimeout(eliminarMarco, 1000); } $(document).ready(function() { $("#imagen").addClass("marcoOriginal"); setTimeout(modificarMarco, 1000); }); </script> </body> </html>Primero creamos dos selectores de estilo en nuestra hoja de estilo interna, situada en la parte de la cabeza <head> de nuestro documento HTML.
Si observamos el script jQuery podemos observar que lo primero que hacemos es aplicar el estilo "marcoOriginal" directamente a la imagen que se muestra en la web, para ello creamos el selector "$("#imagen") y le aplicamos la función "addClass()" indicando entre paréntesis el selector de estilo a aplicar.
Seguidamente volvemos a utilizar la función "setTimeout()" del ejemplo anterior aplicándole la función "modificarMarco". Esta función nos mostrara un diálogo de alerta y al aceptarlo nos cambiara el estilo de la imagen a través de la función "attr()" vista en el ejemplo anterior. De nuevo utilizamos la función "setTimeout()" para aplicar la ultima función del código.
La ultima función "eliminarMarco" simplemente nos muestra un diálogo de alerta y al aceptarlo eliminara el estilo CSS de la imagen gracias a la función "removeClass()". Entre los paréntesis simplemente indicamos el selector de estilo a eliminar.
No hay comentarios:
Publicar un comentario