jQuery: Selectori, atribute, traversări, manipulări…


Am făcut primii paşi de acomodare cu jQuery. Pentru un studiu mai serios vă recomand parcurgerea documentaţiei de pe situl jQuery.com. Principalele capitole (pe lângă introducere) sunt: Selectors, Attributes, Traversing, Manipulation, CSS, Events, Effects şi Ajax. Noi am văzut până acum aplicarea modificărilor CSS (funcţia css, height, width), a unor efecte (toggle, slideIn, fadeOut…), iar legat de evenimente am exemplificat doar cu click. Astăzi vom mai vedea ceva evenimente şi într-o trecere rapidă şi pe sărite vom vorbi şi despre selectori, atribute, traversări şi manipulări. Ar rămâne atunci ca într-un alt articol să vorbim despre AJAX; altele ar urma să fie dedicate unor pluginuri şi poate construirii unor mici aplicaţii. Acum să trecem de la intenţii la fapte. Avem ca de obicei o pagină pe care am construit-o pentru Dvs cu diverse exemple (ca arhivă o puteţi descărca de aici).

Selectors (selectori)

Pentru a putea modifica ceva în pagină trebuie să ştim accesa respectivul element. jQuery se foloseşte de un mix de selectori inspirat din CSS şi XPath. Deja am văzut că dacă dorim să selectăm linkurile scriem $("a"). Dacă dorim să selectăm toate paragrafele vom scrie $("p"). Dacă dorim să selectăm primul paragraf avem două variante: $("p:eq[0]") sau $("p:first"). Aţi ghicit, cu $("p:last") selectăm ultimul paragraf. În pagina demonstrativă avem un link căruia i-am ataşat onClick=’$("p[a]").hide();’ – îl citim astfel "selectează paragrafele (p) care au înăuntru un link (a) şi ascunde-le". Întrebare: ce face onClick=’$("p:eq(1)").css("color","blue");’? Răspuns: selectează al doilea paragraf (numerotarea începe de la 0, deci p:eq(0) este primul paragraf, p:eq(1) este al doilea) şi prin CSS setează culoarea fontului ca fiind albastru. Cu $("p:lt(2)") se selectează primele două paragrafe (cele cu indexul strict mai mic decât 2). Cu $("p:gt(2)") se selectează paragrafele de la al patrulea încolo (cu indexul strict mai mare decât 2, dar nu uitaţi că se începe de la 0).

Aveţi un tabel şi doriţi să fie o liniile colorate alternativ?

$(document).ready(function() {
  $("tr:odd").css("background", "#ffffcc");
  $("tr:even").css("background", "#ccffff");
});

Sau poate doriţi ca la trecerea cu mouse-ul peste o linie de tabel aceasta să îşi schimbe culoarea?

$(document).ready(function() {
  $("tr").hover(function() {
    $(this).css({background:"#ff0000"});
  },function(){
    $(this).css({background:"#ffffff"});
  });
});

Ori combinate: liniile colorate alternativ şi să îşi schimbe culoarea la trecerea mouse-ului?

$(document).ready(function() {
  $("tr:odd").css("background", "#ffffcc");
  $("tr:even").css("background", "#ccffff");
  $("tr:odd").hover(function() {
    $(this).css({background:"#ff0000"});
  },function(){
    $(this).css({background:"#ffffcc"});
  });
  $("tr:even").hover(function() {
    $(this).css({background:"#ff0000"});
  },function(){
    $(this).css({background:"#ccffff"});
  });
});

