Todo jQuery... de novato a experto

El método hover() toma dos funciones tipo callback y es la combinación de los métodos mouseenter() y mouseleave().

La primer función se ejecuta cuando el apuntador del ratón entra al elemento HTML y la segunda función se activa cuando el apuntador del ratón sale del elemento.

$("#p1").hover(function(){
  alert("Entró!");
  },
  function(){
  alert("Salió!");
});

Focus 

El evento focus() se dispara cuando el apuntador del ratón entra a una caja de un formulario HTML. La función se ejecuta cuando tenemos el "foco" sobre el campo:

$("input").focus(function(){
  $(this).css("background-color","#cccccc");
}); 

Blur

El evento blur() se dispara cuando el apuntador del ratón sale de una caja de un formulario HTML. La función se ejecuta cuando perdemos el "foco" sobre el campo:

keydown()

El evento keydown() se dispara cuando pulsamos una tecla dentro de una caja de un formulario HTML.

$("input").keydown(function(){
  $("input").css("background-color","yellow");
});

keyup()

El evento keyup() se dispara cuando levantamos la tecla de una caja de un formulario HTML.

Con el efecto animate pomeos animar más de una propiedad. De hecho podemos animar casi cualquier propiedad, a excepción de la propiedad de color, donde necesitamos otra librería. Si deseamos animar alguna propiedad css con guión, por ejemlo padding-top, la tenemos que convertir a CamelCase, como paddingTop.

Aunque ya tenemos en JavaScript una función similar (innerHTML) en jQuery tenemos el método html() que nos permite leer y escribir el código html de un objeto dentro del DOM.

Este método no funciona para documentos XML. 

Si el selector regresa más de un elemento, sólo el primer elemento regresa su código HTML.

Esta función puede presentar algunos problemas con el navegador Internet Explorer, en versiones antigüas, ya que se basa en el comando innerHTML de JavaScript:

Desde jQuery, podemos modificar a nuestro gusto cualquier valor de cualquier etiqueta de un documento DOM en tiempo de ejecución. Primero debemos identificar el objeto, ya sea por medio de un identificador, etiqueta o clase, y luego utilizar el método attr().

Si el selector regresa más de un elemento, sólo se modificará el primero.

Existen dos métodos en jQuery que nos permiten eliminar elementos de una página web. Estos son:

• remove(): Elimina los subnodos y el nodo contenedor.
• empty(): Elimina los subnodos o elementos hijos, pero no al contenedor. Sólo lo vacía.

Contesta las siguientes preguntas para comprobar tus conocimientos.

• width(): el ancho del elemento sin padding, border ni margen.
• height(): la altura del elemento sin padding, border ni margen.
• innerWidth(): el ancho del elemento con el padding,pero sin el border ni margen.
• innerHeight(): la altura del elemento con el padding,pero sin el border ni margen.
• outerWidth(): el ancho del elemento con el padding y el borde, pero sin el margen.
• outerHeight(): la altura del elemento con el padding y el borde, pero sin el margen.
• outerWidth(true): el ancho del elemento con el padding, el borde y el margen.
• outerHeight(true): la altura del elemento con el padding, el borde y el margen.

El método load() es simple, pero poderoso. Nos permitirá leer una archivo en el servidor (en este caso de texto) y ponerlo en cualquier elemento de nuestra página.

Su sintaxis básica es:

$(selector).load(URL,data,callback);

En la función load(), que nos sirve para cargar archivos externos, tendremos un segundo parámetro, que es una función quese ejecuta automáticamente cuando el proceso de carga termina. Estas funciones son mejor conocidas como "callback".

En esta función tendremos tres parámetros:

• respuesta- contiene el resultado de la carga, si esta fue exitosa
• estado -regresa una cadena con el estado de la carga: "success" o "error"
• xhr - contiene el objeto XMLHttpRequest

Con los métodos get y post podremos solicitar información a una página de internet que utiliza algun lenguaje intermedios en el servidor, como pueden ser PHP, Coldfusion o ASP.

• GET - Solicita la información de una página determinada. Puede quedar la información en la memoria caché del navegador.
• POST - Envía la información a ser procesada. Nunca se guarda en memoria caché la información

El método pos enviía la información por medio de los bloques Multipurpose Internet Mail Extensions o MIME  (en español "extensiones multipropósito de correo de internet") y en jQuery nunca guarda la información en el caché del navegador.

Por medio de jQuery podremos hacer introducciones a las páginas, con animaciones e interactividad, como se hacía con Abode Flash, ¿recuerdas?

En este video separaremos los elementos visuales que vamos a animar, de aquellos que no los animaremos.

Con este video concluimos la animación de entrada, cuando cargamos la aplicación HTML tradicional.