bytes.cat

Aquesta pàgina és només de lectura. Podeu veure'n el codi font, però no podeu canviar-la. Consulteu el vostre administrador si penseu que això és degut a algun error.
====== jQuery : facilitant el DOM de Javascript ======

jQuery son unes llibreries per a [[Javascript]] molt útils per facilitar el codi d'accés al DOM o Document-Object Model, fent-lo molt més curt, senzill i llegible.

Com a //framework// de client potser s'ha vist superat pels més novedosos React, VueJS, AngularJS, etc. però val a dir que aquests tenen una corba d'aprenentatge molt més pronunciada. En canvi, iniciar-se a jQuery és ràpid i agraït.

També veurem llibreries per a interfície gràfica amb **jQuery UI**, i per a dispositius mòbils teníem  jQuery Mobile però ja no està mantinguda (des de la v1.11 de jQuery).

{{tag> #Daw #DawMp06 #DawMp06Uf3 #DawMp06Uf03 #DawMpProj #DawMpProjecte #DawMpDual #Dam #DamMpProj #DamMpProjecte #DamMpDual }}

\\

===== Referències =====
Referències principals:
  * 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.
  * [[https://cdnjs.com/libraries/jqueryui|jQueryUI CDNs]]
  * https://cdnjs.com/

Deprecated (només com a curiositat):
  * [[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]].

\\

===== 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>
</file>

A la consola (o al nostre codi) podem fer:

<tabbox Versió jQuery>

<code javascript>
var elem = $("#nameInput");
$("#nom").html(elem.value);
</code>

<tabbox Versió Javascript "a pèl">

<code javascript>
var elem = document.getElementById("nameInput");
document.getElementById("nom").innerHTML = elem.value;
</code>

</tabbox>

\\

<WRAP info>
**En jQuery** per accedir al 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()]]''
</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()]].

\\

====== jQuery UI : llibreries gràfiques ======


===== jQuery UI quickstart amb Dialog =====

Un exemple molt resumit que pot servir de base per a moltes altres coses és el del jQuery UI Dialog.

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

Eines de la pàgina
