Curs jQuery – Lectia 1 – Introducere, Download / CDN si plasare in documentul HTML

Ce este jQuery?

Este cea mai utilizata si stabila librarie JavaScript cu ajutorul careia putem adauga efecte si comportamente elementelor ce alcatuiesc DOM-ul (Document Object Model) paginii web si putem crea cereri Ajax.

Avantaje

– Sloganul jQuery este „Write less, do more” deci scrierea este cu mult comprimata in comparatie cu utilizarea limbajului de programare JavaScript pur;
– Avand in vedere succesul de care se bucura, succes verificat prin gradul difuziunii sale, libraria jQuery este una dintre cele mai active in ceea ce priveste producerea de cod nou si de plugin-uri, bucurandu-se de o comunitate de dezvoltatori in continua crestere;
– Multi colosi din industria IT utilizeaza jQuery cum sunt: IBM, Netflix, Nokia, Wikipedia, Google si Microsoft;
– Libraria jQuery are dimensiuni reduse de circa 96 KB pentru intreaga librarie in varianta comprimata.

Download jQuery

Pentru utilizarea jQuery avem doua optiuni: putem sa descarcam release-ul cel mai recent pe calculator si sa il includem fizic in proiectul nostru sau putem folosi libraria prin linkarea la un server CDN (Content Ditribution Network).

Descarcarea librariei pe calculator

Pentru a folosi fisierul descarcat fizic pe calculatorul nostru vom merge pe site-ul jQuery. Facand un click pe butonul de DOWNLOAD vom deschide pagina unde avem mai multe optiuni pentru descarcarea librariei.

In acest moment release-ul cel mai recent pentru versiunea 3x este 3.5.1 pe care il putem descarca in varianta comprimata (production) sau necomprimata (development), vom vedea mai jos care sunt diferentele dintre cele doua. Se mai poate folosi si versiunea slim, dar care exlude modulele ajax si efectele de animatie.

Includerea prin CDN

Aceasta optiune ne da posibilitatea de a utiliza libraria prin reteaua CDN – Content Delivery Network pusa la dispozitie atat de jQuery, cat si de Google sau Microsoft.

Google gazduieste pe reteaua sa numeroase librarii open source, printre care mai multe librarii JavaScript deci si jQuery. Avantajul utilizarii librariei jQuery prin CDN-ul Google este ca astfel vom fi avantajati de viteza si de performanta instrastructurii Google care ne da posibilitatea de a utiliza versiunea cea mai noua. Un alt avantaj este faptul ca multi vizitatori au descarcat deja libraria de la CDN-ul Google prin vizualizarea altor site-uri web si deci viteza de incarcare a site-ului nostru va fi astfel favorizata.

Pentru versiunile cele mai recente link-urile la CDN sunt:

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

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

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

Pentru a vedea care este link-ul la versiunea cea mai recenta vom merge pe site-ul Google Developers.

Bineinteles ca putem linka si catre CDN-ul jQuery:

https://code.jquery.com/jquery-3.5.1.min.js

https://code.jquery.com/jquery-1.11.0.min.js

Varianta comprima sau cea necomprimata?

Pentru producerea codului este preferabila utilizarea versiuni comprimate (min) in care au fost eliminate spatiile si randurile si in care numele variabilelor a fost prescurtat. Utilizand varianta comprimata vom obtine un fisier mai usor decat originalul pentru a reduce astfel lungimea de banda si pentru a spori viteza de incarcare a paginii.

Daca insa folosim pentru primele dati jQuery si ne intereseaza sa il studiem pentru a putea intelege mai bine sintaxa atunci avem nevoie de versiunea necomprimata in care codul este inteligibil.

Unde plasam libraria in documentul nostru HTML?

Link-urile la libraria jQuery in documentul nostru HTML vor fi plasate ca buna regula inainte de inchiderea tag-ului body al paginii, fie ca vorbim despre libraria jQuery descarcata pe calculator sau de un link la unul dintre CDN-uri.

Link-ul in cazul salvarii librariei pe calculator va fi asemanator cu acesta, unde fisierul este salvat in cadrul site-ului nostru in folder-ul cu numele JS iar versiunea descarcata este cea comprimata:

<script type=”text/javascript” src=”JS/jquery-1.11.1.min.js”></script>

Si link-ul catre unul dintre variile CDN-uri disponibile va fi plasat de regula tot inainte de inchiderea tag-ului body al documentului.

<body>

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

</body>

</html>

Daca insa vrem sa pozitionam aceste link-uri intr-o alta parte a documentului o putem face in interiorul tag-ului head ca in exemplul de mai jos, numai ca in acest caz libraria va fi incarcata deodata cu celelalte elemente ale paginii, si nu dupa ca in cazul in care pozitionarea se face la sfarsitul paginii:

<head>

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

</head>

In lectia urmatoare vom analiza semantica instructiunilor in jQuery si alias-ul utilizat.

CUPRINS MINI-CURS JQUERY

1. Introducere la jQuery, download / CDN si plasare in documentul HTML
2. Alias-ul, semantica instructiunilor si inserarea lor in documentul HTML
3. Instructiunea Document Ready in jQuery si specificarea selectorilor
4. Selectorii :even si :odd si functia .css
5. Proprietati multiple cu functia .css utilizand un obiect “literal”
6. Manipularea vizibilitatii cu .addClass si .removeClass
7. Evenimentele in jQuery, instructiunile .show / .hide sau .toogle
8. Cuvantul cheie “this” si schimbarea textului pentru declansatorul functiei .toogle in jQuery
9. Selectorul :hidden – aplicarea functiei .toogle asupra unui element initial ascuns
10. Adaugarea si plasarea elementelor in DOM cu ajutorul functiilor .insertAfter si .insertBefore
11. Adaugarea elementelor child in DOM cu ajutorul functiilor .prependTo si .appendTo