====== 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:
function do_it() {
var elem = $("#nameInput");
$("#nom").html( elem.val() );
}
function do_it() {
var elem = document.getElementById("nameInput");
document.getElementById("nom").innerHTML = elem.value;
}
\\
**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")'').
**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:
* 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:
Les biblioteques es solen carregar a l'inici de l'arxiu HTML, típicament en el .
\\
===== 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()]].
**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.
\\
====== 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:
\\