JQUERY Y ASP.NET: UNA NUEVA EXPERIENCIA DE
USUARIO
Julio Cesar Avellaneda Suahttp://julitogtu.wordpress.com
CoreGroup BogotaDotNet
MCP – MCC
@julitogtu
• 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
• Sistema de plugins
• Lenguaje cliente
• No es invasivo
• Compatibilidad con navegadores
• Liviano
• Sencillo de utilizar
JQUERY Y ASP.NET: UNA NUEVA EXPERIENCIA DE USUARIO
• 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
• Alias para trabajar con jQuery:
jQuery == $
• Verificar estado de página:
$(function(){
//código
})
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 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
• 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
• 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
• 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
• 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
• 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
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()
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.
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
JQUERY Y ASP.NET: UNA NUEVA EXPERIENCIA DE USUARIO
GRACIAS!
Top Related