Curs jQuery – Lectia 2 – Alias-ul, semantica instructiunilor si inserarea lor in documentul HTML

Dupa ce in lectia trecuta am facut o introducere la libraria jQuery vom merge mai departe cu analiza noastra vazand ce este alias-ul si care este semantica instructiunilor in jQuery.

Alias

In jQuery pentru a chema functiile disponibile in librarie utilizam ca o prescurtare acest simbol $. Instructiunea jQuery = $.

In interiorul codului nostru jQuery puem deci folosi atat functia completa jQuery la fel cum putem folosi si prescurtarea acesteia care este simbolul $.

Simbolul dolarului $ este un nume de variabila scurta in JavaScript. Acesta se foloseste deci in toate librariile JavaScript. In cazul in care folosim mai multe librarii JavaScript in interiorul paginii este indicata utilizarea functiei complete jQuery pentru a evita conflictele.

In exemplele continute in acest curs vom utiliza alias-ul $ pentru scrierea functiilor jQuery.

Semantica instructiunilor jQuery

Orice comanda jQuery este compusa din 4 elemente:

–       incepe cu chiemarea functiei jQuery complete sau cu ajutorul alias-ului $;

–       selectorii – pentru indicarea elementelor (unul sau mai multe) din pagina web asupra carora se aplica functia;

–       actiunile sau metoda – actiunea ce se aplica asupra selectorilor specificati;

–       parametrii – indicarea metodei exacte pentru aplicarea actiunii (aici de obicei se indica mai multi parametri, dar vom intalni si cazuri in care nu avem parametri de setat).

In exemplul de mai sus am selectat toate tagurile <h1> din documentul HTML (in cazul in care tagul h1 este repetat de mai multe ori in pagina). Apoi am specificat actiunea .css din jQuery care este utilizata pentru a modifica proprietatile css ale elementelor din tag-ul h1. Apoi ca si parametri am setat proprietatea “color” pe “red”. Rezultatul final este ca textele h1 sunt setate pe culoarea rosie.

Inserarea functiilor jQuery in documentul HTML

Dupa ce in lectia trecuta am vazut cum se realizeaza plasarea librariei jQuery in document acum vom vedea cum putem plasa functiile jQuery pe care le scriem in interiorul documentului HTML.

Tag-ul folosit si in acest caz este <script>. Este buna regula pozitionarea lui inainte de inchiderea tag-ului </body> ca in exemplul de mai jos:

<script>
$( document ).ready(function() {
console.log( "ready!" );
});
</script>
</body>

In articolul urmator vorbim despre Instructiunea document ready si specificarea selectorilor in jQuery.

---

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