====== 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: \\