Cautare in site

Articol

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

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

Ce este jQuery?

Este o librarie JavaScript cu ajutorul careia putem adauga efecte la DOM (Document Object Model) si putem crea cereri Ajax.

Avantaje

– Versiunea 1.x prezinta un grad ridicat de compatibilitate cu toate browserele, inclusiv cu IE6;

– Libraria jQuery are dimensiuni reduse de circa 96 KB pentru intreaga librarie in varianta comprimata;

– Multi colosi din industrie utilizeaza jQuery cum sunt: IBM, Netflix, Nokia, Wikipedia, Google si Microsoft;

– 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 plug-in-uri, bucurandu-se de o comunitate de dezvoltatori in continua crestere.

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 din 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 1x este 1.11.1 pe care il putem descarca in varianta comprimata sau necomprimata (vom vedea mai jos care sunt diferentele dintre cele doua). Acest release isi pastreaza compatibilitatea cu browserele cele mai problematice IE 6, 7 si 8.

O alta varianta este descarcarea noii versiuni 2.x. Si aici avem varianta comprimata si cea necomprimata. Diferenta este ca aceasta versiune nu pasteaza compatibilitatea cu browserele mai vechi.

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="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/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:

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

Varianta comprima sau cea necomprimata?

Pentru producerea codului este preferabila utilizarea versiuni comprimate 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 in partea de head a paginii nostre, 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 dosarul cu numele JS iar versiunea descarcata este cea comprimata:

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

Si link-ul catre unul dintre variile CDN disponibile va fi plasat de regula tot in partea de head a documentului. Daca insa vrem sa pozitionam aceste link-uri intr-o alta parte a documentului o putem face inainte de inchiderea tag-ului <body> ca in exemplul de mai jos, numai ca in acest caz libraria va fi incarcata dupa incarcarea efectiva a paginii:

</section>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script
</body>
</html>

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


One Comment

  1. added on 6 mart., 2015
    Răspunde

    Foarte buna aceasta lectie.
    Am inteles mai bine anumite functii jQuery.
    Va multumesc mult pentru ajutorul acordat.

Adauga Comentariu

Adresa ta de e-mail nu va fi publicata.