jQuery es una biblioteca de JavaScript que permite interactuar con documentos estáticos HTML y dinámicos como PHP, manipular la estructura de los documentos DOM (Modelo de Objetos del Documento), manejar eventos, desarrollar animaciones y agregar interacción con la técnica AJAX a páginas web. Para hacer uso de la biblioteca jQuery necesitamos descargarla desde la página oficial o desde esta web la versión 1.12.1 Una vez descargado ocuparemos los archivos jquery.jsjquery.min.js

Mensaje emergente desde un formulario

Para realizar este ejercicio debemos crear primero un documento HTML con sus estructura básica.

<!DOCTYPE html>
<html lang="es">
<head>
<title>Titulo de la web</title>
<meta charset="utf-8" />
</head>
<body>
</body>
</html>

Dentro de body creamos un formulario sencillo para introducir el texto y enviar la variable mediante un botón:

<form>
      <label for="entrada">Introduce tu nombre</label>
      <input type="text" name="entrada" id="entrada" />
</form>
<button id="saluda">Saludar</button>

Vamos a añadir un script que realice lo siguiente:

//Construimos la función para el Saludo:

function saludo(persona){  //Creamos la función 'saludo' con un parámetro para recibir la variable de tipo string
alert('Hola '+ persona);   //Mostramos el mensaje con el que saludamos y le añadimos el nombre que hemos obtenido 
			}
			
jQuery('#saluda').click(function(){   	  //Al hacer clic sobre el botón de saludar ejecutamos la función
var nombre = jQuery('#entrada').val();   //Tomamos el valor que hemos escrito en su campo correspondiente
saludo(nombre);	         //Llamamos la función 'saludo' pasándole la variable que hemos capturado 
			});

El Script que añadiremos después del formulario quedará así:

<script type="text/javascript">
		jQuery(document).ready(function() {
					function saludo(persona){ 
     					alert('hola '+ persona); 
										}
		jQuery('#saluda').click(function(){ 
    				 var nombre = jQuery('#entrada').val(); 
    					 saludo(nombre); 
										});
		});
</script>

Para hacer uso de las bibliotecas jQuery debemos declararlas en el head:

<script src="jquery.js"></script>
<script src="jquery.min.js"></script>

La vista previa del formulario y el mensaje al dar clic quedará así:

formulario y mensaje basico con jquery

Free WordPress Themes, Free Android Games