jquery – ProgramaciónExtrema.com https://programacionextrema.com Tutoriales de programación! Wed, 12 Sep 2018 17:52:42 +0000 es hourly 1 https://wordpress.org/?v=5.6.15 https://programacionextrema.com/wp-content/uploads/2015/10/cropped-icon-programacion-extrema-32x32.png jquery – ProgramaciónExtrema.com https://programacionextrema.com 32 32 Ocultar y mostrar un botón con Java Script y jQuery https://programacionextrema.com/2018/09/12/ocultar-y-mostrar-un-boton-con-java-script-y-jquery/ https://programacionextrema.com/2018/09/12/ocultar-y-mostrar-un-boton-con-java-script-y-jquery/#respond Wed, 12 Sep 2018 17:52:41 +0000 https://programacionextrema.com/?p=1321 Después de un largo tiempo vuelvo con un nuevo tutorial, puede ser bastante simple pero muy útil para aquellos que recién empiezan a programar. En esta oportunidad vamos a ver cómo ocultar y mostrar un botón con Java Script y jQuery. Esta misma funcionalidad también se puede aplicar con cualquier etiqueta HTML en caso de… Read More

La entrada Ocultar y mostrar un botón con Java Script y jQuery aparece primero en ProgramaciónExtrema.com.

]]> Después de un largo tiempo vuelvo con un nuevo tutorial, puede ser bastante simple pero muy útil para aquellos que recién empiezan a programar. En esta oportunidad vamos a ver cómo ocultar y mostrar un botón con Java Script y jQuery. Esta misma funcionalidad también se puede aplicar con cualquier etiqueta HTML en caso de ser necesario.

Para hacer esto es muy importante tener la librería de jQuery incluida en el código HTML, como lo mostraremos más adelante.

Cómo ocultar y mostrar un botón HTML con Java Script y jQuery

El código que publicaré a continuación lo que hace es ocultar o mostrar el botón con id «acción» con solamente presionar otros dos botones.

<html>
  <head>
    <title>Ocultar y mostrar un botón con Java Script y jQuery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  </head>
  <body>
    <button type="button" id="button">Acción</button>
    <button type="button" id="show">Mostrar botón acción</button>
    <button type="button" id="hide">Ocultar botón acción</button>
    <script>
      $(function(){
        $('#show').click(function(){
          $('#button').show();
        });
        $('#hide').click(function(){
	      $('#button').hide();
        });
      })
    </script>
  </body>
</html>

Ahora si se quiere simplificar la funcionalidad, se puede utilizar la función toggle de jQuery, que detecta automáticamente si el botón está oculto o no. En caso de estar oculto lo muestra y lo mismo en caso contrario.

<html>
  <head>
    <title>Ocultar y mostrar un botón con Java Script y jQuery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  </head>
  <body>
    <button type="button" id="button">Acción</button>
    <button type="button" id="show">Mostrar/Ocultar</button>
    <script>
      $(function(){
        $('#show').click(function(){
          $('#button').toggle();
        });
      })
    </script>
  </body>
</html>

Bueno gente, eso es todo por esta vez. La idea es que al finalizar el mini tutorial puedan ser capaces de oculta y mostrar etiquetas HTML con Java Script y jQuery. Ante cualquier inconveniente no duden en dejar un comentario.

La entrada Ocultar y mostrar un botón con Java Script y jQuery aparece primero en ProgramaciónExtrema.com.

]]> https://programacionextrema.com/2018/09/12/ocultar-y-mostrar-un-boton-con-java-script-y-jquery/feed/ 0 Cambiar el color de una etiqueta con jQuery https://programacionextrema.com/2018/03/10/cambiar-el-color-de-una-etiqueta-con-jquery/ https://programacionextrema.com/2018/03/10/cambiar-el-color-de-una-etiqueta-con-jquery/#comments Sat, 10 Mar 2018 19:48:30 +0000 http://programacionextrema.com/?p=1301 En esta oportunidad les voy a traer otro sencillo tutorial para que puedan aprender a cambiar el color de una etiqueta con jQuery y Java Script de forma dinámica, esta funcionalidad puede ser muy útil en diversos casos como por ejemplo cuando se quiere crear un botón que cambie de color cuando se presiona o… Read More

