110
jQuery
| Date post: | 13-Jan-2015 |
| Category: |
Technology |
| Upload: | luisartola |
| View: | 4,244 times |
| Download: | 5 times |
jQuery
jQuerypor Luis Artola
jQuerypor Luis Artola sicos!
jQuerypor Luis Artola sicos! programania.net
jQuerypor Luis Artola sicos! programania.netprecriticas.com
RECURSOS• Tutorials
http://docs.jquery.com/Tutorials
• Visual jqueryhttp://visualjquery.com/
• Learning jqueryhttp://www.learningjquery.com/
• jQuery Essentialshttp://www.slideshare.net/1Marc/jquery-essentials
• Javascript Library Overviewhttp://www.slideshare.net/jeresig/javascript-library-overview
¿QUÉ PUEDO HACER?Bombardeo de código
<script type="text/javascript" src="jquery.js"></script>
1/8
2/8
• $(“p”) .appendTo(“#foo”); Mueve “algo” a id=foo
2/8
• $(“p”) .appendTo(“#foo”); Mueve “algo” a id=foo
• $(...).css(“border”, “1px solid black”); Ponle a “algo” el borde 1px negro.
2/8
• $(“p”) .appendTo(“#foo”); Mueve “algo” a id=foo
• $(...).css(“border”, “1px solid black”); Ponle a “algo” el borde 1px negro.
• $(...).val(“3”); Ponle el valor a “algo” = 3.!
2/8
• $(“p”) .appendTo(“#foo”); Mueve “algo” a id=foo
• $(...).css(“border”, “1px solid black”); Ponle a “algo” el borde 1px negro.
• $(...).val(“3”); Ponle el valor a “algo” = 3.!
• $(...).val(); Dame el valor de “algo”. !
2/8
3/8
• $(...).attr(“href”, “http://google.com”); Que todos los links tengan el atributo href como google.com
3/8
• $(...).attr(“href”, “http://google.com”); Que todos los links tengan el atributo href como google.com
• $(...).html(“<p>Iʼm new</p>”); Cambia el HTML de “algo” por ....
3/8
• $(...).attr(“href”, “http://google.com”); Que todos los links tengan el atributo href como google.com
• $(...).html(“<p>Iʼm new</p>”); Cambia el HTML de “algo” por ....
• $(...).attr(“checked”,”checked”); Pon el atributo checked a checked.
3/8
• $(...).attr(“href”, “http://google.com”); Que todos los links tengan el atributo href como google.com
• $(...).html(“<p>Iʼm new</p>”); Cambia el HTML de “algo” por ....
• $(...).attr(“checked”,”checked”); Pon el atributo checked a checked.
• $(...).click(function(){ something();}); Cuando “algo” es clickado haz “someting()”.
3/8
4/8
• Con cada click haz un desplegar / replegar.$(...).click( function(){ $(“div:first”).slideToggle(); });
4/8
• Con cada click haz un desplegar / replegar.$(...).click( function(){ $(“div:first”).slideToggle(); });
• $(...).animate({ “width”: “300px” }, 500); Amplia un elemento a 300px en 5 segundos.
4/8
• Con cada click haz un desplegar / replegar.$(...).click( function(){ $(“div:first”).slideToggle(); });
• $(...).animate({ “width”: “300px” }, 500); Amplia un elemento a 300px en 5 segundos.
• $(...).fadeTo(0.3); Reduce la opacidad de “algo” al 30%.
4/8
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.
5/8
LOAD 6/8
• $(...).load(ʻ/direccion/url/ʼ) Cargar una url en un id.
LOAD 6/8
• $(...).load(ʻ/direccion/url/ʼ) Cargar una url en un id.
• $(...).load(ʻ/direccion/url/ #containerʼ) Cargar una url en un id, pero solo el id container.
LOAD 6/8
• $(...).load(ʻ/direccion/url/ʼ) Cargar una url en un id.
• $(...).load(ʻ/direccion/url/ #containerʼ) Cargar una url en un id, pero solo el id container.
• $(...).load(ʻ/direccion/url/ʼ, $(ʻ#formʼ).serialize()) Cargar una url en un id, pasándo parámetros por GET.
LOAD 6/8
• $(...).load(ʻ/direccion/url/ʼ) Cargar una url en un id.
• $(...).load(ʻ/direccion/url/ #containerʼ) Cargar una url en un id, pero solo el id container.
• $(...).load(ʻ/direccion/url/ʼ, $(ʻ#formʼ).serialize()) Cargar una url en un id, pasándo parámetros por GET.
• $(...).load(ʻ/direccion/url/ʼ, $(ʻ#formʼ).serializeArray()) Cargar una url en un id, pasando parámetros por POST
LOAD 6/8
• $(...).load(ʻ/direccion/url/ʼ) Cargar una url en un id.
• $(...).load(ʻ/direccion/url/ #containerʼ) Cargar una url en un id, pero solo el id container.
• $(...).load(ʻ/direccion/url/ʼ, $(ʻ#formʼ).serialize()) Cargar una url en un id, pasándo parámetros por GET.
• $(...).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.
LOAD 6/8
7/8
• $.fn.myPlugin = function(){ return this.each(function(){ $(this).html(“you used myPlugin!”); });});
$(...).myPlugin();
7/8
• $.fn.myPlugin = function(){ return this.each(function(){ $(this).html(“you used myPlugin!”); });});
$(...).myPlugin();
7/8
• $.fn.myPlugin = function(){ return this.each(function(){ $(this).html(“you used myPlugin!”); });});
$(...).myPlugin();
7/8
jQuery("<div/>", { id: "foo", css: { height: "50px", width: "50px", color: "blue", backgroundColor: "#ccc" }, click: function() { $(this).css("backgroundColor", "red"); } }).appendTo("body");
8/8
SelectoresEl gran superpoder de jQuery
1/8
• $('div') Selecciona todas las capas.
1/8
• $('div') Selecciona todas las capas.
• $('#myid') Selecciona el id myid.
1/8
• $('div') Selecciona todas las capas.
• $('#myid') Selecciona el id myid.
• $('div#myid') Selecciona el div con id myid.
1/8
2/8
• $('.myclass') Selecciona todos los elementos de la clase myclass.
2/8
• $('.myclass') Selecciona todos los elementos de la clase myclass.
• $('.myclass .otherclass') Selecciona todos los elementos de la clase myclass y de otherclass.
2/8
• $('.myclass') Selecciona todos los elementos de la clase myclass.
• $('.myclass .otherclass') Selecciona todos los elementos de la clase myclass y de otherclass.
• $('#container p') Selecciona todos los párrafos hijos del id container.
2/8
3/8
$(':empty') Selecciona todos los elementos sin hijos.
3/8
$(':empty') Selecciona todos los elementos sin hijos.
3/8
$(':empty') Selecciona todos los elementos sin hijos.
•$('*') Selecciona todos los elementos.
3/8
$(':empty') Selecciona todos los elementos sin hijos.
•$('*') Selecciona todos los elementos.
3/8
$(':empty') Selecciona todos los elementos sin hijos.
•$('*') Selecciona todos los elementos.
•$('[rel]') Selecciona todos los elementos con un atributo rel.
3/8
$(':empty') Selecciona todos los elementos sin hijos.
•$('*') Selecciona todos los elementos.
•$('[rel]') Selecciona todos los elementos con un atributo rel.
3/8
$(':empty') Selecciona todos los elementos sin hijos.
•$('*') Selecciona todos los elementos.
•$('[rel]') Selecciona todos los elementos con un atributo rel.
•$('[name=myname]') Selecciona todos los elementos con un atributo name que valga myname.
3/8
4/8
4/8
•$('.myclass > code') Selecciona todos los <code> hijos de los elementos de la clase myclass.
4/8
•$('.myclass > code') Selecciona todos los <code> hijos de los elementos de la clase myclass.
4/8
•$('.myclass > code') Selecciona todos los <code> hijos de los elementos de la clase myclass.
•$('#myid + .myclass') Selecciona a todos los elementos de la clase myclass que son hermanos de myid.
4/8
•$('.myclass > code') Selecciona todos los <code> hijos de los elementos de la clase myclass.
•$('#myid + .myclass') Selecciona a todos los elementos de la clase myclass que son hermanos de myid.
4/8
•$('.myclass > code') Selecciona todos los <code> hijos de los elementos de la clase myclass.
•$('#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.
4/8
5/8
$('p:nth-child(odd)') Selecciona los <p> hijos impares de su padre.
5/8
$('p:nth-child(odd)') Selecciona los <p> hijos impares de su padre.
5/8
$('p:nth-child(odd)') Selecciona los <p> hijos impares de su padre.
•$('li:first-child') Selecciona los <li> que son el primer hijo de su padre.
5/8
$('p:nth-child(odd)') Selecciona los <p> hijos impares de su padre.
•$('li:first-child') Selecciona los <li> que son el primer hijo de su padre.
5/8
$('p:nth-child(odd)') Selecciona los <p> hijos impares de su padre.
•$('li:first-child') Selecciona los <li> que son el primer hijo de su padre.
•$(':only-child') Selecciona los hijos únicos.
5/8
$('p:nth-child(odd)') Selecciona los <p> hijos impares de su padre.
•$('li:first-child') Selecciona los <li> que son el primer hijo de su padre.
•$(':only-child') Selecciona los hijos únicos.
5/8
$('p:nth-child(odd)') Selecciona los <p> hijos impares de su padre.
•$('li:first-child') Selecciona los <li> que son el primer hijo de su padre.
•$(':only-child') Selecciona los hijos únicos.
•$(':not(.myclass)') Selecciona los elementos que no son de la clase myclass.
5/8
6/8
$('a[rel!=nofollow]') anchors que no tiene un atributo ʻrelʼ = ʻnofollowʼ ( o que no tienen atributo rel ).
6/8
$('a[rel!=nofollow]') anchors que no tiene un atributo ʻrelʼ = ʻnofollowʼ ( o que no tienen atributo rel ).
•$('[id^=hello]') selecciona los elementos cuyo id empieza por hello.
6/8
$('a[rel!=nofollow]') anchors que no tiene un atributo ʻrelʼ = ʻnofollowʼ ( o que no tienen atributo rel ).
•$('[id^=hello]') selecciona los elementos cuyo id empieza por hello.
6/8
$('a[rel!=nofollow]') anchors que no tiene un atributo ʻrelʼ = ʻnofollowʼ ( o que no tienen atributo rel ).
•$('[id^=hello]') selecciona los elementos cuyo id empieza por hello.
•$('[id$=goodbye]') ... cuyo id termina por goodbye.
6/8
$('a[rel!=nofollow]') anchors que no tiene un atributo ʻrelʼ = ʻnofollowʼ ( o que no tienen atributo rel ).
•$('[id^=hello]') selecciona los elementos cuyo id empieza por hello.
•$('[id$=goodbye]') ... cuyo id termina por goodbye.
6/8
$('a[rel!=nofollow]') anchors que no tiene un atributo ʻrelʼ = ʻnofollowʼ ( o que no tienen atributo rel ).
•$('[id^=hello]') selecciona los elementos cuyo id empieza por hello.
•$('[id$=goodbye]') ... cuyo id termina por goodbye.
•$('[style*=background]') selecciona los elementos que tiene un style con background definido.
6/8
7/8
$('[class~=myclass]') Selecciona los elementos que tiene la clase myclass, por lo menos.
7/8
$('[class~=myclass]') Selecciona los elementos que tiene la clase myclass, por lo menos.
7/8
$('[class~=myclass]') Selecciona los elementos que tiene la clase myclass, por lo menos.
•$('[id|=hello]') Selecciona aquellos que tienen un id hello o que empieza por hello.
7/8
$('[class~=myclass]') Selecciona los elementos que tiene la clase myclass, por lo menos.
•$('[id|=hello]') Selecciona aquellos que tienen un id hello o que empieza por hello.
7/8
$('[class~=myclass]') Selecciona los elementos que tiene la clase myclass, por lo menos.
•$('[id|=hello]') Selecciona aquellos que tienen un id hello o que empieza por hello.
•$('li:gt(2)') Selecciona aquellos <li> después del tercero.
7/8
8/8
• $('li:contains(second)') Selecciona los <li> que contienen la palabra “second”
8/8
• $('li:contains(second)') Selecciona los <li> que contienen la palabra “second”
• $('.myclass:has(#myid)') Selecciona los myclass que tienen un hijo myid
8/8
• $('li:contains(second)') Selecciona los <li> que contienen la palabra “second”
• $('.myclass:has(#myid)') Selecciona los myclass que tienen un hijo myid
• $('.myclass:visible') Selecciona todos los myclass visibles.
8/8
¡(casi)Nunca haces un loop o un foreach!
TEORÍASe acabó el bombardeo de código.
• Filosofía jQuery:Simplificar la relación entre HTML y JavaScript.
• Filosofía jQuery:Simplificar 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:before(), after(), appendTo(), append(), ...
• Attributes: css(), attr(), html(), val(), addClass(), text(), ...
• Manipulation:before(), after(), appendTo(), append(), ...
• Attributes: css(), attr(), html(), val(), addClass(), text(), ...
• Events: bind(), trigger(), unbind(), live(), click(), submit(), ...
• Effects: show(), fadeOut(), toggle(), animate(), ...
• Effects: show(), fadeOut(), toggle(), animate(), ...
• Traversingfind(), prevAll(), next(), hasClass(), children(), siblings(), ...
• Effects: show(), fadeOut(), toggle(), animate(), ...
• Traversingfind(), 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(:first)').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, Netflix, Dell, HP, Bank of America, Intel... NBC, CBS, BBC, Reuters, Newsweek...
JQUERY UI
• Interactions
• Draggable
• Droppable
• Sortable
• Selectable
• Resizable
• Effects
• Theming y CSS framework
• Widgets
• Accordion
• Datepicker
• Dialog
• Progressbar
• Slider
• Tabs
¿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.
