jQuery është një librari JavaScript e shpejtë dhe e saktë e cila përdoret për të thjeshtuar punën me dokumentet HTML, punën me eventet, animimin, si dhe ndërveprimet me Ajax. Për të përdorur këtë librari mund ta shkarkoni atë nga faqja http://jquery.com/ ose të shfrytëzoni kopje të saj të hostuara nga kompani të mëdha si p.sh. të ruajtur te Google nën linkun http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js .
Për të thirrur librarin e ruajtur në një host të jashtëm në programin tonë tagu <script> do të dukej si më poshtë:
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.
4.0/jquery.min.js?ver=1.4.0">
</script>
jQuery ekzekutohet pasi DOM është gati dhe është e ndare nga përmbajtja (HTML) dhe paraqitja (CSS). Kodi jQuery pozicionohet si më poshtë:
$(document).ready(function() {
// i gjithe kodi jQuery vendoset ketu
});
Perzgjedhja e elementeve ne jQuery
Libraria jQuery bën të mundur selektimin e elementëve të XHTML duke i futur ato në kllapa dhe thonjëza dyshe ose teke të tilla $(“”). Më poshtë jepen disa shembuj të kapjes së elementëve:
$("div"); //përzgjedh të gjithë elementët div të HTML
$("#myElement"); // përzgjedh një element HTML me ID
"myElement"
$(".myClass"); // përzgjedh elemente HTML me klas "myClass"
$("p#myElement"); // përzgjedh element paragraf HTML me ID
"myElement"
$(":animated"); // përzgjedh elementët e animuar
$(":button"); // përzgjedh elementët button
(":radio"); // përzgjedh radio button-at
$(":checkbox"); // përzgjedh checkbox-et
$(":checked"); // përzgjedh të gjithë checkbox-et ose radio button-at
të cilët janë të selektuar
$(":header"); // përzgjedh elementët header(h1, h2, h3, etj.)
Shtimi, Fshirja, dhe Bashkëngjitja e Elementëve dhe Përmbajtjes
Ka mënyra të ndryshme për manipulimin e grupeve të elementëve me ane të jQuery.
Për të marrë një element në HTML shkruajmë:
var myElementHTML = $("#myElement").html();
// variabëli përmban të gjithe HTML-në (përfshirë tekstin) brenda # myElement
Nëse nuk kemi nevoj për të aksesuar the gjithë HTML-në, por duam vetëm elementin tekst:
var myElementHTML = $("#myElement").text();
Duke shfrytëzuar këtë sintaksën e dy shembujve të mësipërm ne mund të ndryshojm edhe përmbajtjen e tekstit të një elementi: $(“#myElement”).html(“<p>Kjo eshte permbajtja e re.</p>”); ose
$("#myElement").text("Kjo eshte permbajtja e re.");
Për ti bashkangjitur përmbajtje një elementi dukë lënë të pandryshuar përmbajtjen ekzistuese:
$("#myElement").append("<p> Kjo eshte permbajtja e re.</p>");
jQuery gjithashtu ofron fumksionet appendTo(), prepend(), prependTo(), before(), insertBefore(), after(), dhe insertAfter(), të cilat funksionojn afërsishtë si append().
Eventet në jQuery
Eventet mbahen duke përdorur kodin e mëposhtëm:
$("a").click(function() {
// pjese kodi sipas problemit
//kur klikohet nje link
});
Pjesa e kodit brenda funksionit function() do të ekzekutohet vetëm pasi të klikohet mbi link. Evente të tjera të ngjashme janë: blur, focus, hover, keydown, load, mousemove, resize, scroll, submit, select.
Animimi dhe efektet
Me jQuery mund të rrëshqisni(slide) elementët, ti animoni, të ndaloni animinim. Për të rreshqitur elementët lart ose poshtë shkruajmë kodin e mëposhtëm:
$("#myElement").slideDown("fast", function() {
// veprimi qe duam te ndodhi mbas rreshqitjes
poshte
}
$("#myElement").slideUp("slow", function() {
// veprimi qe duam te ndodhi mbas rreshqitjes lart
}
$("#myElement").slideToggle(1000, function() {
// veprimi qe duam te ndodhi mbas rreshqitjes
lart/poshte
}
Animimi i një elementi bëhet duke komanduar CSS që të ndryshojë vlerat. jQuery do të vendosi stilet e reja në mënyrë graduale në varësi të shpejtësisë që është përcaktuar.
$("#myElement").animate(
{
opacity: .3,
width: "500px",
height: "700px"
}, 2000, function() {
}
);
PËRGADITI DHE PËRSHTATI:
STUDENTET.MK
