====== 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:
El meu nom
El meu nom és:
Nom:
A la consola (o al nostre codi) podem fer:
var elem = $("#nameInput");
$("#nom").html(elem.value);
var elem = document.getElementById("nameInput");
document.getElementById("nom").innerHTML = elem.value;
\\
**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()]]''
\\
===== Crear i insertar un element jQuery =====
Un element jQuery es crea amb un element HTML normal, embolcallat amb $():
// creem element jQuery
var jquery_elem = $("
Nou ítem de la llista
");
// l'afegim a una llista de la nostra pàgina
$("ul").append(jquery_elem);
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:
O en versió amb check de integritat:
\\