10 snippets en jQuery que todo desarrollador web debería saber
jQuery es usado por muchísimas páginas web. Es una de las librerías más populares de Javascript, y nos permite modificar el DOM de forma muy sencilla.
Hoy os vamos a traer 10 snippets para jQuery que suelen utilizarse con bastante frecuencia, ya seas un novato o todo un gurú.
1) Botón «Ir arriba»
$('a.top').click(function(){ $(document.body).animate({scrollTop : 0},800); return false; });
El enlace HTML:
<a class=”top” href=”#”>Back to top</a>
Puedes ver una entrada detallada sobre cómo crear un botón para ir arriba con jQuery.
2) Comprobar que las imágenes se han cargado correctamente
$(‘img’).load(function() { console.log(‘imagen cargada correctamente’); });
A veces es necesario comprobar si las imágenes se han cargado correctamente para continuar con algún script, con este pequeño fragmento de código lograremos hacer esto de forma muy sencilla.
Puedes hacer lo mismo para una imagen en concreto remplazando el tag «img» por un ID o Clase.
3) Remplazar imágenes rotas automáticamente
$('img').error(function(){ $(this).attr('src', ‘img/broken.png’); });
Este código remplaza las imágenes rotas o que no se han podido cargar por una imagen genérica.
Si todas las imágenes se cargan correctamente este script no hace nada.
4) Cambiar la clase cuando al pasar por encima el ratón (hover)
$(‘.btn').hover(function(){ $(this).addClass(‘hover’); }, function(){ $(this).removeClass(‘hover’); });
5) Deshabilitar campos de formularios (tipo input)
$('input[type="submit"]').attr("disabled", true);
Con este pequeño código deshabilitamos un campo de formulario tipo input, esto es bastante útil a la hora de validar formularios.
Para volver a habilitar un campo que previamente hemos deshabilitado, nos basta con eliminar su atributo «disabled».
Esto lo hacemos con el siguiente código:
$('input[type="submit"]').removeAttr("disabled”);
6) Evitar que los enlaces te redireccionen
$(‘a.no-link').click(function(e){ e.preventDefault(); //código a ejecutar alert("Reacción Estudio"); });
A veces no queremos que algunos enlaces no lleven a otras páginas o la recargen, queremos que al hacer click en ellos se ejecute un javascript, para esto se utiliza preventDefault().
7) Toggle fade/slide
// Fade $( “.btn" ).click(function() { $( “.element" ).fadeToggle("slow"); }); // Toggle $( “.btn" ).click(function() { $( “.element" ).slideToggle("slow"); });
8) Acordeón simple
// Cerrar todos los paneles $("#accordion").find(".content").hide(); $("#accordion").find(".accordion-header").click(function(){ var next = $(this).next(); next.slideToggle("fast"); $(".content").not(next).slideUp("fast"); return false; });
Utilizando este código, lo único que necesitas en tu página es el código HTML necesario para que funcione.
9) Hacer que dos divs tengan la misma altura
$(‘.div').css('min-height', $(‘.main-div').height());
Este código pone al div con la clase «div» la misma altua que el div con la clase «main-div«.
10) Estilo zebra en listas desordenadas
$('li:odd').css('background', '#E8E8E8’);
Con este pequeño snippet, puedes crear un efecto zebra en listas HTML.
En vez de poner un color de fondo puedes asignar un estilo en contreto, un ejemplo sería el siguiente:
$('li:odd').addClass("ulZebra");