Descargar ejemplo de ToolTip con CSS en español

Descargar ejemplo de ToolTip con CSS en español

para poder crear un ToolTip necesitamos dos apartados: El CSS y el HTML

si quieres puedes descargar el ejemplo completo de este tooltip para poder utilizarlo en tu web haciendo clic aquí

Descargar ToolTip con CSS

el apartado HTML es muy simple tenemos definido un div con una clase asignada tooltip y dentro de este div tenemos una etiqueta span que es la que aparecerá  y tiene asignada una clase que se llama tooltiptexto

<body>
<h1>Ejemplo de ToolTip</h1>
<div class="tooltip">Situate encima de mi
<span class="tooltiptexto">Hola cybernauta</span>
</div>

</body>

y en el apartado CSS tenemos definidas unas clases para el tooltip y para el tooltiptexto los cuales en principio están ocultos y tienen definido un color de texto, color de fondo, márgenes, etcétera

y al final del todo tenemos una clase para que cuando pase el cursor por encima del texto , pone visible el tooltip junto con el texto que hay dentro de la etiqueta span con la opacidad igual a 1

<!DOCTYPE html>
<html>
<style>
.tooltip {
 position: relative;
 display: inline-block;
 border-bottom: 1px dotted black;
}
.tooltip .tooltiptexto {
 visibility: hidden;
 width: 120px;
 background-color: #555;
 color: #fff;
 text-align: center;
 border-radius: 6px;
 padding: 5px 0;
 position: absolute;
 z-index: 1;
 bottom: 125%;
 left: 50%;
 margin-left: -60px;
 opacity: 0;
 transition: opacity 1s;
}
.tooltip .tooltiptexto::after {
 content: "";
 position: absolute;
 top: 100%;
 left: 50%;
 margin-left: -5px;
 border-width: 5px;
 border-style: solid;
 border-color: #555 transparent transparent transparent;
}
.tooltip:hover .tooltiptexto {
 visibility: visible;
 opacity: 1;
}
</style>

con esto has visto lo simple que es poner un tooltip en tu página web y solo utilizando estilos CSS recuerda que puedes descargar el código completo en el enlace que hay en la parte de arriba de esta entrada

Descargar ejemplo de ventana modal con CSS y JavaScript en español

Descargar ejemplo de ventana modal con CSS y JavaScript en español

para poder crear una ventana modal necesitamos tres apartados

el primero es definir los estilos CSS para el diseño de la ventana modal,

el siguiente apartado es el HTML en el que se define con qué elemento haremos que aparezca la ventana modal y también se define el diseño de la propia ventana modal

y para finalizar el tercer apartado en el cual ponemos la programación en Javascript

veamos que se tiene que escribir en cada uno de estos apartados y recuerda que si quieres descargar el código completo de esta ventana modal pulsa aquí ….

descargar ventana modal

en el apartado CSS tenemos definidas diferentes clases

la primera es la mascara qué será un div que ocupará toda la pantalla, será de color negro con un poco de opacidad para que nos oculte la página en sí cuando aparezca la ventana modal, tenemos definido que esté oculta , que este en la posición 0 y que ocupe el 100%

también tenemos el contenido qué es la pequeña cajita donde pondrás el texto que quieres que aparezca en la ventana modal

y después tenemos unas clases para el botón de cerrar la ventana modal

<!DOCTYPE html>
<html>
<head>
<style>
.mascara {
 display: none; 
 position: fixed; 
 z-index: 1; 
 padding-top: 100px; 
 left: 0;
 top: 0;
 width: 100%; 
 height: 100%; 
 overflow: auto; 
 background-color: rgb(0,0,0); 
 background-color: rgba(0,0,0,0.4); 
}
.contenido {
 background-color: #fefefe;
 margin: auto;
 padding: 20px;
 border: 1px solid #888;
 width: 80%;
}
.cerrar {
 color: #aaaaaa;
 float: right;
 font-size: 28px;
 font-weight: bold;
}
.cerrar:hover,
.cerrar:focus {
 color: #000;
 text-decoration: none;
 cursor: pointer;
}
</style>
</head>

