close

Sintaksa bazë e jQuery- Përzgjedhja, Manipulimi dhe Efektet

Sintaksa bazë e jQuery përfshin përdorimin e një përzgjedhësi(përzgjedhës të stilit CSS) dhe metodave për të manipuluar elementët e zgjedhur. Këtu janë disa shembuj themelorë sintaksorë të jQuery:

 

Përzgjedhja e elementeve

  • Zgjidh elementet sipas emrit të etiketës HTML: $("tagname") Shembull: $("p") zgjedh të gjithë <p> elementët në faqe.

  • Zgjidh elementet sipas klasës CSS: $(".classname") Shembull: $(".myClass") zgjedh të gjithë elementët me klasën "myClass".

  • Zgjidh elementet sipas ID-së: $("#idname") Shembull: $("#myElement") zgjedh elementin me ID "myElement".

  • Zgjedhja e elementeve sipas atributit: $("[attribute='value']") Shembull: $("[data-type='button']") zgjedh elementet me atributin data-type e vendosur në "button".

  • Kombinimi i zgjedhjeve: $("tagname.classname"), $("#idname .classname"), ...

 

Manipulimi i elementeve të zgjedhur

  • Ndryshimi i përmbajtjes së një elementi: .html(), .text() Shembull: $("#myElement").html("New content") vendos përmbajtjen HTML të elementit me ID "myElement".

  • Modifikimi i atributeve të elementit: .attr(), .prop() Shembull: $("img").attr("src", "newimage.jpg") ndryshon src atributin e të gjithë <img> elementeve.

  • Manipulimi i klasave CSS të një elementi: .addClass(), .removeClass(), .toggleClass() Shembull: $("#myElement").addClass("highlight") shton klasën "highlight" në elementin me ID "myElement".

  • Fshehja/shfaqja e elementeve: .hide(), .show(), .toggle() Shembull: $(".myClass").hide() fsheh të gjithë elementët me klasën "myClass".

  • Trajtimi i ngjarjeve në elementet: .click(), .hover(), .submit(), ... Shembull: $("button").click(function() { ... }) regjistron një mbajtës të ngjarjeve të klikimeve

 

Puna me koleksionet e elementeve

  • Përsëritja përmes një koleksioni: .each() Shembull: $("li").each(function() { ... }) përsëritet mbi çdo <li> element në faqe.

  • Filtrimi i një koleksioni: .filter(), .not() Shembull: $("div").filter(".myClass") filtron <div> elementet dhe zgjedh ato me klasën "myClass".

  • Futja e elementeve në një koleksion: .append(), .prepend(), .after(), .before() Shembull: $("#myElement").append("<p>New paragraph</p>") i shton një <p> element të ri elementit me ID "myElement".

 

Efektet dhe animacionet

  • Kryerja e efekteve fadeIn/fadeOut: .fadeIn(), .fadeOut() Shembull: $("#myElement").fadeIn(1000) zbehet në elementin me ID "myElement" për një kohëzgjatje prej 1 sekonde.

  • Kryerja e efekteve slideUp/slideDown: .slideUp(), .slideDown() Shembull: $(".myClass").slideUp(500) rrëshqet lart të gjithë elementët me klasën "myClass" për një kohëzgjatje prej 0,5 sekondash.

  • Kryerja e animacioneve të personalizuara: .animate() Shembull: $("#myElement").animate({ left: '250px', opacity: '0.5' }) animon elementin me ID "myElement" duke ndryshuar pozicionin e tij majtas dhe opacitetin.

 

Këta shembuj tregojnë se si të përdoren aspekte të ndryshme të sintaksës bazë të jQuery për të zgjedhur elementë, për të manipuluar vetitë e tyre dhe për të aplikuar efekte ose animacione. jQuery ofron një grup të pasur metodash dhe funksionesh për të thjeshtuar dhe përmirësuar detyrat e zhvillimit të uebit.