jQuery y ASP

15
JQUERY Y ASP.NET: UNA NUEVA EXPERIENCIA DE USUARIO Julio Cesar Avellaneda Sua http://julitogtu.wordpress.com CoreGroup BogotaDotNet MCP – MCC @julitogtu

description

Fundamentos de jQuery

Transcript of jQuery y ASP

Page 1: jQuery y ASP

JQUERY Y ASP.NET: UNA NUEVA EXPERIENCIA DE

USUARIO

Julio Cesar Avellaneda Suahttp://julitogtu.wordpress.com

CoreGroup BogotaDotNet

MCP – MCC

@julitogtu

Page 2: jQuery y ASP

• jQuery es un framework JavaScript.

• Acceder al DOM (Document Object Model)

• Modificar el look de las páginas

• Modificar el contenido de las páginas

• Manejar eventos

• Animaciones

• Peticiones Ajax

JQUERY Y ASP.NET: UNA NUEVA EXPERIENCIA DE USUARIO

Page 3: jQuery y ASP

• Sistema de plugins

• Lenguaje cliente

• No es invasivo

• Compatibilidad con navegadores

• Liviano

• Sencillo de utilizar

JQUERY Y ASP.NET: UNA NUEVA EXPERIENCIA DE USUARIO

Page 4: jQuery y ASP

• Cómo incluir código JavaScript:

<script type="text/javascript">

alert('Mensaje usando JavaScript');

</script>

• Cómo referenciar jQuery:

<script src="scripts/jquery-1.6.2.min.js"

type="text/javascript"></script>

JQUERY Y ASP.NET: UNA NUEVA EXPERIENCIA DE USUARIO

Page 5: jQuery y ASP

• Alias para trabajar con jQuery:

jQuery == $

• Verificar estado de página:

$(function(){

//código

})

JQUERY Y ASP.NET: UNA NUEVA EXPERIENCIA DE USUARIO

Page 6: jQuery y ASP

• Selectores: permiten determinar con cual o cuales elementos se

va a trabajar. Si conoces CSS ya sabes algunos selectores de

jQuery.Selector Descripción

$(“*”) 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,….”) Múltiples selectores

JQUERY Y ASP.NET: UNA NUEVA EXPERIENCIA DE USUARIO

Page 7: jQuery y ASP

• Filtros: permiten realizar filtros sobre los selectores

Filtro Descripción

:first Primer elemento

:last Último elemento

eq(#) Posición

: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

Page 8: jQuery y ASP

• Atributos: Características de los elementos HTML.

• Agregar atributo simple:

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

• Agregar múltiples atributos:

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

• Remover atributo:

$(“selector”).removeAttr(“clave”);

JQUERY Y ASP.NET: UNA NUEVA EXPERIENCIA DE USUARIO

Page 9: jQuery y ASP

• Clases: Conjunto de estilos

• Agregar clase:

$(“selector”).addClass(“nombreclase”);

• Remover clase:

$(“selector”).removeClass(“nombreClase”);

• Remover todas las clases (Sin parámetros):

$(“selector”).removeClass();

JQUERY Y ASP.NET: UNA NUEVA EXPERIENCIA DE USUARIO

Page 10: jQuery y ASP

• Estilos css

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

• Agregar múltiples estilos:$(“selector”).css({

“propiedad” : ”valor”,

“propiedad” : “valor”

});

JQUERY Y ASP.NET: UNA NUEVA EXPERIENCIA DE USUARIO

Page 11: jQuery y ASP

• Eventos: Agregar un manejador a un evento de un elemento del

DOM.

• Método corto:$(“selector”).evento(function(){

//Código

})

• Múltiples eventos:$(“selector”).bind({

evento1: function(){….},

evento2: funciton(){….}

})

JQUERY Y ASP.NET: UNA NUEVA EXPERIENCIA DE USUARIO

Page 12: jQuery y ASP

JQUERY Y ASP.NET: UNA NUEVA EXPERIENCIA DE USUARIO

• Animaciones: Efectos/métodos sobre los elementos.

• Fading: Trabajan con la opacidad de los elementos

fadeIn() – fadeOut() – fadeToggle()

• Sliding: Deslizando elementosslideDown() – slideUp() – slideToggle()

• Ocultando/Mostrando elementos:hide() – show() – toggle()

Page 13: jQuery y ASP

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 código JavaScript o jQuery

no estará disponible.

Page 14: jQuery y ASP

JQUERY Y ASP.NET: UNA NUEVA EXPERIENCIA DE USUARIO

• Página oficial: http://jquery.com/

• jQuery UI: http://jqueryui.com/

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

Page 15: jQuery y ASP

JQUERY Y ASP.NET: UNA NUEVA EXPERIENCIA DE USUARIO

GRACIAS!