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:12]
enric_mieza_sanchez [jQuery vs DOM "a pèl"]
+++ jquery [2022/12/16 18:34] (actual)
enric_mieza_sanchez [Crear i insertar un element jQuery]
@@ 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 22: / Línia 23: @@
   * [[https://jquerymobile.com|jQuery Mobile]]
   * [[https://jquerymobile.com/download/|jQuery Mobile CDN]]
+\\
+===== 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]].
 \\
@@ Línia 28: / Línia 50: @@
 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:
-<tabbox Versió jQuery>
 <file html exemple.html>
@@ Línia 38: / Línia 58: @@
 A la consola (o al nostre codi) podem fer:
+<tabbox Versió jQuery>
 <code javascript>
-var elem = document.getElementById("nameInput");
+var elem = $("#nameInput");
-document.getElementById("nom").innerHTML = elem.value;
+$("#nom").html(elem.value);
 </code>
 <tabbox Versió Javascript "a pèl">
-<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>
-</file>
-A la consola (o al nostre codi) podem fer:
 <code javascript>
 var elem = document.getElementById("nameInput");
@@ Línia 62: / Línia 78: @@
 <WRAP info>
-**En jQuery**:
+**En jQuery** per accedir al contingut dels elements:
-  * Per accedir al contingut dels **elements jQuery HTML** utilitzem ''[[https://api.jquery.com/val/|jqueryElem.html()]]''.
+  * **Elements jQuery HTML**: utilitzem ''[[https://api.jquery.com/val/|jqueryElem.html()]]''
-  * Per accedir al contingut dels **elements jQuery de formulari** utilitzem ''[[https://api.jquery.com/html/|jqueryElem.val()]]''.
+  * **Elements jQuery de formulari**: utilitzem ''[[https://api.jquery.com/html/|jqueryElem.val()]]''
 </WRAP>
@@ Línia 70: / Línia 86: @@
 ===== 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()]].
 \\

bytes.cat

Eines de l'usuari

Eines del lloc

Diferències

Eines de la pàgina