en el apartado del HTML tenemos definido un botón en el que pulsaremos para que aparezca la ventana modal y la ventana modal en sí que consta de dos divs uno para la máscara y otro para el contenido

aquí es donde puedes personalizar que quieres que aparezca dentro de la ventana modal

<body>
<button id="Btn">Abrir ventana modal</button>
<div id="lamascara" class="mascara">
 <div class="contenido">
 <span class="cerrar">&times;</span>
 <p>Hola cybernauta ...</p>
 </div>
</div>

y para finalizar en el apartado de JavaScript tenemos definidos los diferentes eventos que queremos que ocurra

cuando hacemos clic en el botón queremos que se visualice la máscara que es la ventana modal

y cuándo hacemos  clic en el botón de cerrar queremos que se oculte la máscara es decir la ventana modal

<script>
var mascara = document.getElementById('lamascara');
var btn = document.getElementById("Btn");
var cerrar = document.getElementsByClassName("cerrar")[0];

btn.onclick = function() {
 mascara.style.display = "block";
}
cerrar.onclick = function() {
 mascara.style.display = "none";
}
window.onclick = function(event) {
 if (event.target == mascara) {
 mascara.style.display = "none";
 }
}
</script>
</body>
</html>

como ves es muy fácil crear una ventana modal utilizando solo CSS y JavaScript y recuerda que en la parte de arriba de esta entrada tienes un enlace para descargar el código completo y adaptarlo a tu página web

ejemplo de botón cargando animado con CSS en español

ejemplo de botón cargando animado con CSS en español

en este ejemplo te muestro cómo puedes hacer un botón de cargando animado es decir  se ejecute una pequeña animación para llamar la atención y todo esto utilizando solo estilos CSS

veamos cómo funciona:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.botoncargando {
background-color: #4CAF50; 
border: none; 
color: white; 
padding: 12px 24px; 
font-size: 16px; 
}

.fa {
margin-left: -12px;
margin-right: 8px;
}
</style>
</head>
<body>

<h2>Botón cargando animado</h2>

<button class="botoncargando">
<i class="fa fa-spinner fa-spin"></i>Cargando
</button>

</body>
</html>

como puedes ver en el código anterior en el apartado del Body simplemente tenemos un elemento de tipo button con una clase aplicada llamada botóncargando y después un elemento <i> con tres clases aplicadas cuya definición está en la hoja de estilos que tienes definida en la parte del head

y es en realidad la responsable del aspecto del iconito y de su animación el aspecto del botoncito lo tiene la clase fa-spinner y la animación lo tiene la clase fa-spin

si quieres ver más ejemplos de los diferentes iconos que tiene esta hoja de estilos pública te dejo el siguiente enlace

ejemplo de botón animado con CSS en español

ejemplo de botón animado con CSS en español

en este ejemplo te muestro cómo puedes hacer un botón animado es decir que cuando si podemos el cursor encima de él se ejecute una pequeña animación para llamar la atención y todo esto utilizando solo estilos CSS

veamos cómo funciona:

<!DOCTYPE html>
<html>
<head>
<style>
.boton {
border-radius: 4px;
background-color: #f4511e;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 20px;
width: 200px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}

.boton span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}

.boton span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}

.boton:hover span {
padding-right: 25px;
}

.boton:hover span:after {
opacity: 1;
right: 0;
}
</style>
</head>
<body>

<h2>Botón animado</h2>

<button class="boton"><span>Encima </span></button>

</body>
</html>

 

empezaremos la explicación por la parte de abajo en el apartado body de la página web en la que tenemos un botón con una clase llamada botón

como ves no me he matado mucho 😉

dentro de este botón tenemos el texto que está envuelto en la etiqueta span para poder identificarlo y animarlo cuando situemos el cursor encima

y ahora vamos a hablar de los estilos CSS que es dónde se diseña el botón animado y es dónde se define qué propiedades de los estilos quieres animar

primero definimos la clase boton la cual tiene el aspecto básico de nuestro botón … el borde el fondo los colores etcétera

y después viene la definición del texto que está dentro del botón, recuerda que está puesto con la etiqueta span para que podamos animar este texto

