Cautare in site

Articol

Curs jQuery – lectia 5 – Proprietati multiple cu functia .css utilizand un obiect “literal”

Curs jQuery – lectia 5 – 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:

<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:

curs-jquery-functia-css-obiect-literal

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 viitor vom vedea cum putem manipula vizibilitea cu .addClass si .removeClass.


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


Nu sunt comentarii

Adauga Comentariu

Adresa ta de e-mail nu va fi publicata.