Recursos

6 Consejos Y Trucos De jQuery Para Programadores

belial9826

marzo 6, 2015

Lo que vas a encontrar...

0.1 1) Deshabilitar el botón derecho del ratón con jQuery
0.2 2) Cambiar el tamaño del texto con jQuery
0.3 3) Abrir enlaces en nuevas ventanas con jQuery
0.4 4) Cambiar la hojas de estilo con jQuery
0.5 5) Volver al principio de un sitio web con jQuery
0.6 6) Obtener la posición del cursor con jQuery

1 Bono Extra
- 1.1 7) Precarga de imágenes con jQuery
- 1.2 8) Detectar coordenadas actuales del ratón

jQuery es una de las mejores bibliotecas de JavaScript, la cual está diseñada para simplificar procesos como las animaciones, manejo de eventos, Ajax y scripting del lado del cliente. También tiene varios plugins jQuery para ayudar a los desarrolladores a crear sitios y páginas web de forma sencilla y fácil.

A continuación compartiré algunos consejos y trucos de jQuery, los cuales serán de gran ayuda para los programadores.

1) Deshabilitar el botón derecho del ratón con jQuery

Ocultar información del sitio web puede ser bastante útil en la mayoría de ocasiones. Esto se hace desactivando el botón derecho del mouse, y con jQuery se puede lograr con las siguientes lineas de código:

[showhide type=”desacBotjQuery” more_text=”Ver Código…” less_text=”Ocultar Código…”]

$(document).ready(function() {
	//captura el menu del click derecho
	$(document).bind("contextmenu",function(e) {				 
		//mensaje de advertencia (opcional)
		alert("Funcion desactivada!");
		return false;
	});
});

$(document).ready(function() {

//captura el menu del click derecho

$(document).bind("contextmenu",function(e) {

//mensaje de advertencia (opcional)

alert("Funcion desactivada!");

return false;

});

[/showhide]

2) Cambiar el tamaño del texto con jQuery

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

[showhide type=”tamañoTextojQuery” more_text=”Ver Código…” less_text=”Ocultar Código…”]

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

	// Aumentar 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;
	});

	// Cambiar tamaño de fuente
	$(".resetFont").click(function(){
	$('html').css('font-size', originalFontSize);
  });
});

$(document).ready(function() {

// encontrar el tamaño de la fuente actual

var originalFontSize = $('html').css('font-size');

// Aumentar 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;

});

// Cambiar tamaño de fuente

$(".resetFont").click(function(){

$('html').css('font-size', originalFontSize);

});

[/showhide]

3) Abrir enlaces en nuevas ventanas con jQuery

Si deseas abrir un enlace en una nueva ventana con jQuery debes de usar el siguiente código:

[showhide type=”enlaceNueVentjQuery” more_text=”Ver Código…” less_text=”Ocultar Código…”]

$(document).ready(function() {
	// selecciona todas las etiquetas de enlace que tienen http en el href
	//y aplica el atributo target=_blank
	$("a[href^='http']").attr('target','_blank');
});

$(document).ready(function() {

// selecciona todas las etiquetas de enlace que tienen http en el href

//y aplica el atributo target=_blank

$("a[href^='http']").attr('target','_blank');

});

[/showhide]

4) Cambiar la hojas de estilo con jQuery

Puedes intercambiar los archivos CSS con jQuery usando el siguiente código:

[showhide type=”camCSSjQuery” more_text=”Ver Código…” less_text=”Ocultar Código…”]

$(document).ready(function() {
	$("a.cssSwap").click(function() { 
		// cambiar el enlace atributo rel con el valor en el rel
		$('link[rel=stylesheet]').attr('href' , $(this).attr('rel')); 
	}); 
});