también tenemos una clase para indicar el pequeño icono que aparecerá después del texto y si te fijas la opacidad es 0 es decir en principio no lo veremos

y para que se ejecute la animación del botón tenemos dos clases más :

una para el botón en si el cual pondremos un poco de padding a la derecha para desplazar el texto y en la etiqueta span hacemos que el pequeño iconito se visualice poniendo la opacidad en 1

cómo has visto en este pequeño ejemplo es muy fácil tener botones animados en nuestra página web haciendo que llame más la atención al visitante

ejemplo de buscador animado con CSS en español

ejemplo de buscador animado con CSS en español

en el siguiente código te muestro como puedes crear un buscador animado para tu web es decir un buscador que al hacer clic sobre él se haga grande es decir que cuando el coja el foco se haga grande y al salir de él cuando pierde el foco vuelva a su tamaño normal y todo ello utilizando solamente estilos CSS

veamos cómo funciona:

<html>
<head>
<style> 
input[type=text] {
 width: 130px;
 box-sizing: border-box;
 border: 2px solid #ccc;
 border-radius: 4px;
 font-size: 16px;
 background-color: white;
 background-image: url('lupa.png');
 background-position: 10px 10px; 
 background-repeat: no-repeat;
 padding: 12px 20px 12px 40px;
 -webkit-transition: width 0.4s ease-in-out;
 transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
 width: 100%;
}
</style>
</head>
<body>
<p>Buscador animado:</p>
<form>
 <input type="text" name="buscador" placeholder="Buscar..">
</form>
</body>
</html>

en lo primero que te has de fijar es en la parte de abajo en el apartado del Body en el cual tenemos definido un formulario y dentro tenemos un input de tipo text al cual hemos llamado buscador

y en la parte de arriba en el head tenemos la definición de estilos CSS en el cual tenemos dos clases creadas para los elementos input de tipo text

la primera es la que define el diseño por omisión de nuestro buscador un tamaño de 130. un borde alrededor , una tipografía, unos colores ….

fíjate también que tenemos una imagen de fondo que se llama lupa. PNG

y para finalizar y lo más importante es la definición de la transición es decir la animación la cual hemos indicado que anime la anchura

y para que se ejecute la animación tenemos creada la segunda clase la cual se ejecutará cuando el campo de texto reciba el foco y le hemos dicho que la anchura sea del 100%

con esto ya tienes un buscador animado para tu de forma muy simple solo utilizando estilos CSS

ejemplo para obtener fecha al hacer clic en un Datepicker con JQUERY en español

ejemplo para obtener fecha al hacer click en un Datepicker con JQUERY en español

ejemplo para obtener fecha al hacer click en un Datepicker con JQUERY en español

ejemplo para obtener fecha al hacer clic en un Datepicker con JQUERY en español

para mostrar un calendario en tu página web puedes utilizar el objeto DatePicker de jQuery el cual te mostrará un calendario perfectamente configurado y si quieres obtener la fecha seleccionada al hacer clic tienes que utilizar el método onSelect()

en el siguiente ejemplo te muestro el código necesario para mostrar el calendario y programar lo necesario para que el hacer clic nos aparezca una ventana con la fecha seleccionada y así poder obtener dicha fecha

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>Mostrar calendario con jQuery UI Datepicker</title>
 <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
 <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
 <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
 <script>
 $(function() {
 $("#calendario").datepicker({ 
 onSelect: function(date) { 
 alert(date);
 } 
 });
 });
 </script>
</head>
<body>
Selecciona una fecha: <div id="calendario"></div>
</body>
</html>

en el apartado del Body tienes que crear un div identificado con un nombre, en nuestro caso calendario

y en la parte del head es dónde programaremos que se muestre el calendario y que al hacer clic nos muestre la fecha

lo que tienes que hacer primero es una referencia a la hoja de estilos de jQuery UI la cual será la responsable del diseño del calendario

también tienes que hacer una referencia a la librería de jQuery

y la última referencia es a la librería de jQuery UI

UI significa User Interface

una vez escritas estas referencias ya podemos escribir el código para que se muestre el calendario

crearemos una función anónima indicándole donde se tiene que mostrar el calendario

