Introduccion a Jquery

2,146 views

Published on

Introducción a jQuery para el grupo de IES BaixCamp

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,146
On SlideShare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
114
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Introduccion a Jquery

  1. 2. ¿Para que sirve jQuery? <ul><li>Manipulación DOM
  2. 3. AJAX
  3. 4. Interface de Usuario
  4. 5. Validación de Formularios </li></ul>
  5. 6. Como funciona <ul><li>Basado en objetos
  6. 7. $() o jQuery() crean un objeto
  7. 8. $('a') es un objeto que contiene todos los elementos a
  8. 9. jQuery crea un punto de acción entre el tiempo que se carga el DOM y las imágenes $('document').ready(f())
  9. 10. Este punto es más eficaz que <body onload=”f()”> </li></ul>
  10. 11. Ejemplos prácticos – 1. Javascript <a href=&quot;#&quot; onclick=&quot;mostrar('foo');&quot;>clic para mostrar #foo</a> function mostrar(id) { var e = document.getElementById(id); if(e.style.display == 'block') e.style.display = 'none'; else e.style.display = 'block'; }
  11. 12. Ejemplos prácticos – 1. jQuery $().ready(function(){ $(&quot;a&quot;).click(function(){ $(&quot;#more&quot;).toggle(&quot;slow&quot;); return false; }); });
  12. 13. Selectores jQuery <ul><li>CSS </li><ul><li>Nombre de elemento $('p')
  13. 14. Id $('#elemento')
  14. 15. Clase $('.clase')
  15. 16. Elemento con clase $('p.clase')
  16. 17. Elemento descendiente de un elemento $('p a')
  17. 18. Elemento hijo de un elemento $('p > a') </li></ul></ul>
  18. 19. Selectores jQuery <ul><li>Xpath </li><ul><li>$('a[@href]') > Link con atributo href
  19. 20. $('div[ol]') > Div con un <ol> dentro
  20. 21. $('a[@rel=”nofollow”]') > Link con valor de atributo específico </li></ul></ul>
  21. 22. Filtros jQuery <ul><li>P:first > El primer P </li><ul><li>Se puede combinar con otros elementos
  22. 23. $(div#body p:first) </li></ul><li>Li:last > El último li
  23. 24. A:nth(3) o A:eq(3) > El cuarto link
  24. 25. P:even > Toma los elementos impares
  25. 26. P:odd > Toma los elementos pares
  26. 27. A:gt(3), a:lt(3) > Todos los elementos mayores que 3 o menores.
  27. 28. A:contains('click') > Todos los a que contienen la palabra click
  28. 29. P:hidden > Elementos p ocultos </li></ul>
  29. 30. Funciones jQuery <ul><li>.each() Itera sobre cada elemento
  30. 31. .size() Devuelve la cantidad de elementos
  31. 32. .get(n) Obtiene el elemento n (:nth)
  32. 33. .slice(n,m) Obtiene desde n hasta m-1
  33. 34. .not('p') No incluye los elementos p
  34. 35. .add('p') Agrega el elemento p
  35. 36. .remove() Elimina todos los elementos del DOM
  36. 37. .empty() Elimina el contenido de todos los elementos </li></ul>
  37. 38. Funciones jQuery <ul><li>.find(selector) Retorna los elementos que coinciden con la búsqueda
  38. 39. .parent() Retorna el elemento padre de cada elemento
  39. 40. .children() Retorna el hijo de cada elemento
  40. 41. .next() Obtiene el siguiente elemento
  41. 42. .prev() Obtiene el elemento anterior </li></ul>
  42. 43. Formatando elementos <ul><li>.css(propiedad, valor)
  43. 44. .html()
  44. 45. .val() < Elementos de Formulario
  45. 46. .text()
  46. 47. .addClass('clase')
  47. 48. .removeClass('clase')
  48. 49. .toggleClass('clase') </li></ul>
  49. 50. Modificar el DOM <ul><li>$('#chat').before('<p>Mensaje</p>')
  50. 51. $('#chat').after('<p>Mensaje</p>')
  51. 52. $('#chat').append('<p>Mensaje dentro de #chat</p>')
  52. 53. $('#chat').wrap('<p></p>') </li></ul>
  53. 54. Eventos de jQuery <ul><li>$('img').bind('accion', funcion())
  54. 55. $('img').unbind('accion', funcion())
  55. 56. $('img').one('accion', funcion()) </li><ul><li>Funciona una sola vez </li></ul></ul>
  56. 57. Eventos de jQuery – Atajos de Binding <ul><li>.click(f)
  57. 58. .submit(f)
  58. 59. .dblclick(f)
  59. 60. .mouseover(f)
  60. 61. .mouseout(f)
  61. 62. .select(f) </li></ul>
  62. 63. Propiedades del elemento this <ul><li>this El objecto en sí
  63. 64. this.id El id del objeto
  64. 65. this.tagName Nombre del objeto
  65. 66. this.attr Un atributo
  66. 67. this.src El src en links o includes
  67. 68. this.classname Nombre de una clase
  68. 69. this.title El título
  69. 70. this.alt El mensaje alt
  70. 71. this.value El valor en un elemento de formulario </li></ul>
  71. 72. AJAX – The easy way <ul><li>$.load() </li><ul><li>Obtiene un código HTML y lo introduce en el DOM </li></ul><li>GET: .load(loadUrl, &quot;language=php&version=5&quot;);
  72. 73. POST: .load(loadUrl, {language: &quot;php&quot;, version: 5});
  73. 74. Solo un elemento: .load(loadUrl + &quot; #imagen&quot;);
  74. 75. Hacer algo si carga correctamente:
  75. 76. .load(loadUrl, null, function(){alert('ok');}) </li></ul>
  76. 77. AJAX – The easy way <ul><li>$.getJSON() </li><ul><li>Obtiene un código en JSON via AJAX </li></ul><li>$.getJSON(
  77. 78. jsonUrl,
  78. 79. {q: 'php'},
  79. 80. function(json) {
  80. 81. var result = &quot;El lenguaje es &quot;<strong>&quot; + json.responseData.language + &quot;&quot;&quot;;
  81. 82. $(&quot;#result&quot;).html(result);
  82. 83. }
  83. 84. ); </li></ul>
  84. 85. AJAX – The easy way <ul><li>$.get Script() </li><ul><li>Carga javascript desde ubicaciones remotas </li></ul><li>$.getScript(Url, callback);
  85. 86. Los archivos no tienen que ser necesariamente .js </li></ul>
  86. 87. AJAX – The easy way <ul><li>$.get () </li><ul><li>Peticiones GET </li></ul><li>$.get(
  87. 88. loadUrl, {language: &quot;php&quot;, version: 5}, </li><ul><li>callback, tipoRespuesta </li></ul><li>);
  88. 89. El tipo de respuesta puede ser: </li><ul><li>Html, xml, texto, json, javascript </li></ul></ul>
  89. 90. AJAX – The easy way <ul><li>$.post () </li><ul><li>Peticiones POST </li></ul><li>$.post(
  90. 91. loadUrl, {language: &quot;php&quot;, version: 5}, </li><ul><li>callback, tipoRespuesta </li></ul><li>);
  91. 92. El tipo de respuesta puede ser: </li><ul><li>Html, xml, texto, json, javascript </li></ul></ul>
  92. 93. AJAX – The easy way <ul><li>$.ajax ()
  93. 94. Ajax es la función madre de todas las anteriores
  94. 95. Permite ejecutar funciones si se produce un error.
  95. 96. Se recomienda utilizar las anteriores antes que esta. </li></ul>
  96. 97. AJAX – The easy way
  97. 98. Efectos Visuales <ul><li>.animate(propiedades [,duración] [,efecto] [,onComplete]
  98. 99. .delay([duración])
  99. 100. .fadeIn(), fadeOut(), fadeTo(), fadeToggle()
  100. 101. .hide(), .show(), toggle()
  101. 102. .slideDown(), slideToggle(), slideUp()
  102. 103. .stop() </li></ul>

×