$(document).ready(function() {

$("a.cssSwap").click(function() {

// cambiar el enlace atributo rel con el valor en el rel

$('link[rel=stylesheet]').attr('href' , $(this).attr('rel'));

});

[/showhide]

5) Volver al principio de un sitio web con jQuery

Volver a la parte superior es una función bastante común en casi todos los sitios web. Esta funcionalidad es muy útil para páginas cuyo contenido es extenso:

[showhide type=”regIniciojQuery” more_text=”Ver Código…” less_text=”Ocultar Código…”]

$(document).ready(function() {
	// cuando se hace clic en el enlace id = "top"
	$('#top').click(function() {
		//volver al inicio de la pagina
		$(document).scrollTo(0,500);
	}
});

$(document).ready(function() {

// cuando se hace clic en el enlace id = "top"

$('#top').click(function() {

//volver al inicio de la pagina

$(document).scrollTo(0,500);

}

});

[/showhide]

6) Obtener la posición del cursor con jQuery

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

[showhide type=”obtCoordjQuery” more_text=”Ver Código…” less_text=”Ocultar Código…”]

$().mousemove(function(e){
    // mostrar los valores x e y de eje en el interior del elemento P
    $('p').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);
});

$().mousemove(function(e){

// mostrar los valores x e y de eje en el interior del elemento P

$('p').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);

});

[/showhide]

Bono Extra

jQuery brinda muchas más funciones, y para que no te quedes con las ansias de ver algunas interesantes, he decidido agregar dos funciones que de seguro te servirán para optimizar tu desarrollo web, a cambio solo te pido una pequeña acción social, es decir, un Like, twitt o +1 😉
[sociallocker]

7) Precarga de imágenes con jQuery

Si deseas mejorar el tiempo de carga de tu sitio web, es bastante útil usar una precarga, con la cual, darás un mejor rendimiento, y por ende una mejor experiencia al usuario. Para esto, puedes usar el siguiente código:

[showhide type=”codPrecImagjQuery” more_text=”Ver Código…” less_text=”Ocultar Código…”]

jQuery.preloadImagesInWebPage = function() 
{
     for(var ctr = 0; ctr<arguments.length; ctr++)
{
$(ElementoDondeSeMostrará).attr("src", arguments[ctr]);
}
}

jQuery.preloadImagesInWebPage = function()

{

for(var ctr = 0; ctr<arguments.length; ctr++)

{

$(ElementoDondeSeMostrará).attr("src", arguments[ctr]);

}

[/showhide]
Para utilizar el método anterior, puede utilizar el siguiente fragmento de código:

$.preloadImages("image1.gif", "Image2.gif", "image3.gif");

1	$.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('The image has been loaded…');
});

$('#imageObject').attr('src', 'image1.gif').load(function() {

alert('The image has been loaded…');

});

8) Detectar coordenadas actuales del ratón

Con el siguiente código puedes obtener las coordenadas del puntero en el navegador web:

[showhide type=”obtPoscPuntjQuery” more_text=”Ver Código…” less_text=”Ocultar Código…”]

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

$(document).ready(function() {

$().mousemove(function(e)

{

$('# MouseCoordinates ').html("X Axis Position = " + e.pageX + " and Y Axis Position = " + e.pageY);

});

[/showhide][/sociallocker]

javascript, jquery, programacion

belial9826

Hijo, esposo y padre de un hermoso niño. Amante de los animales, la tecnología, informática y programación. Si tienes alguna duda, inquietud, comentario o deseas comunicarte directamente conmigo, puedes enviarme un correo electrónico a admin@jagonzalez.org

ingjesusmpl dice:

11 marzo, 2015 a las 9:07 pm

Una pregunta, que significa exactamente JQuery(“”) ?, será equivalente a JQuery o $?, o tal vez a JQuery(“document”) o $(“document”)?. Gracias por adelantado.

Responder
1. belial9826 dice:
  
  12 marzo, 2015 a las 9:37 am
  
  Hola amigo, no, el código que iba en la linea la he modificado 😉 Saludos y gracias por que sin tu comentario no me habría dado cuenta de dicho error. Saludos.
  
  Responder