utilizar el método DatePicker con su método onselect y aquí es donde programamos un alert con la fecha o date correspondiente que me pasa la función

quieres más información sobre datepicker de jQuery te dejo el siguiente enlace

 

ejemplo de calendario con Datepicker y JQUERY en español

ejemplo de calendario con Datepicker  y JQUERY en español

ejemplo de calendario con Datepicker y JQUERY en español

ejemplo de calendario con Datepicker  y JQUERY en español

para mostrar un calendario en tu página web te recomiendo que utilices el objeto DatePicker de jQuery el cual te facilita mucho el diseño de un calendario

en el siguiente ejemplo te muestro cómo puedes insertar un calendario en tu página web

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>Mostrar calendario con jQuery UI Datepicker</title>
 <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
 <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
 <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
 <script>
 $( function() {
 $( "#calendario" ).datepicker();
 } );
 </script>
</head>
<body>
Selecciona una fecha: <div id="calendario"></div>
</body>
</html>

como puedes ver en el código anterior, aparte de una referencia a la librería estándar de jQuery tienes que hacer una referencia a la hoja de estilos JQuery UI y una referencia a la librería de jQuery-UI

UI significa User Interface

una vez escritas estas referencias tienes que poner en el apartado body el elemento que contendrá el calendario y en este caso hemos utilizado un div al cual he llamado calendario y entonces en la parte de programación has de crear una función anónima en la que ejecutas el método datepicker a este objeto

y así de fácil es insertar un calendario en tu página web usando jQuery

si quieres que el calendario no se muestre directamente sino que primero muestre un campo de texto y al hacer clic sobre él se abra el calendario lo único que tienes que hacer es en lugar de crear en el body un div tienes que ponerlo en un input

<input type="text" id="calendario">

si quieres más información sobre datepicker de jQuery te dejo el siguiente enlace

 

donde descargar JQUERY

donde descargar JQUERY

donde descargar JQUERY

ejemplo de donde descargar JQUERY

para poder utilizar la librería de jQuery tienes que crear una instancia de esta librería en el código de tu página web y para poder hacer esto tienes dos opciones:

1ª – descargar la librería a tu ordenador y escribir una referencia a esta librería dentro del código de la página web

2ª- escribir directamente en el código una referencia de la librería que tiene alojada Google

si optas por la primera opción de descargar la librería de jQuery a tu ordenador, solo tienes que acceder al siguiente enlace y descargarlo a tu ordenador, yo te recomendaría crear una carpeta por ejemplo llamada JS y poner el fichero descargado en esta carpeta

y para poder utilizar la librería de jQuery descargadas en el código tienes que hacer una referencia a esta librería como te muestro en el siguiente ejemplo

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

y si optas por la segunda opción en la que no descargas la librería sino que haces una referencia directamente a Google tienes que escribir el siguiente código en tu página web

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

esta referencia a la librería de jQuery se suele poner en el apartado heat de tu página web ya partir de aquí ya puedes utilizar la librería jQuery y sus opciones

ejemplo para cambiar el valor de un input con JQUERY en español

ejemplo para cambiar el valor de un input con JQUERY en español

ejemplo para cambiar el valor de un input con JQUERY en español

ejemplo para cambiar el valor de un input con JQUERY en español

en el siguiente ejemplo te muestro cómo se puede cambiar el valor de un input o campo de texto al hacer clic sobre un botón

veamos como funciona:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
</head>
<body>
<button>Pulsame</button><br>
Campo de texto a cambiar: <input type="text" id="cambiame">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$("button").on("click", function(){
 $("#cambiame").val("videotutoriales.es");
});
</script>
</body>
</html>

como puedes ver en el código del ejemplo tenemos un campo de texto o input identificado como “cambiame” y encima de él tenemos un botón que al hacer clic sobre él escribe o cambia el valor del campo de texto

esto lo conseguimos con el método val() de jQuery indicándole entre paréntesis que queremos que ponga en el campo de texto o input.

si quieres más información sobre el método val() de jQuery te dejo el siguiente enlace

 

ejemplo para desactivar eventos con JQUERY en español

