8 Consejos Y Trucos De jQuery Útiles Para Programadores

jQuery es una de las mejores bibliotecas de JavaScript, la cual está diseñada para simplificar el uso de animaciones, manejo de eventos, uso de Ajax y el scripting del lado del cliente. También puedes encontrar una gran variedad de plugins, con los cuales puedes crear sitios y páginas web de forma sencilla y fácil.

A continuación encuentra algunos útiles consejos y trucos de jQuery que todo programador debería conocer ;)

1) Deshabilitar El Botón Derecho Del Mouse Con jQuery

Si deseas ocultar la información de tu sitio web de los usuarios, los desarrolladores deben utilizar este código para desactivar el botón derecho:

[js]

$(document).ready(function() {
$(document).bind("contextmenu",function(e) {
//mensaje
alert("Click derecho desactivado!");

return false;

});
});

[/js]

2) Cambiar El Tamaño Del Texto Con jQuery

Los usuarios pueden cambiar el tamaño (aumentar y disminuir ) del texto de los sitios web con el siguiente código:

[js]

$(document).ready(function() {
//Encontrar el tamaño actual de la fuente
var originalFontSize = $(‘html’).css(‘font-size’);

//Incrementar el tamaño del texto
$(".increaseFont").click(function() {
var currentFontSize = $(‘html’).css(‘font-size’);
var currentFontSizeNumber = parseFloat(currentFontSize, 10);

var newFontSize = currentFontSizeNumber*1.2;
$(‘html’).css(‘font-size’, newFontSize);
return false;
});

//Disminuir el tamaño del texto
$(".decreaseFont").click(function() {
var currentFontSize = $(‘html’).css(‘font-size’);
var currentFontSizeNum = parseFloat(currentFontSize, 10);

var newFontSize = currentFontSizeNum*0.8;
$(‘html’).css(‘font-size’, newFontSize);
return false;
});

// Restaurar el tamaño de la fuente
$(".resetFont").click(function(){
$(‘html’).css(‘font-size’, originalFontSize);
});
});

[/js]

3) Abrir Enlaces En Nuevas Ventanas Con jQuery

Al hacer click en cualquier enlace, se llevara el contenido del enlace a una nueva ventana usando el siguiente código:

[js]

$(document).ready(function() {
$("a[href^=’http’]").attr(‘target’,’_blank’);
});[/js]

4) Cambiar Hojas De Estilo Con jQuery

Para cambiar hojas de estilo con jQuery, debes usar el siguiente código:

[css]

$(document).ready(function() {
$("a.cssSwap").click(function() {
$(‘link[rel=stylesheet]’).attr(‘href’ , $(this).attr(‘rel’));
});
});[/css]

5) Volver Al Inicio Del Enlace

Volver a la parte superior es una función muy común en casi todos los sitios web. Esta funcionalidad es muy útil y la puedes usar con el siguiente código:

[js]

$(document).ready(function() {
//when the id="top" link is clicked
$(‘#top’).click(function() {
//scoll the page back to the top
$(document).scrollTo(0,500);
}
});[/js]

6) Obtener El Cursor Del Ratón En El Eje x e y 

Puede encontrar los valores de las coordenadas X e Y del puntero del ratón con el siguiente código:

[js]

$().mousemove(function(e){
$(‘p’).html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);
});[/js]

7) Detectar Las Coordenadas Actuales Del Ratón

Con el siguiente código, en cualquier navegador puedes encontrar la coordenada actual del ratón:

[js]

$(document).ready(function() {
$().mousemove(function(e)
{
$(‘# MouseCoordinates ‘).html("X Axis Position = " + e.pageX + " and Y Axis Position = " + e.pageY);
});[/js]

8) Precarga Imágenes en jQuery

El siguiente código precarga una imagen, lo cual ayuda para cargar rápidamente las imágenes en tus páginas web:

[js]

jQuery.preloadImagesInWebPage = function()
{
for(var ctr = 0; ctr<arguments.length; ctr++)
{
jQuery("").attr("src", arguments[ctr]);
}
}
// Para utilizar el método anterior, puede utilizar el siguiente fragmento de código:
$.preloadImages("image1.gif", "image2.gif", "image3.gif");
// Para comprobar si una imagen se ha cargado, puede utilizar el siguiente fragmento de código:
$(‘#imageObject’).attr(‘src’, ‘image1.gif’).load(function() {
alert(‘La imagen ha sido cargada…’);
});

[/js]