La entrada Cambiar el color de una etiqueta con jQuery aparece primero en ProgramaciónExtrema.com.

]]> En esta oportunidad les voy a traer otro sencillo tutorial para que puedan aprender a cambiar el color de una etiqueta con jQuery y Java Script de forma dinámica, esta funcionalidad puede ser muy útil en diversos casos como por ejemplo cuando se quiere crear un botón que cambie de color cuando se presiona o se ponga el cursor sobre él, ente otros posibles.

Cómo cambiar el color de una etiqueta o tag HTML con jQuery y Java Script

Antes de mostrar como realizar esta sencilla función es muy importante recordarles que deben importar la librería de jQuery, en el siguiente código la vamos a incluir directamente desde la nube pero ustedes lo pueden hacer descargando el archivo en sus computadoras.

Luego de que tengan configurado la librería de jQuery vamos a empezar a programar, como primer paso vamos a crear una etiqueta con la clase box, la cual va a tener un tamaño de 100×100 px, esto es muy importante ya que si la etiqueta no tiene un tamaño predefinido o no contiene nada (como puede ser un texto) no se va a mostrar el color de fondo.

Luego con jQuery y Java Script simplemente vamos a obtener la etiqueta para cambiar su color de fondo a rojo, modificando la propiedad CSS backgrand con la función CSS que proporciona jQuery.

<html>
  <head>
    <title>Cambiar el color de una etiqueta con jQuery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <style>
      .box {
        height: 100px;
        width: 100px;
      }
    </style>
  </head>
  <body>
    <div class="box">
    </div>
    <script>
      $(function(){
        $('.box').css('background', 'red');
      })
    </script>
  </body>
</html>

Al ejecutar el código anterior en su navegador vas a poder ver un cuadrado de color rojo, en caso de que quieras poner otro color simplemente debes cambiar el valor de la propiedad por otro.

Eso es todo por hoy, espero que les sea de gran utilidad este aporte, ante cualquier inconveniente no duden en dejar un mensaje.

La entrada Cambiar el color de una etiqueta con jQuery aparece primero en ProgramaciónExtrema.com.

]]> https://programacionextrema.com/2018/03/10/cambiar-el-color-de-una-etiqueta-con-jquery/feed/ 1 Cómo enviar un formulario con Java Script y jQuery https://programacionextrema.com/2017/09/28/como-enviar-un-formulario-con-java-script-y-jquery/ https://programacionextrema.com/2017/09/28/como-enviar-un-formulario-con-java-script-y-jquery/#respond Thu, 28 Sep 2017 19:51:03 +0000 http://programacionextrema.com/?p=1289 Java Script es un lenguaje muy poderoso, utilizado especialmente en el frontend para realizar páginas dinámicas que puedan brindar una mejor usabilidad a los usuarios, es por eso que en este breve tutorial vamos a ver como solucionar un problema muy frecuenta que se pueden encontrar los desarrolladores, el cual consiste en enviar un formulario… Read More

La entrada Cómo enviar un formulario con Java Script y jQuery aparece primero en ProgramaciónExtrema.com.

]]> Java Script es un lenguaje muy poderoso, utilizado especialmente en el frontend para realizar páginas dinámicas que puedan brindar una mejor usabilidad a los usuarios, es por eso que en este breve tutorial vamos a ver como solucionar un problema muy frecuenta que se pueden encontrar los desarrolladores, el cual consiste en enviar un formulario utilizando Java Script y jQuery.

Código para enviar un formulario con Java Scipt

Vamos a empezar con el código para enviar el formulario utilizando el lenguaje de programación Java Script, primero crearemos un formulario HTML muy sencillos, seguido de la función que va a realizar el envío.

<html>
  <head>
    <title>Enviar un formulario con Java Script y jQuery</title>
  </head>
  <body>
    <form id="form" action="page.php">
      <input type="text" name="texto">
      <button type="submit" onclick="submitform(); return false;">Enviar formulario</button>
    </form>
    <script>
      function submitform(){
      	alert("Formulario enviado desde Java Script");
      	document.getElementById('form').submit();
      }
    </script>
  </body>
</html>

Del código mencionado es muy importante ver que el botón del formulario se encarga de hacer el envío aprovechando a través onclick, además es muy importante no olvidarse de incluir el return false ya que eso evita que el formulario se envie automáticamente sin ejecutar la función submitform de Java Script, otra forma de evitar eso es usar un input de type button como botón.

Código para enviar un formulario con jQuery

