Taula de continguts

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).

, , , , , , , , , ,


Referències

Referències principals:

Deprecated (només com a curiositat):


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

exemple.html
<h1>El meu nom</h1>
<p>El meu nom és:<span id="nom"></span></p>
<p>Nom: <input id="nameInput" /></p>
<button onclick="do_it()">Fes-ho!</button>

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

Versió jQuery

function do_it() {
  var elem = $("#nameInput");
  $("#nom").html( elem.val() );
}

Versió Javascript "a pèl"

function do_it() {
  var elem = document.getElementById("nameInput");
  document.getElementById("nom").innerHTML = elem.value;
}


En jQuery per accedir o modificar el contingut dels elements:

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:

Les biblioteques es solen carregar a l'inici de l'arxiu HTML, típicament en el <HEAD>.


Crear i insertar un element jQuery

Un element jQuery es crea amb un element HTML normal, embolcallat amb $(): 

  // 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);

Com podem veure, insertem en un altre element del DOM amb la 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ó 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 CDN jQuery UI:

Versió simplificada: 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css"/>

O en versió amb check de integritat: 

<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" />