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 15:27]
enric_mieza_sanchez [jQuery UI in a nutshell]
+++ jquery [2025/10/02 17:27] (actual)
enric_mieza_sanchez [jQuery vs DOM "a pèl"]
@@ Línia 13: / Línia 13: @@
 ===== Referències =====
 Referències principals:
-  * Principal: www.jquery.com
+  * Pàgina oficial: www.jquery.com
+  * Una bona intro de [[https://www.w3schools.com/jquery/jquery_get_started.asp|jQuery a W3Schools]].
   * [[https://releases.jquery.com|jQuery CDN]]
   * [[https://learn.jquery.com/jquery-ui/getting-started/|jQuery UI]] Getting Started.
@@ Línia 24: / Línia 25: @@
 \\
+===== Introducció =====
+El més important a tenir en compte és que una crida jQuery retorna un element jQuery. Aquest no és exactament com els elements de DOM de Javascript simples, sinó que tenen una mena de //wrap//.
+jQuery utilitza selectors CSS, i ens pot retornar un o diversos elements jQuery.
+Per accedir a un element per ID:
+  $("#contingut1")
+Per accedir a tots els paràgrafs que tenen la class "cita":
+  $("p.cita")
+O fins i tot, tots els elements amb class "cita", siguin del tipus que siguin:
+  $("cita")
+Si fem això, amagarem tots els paràgrafs del document:
+  $("p").css("display","none");
+Per saber més mira [[https://www.w3schools.com/jquery/jquery_selectors.asp|jQuery selectors]].
+\\
+===== jQuery vs DOM "a pèl" =====
+Oferim el mateix exemple que a l'article [[introducció JavaScript]] d'accés al DOM, però ara el veurem com fer-ho en versió jQuery:
+<file html exemple.html>
+<h1>El meu nom</h1>
+<p>El meu nom és:<span id="nom"></span></p>
+<p>Nom: <input id="nameInput" /></p>
+<button onclick="do_it()">Fes-ho!</button>
+</file>
+A la consola (o al nostre codi) podem fer:
+<tabbox Versió jQuery>
+<code javascript>
+function do_it() {
+  var elem = $("#nameInput");
+  $("#nom").html( elem.val() );
+}
+</code>
+<tabbox Versió Javascript "a pèl">
+<code javascript>
+function do_it() {
+  var elem = document.getElementById("nameInput");
+  document.getElementById("nom").innerHTML = elem.value;
+}
+</code>
+</tabbox>
+\\
+<WRAP info>
+**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>
+\\
+===== Crear i insertar un element jQuery =====
+Un element jQuery es crea amb un element HTML normal, embolcallat amb $():
+<code javascript>
+  // creem element jQuery
+  var jquery_elem = $("<li>Nou ítem de la llista</li>");
+  // l'afegim a una llista de la nostra pàgina
+  $("ul").append(jquery_elem);
+</code>
+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>
+\\
+====== jQuery UI : llibreries gràfiques ======
 ===== jQuery UI quickstart amb Dialog =====
@@ Línia 30: / Línia 134: @@
 https://jqueryui.com/dialog/
+Si copieu l'exemple veureu que el CSS no està del tot correcte. Afegiu el CSS de ''theme'' de la [[https://cdnjs.com/libraries/jqueryui|CDN jQuery UI]]:
+Versió simplificada:
+<WRAP prewrap>
+<code html>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css"/>
+</code>
+</WRAP>
+O en versió amb check de integritat:
+<WRAP prewrap>
+<code html>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css" integrity="sha512-ELV+xyi8IhEApPS/pSj66+Jiw+sOT1Mqkzlh8ExXihe4zfqbWkxPRi8wptXIO9g73FSlhmquFlUOuMSoXz5IRw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+</code>
+</WRAP>
 \\

bytes.cat

Eines de l'usuari

Eines del lloc

Diferències

Eines de la pàgina