La versión anterior fue realizada en Java Script sin ningún tipo de librerías, en esta ocasión realizamos la misma función pero utilizando jQuery.

<html>
  <head>
    <title>Enviar un formulario con Java Script y jQuery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  </head>
  <body>
    <form id="form" action="page.php">
      <input type="text" name="texto">
      <input id="button" type="button" value="Enviar formulario"/>
    </form>
    <script>
	$("#button").click(function(event){
	  alert("Formulario enviado con jQuery");
	  $('#form').submit();
	});
    </script>
  </body>
</html>

Esas son dos formas posibles para enviar un formulario, esto se puede utilizar mucho cuando se necesita realizar validaciones o simplemente cuando se requiere ejecutar algún proceso o verificación antes de hacer el envío de los datos.

Espero que les haya servido y antes cualquier inconveniente no duden en dejar un comentario.

La entrada Cómo enviar un formulario con Java Script y jQuery aparece primero en ProgramaciónExtrema.com.

]]> https://programacionextrema.com/2017/09/28/como-enviar-un-formulario-con-java-script-y-jquery/feed/ 0 Cómo limpiar un input con jQuery https://programacionextrema.com/2017/08/09/como-limpiar-un-input-con-jquery/ https://programacionextrema.com/2017/08/09/como-limpiar-un-input-con-jquery/#comments Wed, 09 Aug 2017 23:45:54 +0000 http://programacionextrema.com/?p=1280 Vuelvo despues de un tiempo con un simple tutorial de Java Script y HTML, en esta ocasión vamos a ver cómo limpiar un input con jQuery. Es importante mencionar que para seguir los pasos hay que utilizar la librería de jQuery, para este tutorial vamos a utilizar directamente la de googleapis. Cómo limpiar un input… Read More

La entrada Cómo limpiar un input con jQuery aparece primero en ProgramaciónExtrema.com.

]]> Vuelvo despues de un tiempo con un simple tutorial de Java Script y HTML, en esta ocasión vamos a ver cómo limpiar un input con jQuery. Es importante mencionar que para seguir los pasos hay que utilizar la librería de jQuery, para este tutorial vamos a utilizar directamente la de googleapis.

Cómo limpiar un input con jQuery y Java Script

Vamos a ver que el código es muy sencillo y se puede hacer de muchas formas diferente, antes de empezar vamos a definir un botón y un input con un valor, en este caso el valor va a ser «Hola Mundo!».

<input type="text" value="Hola Mundo!">
<button id="limpiar">Limpiar</button>

El botón al ser oprimido va a limpiar el input, para esto vamos a utilizar el evento click y la funcion val.

$(document).ready(function() {
  $('#limpiar').click(function() {
    $('input[type="text"]').val('');
  });
});

Si al ejemplo le agregamos varios input más, al oprimir el botón se limpiarían todos ya que se ha especificado eso en el evento click. Para especificar que input se desea limpiar se le pueden agregar un id o una clase, a continuación el ejemplo completo.

<!DOCTYPE html>
<html>
  <head>
    <title>Limpiar input con jQuery</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  </head>
  <body>
    <input class="hola-mundo-input" type="text" value="Hola Mundo!">
	<button id="limpiar">Limpiar</button>
    <script type="text/javascript">
		$(document).ready(function() {
			$('#limpiar').click(function() {
				$('.hola-mundo-input').val('');
			});
		});
    </script>
  </body>
</html>

Bueno, eso es todo, espero que les sirva este breve tutorial y ante cualquier inconveniente no duden en dejar un comentario.

La entrada Cómo limpiar un input con jQuery aparece primero en ProgramaciónExtrema.com.

]]> https://programacionextrema.com/2017/08/09/como-limpiar-un-input-con-jquery/feed/ 1 Cómo borrar una etiqueta div HTML con Java Script y jQuery https://programacionextrema.com/2017/05/01/como-borrar-una-etiqueta-div-html-con-java-script-y-jquery/ https://programacionextrema.com/2017/05/01/como-borrar-una-etiqueta-div-html-con-java-script-y-jquery/#respond Mon, 01 May 2017 18:24:23 +0000 http://programacionextrema.com/?p=1257 El desarrollo de sitios dinámicos en la actualidad se está utilizando mucho, debido a la gran usabilidad que le proporciona a los usuarios finales de las aplicaciones. Uno de los lenguajes que juega un papel fundamental en estos casos es Java Script junto a la librería jQuery. Hoy en este mini tutorial vamos a ver… Read More

