▫ Microsoft AJAX para ASP.NET
▫ ASP.NET AJAX Control-Toolkit
• JavaScript
▫ Estándar EcmaScript
• JQuery
▫ Librería JavaScript
JQuery en su salsa
Principales Características
• Ligero y fácil
▫ Versión reducida – Minified & Gzipped
• Potentes Selectores
▫ Compatibles con CSS 1-3
• Cross-Browser
▫ IE , FF, Safari, Opera y Chrome
• Extensible
▫ Plugin
Principales Características
• Librerías UI
▫ Jquery User Interface
▫ Efectos
▫ Controles
▫ Themas
Ejemplo
Selectores
Selectores
Selector
*
#id
element
.class
a, b
a b
a > b
a + b
a ~ b
Elementos que Selecciona...
Todos los elementos.
El elemento con el ID dado.
Todos los elementos del tipo dado.
Todos los elementos con la clase dada.
Elementos que coincidan con la a o con b.
Elementos b que son descendientes de a.
Elementos b que son hijos de a.
Elementos b a continuación de a.
Elementos que son hermanos de a.
Selectores
Selector
first
:last
:even
:odd
:eq (index)
first
:last
Elementos que Selecciona...
El primer elemento en el conjunto resultado.
El último elemento en el conjunto resultado
Elementos pares en el conjunto resultado (en base 0).
Elementos impares en el conjunto resultado (en base 0).
Un elemento numerado en el conjunto resultado (en base 0).
El primer elemento en el conjunto resultado.
El último elemento en el conjunto resultado
Selectores
Elementos que Selecciona...
Selector
Elementos de encabezado (por ejemplo. <h1>, <h2>)
:header
:animated
Elementos con una animación en progreso.
: contains(text) Elementos que contienen el texto facilitado.
:empty
Elementos sin nodos hijos.
Elementos que contienen un elemento descendientes que
coincide con a.
Elementos que tienen nodos hijos.
Elementos que están ocultos por medio de CSS o porque son
<input type="hidden" />.
:has (a)
:parent
:hidden
Selectores
Elementos que Selecciona...
Selector
Elementos que tienen el atributo attr.
[attr]
[attr=value] Elementos cuyo atributo attr es value.
[attr^=value] Elementos cuyo atributo attr empieza con value.
:first-child
:checkbox
:image
:disable
:checked
:selected
Elementos que son el primer hijo de su padre.
Elementos <input> con type="checkbox".
Elementos <input> con type="image".
Elementos de formulario desactivados.
Casillas de verificación y botones de opción seleccionados.
Elementos <option> seleccionados.
Métodos usados para:
Añade una clase al elemento o elementos.
Obtiene el atributo del primer elemento.
Obtiene el contenido html del primer elemento.
Obtiene el valor del primer elemento.
Elimina la propiedad del elemento.
Añade un nuevo elemento.
Obtiene el elemento hijo.
Obtiene el primer elemento.
Obtiene el siguiente elemento disponible.
Ejemplo
Eventos
Eventos
• Se pueden lanzar
• Se puede enlazar una función
• Tantos eventos como en JavaScript sin «on-»
▫ focus()
▫ blur()
▫ keyup()
▫ mouseover()
▫ …
Eventos
• bind()
▫ Permite asociar un número ilimitado de eventos a
un mismo elemento.
• toggle()
▫ La ejecución se alterna en función de las veces que
Métodos usados para:
Oculta el elemento.
Muestra el elemento.
Para la animación actual.
Muestra el elemento con una animación.
Oculta el elemento con una animación.
Personaliza una animación
Llamadas AJAX
JQuery AJAX
• Limitaciones con Cross-domain
• Tipos de Datos
▫ Texto
▫ Html
▫ Xml
▫ Script
▫ Json
▫ JsonP «cross-domain»
Animaciones
JQuery AJAX
• Función principal
▫ $.ajax()
• Propiedades
▫ async
▫ beforeSend
▫ complete
▫ contentType
▫ data
▫ dataType
▫ error
▫ success
▫ type
▫ url
Comentarios de: JavaScript en su salsa con JQuery - La Web desde cero (II) (0)
No hay comentarios