7 códigos JQuery que todos deberían tener
Categorías: JQuery, Recursos - Tags: javascript, JQueryHoy les traigo un pequeño recopilatorio de JQuery code snippets que hacen la vida más fácil. Aunque para la mayoría de estos ejemplos existen extensos plugins que hacen lo mismo, con unas simples lineas de código podemos realizar lo mismo y a su vez aprendemos como funciona.
1. Texto que desaparece en cajas de búsquedas
Este ejemplo mostrará un texto en la caja de búsqueda que al hacer click para escribir desaparecerá . Y si nos vamos de la caja sin escribir nada volverá a aparecer.
1 2 3 4 5 6 7 | jQuery(function(){ var texto="Buscar"; jQuery("#whats-new") .val(texto) .focus(function(){ jQuery(this).val('') }) .blur(function(){ jQuery(this).val() === '' ? jQuery(this).val(texto) : null; }); }); |
2. Cambiar el tamaño de fuente en la página
Pequeño script que permite al usuario agrandar o achicar el tamaño de la fuente dependiendo en que botón haga click.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | $(function(){ // Resetear al tamaño original var originalFontSize = $('html').css('font-size'); $(".resetFont").click(function(){ $('html').css('font-size', originalFontSize); }); // Aumentar tamaño $(".aumentar").click(function(){ var currentFontSize = $('html').css('font-size'); var currentFontSizeNum = parseFloat(currentFontSize, 10); var newFontSize = currentFontSizeNum*1.2; $('html').css('font-size', newFontSize); return false; }); // Disminuir tamaño $(".disminuir").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; }); }) |
3.Pasar variables de PHP $_GET and javascript
Con este código podremos pasar las variables $_GET de php a javascript para poder utilizarlas si es necesario
1 2 3 4 5 6 7 8 9 | var searchArray = document.location.search.substring(1).split("&"); //Removemos '?' y separamos las variables //Ahora hacemos un loop en searchArray y creamos otro array llamado GET var GET = []; for (searchTerm in searchArray){ searchTerm.split("="); //Dividimos searchTerm en propiedades y valores GET[searchTerm[0]] = searchTerm[1]; //Añadimos la propiedad y el valor al array GET } |
4. Refrescar parte de una Web mediante AJAX
Este código es extremadamente útil cuando queremos que una parte de nuestra web ( un widget por ej) se actualice constantemente.
1 2 3 4 5 | $(document).ready(function() { setInterval(function() { $("#content").load(location.href+" #content > *",""); }, 5000); }); |
5. Evitar conflictos entre librerías
JQuery incluye al igual que otras librerías el alias $ .Con este método podremos cambiar dicho alias por cualquiera que nos plazca.
1 2 3 4 | var $timersys = jQuery.noConflict(); //Ahora podemos usar $timersys en vez de '$' $timersys("div").hide(); |
6. Detectar el navegador
Sencilla forma de detectar los diferentes navegadores
1 2 3 4 5 6 7 8 9 | //A. Para Safari if( $.browser.safari ) //B. Para cualquier versión inferior a IE7 if ($.browser.msie && $.browser.version < 7 ) //C. Para IE7 y versiones anteriores if ($.browser.msie && $.browser.version = "1.8" ) |
7. Deshabilitar click derecho del mouse
No siempre queremos que puedan hacer click derecho en nuestra web.
1 2 3 4 5 | $(document).ready(function(){ $(document).bind("contextmenu",function(e){ return false; }); }); |
Acerca del autor
Damian
Programador en tiempos libres , amante de la tecnología, blogger amateur y emprendedor en sueños.
Sigueme:
Muy buenas tardes
Quería agradecerte tu colaboración de forma constante con la comunidad de internet
La verdad, todo lo que pones es muy útil, gracias por compartirlo
Comenzaré desde 0, ya que tienes mucho material y todo esplendido
Un saludo y gracias gracias!
[...] en las cajas de búsqueda que al escribir o hacer focus desaparece. De momento esto se podía hacer con javascript , pero ahora simplemente añadiendo este nuevo atributo conseguimos el mismo resultado. 1 [...]
muy buenos codigos la verdad, los usare en mi web
por favor si me pueden ayudar necsito ingresar solo texto en un caja de texto en codigo Jquery,
y entra caja de texto solo ingresar numeros en codigo jquery
Muchísimas gracias: Con la propuesta número 2 ya no probé pues la uno no funciona.
Es un poco desesperante que busquemos información en la red y encontremos constantemente propuestas que no funcionan. Con lo cual perdemos un tiempo valioso, tanto el que lo escribe como el que cree en ello.
En cambio, ésto, de mi cosecha sí funciona con todos los input que son de tipo texto
$(document).ready(function() {
$('input[type=text]').focus(function(){
var campo = $(this);
if(campo.val() == campo.attr('defaultValue')) {
campo.val('');
}
}).blur(function(){
var campo = $(this);
if(campo.val() == '') {
campo.val(campo.attr('defaultValue'));
}
});
});
disculpa tenía mal el código. Ya lo actualize. El correcto es :
jQuery(function(){
var texto="TExto aqui";
jQuery("#whats-new")
.val(texto)
.focus(function(){jQuery(this).val('')})
.blur(function(){
jQuery(this).val() === '' ? jQuery(this).val(texto) : null;
});
});
Hola, oye… como se le podria padar el tamaño dela pantalla al height del css ?
excelente, gracias por el post !!
hola, disculpa como podria colocar mi pagina web dentro del facebook?