La entrada Cómo borrar una etiqueta div HTML con Java Script y jQuery aparece primero en ProgramaciónExtrema.com.

]]> El desarrollo de sitios dinámicos en la actualidad se está utilizando mucho, debido a la gran usabilidad que le proporciona a los usuarios finales de las aplicaciones. Uno de los lenguajes que juega un papel fundamental en estos casos es Java Script junto a la librería jQuery. Hoy en este mini tutorial vamos a ver cómo eliminar o borrar una etiqueta div HTML con jQuery con un ejemplo muy sencillo y fácil de entender, lo que permitirá hacer sitios más dinámicos.

Cómo eliminar o borrar una etiqueta div HTML con Java Scirpt y jQuery

Para empezar a resolver este sencillo problema crearemos una porción de código HTML, el cual vamos a utilizar para eliminar un elemento div. 

<div id="borrar">
  <p>Eso es una prueba para <strong>borrar código HTML</strong>. Ofrecido por ProgramacionExtrema.com<p>
</div>

En el código anterior definimos un tag div con id «borrar», el cual utilizaremos para eliminar con la siguiente línea de jQuery.

$('#borrar').remove();

A continuación el código completo, en el cual utilizamos la función setTimeout que hace que después de 3 segundo de ejecutarlo elimine la etiqueta HTML.

<html>
  <head>
    <meta charset="utf-8">
    <title> Borrar HTML  con jQuery </title>
    <meta name="robots" content="noindex, nofollow">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script type="text/javascript" src="html2canvas.js"></script>
    <script type="text/javascript">
      $(function() {
        setTimeout(function(){
          $('#borrar').remove();
        }, 3000)
      });
    </script>
  </head>
  <body>
    <div id="borrar">
      <p>Eso es una prueba para <strong>borrar código HTML</strong>. Ofrecido por ProgramacionExtrema.com
      <p>
    </div>
  </body>
</html>

Eso es todo lo necesario para eliminar código HTML con Java Script, ante cualquier inconveniente no duden en dejar un comentario.

La entrada Cómo borrar una etiqueta div HTML con Java Script y jQuery aparece primero en ProgramaciónExtrema.com.

]]> https://programacionextrema.com/2017/05/01/como-borrar-una-etiqueta-div-html-con-java-script-y-jquery/feed/ 0 Hacer zoom a imágenes con jQuery (elevatezoom) https://programacionextrema.com/2015/12/23/hacer-zoom-a-imagenes-con-jquery-elevatezoom/ https://programacionextrema.com/2015/12/23/hacer-zoom-a-imagenes-con-jquery-elevatezoom/#respond Wed, 23 Dec 2015 00:32:12 +0000 http://programacionextrema.com/?p=1017 Hoy vamos a dedicar nuestro tutorial a explicar cómo hacer zoom a imágenes con jQuery, usando el plugin elevatezoom, el cual se lo pueden descargar desde su sitio oficial. Cómo hacer zoom a imágenes con jQuery Una vez que ya tenemos descargado el código fuente del plugin podemos proceder a programar nuestro sencillo programa. Como… Read More

La entrada Hacer zoom a imágenes con jQuery (elevatezoom) aparece primero en ProgramaciónExtrema.com.

]]> Hoy vamos a dedicar nuestro tutorial a explicar cómo hacer zoom a imágenes con jQuery, usando el plugin elevatezoom, el cual se lo pueden descargar desde su sitio oficial.

Cómo hacer zoom a imágenes con jQuery

Una vez que ya tenemos descargado el código fuente del plugin podemos proceder a programar nuestro sencillo programa.

Como primer paso vamos a necesitar una imagen con dos resoluciones distintas (una chica y otra grande, pero con medidas proporcionales), la de resolución más chica la vamos a utilizar para mostrarla por defecto, cuando no se haga zoom, mientras que la de resolución más grande la vamos a utilizar para cuando se quiera hacer zoom (esto lo vamos a indicar con la propiedad data-zoom-image).
Entonces en nuestro HTML vamos a incluir la etiqueta img:

<img id="zoom_01" src='images/small/image1.png' data-zoom-image="images/large/image1.jpg"/>

Luego simplemente con Java Script vamos a configurar nuestra imagen para que se le pueda hacer zoom con solamente apoyar el cursor en un sector de la imagen:

