jQuery para diseñadores

First steps to create a website
with HTML + CSS + javaScript

Create new file .html

<!doctype html>

<html>

<head>

<meta charset=”UTF-8″>

<title>Untitled Document</title>

  </head>

<body>

    

</body>

</html>

Create new file .css

Create new file .js

Link .css and .js within <head>

<link rel=”stylesheet” type=”text/css” href=”xxx.css” media=”screen”/>

Link .js after </body>

<script src=”xxx.js”></script>

Link jQuery library

[here the example is from Google, remember to update the version of jQuery library]

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”></script>

 

Reset css

[Add this at the beginning of you css code]

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed, 

figure, figcaption, footer, header, hgroup, 

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

margin: 0;

padding: 0;

border: 0;

font-size: 100%;

font: inherit;

vertical-align: baseline;

}

*{box-sizing: border-box;}

 

Document ready .js

[Add this at the beginning of your js code]

$(document).ready(init);

function init() {

//Here goes all the code in javaScript

}

Introducció a Jquery per a dissenyadors

Descripció

Jquery és una biblioteca o framework de Javascript que permet simplificar la interacció amb els documents HTML, gestionar esdeveniments, desenvolupar animació i millorar la interacció en pàgines web. Aprèn com utilitzar-la sense saber programar.

Objectius específics

jQuery és la biblioteca de JavaScript més utilitzada. Permet simplificar la manera d’interactuar amb els documents HTML, manipular l’arbre DOM,gestionar esdeveniments, desenvolupar animacions i afegir interacció a pàgines web amb la tècnica AJAX.

Descobreix jQuery i les seves possibilitats visuals i d’interacció. Coneix i entén de què és capaç jQuery i aprèn a aplicar-ho sense haver de convertir-te en un programador.

OBJECTIUS

Dotar la web d’elements interactius implica saber programar amb JavaScript, cosa que limita als dissenyadors a l’hora de crear interaccions al site. Aquest curs està pensat i elaborat des del punt de vista del dissenyador. Amplia els horitzons professionals i descobreix una bateria de plug-ins que faran projectes web més vistosos i interactius. Permetrà als participants conèixer l’accés als atributs dels elements de la pàgina web, com treballar amb ells i fer-los reaccionar davant esdeveniments efectuats per l’usuari.

Tambè veurem els beneficis que aporta utilitzar diferents plugins de jQuery pels nostres projectes web, com per exemple: SlideJS, ImageLens, ScrollUp, Stellar.JS oGmaps.

Activitat dirigida preferenment a persones amb experiència laboral relacionada amb el disseny web (dissenyadors i programadors web) amb coneixements informàtics de nivell mitjà que vulguin realitzar projectes web amb l’ajuda de plugins, sense coneixements profunds de jQuery i JavaScript.

 

TEMARI

1. Què és i per a què serveix jQuery

2. Carregar jQuery de forma local i remota

3. Selecció bàsica d’elements amb jQuery

4. Esdeveniments

5. Efectes

6. Operacions amb HTML i CSS

7. Accedir, treballar i modificar atributs

8. Plugins jQuery

9. Recursos i enllaços interessants

Qué es JQuery i per a qué serveix?

JQuery és una llibreria/framework de Javascript. Qué vol dir aixó? Sense entrar gaire en tecnicismes, vol dir que incorpora tota una série de funcions i rutines al llenguatge de Javascript, i que aquestes estan pensades per tal de que sigui més fàcil desenvolupar projectes web amb jQuery que solament amb Javascript. Un altre punt al seu favor és que afavoreix la compatibilitat entre plataformes i navegadors.

Degut a aixó, és una llibreria molt estesa, i és fàcil trobar desenvolupats molts plugins que amb un mínim d’adaptació, ens poden ajudar a donar-li interactivitat al nostre projecte web.

Carregar jQuery de forma local
i remota

Per poder utilitzar jQuery, és imprescindible que carreguem a la nostra aplicació web l’arxiu de la llibreria. Això ho farem simplement afegint un script, una línea de codi, al head del nostre html.

Per exemple, en aquests apunts, ho hem fet així:

<head>

<meta charset=”UTF-8″>

<title>JQuery Intro</title>