ejemplo para desactivar eventos con JQUERY en español

ejemplo para desactivar eventos con JQUERY en español

ejemplo para desactivar eventos con JQUERY en español

muchas veces te puede interesar quitar o desactivar un evento que has asignado previamente a un elemento utilizando la librería jQuery y para ello tenemos el método off() que hace lo contrario que el método on() con el que asignas el evento.

veamos el siguiente ejemplo:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
</head>
<body>
<button id="caja_producto">Pulsame</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$("#caja_producto").on("click", function(){
 alert("No aparecere de nuevo");
 $( "#caja_producto" ).off( "click" );
});
</script>
</body>
</html>

como puedes ver en el ejemplo del código anterior tenemos un botón llamado caja producto al cual le hemos asignado el evento Click por medio del método on().

y vemos que el hacer clic nos aparece una ventana o alert en el que nos indica que NO aparecerá de nuevo si realizamos otro clic sobre él, y esto lo conseguimos utilizando el método off() y entre paréntesis el evento que quieres desactivar

si quieres más información sobre el método off() de jQuery te dejo el siguiente enlace

 

ejemplo de obtener valor de un atributo de un elemento con JQUERY en español

ejemplo de obtener atributo de un elemento con JQUERY en español

ejemplo de obtener atributo de un elemento con JQUERY en español

ejemplo de obtener atributo de un elemento con JQUERY

muchas veces necesitarás obtener el valor de un atributo que tenga un elemento en tu página web y para ello la librería jQuery nos ofrece el método attr() y entre paréntesis le tienes que indicar el atributo del cual quieres obtener su valor

veamos el siguiente ejemplo:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
 $("button").click(function(){
 alert($("#enlace").attr("href"));
 });
});
</script>
</head>
<body>
<p><a href="http://www.videotutoriales.es" id="enlace">videotutoriales.es</a></p>
<button>Mostrar valor del atributo HREF</button>
</body>
</html>

en nuestro ejemplo tenemos un vínculo llamado enlace y tenemos un botón

y cuando hacemos clic sobre él nos aparecerá una ventana con el valor del atributo href de nuestro vínculo.

si quieres más información sobre el método attr de jQuery te dejo el siguiente enlace

 

ejemplo de obtener contenido campo de texto o input con JQUERY en español

ejemplo de obtener contenido campo de texto con JQUERY en español

ejemplo de obtener contenido campo de texto con JQUERY en español

ejemplo de obtener contenido campo de texto o input  con JQUERY

para poder obtener el contenido de un campo de texto o input de un formulario utilizando la librería jQuery tenemos el método val()

para poder validar un formulario normalmente lo primero que tenemos que hacer es obtener el contenido que hay en los campos de texto por ejemplo y para poder hacerlo utilizando la librería jQuery utilizaremos el método Val()

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
 $("button").click(function(){
 alert($("#nombre").val());
 });
});
</script>
</head>
<body>
<p>Nombre: <input type="text" id="nombre" value="videotutoriales.es"></p>
<button>pulsame</button>
</body>
</html>

en este ejemplo tenemos un campo de texto llamado nombre y un botón.

al hacer clic sobre el botón nos aparecerá una ventana con el texto que se ha obtenido del campo de texto nombre en el que puedes escribir tu nombre por ejemplo.

en la parte de programación asociamos el evento click al botón y le indicamos que cuando se ha pulsado nos muestre un alert con el valor del campo de texto.

así de fácil es obtener los datos que tengan los campos o inputs de nuestros formularios utilizando a la librería jQuery

si quieres más información sobre el método val() de jQuery te dejo el siguiente enlace

ejemplo de obtener contenido div con JQUERY en español

ejemplo de obtener contenido div con JQUERY en español

ejemplo de obtener contenido div con JQUERY en español

ejemplo de obtener contenido div con JQUERY

para poder obtener el contenido de un div utilizando la librería jQuery tenemos dos métodos:

.text() – asignar o devuelve el texto contenido en el elemento seleccionado

.html() –  asignar o devuelve código contenido en el elemento seleccionado

la diferencia entre estos dos métodos es que el primero solo devuelve el texto en cambio el segundo devuelve el texto con su contenido o código HTML

