Apuntes de jQuery

Antes de nada. Líneas de inclusión de jQuery

//Última versión desde Code jQuery
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

//Versión definida desde Code Google    
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

//Versión de jQuery local
<script type="text/javascript" src="javascript/jquery-1.4.2.min.js"></script>

//Document ready()
<script type="text/javascript">
	$(document).ready(function(){
		//Ejercicio x
	});
</script>

Ejemplo 1

En este ejercicio se selecciona un enlace por su clase "ejercicio1", aplicamos los efectos .hide() y .show() tanto con los atributos por defecto "slow", "normal" y "fast" y por tiempo en milisegundos, y hacemos un callback a otra función. En este caso el callback contiene un alert() que nos ayuda a ver algún dato por pantalla.

Prueba

Código

$(document).ready(function(){
    //Ejercicio 1
    $("a.ejercicio1").click(function(){
        $("a.ejercicio1").hide("slow").show("fast").hide(200); //Efectos en cadena
        $("a.ejercicio1").show(1000, function(){ //Efecto aparte
            alert('Fin ejemplo 1 :)')
        });
    });
)};

Ejemplo 2

En este ejercicio se muestra otra manera de seleccionar el elemento por su clase sólo con ".clase". Se añade el elemento a una variable (creo que no es obligatorio definir el tipo) llamada objeto, se aplica el efecto .fadeOut() con un callback. Esta funcion crea un número aleatorio y con el método .text() cambiamos el contenido y luego llamamos al método fadeIn() que muestra otra vez el elemento. De esta manera hemos creado un dado virtual en unos pocos pasos.

Prueba

Código

$(document).ready(function(){
    //Ejercicio 2
    $(".ejercicio2").click(function(){
        var objeto = $(".ejercicio2");
        objeto.fadeOut("slow", function(valor){
            var numero_aleatorio = Math.floor(Math.random()*101);
            objeto.text(numero_aleatorio);
        });
        objeto.fadeIn("fast");
    });
)};

Ejemplo 3

En este ejemplo utilizo el método .animate() en el cual puedes definir diversos parámetros. Yo he utilizado el atributo "left" y "right". Recordar que para deplazar un elemento debe tener una posición definida como relative, absolute,etc. en el estilo css.
He añadido un div con dos enlaces y sus respectivas funciones. Uno mueve el div hacia la izquierda y otro hacia la derecha.
Este ejercicio calcula la posición del cubo con .position() que devuelve un array o matriz con las propiedades "top" y "left" y las dimensiones del div relativo (en este caso hace referencia a prueba porque son todos los divs del mismo tamaño) con .width(), que devuelve su largo. Si hacia el lado que vamos a mover se sale del div se para. Fácil.
He estado probando el método .offset() que es parecido a .position() pero creo que offset hace referencia a body como si no fuera relativo sino absoluto.

Prueba

Código

$(document).ready(function(){
    //Ejercicio 3
    $(".ejercicio3 .mas").click(function(){
        //Calculamos la posición
        var posicion = $(".ejercicio3").position();
        var width = $(".prueba.tres").width();
        if(posicion.left <= (width - 100 - 80)){
            $(".ejercicio3").animate({ top:0, left: '+=100'}, "normal");
        } else {
            alert("¡Ahora traelo de vuelta!");
        }
    });
    $(".ejercicio3 .menos").click(function(){
        //Calculamos la posición
        var posicion = $(".ejercicio3").position();
        if(posicion.left > 20){
            $(".ejercicio3").animate({ top:0, left: '-=100'}, "normal");
        } else {
            alert("¡Pasealo hacia la derecha!");
        }
    });
)};

Ejemplo 4

En el siguiente código muestro como cambiar una imagen por otra y hacerla aparecer con un efecto de .fadeIn(). En mi caso necesitaba checkear si el enlace ya había sido pulsado así que cambio la imagen off.png por on.png mediante .attr() que localiza y cambia el atributo seleccionado. Además la función popup que he creado hace que el enlace se abra en un nuevo popup al pulsarlo.

Prueba

Código

$(document).ready(function(){
    //Ejercicio 4
    $("a[rel='popup']").click(function () {  
        var config = "height=300,width=1000,scrollTo,resizable=1,scrollbars=1,location=0";  
        myWin=window.open(this.href, 'Popup', config);  
        return false;  
    });
    $('.cuatro ul li a').click(function(){
        $('#imagen_' + this.id).attr("src","imagenes/on.png").hide().fadeIn("slow");
    });
});