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:

• Pàgina oficial: www.jquery.com
• Una bona intro de jQuery a W3Schools.
• jQuery CDN
• jQuery UI Getting Started.
• jQueryUI CDNs
• https://cdnjs.com/

Deprecated (només com a curiositat):

• jQuery Mobile
• 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 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>

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;

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

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