Introducción a jQuery
Programadores contentos, usuarios contentos
Cómo funciona
JavaScript y jQuery
Soluciones para
el mundo real
JavaScript 1995
ECMAScript 1996
JScript 1996
Brendan Eich
Lenguaje basado en prototipos
Guerra de navegadores
(todos somos víctimas)
No hay convenios
No hay herramientas
DOM
window.refresh()
document.write()
function Libro(titulo, autor) {
this.titulo = titulo;
this.autor = autor;
this.vendido = false;
this.vender = function(precio) {
this.vendido = true;
}
}
Tareas dolorosas
Popups
AJAX compatible
Degradación elegante
Eventos compuestos
Animaciones
¡Te queremos!
Es un framework
Clases, funciones, etc
Metodologías
"Find something, manipulate it
(encuentra algo, manipúlalo)"
John Resig
clases
métodos
programación basada
en prototipos
Ventajas
Libre
Muchos, muchísimos plug-ins
Gran comunidad (soporte/formación)
Avalada por grandes marcas
Compatible con IE6!!
Requisitos previos
Funciones anónimas
JSON
Clase $
función
variable
Localizar elementos DOM
<body>
<div id="destacado">
<h3>UCAM subcampeona en tenis de mesa</h3>
</div>
<dl>
<dt class="noticia"><h3>Título de una noticia</h3></dt>
<dd>Entradilla de la noticia</dd>
<dt class="noticia"><h3>Título de otra noticia</h3></dt>
<dd>Entradilla de la otra noticia</dd>
</dl>
</body>
$("#destacado")
$(".noticia")
$("#destacado h3")
$("h3")
$("dt.noticia")
Seguir localizando elementos
$(expresión).parent()
$(expresión).next()
$(expresión).previous()
$(expresión).add(otraExpresion)
Y también se pueden encadenar:
$(expresion).add().next()...
Manipular elementos
$(expresion).html(cadena) cambia el contenido del elemento
$(expresion).val(cadena) cambia el valor del campo
$(expresion).append(cadena) añade HTML al elemento
$(expresion).before() y .after() insertan HTML antes o después
$(expresion).attr() cambia o devuelve un atributo
CSS
$(expresion).addClass() añade una clase al elemento
$(expresion).css() devuelve o establece una propiedad CSS
$(expresion).height() y .width() devuelve o establece la altura o anchura
$(expresion).innerHeight() y .innerWidth() devuelve o establece la altura o anchura de contenido
Gestión de eventos
Efectos
AJAX
$(expresion).hide() oculta un elemento
$(expresion).show() muestra un elemento oculto
$(expresion).toggle() conmuta entre visible/oculto
$(expresion).fadeOut() desvanece un elemento
$(expresion).fadeIn() hace aparecer un elemento
En todos ellos se pueden pasar dos
argumentos: velocidad y callback.
$(document).ready()
israelviana.es/jquery
Israel Viana
<input type="buton" id="btn" onclick="alert('Hola')" value="Pulsame" />
Asociar acciones
a eventos
$("#btn").bind("click", function(){
alert("Hola " + $(this).val());
});
Sin jQuery
Con jQuery
No te compliques!
$.ajax(
type: "POST o GET",
url: "/direccion",
success: function(contenido) {
alert("Ok");
},
);
$(expresion).load(url)
$.get()
$.getJSON()
$.getScript()
Tooltips
Pop-ups (Boxy)
new Boxy("<p>Contenido</p>", {title: "Título de la ventana"});
Tablas potentes (TableSorter)
Slideshow (Cycle)
Enviar formularios
por AJAX (Form)
Autocompletado
(Autocomplete)
CSS Cross-browser
$(expresion).css("opacity", "0.5");
$('#contenedor_imagenes').cycle();
$("#tabla").tableSorter();
$('#form').ajaxForm(function() { alert("Enviado"); });
var opciones = ["Pedro", "Andrés", "Dani", "Isra", "Antonio"];
$("#campo_de_texto").autocomplete(opciones);
Rollover en IE6
$(expresion).hover(antes, despues);
Pestañas deslizables
(Coda Slider)
$(contenedor).codaSlider();
$(expresion).tooltip(opciones)More presentations by Isra V
Popular presentations
Powerpoint Man
David Oliveira on
This Prezi tutorial aims to help people on how they can be more persuasive and more communicative with their presentations.
Academy: 10 ways to say it with prezi
Adam Somlai-Fischer on
Prezi is simple: You Write, Zoom, Arrange.Using these simple means, you can express many things - with great impact.Here are some basic examples such as ...
Academy: Prezi Workflow in 15 minutes
Adam Somlai-Fischer on
How to use Prezi - Interface and workflow
More popular prezis in Explore>