Prin exemplele de până acum nu am epuizat dar am oferit o paletă largă de selectori (să ne amintim din articolele trecute # pentru indicare prin id şi . pentru indicare prin clasă). Vedeţi în demonstraţie selectorii pentru liste. Acolo am inclus intenţionat două liste şi veţi putea vedea că unele clickuri afectează simultan listele, altele doar una. Diferenţa stă în selector: ul/li identifică elementele ambelor liste; dacă îi dăm un id al unei liste, atunci putem restrânge activitatea doar pe acea listă. "Morala" ar fi aceasta: când folosiţi jQuery analizaţi bine posibilitatea ca în pagină să fie şi alte elemente decât cele pe care doriţi să le modificaţi. Doriţi să faceţi efectele de mai sus pe un tabel: dar respectivul tabel este într-un alt tabel (al designului, de exemplu): rezultatul va fi departe de ceea ce doreaţi. Tocmai de aceea cel mai sigur este să definiţi identificatori pe element şi să apelaţi la aceştia pentru selectare (prin #).

Să vorbim acum puţin şi despre atribute.

Attributes (atribute)

Trecem atunci la atribute. Documentaţia de pe jQuery oferă ca exemplu de start $("img").attr("src"). Dacă avem <img src=masina.jpg>, atunci codul jQuery va returna "masina.jpg". Dar dacă avem mai multe imagini? Putem folosi de exemplu $("body").find("img").each(function(i) { alert($(this).attr("src")); }) pentru a afla numele lor. Desigur, în loc de alert putem folosi altceva. Cu funcţia attr() putem afla atributele nu doar la tagul img ci practic la orice tag care foloseşte argumente: linkurile de la a, lăţimea unor tabele ş.a. Dar jQuery ne permite nu doar să aflăm valorile ci să şi setăm atribute. Situaţia seamănă cu cea de la funcţia css() care permitea să aflăm şi să setăm. Iată trei din cele patru moduri de folosire (al patrulea permite indicarea unei funcţii ca parametru secund):

$("img").attr("src") – returnează valoarea atributului src al primului tag img
$("img").attr("src", "vehicul.jpg") – inlocuieste valorile atributului src de la primul tag img
$("img").attr({src: "vehicul.jpg", alt: "Un vehicul"}) – inlocuieste valorile atributelor src şi alt de la primul tag img

Cu removeAttr() eliminăm un atribut al unui tag. Despre addClass, removeClass şi toggleClass am vorbit deja într-un material anterior. Ultimele trei funcţii trecute la atribute sunt html(), text() şi val(), fiecare cu două variante (de returnare a unei valori, respectiv de setare a unei valori). Ne vom mai întâlni cu unele cel puţin aşa că nu mă opresc acum (documentaţia vă stă oricum mereu la dispoziţie pe jQuery.com).

Traversing (traversări)

jQuery oferă diverse funcţii pentru a ne "plimba" printre elementele unei pagini. Putem să aflăm de exemplu părintele sau copiii unui div, ceea ce permite o navigare în adâncime. În pagina demonstrativă indicată la începutul acestui material sunt exemple de aplicare a funcţiei find(), respectiv not(). Acestea sunt complementare. Codul de mai jos parcurge fiecare element li din lista identificată cu id-ul lista şi adaugă un text.

$("#lista").find("li").each(function(i) { $(this).append(" (pozitia "+(i+1)+")"); })

În schimb în exemplul următor se parcurge lista cu id-ul unelte, elemente li care nu au subliste ordonate (adică ol) şi aplică un style. Dacă dorim respectarea unei condiţii apelăm la find, dacă dorim să selectăm elementele ce contrazic o condiţie apelăm la not.

$("#unelte li").not("[ol]").css("background", "#f0f0f");

Aveţi şi o demonstraţie al unei alte funcţii ce apare la traversări: contains(). Toate paragrafele care conţin cuvântul "elementum" sunt colorate cu albastru.

$("p:contains(’"elementum’")").css("color","blue");

Manipulation

Există în fine o serie de funcţii care vă permit să modificaţi pagina. Puteţi de exemplu să adăugaţi text după sau înaintea unui paragraf, ori la începutul sau sfârşitul lui. Puteţi înconjura un element cu un alt element. Fiecare funcţie are pe jQuery şi exemple. În pagina demonstrativă sunt de asemenea câteva exemple. Vă invit să o vizitaţi şi dacă vă interesează să îi studiaţi sursa. Mai departe ne pregătim de… AJAX!


Apreciază articolul:

1 stea2 stea3 stea4 stea5 stea (3 evaluări, media: 5,00 din 5)
Loading...Loading...

0 comentarii


Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile necesare sunt marcate *