$('#zoom_01').elevateZoom({
  cursor: "crosshair",  // Para que se muestre una cruz al apoyar el cursor sobre la imagen
  zoomWindowFadeIn: 500, // El tiempo que tarda en mostrar el zoom al apoyar el cursor sobre la imagen
  zoomWindowFadeOut: 750 // El tiempo que tarda en desaparecer el zoom al sacar el cursor sobre la imagen
});

Si ejecutamos el código anterior en nuestros navegadores el resultado sería el siguiente:

Zoom con jQuery

Zoom con jQuery

A continuación les dejo el código completo:

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'/>
    <title>Hacer zoom a imágenes con jQuery (elevatezoom)</title>
    <script src='jquery-1.8.3.min.js'></script>
    <script src='jquery.elevatezoom.js'></script>
  </head>
  <body>
    <img id="zoom_01" src='images/small/image1.png' data-zoom-image="images/large/image1.jpg"/>
    <script>
      $('#zoom_01').elevateZoom({
        cursor: "crosshair",  
        zoomWindowFadeIn: 500, 
        zoomWindowFadeOut: 750 
      }); 
    </script>
  </body>
</html>

Bueno gente, eso es todo lo que se necesita para hacer zoom a imágenes con jQuery utilizando el plugin elevatezoom, espero que les sea de gran utilidad y si tienen algún problema no duden en enviar un mensaje.

La entrada Hacer zoom a imágenes con jQuery (elevatezoom) aparece primero en ProgramaciónExtrema.com.

]]> https://programacionextrema.com/2015/12/23/hacer-zoom-a-imagenes-con-jquery-elevatezoom/feed/ 0 Agregar texto a un div con jQuery https://programacionextrema.com/2015/11/22/agregar-texto-a-un-div-con-jquery/ https://programacionextrema.com/2015/11/22/agregar-texto-a-un-div-con-jquery/#respond Sun, 22 Nov 2015 03:31:28 +0000 http://programacionextrema.com/?p=696 En este tutorial aprenderemos las distintas formas de agregar texto a un div con jQuery, además incluiremos un ejemplo completo y muy sencillo. Antes de comenzar es requisito incluir la dependencia de la librería jQuery en nuestro HTML. ¿Cómo agregar texto a un div con jQuery? Esta tarea la podemos realizar con las siguientes funciones… Read More

La entrada Agregar texto a un div con jQuery aparece primero en ProgramaciónExtrema.com.

]]> En este tutorial aprenderemos las distintas formas de agregar texto a un div con jQuery, además incluiremos un ejemplo completo y muy sencillo.
Antes de comenzar es requisito incluir la dependencia de la librería jQuery en nuestro HTML.

¿Cómo agregar texto a un div con jQuery?

Esta tarea la podemos realizar con las siguientes funciones que nos ofrece jQuery:

.html() – Con esta función se pueden obtener y agregar textos con HTML.

.text() – Funciona igual que la función anterior pero solamente se pueden obtener y agregar textos.

.val() – Funciona solamente sobre un input para obtener y agregar textos.

.append() – Agrega al contenido existente texto con HTML.

En el siguiente ejemplo podemos ver como utilizar la funciones mencionadas:

<!DOCTYPE html>
<html>
  <head>
    <title>Agregar texto a un div con jQuery</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  </head>
  <body>
    <div id="html"></div>
    <div id="text"></div>
    <input id="val" type="text">
    <div id="append">Ejemplo con </div>
    <script>
      $(function() {
        $('#html').html('<strong>Ejemplo con html()</strong>');
        $('#text').text('Ejemplo con text()');
        $('#val').val('Ejemplo con val()');
        $('#append').append('append()');
      });
    </script>
  </body>
</html>

Espero que les sea de gran utilidad este sencillo tutorial en el cual se explica cómo agregar texto a un div con jQuery. Ante cualquier inconveniente no duden en dejar un comentario.

La entrada Agregar texto a un div con jQuery aparece primero en ProgramaciónExtrema.com.

]]> https://programacionextrema.com/2015/11/22/agregar-texto-a-un-div-con-jquery/feed/ 0 Efecto sliding con jQuery https://programacionextrema.com/2015/11/21/efecto-sliding-con-jquery/ https://programacionextrema.com/2015/11/21/efecto-sliding-con-jquery/#respond Sat, 21 Nov 2015 20:12:20 +0000 http://programacionextrema.com/?p=691 Anteriormente hemos visto cómo crear transiciones en CSS, hoy nos toca aprender a crear un efecto sliding con jQuery utilizando la función slideToggle. ¿Cómo crear un efecto sliding con jQuery? Para crear un efecto vamos a utilizar la función slideToggle. Esta función permite ocultar o mostrar un elemento mediante una animación dependiendo del estado en… Read More

