SlideShare una empresa de Scribd logo

Jquery

L
luisartola

Este documento proporciona una introducción a jQuery y sus funcionalidades. Explica cómo jQuery permite manipular y modificar el DOM de manera sencilla, y ofrece varios ejemplos de código que muestran cómo se pueden realizar tareas comunes como añadir o modificar elementos, manejar eventos, realizar peticiones AJAX y más. También incluye una sección sobre selectores de jQuery, mostrando cómo se pueden seleccionar elementos de diferentes maneras.

TecnologíaEmpresariales
1 de 110
Descargado 182 veces
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
jQuery
jQuery por Luis Artola
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
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”. !
3/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()”.
4/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%.
5/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.
6/8 LOAD
6/8 LOAD • $(...).load(ʻ/direccion/url/ʼ) Cargar una url en un id.
6/8 LOAD • $(...).load(ʻ/direccion/url/ʼ) Cargar una url en un id. • $(...).load(ʻ/direccion/url/ #containerʼ) Cargar una url en un id, pero solo el id container.
6/8 LOAD • $(...).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.
6/8 LOAD • $(...).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
6/8 LOAD • $(...).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.
7/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();
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
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.
2/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.
3/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.
4/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.
5/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.
6/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.
7/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.
8/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.
¡(casi)Nunca haces un loop o un foreach!
TEORÍA Se acabó el bombardeo de código.
Jquery
• 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.
Jquery
• 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.
Jquery
• 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(), ...
Jquery
• Effects: show(), fadeOut(), toggle(), animate(), ...
• Effects: show(), fadeOut(), toggle(), animate(), ... • Traversing find(), prevAll(), next(), hasClass(), children(), siblings(), ...
• Effects: show(), fadeOut(), toggle(), animate(), ... • Traversing find(), prevAll(), next(), hasClass(), children(), siblings(), ... • Ajax get(), getJSON(), post(), ajax(), load()
Jquery
• 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.
Jquery
• 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 • 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.

Más contenido relacionado

PPTX
Jquery parte 1
Cesar Eduardo Suarez T
 
ODP
Introducción a JQuery
Continuum
 
ODP
Introduccion a Jquery
Ignacio Tolstoy
 
PDF
(Muy breve) Introduccion a jQuery
Víctor Manuel Rivas Santos
 
PPT
Charla Jquery
kaolong
 
PDF
JQuery-Tema 1
Renny Batista
 
PDF
jQuery 1.3 Eghost Julio2009
Irontec
 
PDF
Seminario jquery, html5 y wicket
Adrià Solé Orrit
 
Jquery parte 1
Cesar Eduardo Suarez T
 
Introducción a JQuery
Continuum
 
Introduccion a Jquery
Ignacio Tolstoy
 
(Muy breve) Introduccion a jQuery
Víctor Manuel Rivas Santos
 
Charla Jquery
kaolong
 
JQuery-Tema 1
Renny Batista
 
jQuery 1.3 Eghost Julio2009
Irontec
 
Seminario jquery, html5 y wicket
Adrià Solé Orrit
 

La actualidad más candente (19)

PPTX
Clase 12 jQuery basico
José Ricardo Tillero Giménez
 
PDF
En 20 minutos ... jQuery
Sección de Metodologías, Normalización y Calidad del Software
 
PPTX
J query
Yoshira Atencio
 
PPTX
Jquery
Naser Romero
 
ODP
Introduccion a j_query
Canío CaminoSolo
 
PDF
jQuery
Coya14
 
PDF
03. Introduccion a JavaScript y JQuery
Danae Aguilar Guzmán
 
PDF
Clase 14 doctrine - subir archivos
hydras_cs
 
PDF
Doctrine2 sf2Vigo
Ignacio Martín
 
PDF
Introduccion a DOM y AJAX - Javier Oliver Fulguera
Javier Oliver Fulguera
 
PDF
Tutorial de jquery
david hernandez
 
PPTX
JavaScript
Jorge Armando Rocha Mendoza
 
PPTX
Lenguaje JavaScript parte 2
Facultad de Ciencias y Sistemas
 
PDF
Entidades en drupal 8
Atenea tech
 
PPTX
Unidad 3 AJAX
Iosdy Campos
 
PPTX
Jquery 2
Cesar Eduardo Suarez T
 
PPTX
Entidades en drupal 8
Atenea tech
 
PDF
Acciones JSP
jubacalo
 
PPTX
Php2
VanesitaCarranza
 
Clase 12 jQuery basico
José Ricardo Tillero Giménez
 
En 20 minutos ... jQuery
Sección de Metodologías, Normalización y Calidad del Software
 
J query
Yoshira Atencio
 
Jquery
Naser Romero
 
Introduccion a j_query
Canío CaminoSolo
 
jQuery
Coya14
 
03. Introduccion a JavaScript y JQuery
Danae Aguilar Guzmán
 
Clase 14 doctrine - subir archivos
hydras_cs
 
Doctrine2 sf2Vigo
Ignacio Martín
 
Introduccion a DOM y AJAX - Javier Oliver Fulguera
Javier Oliver Fulguera
 
Tutorial de jquery
david hernandez
 
JavaScript
Jorge Armando Rocha Mendoza
 
Lenguaje JavaScript parte 2
Facultad de Ciencias y Sistemas
 
Entidades en drupal 8
Atenea tech
 
Unidad 3 AJAX
Iosdy Campos
 
Jquery 2
Cesar Eduardo Suarez T
 
Entidades en drupal 8
Atenea tech
 
Acciones JSP
jubacalo
 
Php2
VanesitaCarranza
 
Publicidad

Destacado (20)

PDF
jQuery 1.3 UI eghost Julio2009
Irontec
 
PPT
Todo Javascript para canibales
briant pati
 
PDF
BAU International Executive MBA Webinar
bauinternational
 
PPTX
Triple E class DevOps with Hudson, Maven, Kokki/Multiconf and PyDev
Werner Keil
 
PPT
Le client au centre
diederikhommes
 
PDF
Social Media Marketing: mucho más que redes sociales
Ibermatica Social Business y CRM
 
PPT
Ice Presentacio
aaupcfira
 
PPT
Elaboració del whisky de malta
Joan Mitjavila
 
PDF
Manual divulgativo life_urogallo
Guias de Picos de Europa Panes Aventura
 
PPT
Correo institucional_Escuela de Verano
Elena Moreno
 
PDF
iPad sales app - Professionelles Präsentieren im Vertrieb
excelsis
 
PDF
Biologie de synthèse
GreenFacts
 
PPTX
Qui acd alyr
Alicia Yañez
 
PDF
Presentacion diseño web con jquery
Mejorandola
 
PPTX
La magia de jquery
AngelDX
 
PPT
Bahamonde pereira
Iván Bahamonde
 
PPTX
Laravel 4.2 pdf
ALDEN_HERRE
 
PPS
Obras presentadas al Concurso "Arte por la Igualdad y contra el Racismo 2011"
sosracismo
 
PPT
AJAX
phidalgo
 
PDF
El universo JavaScript en Drupal 8
Ymbra
 
jQuery 1.3 UI eghost Julio2009
Irontec
 
Todo Javascript para canibales
briant pati
 
BAU International Executive MBA Webinar
bauinternational
 
Triple E class DevOps with Hudson, Maven, Kokki/Multiconf and PyDev
Werner Keil
 
Le client au centre
diederikhommes
 
Social Media Marketing: mucho más que redes sociales
Ibermatica Social Business y CRM
 
Ice Presentacio
aaupcfira
 
Elaboració del whisky de malta
Joan Mitjavila
 
Manual divulgativo life_urogallo
Guias de Picos de Europa Panes Aventura
 
Correo institucional_Escuela de Verano
Elena Moreno
 
iPad sales app - Professionelles Präsentieren im Vertrieb
excelsis
 
Biologie de synthèse
GreenFacts
 
Qui acd alyr
Alicia Yañez
 
Presentacion diseño web con jquery
Mejorandola
 
La magia de jquery
AngelDX
 
Bahamonde pereira
Iván Bahamonde
 
Laravel 4.2 pdf
ALDEN_HERRE
 
Obras presentadas al Concurso "Arte por la Igualdad y contra el Racismo 2011"
sosracismo
 
AJAX
phidalgo
 
El universo JavaScript en Drupal 8
Ymbra
 
Publicidad

Similar a Jquery (20)

ODP
Desarrollando aplicaciones web usando Catalyst y jQuery
Javier P.
 
ODP
Desarrollo de aplicaciones web usando Catalyst y jQuery
Javier P.
 
PDF
Código mantenible, en Wordpress.
Asier Marqués
 
ODP
Desarrollo de aplicaciones web usando Catalyst y jQuery
Javier P.
 
PDF
J M E R L I N P H P
Mauro Gomez Mejia
 
PDF
Jquery para principianes
Mauro Gomez Mejia
 
PDF
Desarrollo código mantenible en WordPress utilizando Symfony
Asier Marqués
 
PPT
Php Basico
Eliecer Cedano
 
ODP
Asegúr@IT II - Seguridad en Web
Chema Alonso
 
PPT
07 tiles
Roberto Moreno Doñoro
 
DOCX
Julissa huaman hilari
Julissa Huaman Hilari
 
PDF
Javascript en proyectos reales: jQuery
David Arango
 
PDF
Silex, desarrollo web ágil y profesional con PHP
Javier Eguiluz
 
PPTX
HTML 5 & WebGL (Spanish Version)
Iran Reyes Fleitas
 
PDF
Assetic PHPmvd
Ismael Ambrosi
 
PPTX
DBIx::Class
Jose Luis Martínez
 
PDF
Twig, el nuevo motor de plantillas de Drupal 8
Javier Eguiluz
 
PDF
Web Scrapping & WordPress
César Jefferson Aquino Maximiliano
 
PPTX
Unidad3ajax
Iosdy Campos
 
PDF
Twig avanzado (sf2Vigo)
Javier Eguiluz
 
Desarrollando aplicaciones web usando Catalyst y jQuery
Javier P.
 
Desarrollo de aplicaciones web usando Catalyst y jQuery
Javier P.
 
Código mantenible, en Wordpress.
Asier Marqués
 
Desarrollo de aplicaciones web usando Catalyst y jQuery
Javier P.
 
J M E R L I N P H P
Mauro Gomez Mejia
 
Jquery para principianes
Mauro Gomez Mejia
 
Desarrollo código mantenible en WordPress utilizando Symfony
Asier Marqués
 
Php Basico
Eliecer Cedano
 
Asegúr@IT II - Seguridad en Web
Chema Alonso
 
07 tiles
Roberto Moreno Doñoro
 
Julissa huaman hilari
Julissa Huaman Hilari
 
Javascript en proyectos reales: jQuery
David Arango
 
Silex, desarrollo web ágil y profesional con PHP
Javier Eguiluz
 
HTML 5 & WebGL (Spanish Version)
Iran Reyes Fleitas
 
Assetic PHPmvd
Ismael Ambrosi
 
DBIx::Class
Jose Luis Martínez
 
Twig, el nuevo motor de plantillas de Drupal 8
Javier Eguiluz
 
Web Scrapping & WordPress
César Jefferson Aquino Maximiliano
 
Unidad3ajax
Iosdy Campos
 
Twig avanzado (sf2Vigo)
Javier Eguiluz
 

Último (20)

PPTX
COMO AYUDAN LAS TIC EN LA EDUCACION SUPERIOR.pptx
ap3377309
 
PPTX
REDES INFORMATICAS REDES INFORMATICAS.pptx
rendertecno
 
PDF
Estrategia de apoyo tecnología miguel angel solis
edepmiguelsolis
 
PPTX
RAP02 - TECNICO SISTEMAS TELEINFORMATICOS.pptx
josemejiadiazfonseca
 
PDF
Calidad desde el Docente y la mejora continua .pdf
marioosornozetina1
 
PDF
MANUAL TECNOLOGÍA SER MINISTERIO EDUCACIÓN
CLAUDIAPATRICIASALAZ19
 
DOCX
Zarate Quispe Alex aldayir aplicaciones de internet .docx
alexaldayirzaratequi
 
PPTX
historia_web de la creacion de un navegador_presentacion.pptx
Carlos704324
 
PPTX
Acronis Cyber Protect Cloud para Ciber Proteccion y Ciber Seguridad LATAM - A...
CarlosAndresuztes
 
PPTX
ANCASH-CRITERIOS DE EVALUACIÓN-FORMA-10-10 (2).pptx
marceloerazo119
 
PDF
Influencia-del-uso-de-redes-sociales.pdf
DianaLauraFloresAlva
 
PPT
introduccion a las_web en el 2025_mejoras.ppt
CesarCcamaZenteno
 
PDF
Diapositiva proyecto de vida, materia catedra
mpruiz3
 
PPTX
RAP01 - TECNICO SISTEMAS TELEINFORMATICOS.pptx
josemejiadiazfonseca
 
PDF
clase auditoria informatica 2025.........
KatherineMundaca1
 
PPTX
Presentación de Redes de Datos modelo osi
FernandoCabrera177238
 
PDF
5.1 Pinch y Bijker en libro Actos, actores y artefactos de Bunch Thomas (coor...
veronicafernandezab
 
PPTX
Propuesta BKP servidores con Acronis1.pptx
CarlosAndresuztes
 
PDF
SAP Transportation Management para LSP, TM140 Col18
Libreria ERP
 
PDF
Liceo departamental MICRO BIT (1) 2.pdfbbbnn
edepanaobando
 
COMO AYUDAN LAS TIC EN LA EDUCACION SUPERIOR.pptx
ap3377309
 
REDES INFORMATICAS REDES INFORMATICAS.pptx
rendertecno
 
Estrategia de apoyo tecnología miguel angel solis
edepmiguelsolis
 
RAP02 - TECNICO SISTEMAS TELEINFORMATICOS.pptx
josemejiadiazfonseca
 
Calidad desde el Docente y la mejora continua .pdf
marioosornozetina1
 
MANUAL TECNOLOGÍA SER MINISTERIO EDUCACIÓN
CLAUDIAPATRICIASALAZ19
 
Zarate Quispe Alex aldayir aplicaciones de internet .docx
alexaldayirzaratequi
 
historia_web de la creacion de un navegador_presentacion.pptx
Carlos704324
 
Acronis Cyber Protect Cloud para Ciber Proteccion y Ciber Seguridad LATAM - A...
CarlosAndresuztes
 
ANCASH-CRITERIOS DE EVALUACIÓN-FORMA-10-10 (2).pptx
marceloerazo119
 
Influencia-del-uso-de-redes-sociales.pdf
DianaLauraFloresAlva
 
introduccion a las_web en el 2025_mejoras.ppt
CesarCcamaZenteno
 
Diapositiva proyecto de vida, materia catedra
mpruiz3
 
RAP01 - TECNICO SISTEMAS TELEINFORMATICOS.pptx
josemejiadiazfonseca
 
clase auditoria informatica 2025.........
KatherineMundaca1
 
Presentación de Redes de Datos modelo osi
FernandoCabrera177238
 
5.1 Pinch y Bijker en libro Actos, actores y artefactos de Bunch Thomas (coor...
veronicafernandezab
 
Propuesta BKP servidores con Acronis1.pptx
CarlosAndresuztes
 
SAP Transportation Management para LSP, TM140 Col18
Libreria ERP
 
Liceo departamental MICRO BIT (1) 2.pdfbbbnn
edepanaobando
 

Jquery

  • 2. jQuery por Luis Artola
  • 3. jQuery por Luis Artola sicos!
  • 4. jQuery por Luis Artola sicos! programania.net
  • 5. jQuery por Luis Artola sicos! programania.net precriticas.com
  • 6. 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
  • 7. ¿QUÉ PUEDO HACER? Bombardeo de código
  • 9. 2/8
  • 10. 2/8 • $(“p”) .appendTo(“#foo”); Mueve “algo” a id=foo
  • 11. 2/8 • $(“p”) .appendTo(“#foo”); Mueve “algo” a id=foo • $(...).css(“border”, “1px solid black”); Ponle a “algo” el borde 1px negro.
  • 12. 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.!
  • 13. 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”. !
  • 14. 3/8
  • 15. 3/8 • $(...).attr(“href”, “http://google.com”); Que todos los links tengan el atributo href como google.com
  • 16. 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 ....
  • 17. 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.
  • 18. 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()”.
  • 19. 4/8
  • 20. 4/8 • Con cada click haz un desplegar / replegar. $(...).click( function(){ $(“div:first”).slideToggle(); });
  • 21. 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.
  • 22. 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%.
  • 23. 5/8
  • 24. 5/8 • $(...).get(“tag.php”, { “bar”: “baz” }); Envía datos por get a tag.php.
  • 25. 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.
  • 27. 6/8 LOAD • $(...).load(ʻ/direccion/url/ʼ) Cargar una url en un id.
  • 28. 6/8 LOAD • $(...).load(ʻ/direccion/url/ʼ) Cargar una url en un id. • $(...).load(ʻ/direccion/url/ #containerʼ) Cargar una url en un id, pero solo el id container.
  • 29. 6/8 LOAD • $(...).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.
  • 30. 6/8 LOAD • $(...).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
  • 31. 6/8 LOAD • $(...).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.
  • 32. 7/8
  • 33. 7/8 • $.fn.myPlugin = function(){ return this.each (function(){ $(this).html(“you used myPlugin!”); }); }); $(...).myPlugin();
  • 34. 7/8 • $.fn.myPlugin = function(){ return this.each (function(){ $(this).html(“you used myPlugin!”); }); }); $(...).myPlugin();
  • 35. 7/8 • $.fn.myPlugin = function(){ return this.each (function(){ $(this).html(“you used myPlugin!”); }); }); $(...).myPlugin();
  • 36. 8/8 jQuery("<div/>", { id: "foo", css: { height: "50px", width: "50px", color: "blue", backgroundColor: "#ccc" }, click: function() { $(this).css("backgroundColor", "red"); } }).appendTo("body");
  • 38. 1/8
  • 39. 1/8 • $('div') Selecciona todas las capas.
  • 40. 1/8 • $('div') Selecciona todas las capas. • $('#myid') Selecciona el id myid.
  • 41. 1/8 • $('div') Selecciona todas las capas. • $('#myid') Selecciona el id myid. • $('div#myid') Selecciona el div con id myid.
  • 42. 2/8
  • 43. 2/8 • $('.myclass') Selecciona todos los elementos de la clase myclass.
  • 44. 2/8 • $('.myclass') Selecciona todos los elementos de la clase myclass. • $('.myclass .otherclass') Selecciona todos los elementos de la clase myclass y de otherclass.
  • 45. 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.
  • 46. 3/8
  • 47. 3/8 $(':empty') Selecciona todos los elementos sin hijos.
  • 48. 3/8 $(':empty') Selecciona todos los elementos sin hijos.
  • 49. 3/8 $(':empty') Selecciona todos los elementos sin hijos. • $('*') Selecciona todos los elementos.
  • 50. 3/8 $(':empty') Selecciona todos los elementos sin hijos. • $('*') Selecciona todos los elementos.
  • 51. 3/8 $(':empty') Selecciona todos los elementos sin hijos. • $('*') Selecciona todos los elementos. • $('[rel]') Selecciona todos los elementos con un atributo rel.
  • 52. 3/8 $(':empty') Selecciona todos los elementos sin hijos. • $('*') Selecciona todos los elementos. • $('[rel]') Selecciona todos los elementos con un atributo rel.
  • 53. 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.
  • 54. 4/8
  • 55. 4/8
  • 56. 4/8 • $('.myclass > code') Selecciona todos los <code> hijos de los elementos de la clase myclass.
  • 57. 4/8 • $('.myclass > code') Selecciona todos los <code> hijos de los elementos de la clase myclass.
  • 58. 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.
  • 59. 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.
  • 60. 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.
  • 61. 5/8
  • 62. 5/8 $('p:nth-child(odd)') Selecciona los <p> hijos impares de su padre.
  • 63. 5/8 $('p:nth-child(odd)') Selecciona los <p> hijos impares de su padre.
  • 64. 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.
  • 65. 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.
  • 66. 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.
  • 67. 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.
  • 68. 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.
  • 69. 6/8
  • 70. 6/8 $('a[rel!=nofollow]') anchors que no tiene un atributo ʻrelʼ = ʻnofollowʼ ( o que no tienen atributo rel ).
  • 71. 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.
  • 72. 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.
  • 73. 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.
  • 74. 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.
  • 75. 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.
  • 76. 7/8
  • 77. 7/8 $('[class~=myclass]') Selecciona los elementos que tiene la clase myclass, por lo menos.
  • 78. 7/8 $('[class~=myclass]') Selecciona los elementos que tiene la clase myclass, por lo menos.
  • 79. 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.
  • 80. 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.
  • 81. 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.
  • 82. 8/8
  • 83. 8/8 • $('li:contains(second)') Selecciona los <li> que contienen la palabra “second”
  • 84. 8/8 • $('li:contains(second)') Selecciona los <li> que contienen la palabra “second” • $('.myclass:has(#myid)') Selecciona los myclass que tienen un hijo myid
  • 85. 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.
  • 86. ¡(casi)Nunca haces un loop o un foreach!
  • 87. TEORÍA Se acabó el bombardeo de código.
  • 89. • Filosofía jQuery: Simplificar la relación entre HTML y JavaScript.
  • 90. • Filosofía jQuery: Simplificar la relación entre HTML y JavaScript. • #1. Encontrar “algo” de HTML #2. Hacer algo con él.
  • 92. • Herramienta poderosa a la hora de encontrar una serie de elementos en un documento. Desde CSS 1 hasta 3 y los suyos propios.
  • 93. • 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.
  • 95. • Manipulation: before(), after(), appendTo(), append(), ...
  • 96. • Manipulation: before(), after(), appendTo(), append(), ... • Attributes: css(), attr(), html(), val(), addClass(), text(), ...
  • 97. • Manipulation: before(), after(), appendTo(), append(), ... • Attributes: css(), attr(), html(), val(), addClass(), text(), ... • Events: bind(), trigger(), unbind(), live(), click(), submit(), ...
  • 99. • Effects: show(), fadeOut(), toggle(), animate(), ...
  • 100. • Effects: show(), fadeOut(), toggle(), animate(), ... • Traversing find(), prevAll(), next(), hasClass(), children(), siblings(), ...
  • 101. • Effects: show(), fadeOut(), toggle(), animate(), ... • Traversing find(), prevAll(), next(), hasClass(), children(), siblings(), ... • Ajax get(), getJSON(), post(), ajax(), load()
  • 103. • Las acciones pueden ser encadenadas: $(...).addClass(ʻfooʼ).fadeIn().html(“foo”); $("li").not(":has(ul)").css("border", "1px solid black"); $(':input').parents(':not(:first)').show()
  • 104. • jQuery tiene una enorme comunidad. • test coverage! plugins! books support tutorials • open (free) license! speed • Código ligero.
  • 106. • Projectos que lo usan: Wordpress, Drupal, Textpattern
  • 107. • 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...
  • 109. • Interactions • Draggable • Widgets • Droppable • Accordion • Sortable • Datepicker • Selectable • Dialog • Resizable • Progressbar • Effects • Slider • Theming y CSS • Tabs framework
  • 110. ¿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.