JQUERY Y ASP.

NET: UNA
NUEVA EXPERIENCIA DE
USUARIO

Julio Cesar Avellaneda Sua

http://julitogtu.wordpress.com
CoreGroup BogotaDotNet
MCP MCC
@julitogtu
JQUERY Y ASP.NET: UNA
NUEVA EXPERIENCIA DE
USUARIO
jQuery es un framework JavaScript.

Acceder al DOM (Document Object Model)

Modificar el look de las pginas

Modificar el contenido de las pginas

Manejar eventos

Animaciones

Peticiones Ajax
JQUERY Y ASP.NET: UNA
NUEVA EXPERIENCIA DE
USUARIO
Sistema de plugins

Lenguaje cliente

No es invasivo

Compatibilidad con navegadores

Liviano

Sencillo de utilizar
JQUERY Y ASP.NET: UNA
NUEVA EXPERIENCIA DE
USUARIO
Cmo incluir cdigo JavaScript:
<script type="text/javascript">
alert('Mensaje usando JavaScript');
</script>

Cmo referenciar jQuery:

<script src="scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
JQUERY Y ASP.NET: UNA
NUEVA EXPERIENCIA DE
USUARIO
Alias para trabajar con jQuery:

jQuery == $

Verificar estado de pgina:

$(function(){

//cdigo

})
JQUERY Y ASP.NET: UNA
NUEVA EXPERIENCIA DE
USUARIO
Selectores: permiten determinar con cual o cuales elementos se va a

trabajar. Si conoces CSS ya sabes algunos selectores de jQuery.

Selector Descripcin
$(*) Todos los elementos
$(etiqueta) Los elementos del un tipo (ej: p)
$(#id) Elemento con determinado id (HTML)
$(#<%= id.ClientID %>) Elemento con determinado id (Servidor)
$(.clase) Selecciona por nombre de clase (css)
$(selector selector) Descendencia
$(selector1, selector2,.) Mltiples selectores
JQUERY Y ASP.NET: UNA
NUEVA EXPERIENCIA DE
USUARIO
Filtros: permiten realizar filtros sobre los selectores

Filtro Descripcin
:first Primer elemento
:last ltimo elemento
eq(#) Posicin
:even Pares
:odd Impares
[atributo] Tiene un determinado atributo
[atributo=valor] Tiene un determinado atributo con un
determinado valor
JQUERY Y ASP.NET: UNA
NUEVA EXPERIENCIA DE
USUARIO
Atributos: Caractersticas de los elementos HTML.

Agregar atributo simple:

$(selector).attr(clave,valor);

Agregar mltiples atributos:

$(selector).attr({clave: valor, clave: valor})

Remover atributo:

$(selector).removeAttr(clave);
JQUERY Y ASP.NET: UNA
NUEVA EXPERIENCIA DE
USUARIO
Clases: Conjunto de estilos

Agregar clase:

$(selector).addClass(nombreclase);

Remover clase:

$(selector).removeClass(nombreClase);

Remover todas las clases (Sin parmetros):

$(selector).removeClass();
JQUERY Y ASP.NET: UNA
NUEVA EXPERIENCIA DE
USUARIO
Estilos css

Agregar estilo:
$(selector).css(propiedad,valor);

Agregar mltiples estilos:

$(selector).css({
propiedad : valor,
propiedad : valor
});
JQUERY Y ASP.NET: UNA
NUEVA EXPERIENCIA DE
USUARIO
Eventos: Agregar un manejador a un evento de un elemento del DOM.

Mtodo corto:
$(selector).evento(function(){
//Cdigo
})

Mltiples eventos:
$(selector).bind({
evento1: function(){.},
evento2: funciton(){.}
})
JQUERY Y ASP.NET: UNA
NUEVA EXPERIENCIA DE
USUARIO
Animaciones: Efectos/mtodos sobre los elementos.

Fading: Trabajan con la opacidad de los elementos

fadeIn() fadeOut() fadeToggle()

Sliding: Deslizando elementos

slideDown() slideUp() slideToggle()

Ocultando/Mostrando elementos:
hide() show() toggle()
JQUERY Y ASP.NET: UNA
NUEVA EXPERIENCIA DE
USUARIO
Llamados Ajax:

Load: Permite realizar el cargue de un archivo HTML en un elemento.

El HTML debe estar en el mismo dominio.

Permite cargar solo una parte del HTML

Solo se copia el contenido HTML, todo cdigo JavaScript o jQuery no

estar disponible.
JQUERY Y ASP.NET: UNA
NUEVA EXPERIENCIA DE
USUARIO
Pgina oficial: http://jquery.com/

jQuery UI: http://jqueryui.com/

jQuery Tools: http://flowplayer.org/tools

JQUERY Y ASP.NET: UNA
NUEVA EXPERIENCIA DE
USUARIO

GRACIAS!