La entrada Efecto sliding con jQuery aparece primero en ProgramaciónExtrema.com.

]]> Anteriormente hemos visto cómo crear transiciones en CSS, hoy nos toca aprender a crear un efecto sliding con jQuery utilizando la función slideToggle.

¿Cómo crear un efecto sliding con jQuery?

Para crear un efecto vamos a utilizar la función slideToggle. Esta función permite ocultar o mostrar un elemento mediante una animación dependiendo del estado en el que se encuentre. En el siguiente ejemplo vamos a ver como funciona esta característica de jQuery:

<!DOCTYPE html>
<html>
  <head>
    <title>Efecto sliding con jQuery</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <style>
      .cuadrado{
        width:200px;
        height: 200px;
        background: red;
      }
    </style>
  </head>
  <body>
    <div id="cuadrado" class="cuadrado"></div>
    <button type="button" onclick="efectoSliding()">Efecto sliding</button>
    <script>
      function efectoSliding(){
        $('#cuadrado').slideToggle();
      }
    </script>
  </body>
</html>

Al presionar el botón se va a ocultar o mostrar el cuadrado rojo con una animación dependiendo de su estado actual.

Esta funcionalidad permite ser configurada con varias opciones, en el siguiente ejemplo ser muestran las más destacadas:

$('#cuadrado').slideToggle({
  // Duración de la animacion en milisegundos
  duration: 2000, 
  // Función que se ejecuta cuando termina la animación
  complete: function(){  
    alert('Animación terminada.');
  },
  // Función que se ejecuta cuando se inicia la animación
  start: function(animation ){
    alert('La animación ha comenzado.');
  },
  // Función que se ejecuta cuando falla la animación
  fail: function(animation ){
    alert('Ha ocurrido un error.');
  }
});

Hemos llegado al final de este tutorial, espero que les sea de gran utilidad y ante cualquier problema no duden en dejar un comentario.

La entrada Efecto sliding con jQuery aparece primero en ProgramaciónExtrema.com.

]]> https://programacionextrema.com/2015/11/21/efecto-sliding-con-jquery/feed/ 0 Eliminar y agregar clases con jQuery https://programacionextrema.com/2015/11/21/eliminar-y-agregar-clases-con-jquery/ https://programacionextrema.com/2015/11/21/eliminar-y-agregar-clases-con-jquery/#respond Sat, 21 Nov 2015 17:12:22 +0000 http://programacionextrema.com/?p=680 En este tutorial aprenderemos a eliminar y agregar clases con jQuery utilizando las funciones addClass y removeClass. Esto nos puede beneficiar en muchas ocasiones, como por ejemplo cuando queremos manipular muchas propiedades CSS de una etiqueta. ¿Cómo eliminar y agregar clases con jQuery? Para realizar esto debemos incluir la librería de jQuery, en nuestro caso… Read More

La entrada Eliminar y agregar clases con jQuery aparece primero en ProgramaciónExtrema.com.

]]> En este tutorial aprenderemos a eliminar y agregar clases con jQuery utilizando las funciones addClass y removeClass. Esto nos puede beneficiar en muchas ocasiones, como por ejemplo cuando queremos manipular muchas propiedades CSS de una etiqueta.

¿Cómo eliminar y agregar clases con jQuery?

Para realizar esto debemos incluir la librería de jQuery, en nuestro caso vamos a utilizar las que nos ofrece google de manera online. Luego vamos a definir dos clases en CSS las cuales representan a dos cuadrados de distintos colores y tamaños que vamos utilizar con las funciones addClass y removeClass de jQuery como se muestra en el siguiente ejemplo:

