Diferències

Ací es mostren les diferències entre la revisió seleccionada i la versió actual de la pàgina.

Enllaç a la visualització de la comparació

--- jquery [2022/12/16 18:34]
enric_mieza_sanchez [Crear i insertar un element jQuery]
+++ jquery [2025/10/02 17:27] (actual)
enric_mieza_sanchez [jQuery vs DOM "a pèl"]
@@ Línia 55: / Línia 55: @@
 <p>El meu nom és:<span id="nom"></span></p>
 <p>Nom: <input id="nameInput" /></p>
+<button onclick="do_it()">Fes-ho!</button>
 </file>
@@ Línia 62: / Línia 64: @@
 <code javascript>
-var elem = $("#nameInput");
+function do_it() {
-$("#nom").html(elem.value);
+  var elem = $("#nameInput");
+  $("#nom").html( elem.val() );
+}
 </code>
@@ Línia 69: / Línia 73: @@
 <code javascript>
-var elem = document.getElementById("nameInput");
+function do_it() {
-document.getElementById("nom").innerHTML = elem.value;
+  var elem = document.getElementById("nameInput");
+  document.getElementById("nom").innerHTML = elem.value;
+}
 </code>
@@ Línia 78: / Línia 84: @@
 <WRAP info>
-**En jQuery** per accedir al contingut dels elements:
+**En jQuery** per accedir o modificar el contingut dels elements:
   * **Elements jQuery HTML**: utilitzem ''[[https://api.jquery.com/val/|jqueryElem.html()]]''
   * **Elements jQuery de formulari**: utilitzem ''[[https://api.jquery.com/html/|jqueryElem.val()]]''
+Fixeu-vos que la mateixa funció serveix de //getter// (sense paràmetres com ''elem.html()'' ) i de //setter// (passant paràmetre com ''elem.html("pepito")'').
 </WRAP>
+<WRAP info>
+**Carregar biblioteques de codi**
+Per tal que funcioni jQuery caldrà que carreguem les llibreries al nostre codi. Ho podem fer de diverses maneres:
+  * Descarregant l'arxiu ''.js'', afegir-lo dins la carpeta al costat de l'arxiu HTML, i carregar-lo amb:<code html><SCRIPT src="lib.js"></SCRIPT></code>
+  * O més fàcil, utilitzant una CDN o //Content Delivery Network// ([[https://releases.jquery.com/|aquí la CDN de jQuery]]), uns servidors on hi ha les llibreries ja allotjades i que podem incloure directament al nostre projecte amb algo similar a:<code html><SCRIPT src="https://code.jquery.com/jquery-3.7.1.js"></SCRIPT></code>
+Les biblioteques es solen carregar a l'inici de l'arxiu HTML, típicament en el <HEAD>.
+</WRAP>
 \\
@@ Línia 95: / Línia 112: @@
 Com podem veure, insertem en un altre element del DOM amb la [[https://api.jquery.com/append/|funció jQuery append()]].
+<WRAP todo>
+**Mini tasklist**
+Utilitza el codi anterior i fes una pàgina HTML amb una llista a la que puguis afegir nous elements, a mode de //tasklist//.
+Per demanar a l'usuari que introdueixi un text ho podeu fer amb la instrucció [[https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt|prompt()]].
+Posa un botó ''Afegeix'' que afegeixi elements nous a la llista amb el text introduït per l'usuari.
+</WRAP>
 \\

bytes.cat

Eines de l'usuari

Eines del lloc

Diferències

Eines de la pàgina