close

Sintaxa de bază a jQuery- Selectare, Manipulare și Efecte

Sintaxa de bază a jQuery implică utilizarea unui selector(selector în stil CSS) și metode de manipulare a elementelor selectate. Iată câteva exemple de sintaxă de bază pentru jQuery:

 

Selectarea elementelor

  • Selectați elemente după numele etichetei HTML: $("tagname") Exemplu: $("p") selectează toate <p> elementele din pagină.

  • Selectați elemente după clasa CSS: $(".classname") Exemplu: $(".myClass") selectează toate elementele cu clasa „myClass”.

  • Selectați elemente după ID: $("#idname") Exemplu: $("#myElement") selectează elementul cu ID-ul „myElement”.

  • Selectați elemente după atribut: $("[attribute='value']") Exemplu: $("[data-type='button']") selectează elemente cu atributul data-type setat la „button”.

  • Combinarea selecțiilor: $("tagname.classname"), $("#idname .classname"), ...

 

Manipularea elementelor selectate

  • Modificarea conținutului unui element: .html(), .text() Exemplu: $("#myElement").html("New content") setează conținutul HTML al elementului cu ID „myElement”.

  • Modificarea atributelor elementului: .attr(), .prop() Exemplu: $("img").attr("src", "newimage.jpg") modifică src atributul tuturor <img> elementelor.

  • Manipularea claselor CSS ale unui element: .addClass(), .removeClass(), .toggleClass() Exemplu: $("#myElement").addClass("highlight") adaugă clasa „highlight” la elementul cu ID „myElement”.

  • Ascunderea/afișarea elementelor: .hide(), .show(), .toggle() Exemplu: $(".myClass").hide() ascunde toate elementele cu clasa „myClass”.

  • Gestionarea evenimentelor pe elemente: .click(), .hover(), .submit(), ... Exemplu: $("button").click(function() { ... }) înregistrează un handler de evenimente clic

 

Lucrul cu colecții de elemente

  • Iterarea printr-o colecție: .each() Exemplu: $("li").each(function() { ... }) iterează peste fiecare <li> element din pagină.

  • Filtrarea unei colecții: .filter(), .not() Exemplu: $("div").filter(".myClass") filtrează <div> elementele și le selectează pe cele cu clasa „myClass”.

  • Inserarea elementelor într-o colecție: .append(), .prepend(), .after(), .before() Exemplu: $("#myElement").append("<p>New paragraph</p>") adaugă un nou <p> element la elementul cu ID „myElement”.

 

Efecte și animații

  • Efectuarea efectelor fadeIn/fadeOut: .fadeIn(), .fadeOut() Exemplu: $("#myElement").fadeIn(1000) se estompează în elementul cu ID „myElement” pe o durată de 1 secundă.

  • Efectuarea efectelor slideUp/slideDown: .slideUp(), .slideDown() Exemplu: $(".myClass").slideUp(500) glisează în sus toate elementele cu clasa „myClass” pe o durată de 0,5 secunde.

  • Efectuarea de animații personalizate: .animate() Exemplu: $("#myElement").animate({ left: '250px', opacity: '0.5' }) animă elementul cu ID „myElement” modificându-i poziția din stânga și opacitatea.

 

Aceste exemple demonstrează cum să utilizați diferite aspecte ale sintaxei de bază a jQuery pentru a selecta elemente, a manipula proprietățile lor și a aplica efecte sau animații. jQuery oferă un set bogat de metode și funcționalități pentru a simplifica și îmbunătăți sarcinile de dezvoltare web.