<link rel=”stylesheet” type=”text/css” href=”iniciacio-jquery-styles.css”>

<script type=”text/javascript” src=”jquery-3.2.1.js”></script>

</head>

En blau teniu ressaltat el script utilitzat

Local: Enllaçar la llibreria descarregant l’arxiu

Descarreguem l’arxiu desde la pàgina oficial:

https://jquery.com/download

I cliquem a:

    • Download the uncompressed, development jQuery (número de la versió actual)
    • Això ens obrirá una pestanya nova (a FireFox) amb tot el codi de jQuery. Descarreguem al nostre equip, i el guardem a la carpeta del nostre projecte.
    • A continuació, obrirem la nostra pàgina html, i a l’apartat del head afegirem la següent línea:
    • A dins del src, entre les cometes “”, posem la ruta de l’arxiu que ens hem descarregat!

Per exemple, si hi són a la mateixa carpeta:

O si, com és recomanable, hem creat una carpeta amb el nom “js”  per guardar el codi dins de la carpeta del projecte:

Si no realitzem bé l’enllaç, per exemple amb una ruta errònia, a la pestanya Consola de l’inspector del navegador [Ctrl+Shift+C] apareixerà el següent missatge:

ReferenceError: $ is not defined 

Remota: Enllaçar la llibreria mitjançant un CDN

Una altra manera d’enllaçar la llibrería es mitjant un CDN (Content Delivery Network). El que fem és carregar un arxiu extern desde la nostra pàgina. Si a Google posem jQuery CDN en trobarem molts.

L’oficial és a jQuery, però per exemple Google també en té, a Google Hosted Libraries. Utilitzar el CDN de Google (o el de Microsoft), té l’avantatge de que molts projectes en fan ús d’ells, i és possible que per quan algú entri a la vostra pàgina, ja estigui en caché, i us estalvieu temps de càrrega.

El procés és molt sencill, entreu a la pàgina, busqueu la llibrería que necessiteu, i copieu el codi que us proporciona. Serà quelcom semblant a les línees següents:

L’enllaç a la llibrería oficial de jQuery

El de Google Apis

Per finalitzar, haureu de pegar aquest codi al head del vostre document html.

Primers passos: coses bàsiques a tenir en compte

Abans d’entrar en la forma de fer seleccions mitjançant jQuery, és important que entenem com integrar el codi a l’html.

Una norma bàsica, no solament de jQuery, sino de programació i desenvolupament d’aplicacions en general, és tenir ben separat i diferenciat el que és contingut (qué ensenyo), estils (com ho ensenyo) i programació (interactivitat).

Amb Javascript i jQuery, podem definir el nostre codi i guardar-lo en arxius de text amb extensió .js, i després utilitzar-lo tot vinculant aquest al document html on tenim el contingut. És una forma fàcil de mantenir un ordre que faci entenedor el nostre codi, i si tenim un site amb moltes pàgines, és molt més fàcil de mantenir.

Per enllaçar un arxiu .js:

El podem posar al head del nostre document, però molt millor si està al final del document HTML, després del

Fixeu-vos que és igual a carregar l’arxiu de la llibreria, simplement canviem l’atribut source (src).

Comentaris a Javascript i jQuery

Quan vulgueu incloure un comentari dins del vostre codi, i que aquest no sigui executat, utilitzareu el que es coneix com a comentari:

/*

Comentari multilínia

Aixó no es veurà a la pantalla del navegador, 

solament en editar l’arxiu. 

El fem obrint amb /* i tancant amb */

*/

//Comentari d’una sola línia, fet obrint amb les dues barres

Selecció bàsica d’elements amb jQuery

Sintaxis bàsica

$(“selector”).acció( )

      • Un signe $ per a definir / accedir a jQuery. Així li diem al programa que ara toca utilitzar jQuery
      • Un (“selector”) per a “trobar” l’element (o elements) HTML on volem actuar. Apuntarem mitjançant un selector CSS, com ara una ID, una class, un atribut… L’envoltem amb cometes simples o dobles.
      • La acció de jQuery .acció( ) que es realitzarà en el(s) element(s) que hem seleccionat mitjançant el selector