<!DOCTYPE html>
 <html>
 <head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 <script>
 $(document).ready(function(){
 $("#btn1").click(function(){
 alert($("#texto").text());
 });
 $("#btn2").click(function(){
 alert($("#texto").html());
 });
 });
 </script>
 </head>
 <body>
<div id="texto">Este texto <b>esta en negrita</b></div>
<button id="btn1">Solo Texto</button>
 <button id="btn2">HTML</button>
</body>
 </html>

como puedes ver en el ejemplo anterior en el apartado del body tenemos creado un dip llamado texto y dos botones btn1 y btn2

y en la parte de arriba, en el encabezado, tenemos la programación de jQuery, primero una referencia a la librería jQuery y después dentro del evento ready tenemos asignados los eventos click al btn1 y btn2.

en el primer botón hemos utilizado el método text y en el segundo botón hemos utilizado el método HTML y si lo ejecutas podrás ver la diferencia ya que al pulsar en el primero solo devuelve el texto sin las etiquetas HTML y si pulsas en el segundo te devuelve todo incluidas las etiquetas html en este caso un texto en negrita es decir la etiqueta <b>

si quieres profundizar más en estos dos métodos te dejo los siguientes enlaces para el método text() y para el método html()

ejemplo de recorrer elementos de una clase con JQUERY en español

ejemplo de recorrer elementos de una clase con JQUERY en español

ejemplo de recorrer elementos de una clase con JQUERY en español

ejemplos de recorrer elementos de una clase en jquery

muchas veces necesitarás realizar la misma acción a muchos elementos que son del mismo tipo o de la misma clase para ello utilizaremos el método each() el cual te permite recorrer todos los elementos que pertenecen a la clase indicada.

y para que veas cómo funciona te dejo el siguiente ejemplo en el cual tenemos una lista desordenada con diferentes elementos o items y en la parte de programación le indicamos que realice un alert en cada uno de estos elementos indicándonos su indice y el texto que pone en él

 

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$( "li" ).each(function( index ) {
alert( index + ": " + $( this ).text() );
});
});
</script>
</head>
<body>
<ul>
<li>JQUERY</li>
<li>PHP</li>
<li>AJAX</li>
</ul>
</body>
</html>

de esta manera no importa cuántos elementos tenga la lista desordenada jQuery recorrer a cada uno de estos elementos puesto que son de la misma clase y ejecutará en este caso un alert con su contenido

 

ejemplo de mostrar ocultar div con el mismo botón en JQUERY en español

ejemplo de mostrar ocultar div con el mismo botón en JQUERY en español

ejemplo de mostrar ocultar div con el mismo botón en JQUERY en español

ejemplos de mostrar ocultar un div con el mismo botón en jquery

en jQuery puedes utilizar el método Show() para mostrar un elemento y el método hide() para ocultarlo,

pero si lo que quieres es un botón que sea como un conmutador, es decir, que al pulsarlo oculte un elemento y al volver a pulsar sobre el lo muestre utiliza el siguiente método toggle() que como te comento puede mostrar u ocultar un elemento haciendo click sobre un botón

 

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
 $("#cambia").click(function(){
 $("#texto").toggle(1000);
 });
});
</script>
</head>
<body>
<button id="cambia">Cambia visualización</button>
<div id="texto">Pulsa en el botón para ocultar o mostrar este texto.</div>
</body>
</html>

como puedes ver en el siguiente ejemplo en el apartado del Body tenemos un botón llamado cambia y un div llamado texto

y en la parte de programación tenemos una referencia a la librería de jQuery y a continuación utilizamos el evento Click del botón para indicar que cuando hagamos clic en él, conmute la visualización del div llamado texto utilizando el método toggle() y poniéndole 1000 como parámetro para indicar lo que lo haga en un segundo.

asociar varios eventos a un elemento con jquery en español

ejemplos de asociar varios eventos a un elemento con jquery en español

ejemplos de asociar varios eventos a un elemento con jquery en español

ejemplo de asociar varios eventos a un elemento con jquery en español

