10 códigos jQuery que no pueden faltar en tu pagina web

Por patoxs el Dic.15, 2009, en jQuery, javascript

jquery-10cod

1.- Carga jQuery desde Google
Google tiene una nueva versión de jQuery, que está disponible para los desarrolladores. En lugar de obtener una copia de jQuery, debería aprovecharse de la generosidad “de Google” y cargar directamente su copia:

1	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

2.- Validar una fecha de nacimiento utilizando jQuery
La validación de fechas de nacimiento es una tarea común en sitios web que tienen contenido disponible sólo para usuarios + de 18 años de edad. Usando jQuery, esto es muy fácil de hacer, como se muestra en el ejemplo siguiente:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

$("#lda-form").submit(function(){
var day = $("#day").val();
var month = $("#month").val();
var year = $("#year").val();
var age = 18;
var mydate = new Date();
mydate.setFullYear(year, month-1, day);

var currdate = new Date();
currdate.setFullYear(currdate.getFullYear() - age);
if ((currdate - mydate) < 0){
alert("Sorry, only persons over the age of " + age + " may enter this site");
return false;
}
return true;
});

3.- Asegurar que una imagen se ha cargado correctamente
¿Cómo saber si una imagen ha sido cargado correctamente? usando el simple fragmento de código que a continuación, tu podrás saber si tu imagen se muestra en la pantalla del usuario.

1
2
3

$('#myImage').attr('src', 'image.jpg').load(function() {
alert('Image Loaded');
});

4.- XHTML 1.0 Strict valid target=”blank”
El atributo target = “blank” puede ser útil cuando se desea un enlace que se abra en una nueva pestaña o ventana. Sin embargo, el atributo target = “blank” no es válido en XHTML 1.0 Strict.
Utilizando jQuery, se puede lograr la misma funcionalidad sin tener problemas de validación.

1
2
3
4

$("a[@rel~='external']").click( function() {
window.open( $(this).attr('href') );
return false;
});

5.- Buscar texto usando jQuery
La siguiente función permite la búsqueda de texto en nuestra página utilizando jQuery.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

$.fn.egrep = function(pat) {
var out = [];
var textNodes = function(n) {
if (n.nodeType == Node.TEXT_NODE) {
var t = typeof pat == 'string' ?
n.nodeValue.indexOf(pat) != -1 :
pat.test(n.nodeValue);
if (t) {
out.push(n.parentNode);
}
}
else {
$.each(n.childNodes, function(a, b) {
textNodes(b);
});
}
};
this.each(function() {
textNodes(this);
});
return out;
};

6.- Función “outerHTML”
La conocida propiedad innerHTML es muy útil, esta te permite obtener el contenido de un elemento HTML. Pero que pasa si lo que necesitas es el contenido y también las etiquetas HTML? Tienes que crear una función “outerHTML” como ésta:

1
2
3

jQuery.fn.outerHTML = function() {
return $('
').append( this.eq(0).clone() ).html(); };

7.- Abrir pop-up de manera limpia
Aunque su popularidad disminuyó con el aumento de los bloqueadores de pop-ups, las ventanas pop-up pueden ser útil en algunos casos particulares. Aquí tienes una forma agradable para abrir vínculos en ventanas pop-up. Sólo tienes que añadir la clase CSS para que tu enlace funcione.

1
2
3
4
5

jQuery('a.popup').live('click', function(){
newwindow=window.open($(this).attr('href'),'','height=200,width=150');
if (window.focus) {newwindow.focus()}
return false;
});

8.- Detectar el navegador de forma rápida y fácil
Detectar el navegador es definitivamente el mayor problema que enfrenta un programador para crear su front-end. Gracias a jQuery, la detección de navegadores nunca han sido tan fácil, como se muestra a continuación:

1
2
3
4
5
6
7
8
9
10
11

//A. Target Safari
if( $.browser.safari ) $("#menu li a").css("padding", "1em 1.2em" );

//B. Target anything above IE6
if ($.browser.msie && $.browser.version > 6 ) $("#menu li a").css("padding", "1em 1.8em" );

//C. Target IE6 and below
if ($.browser.msie && $.browser.version <= 6 ) $("#menu li a").css("padding", "1em 1.8em" );

//D. Target Firefox 2 and above
if ($.browser.mozilla && $.browser.version >= "1.8" ) $("#menu li a").css("padding", "1em 1.8em" );

9.- Obtener la posición relativa del ratón/mouse
¿Alguna vez fuiste capaz de obtener la posición relativa del ratón/mouse? Esta función es muy útil ya que devolverá la posición del ratón (X e Y), de acuerdo a su elemento principal.

1
2
3
4
5
6
7

function rPosition(elementID, mouseX, mouseY) {
var offset = $('#'+elementID).offset();
var x = mouseX - offset.left;
var y = mouseY - offset.top;

return {'x': x, 'y': y};
}

10.- Analizar un archivo XML con jQuery
Los archivos XML son muy importantes en Internet y cualquier programador tendrá que analizar mas de uno alguna vez. Gracias a jQuery y todas sus funciones, el proceso es indoloro, como se demuestra en el siguiente código de ejemplo:

1
2
3
4
5
6
7
8

function parseXml(xml)
{
//find every Tutorial and print the author
$(xml).find("Tutorial").each(function()
{
$("#output").append($(this).attr("author") + "<br />");
});
}

Compartelo

2 comentarios para esta publicación:

Kultran
Diciembre 15th, 2009 on 09:45
Buenos datos patoxs, se aplicaran!!!
garoto_dc
Abril 2nd, 2010 on 11:46
Hola a todos.

quisiera coperar con unos datitos.

para tener en tiempo real la posicion del mouse en cualquier parte del documento
se puede usar esta funcion, bueno esta con auto inicialización.

$(function(){
$(“”).attr(“id”,”mostrar”).appendTo(“body”)
$(document).mousemove(function(e){
$(“#mostrar”).html(“x:”+e.pageX+” y:”+e.pageY)
});
});

buenas funciones, y buena pagina, felicitaciones

saludos