4

Cómo crear una web con jQuery

Publicado por el .

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.


4 comentarios

  1.   ikki dijo

    muy wen tutorial

  2.   Snake dijo

    Sin duda es un excelente lenguaje el Jquery y simplifica muchisimas tareas

    Y lo de que este ya en los repositorios de Google lo hace mucho más sencillo ya que simplifica todo.

    Hay una infinidad tambien de tutoriales disponibles.

    Saludos!!

  3.   ikki dijo

    buen tutorial

  4.   camilo dijo

    tengo una duda,, quiero que con un boton de siguiente>>> pase a la otra pagina y cada ves q lo presione me pase a las sigueintes paginas con ese escript puedo hacer esto???

A inventar!