normalmente asociamos los eventos a los elementos que ya tenemos en nuestra página web una vez está cargada y esto lo hacemos con el evento ready del documento como supongo ya conoces, pero para que esto funcione estos elementos deben estar previamente cargados y no cargados dinamicamente

con el método on() podemos asociar uno o más eventos al mismo elemento o selector .

como puedes ver en el siguiente ejemplo en el que cambiamos el aspecto del párrafo cuando situamos el ratón encima o cuando sacamos el ratón de esta encima o cuando hacemos clic sobre él

$("p").on({
    mouseenter: function(){
        $(this).css("background-color", "lightgray");
    }, 
    mouseleave: function(){
        $(this).css("background-color", "lightblue");
    }, 
    click: function(){
        $(this).css("background-color", "yellow");
    } 
});

 

Ejemplos del uso de eventos con jquery en español

Ejemplos del uso de eventos con jquery en español

Ejemplos del uso de eventos con jquery en español

Ejemplos del uso de eventos con jquery en español

los eventos son la respuesta a las diferentes acciones que puede realizar un visitante en nuestra página web es decir cuando mueve el cursor o ratón por encima de un elemento o cuando selecciona algo de un formulario o cuando hace  click a un elemento, todas estas acciones son lo que llamamos eventos

el término fired o disparar es normalmente usado con eventos, como por ejemplo cuando presionamos una tecla del teclado se dispara el evento keyPress

la sintaxis básica del evento es indicar primero el selector o a quién queremos asociar un evento y después qué evento queremos asociarle como puedes ver en el siguiente código se asigna el evento Click a la etiqueta p de párrafo

$("p").click(function(){
  // acción que queremos ejecutar!!
});

Vamos a ver otros eventos útiles ….

$(document).ready()

el evento ready del documento se suele utilizar para crear todas las funciones o definición de funciones que queremos que se carguen cuando la carga de la página a finalizado asegurándonos así que se asignan bien a todos los elementos

$("p").click(function(){
    $(this).hide();
});

el evento Click se dispara cuando hacemos clic con el ratón en el elemento indicado en el selector en este caso la P de párrafo.

$("p").dblclick(function(){
    $(this).hide();
});

el evento doble click se dispara cuando hacemos dos clicks con el ratón en el elemento indicado

$("#p1").mouseenter(function(){
    alert("Entras en p1!");
});

el evento MouseEnter se dispara cuando situamos el puntero ratón encima del elemento

$("#p1").mouseenter(function(){
    alert("Sales de p1!");
});

el evento MouseLeave se ejecuta cuando sacamos el puntero o ratón de un elemento es decir lo contrario que la anterior

$("#p1").hover(function(){
    alert("Entras en p1!");
},
function(){
    alert("Sales de p1!");
});

el evento hover utiliza dos funciones y es una combinación del evento MouseEnter MouseLeave la primera función se ejecuta cuando entramos en el elemento y la segunda cuando salimos
como puedes ver la sintaxis es la misma para todos lo único que tienes que hacer es indicar a quién le quieres asociar el evento y en la función la acción que quieres realizar sobre este elemento cuando se dispare elemento definido

estos no son los únicos eventos de los que disponemos en jQuery si quieres ver un listado de todos los eventos aquí te dejo un enlace

asociar eventos a elementos creados dinámicamente con jquery

ejemplos de ejemplo de asociar eventos a elementos creados dinámicamente con jquery

ejemplos de ejemplo de asociar eventos a elementos creados dinámicamente con jquery

ejemplos para asociar eventos a elementos creados dinámicamente con jquery

normalmente asociamos los eventos a los elementos que ya tenemos en nuestra página web una vez está cargada y esto lo hacemos con el evento ready del documento como supongo ya conoces, pero para que esto funcione estos elementos deben estar previamente cargados y no cargados dinamicamente

Para solucionar esto, tenemos dos formas:

1ª forma …. función   on()

la función on() NO asocia el evento a los elementos con clase producto,  sino que asocia el código al elemento caja_productos de forma que cuando el evento se dispara y se propaga hasta éste, comprueba si el elemento objetivo tiene clase producto y, en caso afirmativo, dispara el evento sobre él

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>