<!DOCTYPE html>
<html>
  <head>
    <title>Eliminar y agregar clases con jQuery</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<style>
	  .cuadrado-rojo-chico{
	    width:200px;
	    height: 200px;
	    background: red;
	  }
	  .cuadrado-verde-grande{
	    width:400px;
	    height: 400px;
	    background: green;
	  }
	</style>
  </head>
  <body>
	<div id="cuadrado" class="cuadrado-rojo-chico"></div>
	<button type="button" onclick="cambiarRojoChico()">Rojo chico</button>
	<button type="button" onclick="cambiarVerdeGrande()">Verde grande</button>
	<script>
          function cambiarVerdeGrande(){
	    // Elimino la clase de color rojo y tamaño chico
	    $('#cuadrado').removeClass('cuadrado-rojo-chico');
		
	    //Agrego lla nueva clase de color verde y tamaño grande
	    $('#cuadrado').addClass('cuadrado-verde-grande');
	  }
	  
          function cambiarRojoChico(){
	    // Hago lo contrario que en el caso anterior
	    $('#cuadrado').removeClass('cuadrado-verde-grande');
	    $('#cuadrado').addClass('cuadrado-rojo-chico');
	  }
	</script>
  </body>
</html>

Simplemente al presionar los botones vamos a ver el resultado de eliminar y agregar una clase en jQuery, cambiando así el color y tamaño del cuadrado.

Bueno gente, hemos llegado al final de este tutorial en el cual se explica cómo eliminar y agregar clases con jQuery. Ante cualquier problema no duden en dejar un comentario.

La entrada Eliminar y agregar clases con jQuery aparece primero en ProgramaciónExtrema.com.

]]> https://programacionextrema.com/2015/11/21/eliminar-y-agregar-clases-con-jquery/feed/ 0 Agregar estilos CSS con jQuery https://programacionextrema.com/2015/11/12/agregar-estilos-css-con-jquery/ https://programacionextrema.com/2015/11/12/agregar-estilos-css-con-jquery/#respond Thu, 12 Nov 2015 00:01:39 +0000 http://programacionextrema.com/?p=564 Si nos encontramos desarrollando un sitio web bien dinámico es muy común tener que agregar estilos CSS con jQuery o Java Script sin librerías. Es por eso que en este tutorial aprenderemos a realizar dicha tarea un con un ejemplo muy sencillo. ¿Cómo agregar estilos CSS con jQuery? Antes de comenzar tenemos que incluir la… Read More

La entrada Agregar estilos CSS con jQuery aparece primero en ProgramaciónExtrema.com.

]]> Si nos encontramos desarrollando un sitio web bien dinámico es muy común tener que agregar estilos CSS con jQuery o Java Script sin librerías. Es por eso que en este tutorial aprenderemos a realizar dicha tarea un con un ejemplo muy sencillo.

¿Cómo agregar estilos CSS con jQuery?

Antes de comenzar tenemos que incluir la librería de jQuery en nuestro archivo de HTML. En nuestro caso vamos a cambiar el estilo de un cuadrado al oprimir distintos botones. La función principal de jQuery que utilizaremos para esta tarea es css() como podemos ver en el siguiente ejemplo:

<!DOCTYPE html>
<html>
  <head>
    <title>Superponer divs en HTML usando CSS</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<style>
	  #cuadrado{
	    background: red;
		width: 200px;
		height: 200px;
	  }
	</style>
  </head>
  <body>
    <div id="cuadrado">
	
	</div>
	<button onclick="cambiarColor();">Cambiar color</button>
	<button onclick="redondearBordes();">Redondear bordes</button>
	<button onclick="bordesNegros();">Bordes negros</button>
	<button onclick="agregarTransparencia();">Agregar transparencia</button>
  </body>
  <script>
	function cambiarColor(){
	  $('#cuadrado').css('background', 'blue');
	}
	function redondearBordes(){
	  $('#cuadrado').css('border-radius', '25px');
	}
	function bordesNegros(){
	  $('#cuadrado').css('border', '2px solid black');
	}
	function agregarTransparencia(){
	  $('#cuadrado').css('opacity', '0.4');
	}
  </script>
</html>

Al visitar la página que hemos creado y oprimir los distintos botones se van a ejecutar las funciones de Java Script que cambiarán la estética del cuadrado.

Bueno gente, hemos llegado al final de este breve tutorial para agregar estilos CSS con jQuery, espero que les sea de gran utilidad y como digo siempre ante cualquier problema pueden dejar un comentario.

La entrada Agregar estilos CSS con jQuery aparece primero en ProgramaciónExtrema.com.

]]> https://programacionextrema.com/2015/11/12/agregar-estilos-css-con-jquery/feed/ 0