Jquery

jQuery
por Luis Artola
sicos!

jQuery
por Luis Artola
sicos!
programania.net

jQuery
por Luis Artola
sicos!
programania.net
precriticas.com

RECURSOS
• Tutorials
http://docs.jquery.com/Tutorials

• Visual jquery
http://visualjquery.com/

• Learning jquery
http://www.learningjquery.com/

• jQuery Essentials
http://www.slideshare.net/1Marc/jquery-essentials

• Javascript Library Overview
http://www.slideshare.net/jeresig/javascript-library-overview

¿QUÉ PUEDO HACER?
Bombardeo de código

1/8

<script type="text/javascript" src="jquery.js"></script>

2/8

• $(“p”) .appendTo(“#foo”);
Mueve “algo” a id=foo

2/8


• $(...).css(“border”, “1px solid black”);
Ponle a “algo” el borde 1px negro.

2/8



• $(...).val(“3”);
Ponle el valor a “algo” = 3.!

2/8



• $(...).val(“3”);
Ponle el valor a “algo” = 3.!

• $(...).val();
Dame el valor de “algo”. !

3/8

• $(...).attr(“href”, “http://google.com”);
Que todos los links tengan el atributo href
como google.com

3/8

como google.com

• $(...).html(“<p>Iʼm new</p>”);
Cambia el HTML de “algo” por ....

3/8

como google.com

• $(...).html(“<p>Iʼm new</p>”);

• $(...).attr(“checked”,”checked”);
Pon el atributo checked a checked.

3/8

como google.com

• $(...).html(“<p>Iʼm new</p>”);

• $(...).attr(“checked”,”checked”);
Pon el atributo checked a checked.

• $(...).click(function(){ something();});
Cuando “algo” es clickado haz “someting()”.

4/8

• Con cada click haz un desplegar / replegar.
$(...).click(
function(){
$(“div:ﬁrst”).slideToggle();
});

4/8

$(...).click(
function(){
});

• $(...).animate({ “width”: “300px” }, 500);
Amplia un elemento a 300px en 5 segundos.

4/8

$(...).click(
function(){
});

• $(...).animate({ “width”: “300px” }, 500);
Amplia un elemento a 300px en 5 segundos.

• $(...).fadeTo(0.3);
Reduce la opacidad de “algo” al 30%.

5/8

• $(...).get(“tag.php”, { “bar”: “baz” });
Envía datos por get a tag.php.

5/8

• $(...).get(“tag.php”, { “bar”: “baz” });
Envía datos por get a tag.php.

• $.post(“send.php”, { foo: ”bar” },
function(response){
alert(response);
});
Envía datos por post a send.php y luego
avisa.

6/8
LOAD
• $(...).load(ʻ/direccion/url/ʼ)
Cargar una url en un id.

6/8
LOAD

• $(...).load(ʻ/direccion/url/ #containerʼ)
Cargar una url en un id, pero solo el id container.

6/8
LOAD


• $(...).load(ʻ/direccion/url/ʼ, $(ʻ#formʼ).serialize())
Cargar una url en un id, pasándo parámetros por GET.

6/8
LOAD



• $(...).load(ʻ/direccion/url/ʼ, $(ʻ#formʼ).serializeArray())
Cargar una url en un id, pasando parámetros por POST

6/8
LOAD



• $(...).load(ʻ/direccion/url/ʼ, $(ʻ#formʼ).serializeArray())
Cargar una url en un id, pasando parámetros por POST

• También .post(), .get(), .getJSON(), .ajax() que
permiten, entre otras cosas, callbacks.

7/8

• $.fn.myPlugin = function(){ return this.each
(function(){
$(this).html(“you used myPlugin!”); });
});

$(...).myPlugin();

8/8
jQuery("<div/>", {
id: "foo",
css: {
height: "50px",
width: "50px",
color: "blue",
backgroundColor: "#ccc"
},
click: function() {
$(this).css("backgroundColor", "red");
}
}).appendTo("body");

Selectores
El gran superpoder de jQuery

1/8

• $('div')
Selecciona todas las capas.

1/8

• $('div')

• $('#myid')
Selecciona el id myid.

1/8

• $('div')

• $('#myid')
Selecciona el id myid.

• $('div#myid')
Selecciona el div con id myid.

2/8

• $('.myclass')
Selecciona todos los elementos de la clase
myclass.

2/8

• $('.myclass')
myclass.

• $('.myclass .otherclass')
myclass y de otherclass.

2/8

• $('.myclass')
myclass.

• $('.myclass .otherclass')
myclass y de otherclass.

• $('#container p')
Selecciona todos los párrafos hijos del id
container.

3/8
$(':empty')
Selecciona todos los elementos sin hijos.

3/8
$(':empty')

• $('*')
Selecciona todos los elementos.

3/8
$(':empty')

• $('*')

• $('[rel]')
Selecciona todos los elementos con un atributo
rel.

3/8
$(':empty')

• $('*')

• $('[rel]')
rel.

• $('[name=myname]')
name que valga myname.

4/8

• $('.myclass > code')
Selecciona todos los <code> hijos de los
elementos de la clase myclass.

4/8


• $('#myid + .myclass')
Selecciona a todos los elementos de la clase
myclass que son hermanos de myid.

4/8


• $('#myid + .myclass')
Selecciona a todos los elementos de la clase
myclass que son hermanos de myid.

• $('#myid ~ .myclass')
Selecciona a todos los myclass que siguen a un
hermano myid.

5/8
$('p:nth-child(odd)')
Selecciona los <p> hijos impares de su padre.

5/8

• $('li:ﬁrst-child')
Selecciona los <li> que son el primer hijo de su
padre.

5/8

padre.

• $(':only-child')
Selecciona los hijos únicos.

5/8

padre.

• $(':only-child')
Selecciona los hijos únicos.

• $(':not(.myclass)')
Selecciona los elementos que no son de la clase
myclass.

6/8

$('a[rel!=nofollow]')
anchors que no tiene un atributo ʻrelʼ = ʻnofollowʼ ( o
que no tienen atributo rel ).

6/8


• $('[id^=hello]')
selecciona los elementos cuyo id empieza por hello.

6/8


• $('[id^=hello]')

• $('[id$=goodbye]')
... cuyo id termina por goodbye.

6/8


• $('[id^=hello]')

• $('[id$=goodbye]')
... cuyo id termina por goodbye.

• $('[style*=background]')
selecciona los elementos que tiene un style con
background deﬁnido.

7/8

$('[class~=myclass]')
Selecciona los elementos que tiene la clase
myclass, por lo menos.

7/8


• $('[id|=hello]')
Selecciona aquellos que tienen un id hello o que
empieza por hello.

7/8


• $('[id|=hello]')
Selecciona aquellos que tienen un id hello o que
empieza por hello.

• $('li:gt(2)')
Selecciona aquellos <li> después del tercero.

8/8

• $('li:contains(second)')
Selecciona los <li> que contienen la palabra
“second”

8/8

“second”

• $('.myclass:has(#myid)')
Selecciona los myclass que tienen un hijo
myid

8/8

“second”

• $('.myclass:has(#myid)')
Selecciona los myclass que tienen un hijo
myid

• $('.myclass:visible')
Selecciona todos los myclass visibles.

¡(casi)Nunca haces un loop o un foreach!

TEORÍA
Se acabó el bombardeo de código.

• Filosofía jQuery:
Simpliﬁcar la relación entre HTML y
JavaScript.

• Filosofía jQuery:
Simpliﬁcar la relación entre HTML y
JavaScript.

• #1. Encontrar “algo” de HTML
#2. Hacer algo con él.

• Herramienta poderosa a la hora de encontrar
una serie de elementos en un documento.
Desde CSS 1 hasta 3 y los suyos propios.

• Herramienta poderosa a la hora de encontrar
una serie de elementos en un documento.
Desde CSS 1 hasta 3 y los suyos propios.

• API sólida y usable que te esconde los
probemas de compatibilidad entre
navegadores.

• Manipulation:
before(), after(), appendTo(), append(), ...

• Manipulation:

• Attributes:
css(), attr(), html(), val(), addClass(), text(), ...

• Manipulation:

• Attributes:
css(), attr(), html(), val(), addClass(), text(), ...

• Events:
bind(), trigger(), unbind(), live(), click(), submit(), ...

• Effects:
show(), fadeOut(), toggle(), animate(), ...

• Effects:

• Traversing
ﬁnd(), prevAll(), next(), hasClass(), children(), siblings(), ...

• Effects:

• Traversing
ﬁnd(), prevAll(), next(), hasClass(), children(), siblings(), ...

• Ajax
get(), getJSON(), post(), ajax(), load()

• Las acciones pueden ser encadenadas:

$(...).addClass(ʻfooʼ).fadeIn().html(“foo”);

$("li").not(":has(ul)").css("border", "1px solid
black");

$(':input').parents(':not(:ﬁrst)').show()

• jQuery tiene una enorme comunidad.

• test coverage! plugins! books support
tutorials

• open (free) license! speed

• Código ligero.

• Projectos que lo usan:
Wordpress, Drupal, Textpattern

• Projectos que lo usan:
Wordpress, Drupal, Textpattern

• Compañías que lo usan:
Google, Amazon, Digg, Netﬂix, Dell, HP, Bank
of America, Intel... NBC, CBS, BBC, Reuters,
Newsweek...

• Interactions

• Draggable • Widgets

• Droppable • Accordion

• Sortable • Datepicker

• Selectable • Dialog

• Resizable • Progressbar

• Effects • Slider

• Theming y CSS • Tabs
framework

¿CUÁL ES MEJOR?

• jQuery tiene selectores más potentes
• Dojo tiene un framework UI más potente.
• Prototype y MooTools, son mucho más
extensibles (OO) y modulares.

Jquery

Más contenido relacionado

Jquery