</head>

<body>
<div id="caja_producto">
<p class="producto">Añadir otro</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$("#caja_producto").on("click", ".producto", function(){
$(this).after("<p class='producto'>Añadir otro otra vez</p>");
});
</script>
</body>
</html>

2ª forma … creando una función nuestra:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>

</head>

<body>
<div id="caja_producto">
<p class="producto1" onClick="nueva_linea(1);">Añadir otro</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
function nueva_linea(cual){
var nuevo=cual+1;
var elemento_nuevo="producto"+nuevo;
var elemento=".producto"+cual;
$(elemento).after("<p class='"+elemento_nuevo+"' onClick='nueva_linea("+nuevo+");'>Añadir otro otra vez</p>");
}
</script>
</body>
</html>

y qué forma es mejor para poder asociar bien los eventos a los elementos que se crean dinamicamente ….

pues yo te recomiendo la primera opción pero no siempre tenemos la jerarquía necesaria en el DOM para que sea funcional y por eso te he mostrado el código de la segunda opción para que veas una forma alternativa ya que esta opción no es la más ortodoxa pero si funciona siempre puesto que quién llama a la función es directamente el elemento creado dinamicamente con jQuery

si quieres más información te recomiendo el siguiente enlace

uso de diferentes selectores con jquery con ejemplos

ejemplos de uso de diferentes selectores con jquery

ejemplos de uso de diferentes selectores con jquery

ejemplos del uso de diferentes selectores con jquery

los selectores son una de las partes más importantes de la librería de jQuery, son los que nos permiten seleccionar elementos de nuestra página para poder realizar acciones sobre ellos.

tenemos diferentes selectores y los utilizaremos dependiendo de a quién le queremos aplicar una acción

$("*").hide();

con el asterisco seleccionas todos los elementos de la página

$("this").hide();

con this seleccionas el elemento actual

$("p.producto").hide();

seleccionas todos los elementos parrafo de la página con la clase .producto

$("p:first").hide();

seleccionas solo el primer  parrafo de la página

$("ul li:first").hide();

seleccionar el primer elemento el <li> del primer grupo <ul>

$("ul li:first-child").hide();

seleccionar el primer elemento el <li> de cada grupo <ul>

$("[href]").hide();

todos los elementos con el atributo href

$("a[target='_blank']").hide();

todos los elementos <a> con el atributo target igual a _blank

$("a[target!='_blank']']").hide();

todos los elementos <a> con el atributo target NO sea igual a _blank

como puedes ver por medio del selector tenemos muchas formas de seleccionar los elementos de nuestra página web

ejemplo del código de document ready con jquery

ejemplos de código de document ready con jquery

ejemplos de código de document ready con jquery

ejemplos de código de document ready con jquery

la sintaxis básica para utilizar jQuery en nuestro documento es Primero enlazar la librería de jQuery de Google y entonces ya podemos hacer uso de ella.

jQuery nos ayuda a seleccionar un elemento o selector de nuestra página, y realizar acciones sobre el.

Para ello empezamos con el símbolo $ y entre paréntesis el elemento al cual le queremos realizar un cambio y después un método o acción

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$("elemento").accion();
</script>
</head>
<body>
</body>
</html>

para que el código de jQuery funcione bien en nuestra página tenemos dos opciones:

la primera sería poner el código al final del documento para asegurarnos que se ha cargado el elemento o selector antes de ejecutar una acción sobre el .

y la segunda opción es poner el código en el apartado Head de nuestro documento y utilizar el evento ready del documento como te muestro a continuación

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").hide();
});
</script>
</head>
<body>
<p>videotutoriales.es</p>
<p>Otro párrafo</p>
</body>
</html>

en el código anterior tenemos en el apartado head una referencia a la librería jQuery y después utilizamos el evento ready del documento para indicar que cuando se cargue la página o el documento esté cargado oculte todos los elementos que tengan la etiqueta HTML P de párrafo.

en conclusión es una buena costumbre utilizar el evento ready del documento para asegurarnos que todos los elementos estén cargados en la página antes de realizar una acción sobre ellos como por ejemplo ocultarlos.