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 ;)
Table of Contents
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]
You might also like
More from Desarrolladores
Para que usar un framework en PHP, pros y contras, ventajas y desventajas, porqué emplearlos
En artículos previos del blog hemos dialogado un poco sobre los frameworks en Php; sin embargo creo que aun no …
Qué es un framework en informática o programación
Qué es un framework en informática o programación. La palabra Framework es la combinación de dos palabras, es decir, Marco …
¿Cómo aumentar la memoria PHP? ¿Porqué hacerlo?
¿Cómo aumentar la memoria PHP? ¿Porqué hacerlo? Bueno voy a empezar al revés, diciendo porqué realizarlo, cuales son las razones …