Els selectors de jQuery són el que ens permet seleccionar i manipular els elements de la nostra pàgina. Estan basats en els selectors CSS, i així podem accedir mitjançant ID, class, atribut, name, type, valor d’atribut… Sempre posem els selectors entre les cometes, com hem vist a la sintaxi.

Veurem les formes més bàsiques de selecció:

Per element

Quan seleccionem per element, estem fent una selecció àmplia e indiscriminada de tots els elements que especifiquem. Utilitzem el nom de la etiqueta html.

Per exemple, si fem: 

$(“h2”).hide( ); 

amagarem totes les capçaleres h2 del document.

Per ID

Quan seleccionem per ID, estem fent una selecció molt especifica. Al cap i a la fi, una mateixa ID solament pot ser utilitzada un cop en un sol element de la pàgina. És una forma directa i unívoca de selecció. Identifiquem una id perqué utilitza “#” davant el nom. 

Per exemple, si fem: 

$(“#amagar”).hide( );

amagarem l’element, sigui quin sigui el seu tipus, que tingui la identificació “amagar”.

Per classe

Quan seleccionem per class, estem seleccionant tots els elements, siguin del tipus que siguin, tinguin ID o no, que disposin d’aquesta class. Sabem que és una class per que el nom va precedir per un punt “.”

Per exemple, si fem: 

$(“.tornem”).hide( );

amagarem tots els elements que tinguin la class “tornem” del document.

Per atribut

Quan seleccionem per atribut, estem seleccionant tots els elements que tinguin aquest atribut. Envoltem el nom de l’atribut amb [ ]. 

Per exemple, si fem: 

$(“[href]”).hide( );

amagarem tots els elements que tinguin l’atribut “href” del document, per exemple tots els links.

Per valor d’atribut

Quan seleccionem per valor d’atribut, estem seleccionant tots els elements que tinguin cert valor com a atribut. Envoltem el nom de l’atribut amb [ ], i senyalem quin valor ha de tenir amb “=”. 

Per exemple, si fem: 

$(‘[name=ciutat]’).hide( ); 

amagarem tots els elements que tinguin l’atribut “name” del document i amb el valor “ciutat”.

Combinacions

Podem fer múltiples seleccions o seleccions específiques en jQuery de la mateixa manera que ho fem en CSS… Exactament igual! 

Per exemple, si fem: 

$(“.blau,.verd”).hide( );

amagarem tots els elements que tinguin la class “.blau” o “.verd”.

Un altre exemple, si fem: 

$(“li.verd”).hide( );

amagarem tots els elements de llista (li) que tinguin la class “.verd”.

Un altre més, si fem: 

$(“div p”).hide( );

amagarem tots els elements de paràgraf (p) que siguin a dins d’una div… fixeu-vos que hi ha un espai entre els elements!

this

Amb this, seleccionem l’element html amb el que estem interactuant ara mateix. 

Per exemple, si fem: 

$(“button”).click(function( ){
   $(this).hide( ); }); 

en fer click amagarem el propi botó.

Exemples:

$(“p.oculta”).hide( );

Amaga (hide) tots els paràgrafs (p) que tinguin la classe oculta (.oculta)

$(“ul”).fadeTo(“slow”, 0.5);

Redueix la opacitat (fadeTo) lentament i fins a la meitat de la opacitat (“slow”, 0.5) de totes les llistes no ordenades (ul)

$(“#puja”).slideUp( );

Fes lliscar cap amunt (slideUp) aquell element únic que tingui la id “puja” (#puja)

La llista exhaustiva de selectors de W3Schools la teniu aquí, en anglés.

El codi següent fa que en prémer qualsevol botó, tots  els paràgrafs de la pàgina amb classe “oculta” s’amaguin

AQUEST ÉS UN PARÀGRAF AMB CLASS “OCULTA”

Amagar

El codi següent fa que en prémer el següent botó, aparegui un missatge per pantalla, i un altre a la consola del navegador

Hola Món!

Pregunta de Trivial: Qué passarà si premem  el botó “Hola Món!” sense haver polsat el botó “Amagar”?

  1. Esdeveniments

Quan parlem dels esdeveniments de jQuery, parlem dels disparadors que fan que una part del programa s’activi en resposta d’una acció de l’usuari. Són una part importantíssima de la interactivitat.

Exemples:

    • Moure el ratolí sobre un element
    • Seleccionar un botó d’opció
    • En fer clic a un element

Sintaxis bàsica

$(“selector”).esdeveniment( )

$(“p”).click( );

El següent que hauriem de fer, és definir qué passarà quan es dispari l’esdeveniment. Afegim una funció:

$(“p”).click(socUnaFuncio);

function socUnaFuncio( ){

   // aquí posariem l’acció

   $(this).hide( );

}

En el codi anterior, veiem que en fer click a cualsevol paràgraf, cridem a una funció de nom socUnaFuncio, que l’acció que fa és amagar (hide) l’element amb el que s’està interactuant (this), en aquest cas un paràgraf.

Métodes d’esdeveniment més comuns

click( )

S’activa en fer click

dblclick( )

S’activa en fer doble click

mouseenter( )

S’activa en entrar el punter del mouse a l’àrea de l’element

mouseleave( )

S’activa en sortir el punter del mouse a l’àrea de l’element

mousedown( )

Quan fem click, en el moment que estem prement el botó (i també mantenint)

mouseup( )

Quan fem click, en el moment que deixem de prémer el botó

hover( )

És un mix entre mouseenter i mouseleave… Li hem de donar una funció d’entrada, i una de sortida (com si fossin paràmetres)

focus( )

Si el camp de formulari és actiu

blur( )

Quan el camp de formulari deixa de ser actiu

$(document).ready( )

Molt important! L’esdeveniment Document Ready permet carregar una funció quan s’ha carregat tota la resta del document. El més normal és fer-ho de la següent manera:

Primer, li posem una funció com a parámetre, que li direm init (el nom és igual… podria ser inicialitzar, o initialization… la idea és que sigui identificable).

Segon, creem una funció init.

Després, conforme anem desenvolupant el nostre codi, la resta de funcions que utilitzem les cridarem desde dins d’aquesta funció, que s’activarà ella sola en arribar-li la informació de que el document s’ha carregat del tot. La raó és que aixó ens permet tenir tot el codi junt, i no distribuit per l’html, o millor, el podem tenir en un arxiu apart, i ens assegurarem que s’executi amb tots els elements carregats.

$(document).ready(init);

function init( ){

   // aquí posariem la resta de crides de funció, per exemple:

   $(“#btn”).click(evaluar);

}

Diferents formes de ready

La més clara…

$(document).ready(inicialitza);

function inicialitza( ){

   //Aquí la resta de métodes…

}

Podem fer servir funcions anónimes…

$(document).ready(function( ){

   //Aquí la resta de métodes…

});

I encara més breu!

$(function( ){

   //Aquí la resta de métodes…

});

Exemples d’esdeveniment

Vigileu, hi han esdeveniments que es poden solapar, com els que fan interacció amb els clicks

W3Schools: llistat d’esdeveniments

Efectes

Són métodes pensats per afegir de manera fàcil i ràpida les animacions més comunes al nostre projecte. Són molt fàcils de fer servir!

A W3Schools trobareu un llistat d’efectes força complet, i la documentació oficial evidentment també és molt bona.

Exemples:

      • En fer click a un botó, que s’amagui un text
      • En passar pel damunt d’un quadrat, fer que li canvii la opacitat
      • Canviar el tamany d’una div

Sintaxis bàsica

$(“selector”).efecte(velocitat, callback);

hide( ), show( ) i toggle( )

Tots tres funcionen de forma similar.

hide( ) 

amaga un element

show( ) 

ens el mostra si estava amagat

toggle( ) 

amaga un element i permet tornar-lo a mostrar

A tots tres podem afegir un parell de paràmetres, que ens permetran ajustar la forma en que es farà l’animació.

La forma básica es la següent: seleccionem un element, i li diem que s’amagui. Ho farà inmediatament, sense cap transició.

$(“p”).hide( );

Per variar el temps que trigará en desaparéixer, podem fer-ho amb el paràmetre velocitat. Simplement afegirem que volem que ho faci lentament (slow), ràpid (fast), o indicarem els milisegons que ha de durar la transició (número)

$(“p”).hide(slow);

$(“p”).hide(fast);

$(“p”).hide(1000);

El paràmetre callback ens permet cridar a una funció que s’executarà quan s’acabi la animació.

fadeIn( ), fadeOut( ), fadeToggle( ), fadeTo( )

Els quatre efectes tenen en comú que afecten als elements mitjançant un esvaniment més o menys gradual de la seva visibilitat (un “fading“).

Els tres primers admeten els paràmetres opcionals que hem vist amb el grup anterior: velocitat i callback. L’últim, fadeTo, és una mica diferent. Li hem de dir la velocitat, i a més a més li hem d’afegir un parámetre que controla la opacitat (de 0 a 1). Per últim, li podriem afegir el callback

fadeOut( ) 

per amagar un element

fadeIn( ) 

per donar-li visibilitat a un element

fadeToggle( ) 

permet passar de visible a invisible, mitjançant l’esvaniment

fadeTo( ) 

permet passar a una opacitat específica, p.ex:

$(“#div1”).fadeTo(“slow”, 0.15);

slideDown( ), slideUp( ), slideToggle( )

Tenen el mateix funcionament que tots els anteriors, el que canvia és l’efecte, que en aquest cas es un lliscament. Paràmetres: velocitat i callback.

slideDown( )

Llisca cap a la part inferior

slideUp( )

Llisca cap a la part superior

slideToggle( )

Llisca en direccions alternes 

animate

Sintaxi: 

$(selector).animate({parametres}, velocitat,callback);

Ens dóna un control força més acurat de l’animació, podent fer-la al nostre gust. Podem canviar l’amplada, l’alçada, la opacitat, la posició desde el marge superior o esquerre… Exceptuant el color, ho podem canviar tot, el padding, el margin, el tamany, la posició, però totes aquelles propietats que utilitzin guionets, s’hauran de canviar a codificació camelCase, per exemple, marginRight en lloc de margin-right. Aquests paràmetres els posarem entre { }, i podem utilitzar més d’un, tot separant amb coma “,”. També ho podeu fer en vàries linies per tal de facilitar la lectura del codi.

Per últim, assenyalar que també admet els paràmetres que ja hem vist, velocitat i callback

$(“div”).animate({left: ‘250px’},”fast”);

$(“#capaRoja”)
.animate({height:”800px”},500);

$(“div”).animate({

    left: ‘250px’,

    opacity: ‘0.5’,

    height: ‘150px’,

    width: ‘150px’

},”slow”);

$(“div”).animate({left: ‘250px’, opacity: ‘0.5’, height: ‘150px’, width: ‘150px’},”slow”);

  1. Operacions amb HTML i CSS

Amb jQuery tenim la possibilitat d’accedir i canviar l’html, tant elements com atributs. Ho fem mitjançant l’arbre DOM (Document Object Model), un estàndard del W3C que defineix com poden accedir i actualitzar programes i scripts al contingut, estructura i estil d’un document. És el que permet obtenir, canviar, afegir o eliminar elements HTML.

Per consultar una referéncia completa de métodes jQuery per manipular HTML i CSS, cliqueu aquí.

Recuperar/establir contingut HTML

Per recuperar un contingut html, o canviar-lo, els métodes més comuns són:

text( ) 

Estableix o retorna el contingut de text dels elements seleccionats

Retornar contingut: 

$(“selector”).text( );

Establir contingut: 

$(“selector”).text(“Hola Món!”);

html( ) 

Estableix o retorna el contingut d’elements seleccionats (incloent el format HTML)

Retornar contingut: 

$(“selector”).html( );

Establir contingut: 

$(“selector”).html(“Hola Món!”);

val( ) 

Estableix o retorna el valor dels camps del formulari

Retornar contingut: 

$(“selector”).val( );

Establir contingut: 

$(“selector”).val(“Hola Món!”);

attr( ) 

Estableix o retorna valors d’atribut. Aquest métode el veurem amb més profunditat en el següent apartat

Retornar contingut: 

$(“#w3s”).attr(“href”);

Establir contingut: 

$(“#w3s”).attr(“href”, “https://www.w3schools.com/jquery”);

Modificant el value

$(“#txt”).val(“value canviat”);

alert($(“#txt”).val( ));

Afegir contingut HTML

Per afegir contingut html:

append( ) 

Afegir contingut al final dels elements seleccionats

Sintaxi: 

$(“selector”).append(“Text afegit”);

prepend( ) 

Afegir contingut al principi dels elements seleccionats

Sintaxi: 

$(“selector”).prepend(“Text afegit”);

after( ) 

Afegir contingut després dels elements seleccionats

Sintaxi: 

$(“selector”).after(“Text afegit”);

before( ) 

Afegir contingut abans dels elements seleccionats

Sintaxi: 

$(“selector”).before(“Text afegit”);

Eliminar contingut HTML

Per eliminar contingut html:

remove( ) 

Elimina l’element html i el seu contingut (els elements “childs”)

Sintaxi: 

$(“#div1”).remove( );

empty( ) 

Buida l’element html, eliminant el seu contingut (els elements “childs”)

Sintaxi: 

$(“#div1″).empty( );

Manipulant el CSS: classes CSS

Afegir, eliminar i alternar classes CSS

addClass( ) 

Afegir classes als elements seleccionats

Sintaxi: 

$(“selector”).addClass(“classe”);

Sintaxi: 

$(“selector, selector”).addClass(“classe classe classe”);

removeClass( ) 

Eliminar classes dels elements seleccionats

Sintaxi: 

$(“selector, selector”)
.removeClass(“classe classe”);

toggleClass( ) 

Alterna entre afegir/eliminar classes dels elements seleccionats

Sintaxi: 

$(“selector, selector”).toggleClass(“classe classe”);

Manipulant el CSS: css( )

Permet recuperar i manipular propietats CSS dels elements seleccionats

css( )

Per recuperar el valor d’una propietat, tenint en compte que retorna el valor del primer element que troba.

Sintaxi: 

$(“selector”).css(“propietat”);

Per establir el valor d’una sola propietat CSS.

Sintaxi: 

$(“selector”)
.css(“propietat”,”valor”);

Per establir el valor de vàries propietats CSS.

Sintaxi: 

$(“selector”).css({“propietat”: “valor”, “propietat”: “valor”});

Exemple: 

$(“div”).css({“background-color”: “cyan”, “font-size”: “1.5em”});

Canviem l’estil d’un element: 

$(“#elemento”)
.css(“color”,”#ff0000″);

Apliquem diferents modificadors a un mateix element:

$(“div”).css(“background”, “blue”).css(“width”,”200px”).css(“height”, “400px”);

$(“div”).css({“background” : “blue”, “width” : “200px” });

  1. Accedir, treballar i modificar atributs

Com ja hem vist, amb .attr( ); podem accedir als atributs d’un element html, i modificar-los. És un dels métodes de manipulació més versàtils, ja que ens permet afectar a qualsevol atribut de qualsevol etiqueta html.

Com a recordatori, per a recuperar/establir valors d’atribut d’un element HTML

attr( )

Retornar valor de l’atribut: 

$(“selector”).attr(“atribut”);

Retornar valor de l’atribut i guardar-lo a una variable: 

var nomVariable = $(“selector”).attr(“atribut”);

Establir valor a un atribut: 

$(“selector”).attr(“atribut”, “valor de l’ atribut”);

Esborrar atribut: 

$(“selector”).removeAttr(“atribut”);

Exemples d’us de attr( )

Manipulant url’s: 

attr(“href”)

Recuperar una url: 

$(“selector”).attr(“href”);

Establir una url: 

$(“selector”).attr(“href”, “https://www.google.es”);

Manipulant imatges: 

attr(“src”)

Recuperar un title: 

$(“selector”).attr(“title”);

Establir un title: 

$(“selector”).attr(“title”, “Títol de la imatge”);

Manipulant alçades i amplades d’una imatge: 

attr(“height”) i attr(“width”)

Recuperar el valor de la alçada d’una img: 

$(“selector”).attr(“height”);

Establir l’alçada d’una img: 

$(“selector”).attr(“height”, “200”);

Recuperar el valor de la amplada d’una img: 

$(“selector”).attr(“width”);

Establir l’amplada d’una img: 

$(“selector”).attr(“width”, “200″);