Muchos os preguntaréis ¿Qué es jQuery?. jQuery es una asociación de funciones javascript que nos facilitan la tarea de crear una página web utilizando éste lenguaje. En el artículo de hoy os explicaremos cómo utilizar jQuery para crear una web bastante profesional sin la necesidad de códigos complejos.

Cómo crear web con jQuery

El principal uso que daremos a jQuery será la paginación de la web, es decir, nos permitirá crear un sencillo menú que muestre el contenido que deseemos cuando pulsemos en alguno de sus links.

El código que utilizaremos es el siguiente:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<html>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />

<title>jQuery</title>

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js”></script>  //Importamos la librería jQuery del repositorio de Google

<script>

$(document).ready(function(){

$(“#contacto”).click(function(evento){  //Función que muestra el contenido del archivo contacto.html en la zona que marquemos como destino.

evento.preventDefault();

$(“#destino”).load(“contacto.html”);

});

$(“#trabajos”).click(function(evento){  //Función que muestra el contenido del archivo trabajos.html en la zona que marquemos como destino.

evento.preventDefault();

$(“#destino”).load(“trabajos.html”);

});

$(“#destino”).load(“inicio.html”);  //Carga el contenido de inicio.html en la zona de destino al cargar la web.

})

</script>

</head>

<body>

<center><a href=”#contacto” id=”contacto”>Contacto</a> | <a href=”#trabajos”>Trabajos</a></center>  //Crea el menu

<div></div>  //Crea la zona de destino

</body>

</html>

Este es el código básico que nos permitirá distribuir el contenido en nuestra página web, sin embargo, si le a esto le añadimos un bonito diseño conseguiremos resultados tan profesionales como el siguiente:

Ejemplo jQuery

También debéis saber que jQuery tiene innumerables funciones además de la que se expone en este artículo. Si deseáis informaros sobre ellas podéis acceder a su página oficial.

Recordad que podéis realizar cualquier consulta a través de nuestro foro.

¡Muchas gracias!

Something went wrong.

CUPÓN DTO ¡Únete a nuestra lista!

¡Únete a nuestra Newsletter y recibe un cupón DTO de bienvenida en toda la tienda!

Internet

4 Comentarios

A inventar!

A %d blogueros les gusta esto:

Send this to a friend