Curs jQuery – lectia 4 – Selectorii :even si :odd si functia .css

Dupa ce in lectia trecuta am vazut cum putem selecta in mod detaliat elementele din DOM acum vom particulariza si mai mult selectia cu ajutorul selectorilor :even si :odd si vom decora elementele selectate cu ajutorul functiei .css

In documentul HTML am inserat un tabel si avem nevoie sa scoatem in evidenta titlul variilor sectiuni:

<table width="100%" border="1">
<tr><td>Titlu prima sectiune</td></tr>
<tr><td>Continut prima sectiune</td></tr>
<tr><td>Titlu a doua sectiune</td></tr>
<tr><td>Continut a doua sectiune</td></tr>
<tr><td>Titlu a treia sectiune</td></tr>
<tr><td>Continut a treia sectiune</td></tr>
</table>

Pentru a putea selecta numai elementele ce ne intereseaza din tabelul nostru si anume numai randurile ce contin titlul putem folosi selectorul :even. Acesta va selecta primul element, cel de-al treilea element, cel de-al cincilea samd, unde elementele selectate sunt in ordinea aparitiei in document. Astfel, pentru a selecta aceste randuri din tabelul nostru vom folosi urmatoarea formulare, unde tr este tag-ul ce reprezinta randurile tabelului:

$('tr:even')

In schimb pentru a inversa selectia avem selectorul :odd. Acesta va selecta al doilea element, al patrulea element, al saselea element etc. Formularea devine deci:

$('tr:odd')

Mai multe depre selectoarele :even si :odd putem gasi pe site-ul jQuery.

Acum ca am selectat randurile care ne intereseaza putem aplica o decoratie asupra titlurilor pentru a le scoate in evidenta. Utilizand jQuery pentru acest scop putem recurge la functia .css. Vom interveni asupra culorii de fundal a randurilor ce contin titlurile. Astfel vom avea urmatoarea formulare:

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

Rezultatul pe care il vedem in browser va fi urmatorul:

Selectia cu :even si :odd isi gaseste cel mai bun exemplu in elementul HTML tabel dar nu se limiteaza bineinteles la acesta.

In exemplul de mai jos am utilizat selectia :odd pentru a aplica o culoare de fundal elementelor div continute in interiorul div-ului cu id-ul wrap:

<div id="wrap">
<div>Titlu prima sectiune</div>
<div>Continut prima sectiune</div>
<div>Titlu a doua sectiune</div>
<div>Continut a doua sectiune</div>
<div>Titlu a treia sectiune</div>
<div>Continut a treia sectiune</div>
</div>

<script>
$('#wrap div:odd').css('background-color','#dddddd');
</script>

Rezultatul pe care il vedem in browser va fi urmatorul:

Fisierul HTML utilizat pentru acest articol se poate descarca aici.

In articolul urmator vom vedea cum putem aplica mai multe proprietati css div-urilor selectate utilizand functia .css prin intermediul unui obiect „literal”.

---

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