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
- Introducere la jQuery, download / CDN si plasare in documentul HTML
- Alias-ul, semantica instructiunilor si inserarea lor in documentul HTML
- Instructiunea Document Ready in jQuery si specificarea selectorilor
- Selectorii :even si :odd si functia .css
- Proprietati multiple cu functia .css utilizand un obiect “literal”
- Manipularea vizibilitatii cu .addClass si .removeClass
- Evenimentele in jQuery, instructiunile .show / .hide sau .toogle
- Cuvantul cheie “this” si schimbarea textului pentru declansatorul functiei .toogle in jQuery
- Selectorul :hidden – aplicarea functiei .toogle asupra unui element initial ascuns
- Adaugarea si plasarea elementelor in DOM cu ajutorul functiilor .insertAfter si .insertBefore
- Adaugarea elementelor child in DOM cu ajutorul functiilor .prependTo si .appendTo
Nu sunt comentarii