Sunteți pe pagina 1din 11

jQuery

curs 2
Proprietati multiple cu functia .css utilizand un obiect literal

In lectia trecuta am vazut ca putem aplica o proprietate css prin intermediul functiei jQuery
.css asupra selectiei randurilor din tabel obtinute cu ajutorul selectorilor :even si :odd.

Proprietatea css aplicata in lectia trecuta viza culoarea de fundal a randurilor. In practica insa
avem nevoie sa aplicam mai multe reguli css deodata. In acest caz vrem sa personalizam atat
culoarea de fundal cat si culoarea textului pentru randurile de titlu si vrem sa marim
dimensiunea font-ului folosit.

Am putea bineinteles sa scriem functiile una dupa alta ca in cazul de mai jos dar acest lucru,
chiar daca va produce efectul dorit, rezultatul final fiind corect, nu este deloc un mod de
scriere eficient:

Astfel, pentru a aplica mai multe proprietati in acelasi timp vom folosi obiectul literal. Acesta
este un obiect specific JavaScript ce consta intr-o lista de perechi nume/valoare despartite de
virgula si inchise in acolade. Astfel vom avea urmatorul rezultat, asemntor cu codul CSS,
mult mai inteligibil si mai usor de actualizat ulterior:

Exerciiu1:
Realizai un tabel cu grosimea liniilor de 2, ntr-un fisier HTML, formatand tabelul astfel:
rndurile pare cu o culoare de fundal calda i deschis, fontul s fie foarte gros, familie
font Arial, culoare negru
rndurile impare cu o culoare de fundal rece i nchis, fontul mai slab dect la rndurile
pare, familie font Georgia, culoare alb
Salvai fiierul jq101.html, includeti codul script dintr-un fisier extern apelat n head, fisier cu
denumirea jq101.js. Fiierul jq101.js va avea declararea functiei css conform ultimului exemplu
afisat mai sus.
Manipularea vizibilitatii cu .addClass si .removeClass
In sectiunea anterioara am vazut cum putem aplica proprietati multiple cu ajutorul unui obiect
literal Java Script. In acest caz regulile de stil css sunt scrise direct in functia jQuery.
In aceasta sectiune vom vedea o alternativa mai simpla si mai eficienta pentru manipularea
regulilor css. Regulile de stil este bine sa fie mentinute in cadrul unei foi de stil sparate care sa
se numeasca de exemplu mystyle.css si care se ataseaza documentului nostru HTML. Pentru
exemplificari in acest articol vom scrie regulile de stil css in cadrul sectiunii head a paginii
nostre HTML.
jQuery ne da posibilitatea de a manipula in varii moduri vizibilitatea claselor css aplicate
elementelor din DOM. Acest lucru il putem face utilizand metodele .addClass si
.removeClass. Elementului div cu id wrap ii vom adauga clasa .awesome in care gazduim
regulile de stil cum este padding-ul de 20px, culoarea de fundal pe albastru si culoarea
textului pe alb.

Folosind in schimb .removeClass vom vizualiza div-ul in browser fara formatarea continuta in
clasa .awesome
Putem specifica si clase multiple in interiorul acestor metode. Vom realiza o alta clasa cu
numele .fantastic in interiorul careia vom gazdui regulile CSS per formatarea marginilor.
Noua clasa o vom separa de prima printr-un spatiu in acest mod:
Metodele .addClass si .removeClass se utilizeaza impreuna cu un event (eveniment).

Evenimentele in jQuery, instructiunile .show / .hide sau .toggle


Event-urile sunt acele actiuni realizate de catre utilizatori sau de catre browser.
Cand am vorbit despre functia $(document).ready am introdus primul eveniment in jQuery in
acest caz am specificat ca DOM-ul trebuie incarcat complet inainte de a aplica asupra acestuia
efectele jQuery.
Exista foarte multe evenimente care se genereaza in pagina web, cand vizitatorul face un
click, trece cu mouse-ul asupra unui element, cand face scroll in pagina etc. Unul dintre event-
urile cele mai utilizate este .click.
Instructiunile .show si .hide au fost prezentate n cadrul cursului 1 de jQuery.

