Crear un alert con jQuery

//Crear un alert con jQuery

Ejemplo básico de como crear un alert con jquery. Crear un alert con jQuery, aprendiendo jquery paso a paso. Con este ejemplo aprendemos a crear un alert de la manera mas sencilla.

Crear un alert con jQuery

crear un alert con jquery
Para crear un alert con jQuery debemos previamente cargar la biblioteca de javaScript jQuery dentro del head con un script ( <script src=”https://code.jquery.com/jquery.js”></script> ) para poder utilizar todas las funcionalidades de jQuery. En este ejemplo hemos cargado también un archivo scripts.js en el cual implementaremos el código que ejecuta un alert.

En el caso de que no quisiésemos cargar un archivo .js externo se puede crear un alert directamente dentro del body utilizando etiquetas script, por ejemplo:

<script> alert (“Hola Mundo”); </script>

En el caso de utilizar un archivo externo con la carga de nuestros códigos jQuery tendremos que cargar dentro del head el archivo scpript.js ( <script src=”js/scripts.js”></script> ) en el cual estará todo nuestro código jQuery que vayamos implementando, en este caso solo utilizamos un alert.

ARCHIVO HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Alert</title>
<link rel="stylesheet" href="css/styles.css" />
<script src="https://code.jquery.com/jquery.js"></script>
<script src="js/scripts.js"></script>
</head>

<body>
<div class="content">
<h1>Alert</h1>                                  

<p>Al cargar la página, se ejecutará un alert con el texto "Hola Mundo".</p>

</div>
</body>
</html>

ARCHIVO CSS

/* CSS Document */

body{
	background:#81d742;
}
.content{
	width:1000px;
	margin-top:50px;
	min-height:600px;
	background:#fff;
	margin:0 auto;
	padding:20px;
}

ARCHIVO JQUERY

Usamos document ready como función que se ejecutará una vez cargada la web en el navegador.

// JavaScript Document

$(document).ready(function() {
    alert ("Hola Mundo"); 
});

Descargar alert con jquery

Escribe tu comentario

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

ACEPTAR
Aviso de cookies