Curs jQuery - lectia 5

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:

<script>
$(document).ready(function(){
$('tr:even').css('background-color','#1FB0E0');
$('tr:even').css('color','#FFFFFF');
$('tr:even').css('font-size','20px');
});
</script>

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, ce este mult mai inteligibil si mai usor de actualizat ulterior:

<script>
$('tr:even').css(
{'background-color': '#1FB0E0', 'color': '#FFFFFF', 'font-size': '20px'}
);
</script>

Astfel in browser vom obtine urmatorul rezultat:

NB: Dupa cum putem observa in toate exemplele din acest curs comanda $(document).ready este intotdeuna prezenta, fiind enuntata la inceputul script-ului inserat in pagina. In lipsa acestei comenzi este posibil sa asistam la urmatoarea eroare: functia .css se pregateste de executare inainte ca elementele DOM-ului sa fie incarcate si negasind corespondenta tagului tr asupra caruia trebue sa intervina nu mai incarca comanda.

De aici puteti descarca fisierul HTML utilizat pentru acest articol.

In articolul urmator vom vedea cum putem manipula vizibilitea cu .addClass si .removeClass.

CUPRINS MINI-CURS JQUERY