bytes.cat

La wiki d'FP d'informàtica

Eines de l'usuari

Eines del lloc


Barra lateral

ASIX Administració de Sistemes Informàtics i Xarxes
Tots els mòduls del cicle
MP01 Implantació de sistemes operatius
Totes les UFs del modul
MP02 Gestió de bases de dades
Totes les UFs del modul
MP03 Programació bàsica
Totes les UFs del modul
MP04 Llenguatges de marques i sistemes de gestió d'informació
Totes les UFs del modul
MP05 Fonaments de maquinari
Totes les UFs del modul
MP06 Administració de sistemes operatius
Totes les UFs del modul
MP07 Planificació i administració de xarxes
Totes les UFs del modul
MP08 Serveis de xarxa i Internet
Totes les UFs del modul
MP09 Implantació d'aplicacions web
Totes les UFs del modul
MP10 Administració de sistemes gestors de bases de dades
Totes les UFs del modul
MP11 Seguretat i alta disponibilitat
Totes les UFs del modul
MP12 Formació i orientació laboral
Totes les UFs del modul
MP13 Empresa i iniciativa emprenedora
Totes les UFs del modul
MP14 Projecte
Totes les UFs del modul
DAM Desenvolupament d’aplicacions multiplataforma
Tots els mòduls del cicle
MP01 Sistemes informàtics
Totes les UFs del modul
MP02 Bases de dades
Totes les UFs del modul
MP03 Programació bàsica
Totes les UFs del modul
MP04 Llenguatges de marques i sistemes de gestió d'informació
Totes les UFs del modul
MP05 Entorns de desenvolupament
Totes les UFs del modul
MP06 Accés a dades
Totes les UFs del modul
MP07 Desenvolupament d’interfícies
Totes les UFs del modul
MP08 Programació multimèdia i dispositius mòbils
Totes les UFs del modul
MP09 Programació de serveis i processos
Totes les UFs del modul
MP10 Sistemes de gestió empresarial
Totes les UFs del modul
MP11 Formació i orientació laboral
Totes les UFs del modul
MP12 Empresa i iniciativa emprenedora
Totes les UFs del modul
MP13 Projecte de síntesi
Totes les UFs del modul
MPDual Mòdul Dual / Projecte
DAW Desenvolupament d’aplicacions web
Tots els mòduls del cicle
MP01 Sistemes informàtics
Totes les UFs del modul
MP02 Bases de dades
Totes les UFs del modul
MP03 Programació
Totes les UFs del modul
MP04 Llenguatge de marques i sistemes de gestió d’informació
Totes les UFs del modul
MP05 Entorns de desenvolupament
Totes les UFs del modul
MP06 Desenvolupament web en entorn client
Totes les UFs del modul
MP07 Desenvolupament web en entorn servidor
Totes les UFs del modul
MP08 Desplegament d'aplicacions web
Totes les UFs del modul
MP09 Disseny d'interfícies web
Totes les UFs del modul
MP10 Formació i Orientació Laboral
Totes les UFs del modul
MP11 Empresa i iniciativa emprenedora
Totes les UFs del modul
MP12 Projecte de síntesi
Totes les UFs del modul
SMX Sistemes Microinformàtics i Xarxes
Tots els mòduls del cicle
MP01 Muntatge i manteniment d’equips
Totes les UFs del modul
MP02 Sistemes Operatius Monolloc
Totes les UFs del modul
MP03 Aplicacions ofimàtiques
Totes les UFs del modul
MP04 Sistemes operatius en xarxa
Totes les UFs del modul
MP05 Xarxes locals
Totes les UFs del modul
MP06 Seguretat informàtica
Totes les UFs del modul
MP07 Serveis de xarxa
Totes les UFs del modul
MP08 Aplicacions Web
Totes les UFs del modul
MP09 Formació i Orientació Laboral
Totes les UFs del modul
MP10 Empresa i iniciativa emprenedora
Totes les UFs del modul
MP11 Anglès
Totes les UFs del modul
MP12 Síntesi
Totes les UFs del modul
CETI Ciberseguretat en Entorns de les Tecnologies de la Informació
Tots els mòduls del cicle
CiberOT Ciberseguretat en Entorns d'Operació
Tots els mòduls del cicle
jquery

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>

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

Versió jQuery

var elem = $("#nameInput");
$("#nom").html(elem.value);

Versió Javascript "a pèl"

var elem = document.getElementById("nameInput");
document.getElementById("nom").innerHTML = elem.value;


En jQuery per accedir al contingut dels elements:


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


jquery.txt · Darrera modificació: 2022/12/16 18:34 per enric_mieza_sanchez