Actiunea .is
Am vazut n exemplele cu instruciunile .show/.hide cum cu ajutorul a doua butoane putem
ascunde si arata informatii. Acelasi rezultat il putem obtine si cu ajutorul unui singur buton
asupra caruia aplicam actiunea .is
Vom defini deci un nou buton cu id-ul toogle si vom controla daca acesta este vizibil sau nu
pentru a-l putea ascunde sau vizualiza in consecinta cu ajutorul actiunii .is

In acest caz verificam daca asupra elementului div #detalii selectat este activ si
pseudoselectorul :visible. Avem aplicata conditia if else, o conditie extrem de des utilizata in
limbajele de programare ce va ascunde div-ul in cazul in care acesta este vizibil si il va face
vizibil in cazul contrar.
Intrerupatorul .toggle

Acest tip de logica pe care am analizat-o anterior si anume de trecere de la o stare la alta se
mai numeste si toogle. Pasajul elementelor de la un stadiu la altul este o actiune des utilizata
in functiile jQuery. Intrerupatorul show / hide poate fi numit si toggle. Folosind aceasta
functie vom obtine acelasi efect ca si in exemplul de mai sus scriind mult mai putin cod.

Cuvantul cheie this


Mai sus am introdus actiunea .is cu ajutorul careia am ascuns si aratat informatii utilizand-o
impreuna cu actiunile .show si .hide din jQuery. Deasemenea s-a prezentat si actiunea .toggle,
foarte utilizata de catre dezoltatorii jQuery, functie ce incorporeaza cele doua actiuni: .show si
.hide.
Acum vom face un pas in plus in configurarea actiunii schimband textul butonului utilizat
pentru realizarea actiunii .toggle in baza fazei in care se afla actiunea. Astfel cand detaliile
sunt vizibile vom avea textul butonului setat pe Ascunde Detalii iar in momentul in care
ascundem detaliile le putem arata din nou utilizand acelasi buton dar care afiseaza de aceasta
data textul Arata Detalii. Pentru a realiza acest lucru vom utiliza actiunea .is in interiorul
actiunii .toggle. In interiorul actiunii .is vom seta paramentrii value ai butonului ce corespund
celor doua faze utilizand conditia if / else:
Ceea ce mai vedem in exemplul de mai sus este ca am utilizat un nou cuvant in scrierea
functiei, am folosit cuvantul cheie this pentru a indica butonul.

In momentul in care un eveniment este generat cuvantul cheie this ne ajuta sa identificam
elementul care l-a generat. Includerea acestui cuvant cheie in interiorul obiectului jQuery ne
da posibilitatea sa nu repetam numele elementului generator al event-ului. In acest caz am
utilizat this pentru a ne referi la butonul cu id-ul #toggle. L-am utilizat pentru a ne referi la
buton in cadrul conditiei if / else care seteaza valoarea acestuia in cele doua stadii.
Codul complet este urmtorul:

Exerciiu 2:
Realizai un fisier HTML pornind de la fiierul realizat la exercitiul1, aplicand un buton ce va
ascunde sau va afisa tabelul , conform exemplului de mai sus.
Salvai fiierul jq102.html, includeti codul script dintr-un fisier extern apelat deasupra tagului de
nchidere </body>, fisier cu denumirea jq102.js.
Selectorul :hidden
aplicarea functiei .toggle asupra unui element initial ascuns

In exemplele anterioare detaliile erau initial vizibile, iar fcnd click pe buton le puteam
alterna vizibilitatea
Dar in cele mai multe cazuri va trebui sa replicam varianta inversa: pentru o punere in pagina
mai eficienta a informatiilor si pentru economisirea de spatiu va trebui sa avem initial detaliile
ascunse pentru ca vizitatorii interesati sa le poata mai apoi vizualiza facand un click pe buton
sau trecand cu mouse-ul asupra lor.
Pentru acest scop vom folosi selectorul :hidden, dupa ce in articolul trecut am utilizat
selectorul :visible deoarece detaliile erau initial vizibile.
In primul rand va trebui sa ne asiguram ca elementul div #detalii este ascuns vizualizarii.
Pentru acest lucru vom insera o noua clasa css si o vom aplica elementului. In acest mod vom
avea acest div initial ascuns vizualizarii:

Mergand mai jos in codul nostru ne vom asigura ca valoarea initiala a butonului este setata pe
Arata Detalii deoarece detaliile sunt intial ascunse, deci vom avea nevoie de aceasta valoare
initiala.

Trecand la codul jQuery vom inversa selectorul.


Daca in exemplele de mai sus, cand detaliile erau initial vizibile am utilizat selectorul :visible,
de aceasta data vom utiliza selectorul :hidden deoarece avem aplicata dup cum se vede
regula css de display: none asupra elementului, deci in faza initiala va fi ascuns.
In formularea conditiei if / else pentru schimbarea textului asociat butonului vom avea ca
prima optiune textul pentru faza in care detaliile sunt ascunse, iar ca faza secundara textul
pentru ascunderea detaliilor.

Adaugarea si plasarea elementelor la DOM cu ajutorul metodelor


.insertBefore si .insertAfter
Acum vom folosi functiile in jQuery pentru a crea noi elemente in structura paginii.
In exemplul de mai jos inseram un simplu paragraf:

In interiorul unei functii jQuery putem adauga orice cod HTML pentru a-l adauga paginii.
Asupra tag-ului adaugat putem aplica o clasa CSS cu ajutorul .addClass:

Acum trebuie sa definim punctul in care noul element va trebui inserat in structura
documentului HTML, acest lucru il vom face cu metodele .insertAfter sau .insertBefore.

Vedem mai jos, n pagina urmatoare un exemplu complet in care am inserat cu ajutorul
metodei .insertAfter un buton care arata si ascunde detaliile continute in interiorul div-ului cu
id detalii; acest buton il plasam dupa elementul h3 din pagina.

De reinut este ca daca vrem insa sa inseram butonul inainte de elementul h3 vom utiliza
metoda .insertBefore.
Observam cum in primul rand de cod de mai sus cu ajutorul caruia am inserat butonul am
utilizat atat apostroafele cat si glilimelele. Sintaxa elementelor string o vom analiza pe larg
intr-o lectie urmatoare.
Codul de mai sus insereaza deci noul element (butonul) dependent de tag-ul h3. Acest lucru
inseamna ca acesta se gaseste pe acelasi nivel al documentului ca si tag-ul h3.
Daca insa vrem sa integram noul element ca si child in cadrul unui element existent vom utiliza
metodele .prependTo sau .appendTo

Metodele prependTo si appendTo


Cu metodele prependTo si appendTo in schimb vom insera elementele noi ca si child al
elementului existent.
Pentru a exemplifica aceste functii vom insera in documentul nostru o lista si vom adauga
inaintea fiecarui tag li un element decorativ pentru a obtine aceasta configurare:
Codul complet este urmtorul:

Ca si element decorativ vom utiliza simbolul ASCII (care se obtine de la tastatura cu


urmatoarea combinatie de taste alt+shift+1)
Astfel vom avea un script jQuery in care am inserat simbolul in interiorul tag-ului span si l-am
formatat cu o culoare albastra si cu o dimensiune de 25 de pixeli
Cu aceasta formulare vom regasi simbolul inaintea fiecarui tag li din documentul nostru.
Daca vrem sa particularizam aplicarea sa pentru a insera acest simbol numai inaintea
elementelor li dintr-un div anume din pagina noastra atunci vom adauga inaintea selectorului
li numele selectorului div in acest mod:
$(document).ready(function(){
$('<span style= "color: #239dbc; font-size: 25px;"> <span/>').prependTo('#wrap
li');
});

Astfel inserand o lista in afara div-ului cu id wrap vom obtine o lista simpla, fara formatarea
data listei din interior.
Metoda .prependTo adauga deci elemente inaintea selectorului. Pentru a adauga un element
dupa selector vom utiliza metoda .appendTo.
Exerciii rezolvate
1. Realizai un fisier HTML n care toate elementele span vor avea aplicata functia appendTo
elementelor cu id-ul wow

2. Realizai un fisier HTML n care sa mutai i sa inserati elemente h1 n partea de sus a


fiecarui element p

S-ar putea să vă placă și