Krijimi i një aplikacioni të bazuar në Ajax bëhet shumë i thjeshtë dhe i shpejtë me jQuery.
jQuery u krijua fillimisht nga John Resig në fillim të vitit 2006. Projekti jQuery aktualisht mirëmbahet dhe mirëmbahet nga një grup i shpërndarë zhvilluesish si një projekt me burim të hapur.
Mund të kurseni shumë kohë dhe përpjekje me jQuery. Pra, shtoni këtë faqe në të preferuarat tuaja dhe vazhdoni të lexoni
Ka shumë gjëra të tjera që mund të bëni me jQuery.
Lista nuk mbaron me kaq, ka shumë gjëra të tjera interesante që mund të bëni me jQuery.
Ka disa avantazhe pse dikush duhet të zgjedhë përdorimin e jQuery:
Për të filluar, le të shkarkojmë fillimisht një kopje të jQuery dhe më pas ta përfshijmë në projektin tonë. Dy versione të jQuery janë në dispozicion për shkarkim: me ngut e jo i ngjeshur .
Skedari i pakompresuar është më i përshtatshëm për zhvillim ose korrigjim; ndërsa skedari i minuar dhe i ngjeshur rekomandohet për prodhim sepse kursen gjerësinë e brezit dhe përmirëson performancën për shkak të madhësisë më të vogël të skedarit.
Mund ta shkarkojmë jQuery nga këtu: https://jquery.com/download/
Pasi të keni shkarkuar skedarin jQuery, mund të shihni se ai ka një shtrirje js, pra është një skedar JavaScript. Në fakt JQuery nuk është gjë tjetër veçse një bibliotekë JavaScript, kështu që mund të përfshini skedarin jQuery në dokumentin HTML me elementin ashtu si ju përfshini skedarë të rregullt JavaScript.
<head>
<title>Simple HTML Document</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-3.6.3.min.js"></script>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>Mos harroni të përfshini gjithmonë skedarin jQuery përpara skripteve të personalizuara; përndryshe, API-të e jQuery nuk do të jenë të disponueshme kur kodi juaj jQuery përpiqet t'i qaset.
Siç mund ta keni vënë re, ne e anashkaluam atributin në shembullin e mëparshëm type="text/javascript" brenda etiketës . Infatti questo non è richiesto in HTML5. JavaScript è il linguaggio di scripting predefipërfunduar në HTML5 dhe në të gjithë shfletuesit modernë.
Si një alternativë, ju mund të futni jQuery në dokumentin tuaj nëpërmjet lidhjeve CDN (Rrjeti i dorëzimit të përmbajtjes) të disponueshme falas, nëse preferoni të shmangni shkarkimin e skedarit.
CDN-të mund të ofrojnë një avantazh të performancës duke reduktuar kohën e ngarkimit, sepse ato presin jQuery në serverë të shumtë në mbarë botën, dhe kur një përdorues kërkon skedarin, ai do të shërbehet nga serveri më i afërt.
Kjo gjithashtu ka avantazhin që nëse vizitori i faqes suaj të internetit ka shkarkuar tashmë një kopje të jQuery nga i njëjti CDN ndërsa viziton sajte të tjera, nuk do të duhet ta shkarkojë atë përsëri pasi është tashmë në cache-in e shfletuesit të tyre.
Në këtë rast duhet të shkruani:
<script src =" https://code.jquery.com/jquery-3.6.3.min.js "> </script>Përveç CDN-së të ofruar nga projekti jquery, ju mund të përfshini jQuery nëpërmjet Google e microsoft CDN
Pasi të keni parë qëllimet e bibliotekës jQuery dhe si ta përfshini atë në dokumentin tuaj, tani është koha për të vënë në praktikë jQuery.
Tani le të bëjmë një operacion të thjeshtë jQuery duke ndryshuar ngjyrën e tekstit të kokës nga ngjyra paradefingjyre e ngjyrosur e zeze ne jeshile.
<head>
<title>My First jQuery Web Page</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-3.6.3.min.js"></script>
<script>
$(document).ready(function(){
$("h1").css("color", "#00ff00");
});
</script>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>Në kod kemi kryer një operacion të thjeshtë jQuery duke ndryshuar ngjyrën e kokës, pra elementin duke përdorur përzgjedhësin e elementit jQuery dhe metodën css() kur dokumenti është gati, i njohur si ngjarja e gatishmërisë për dokument.
Një deklaratë jQuery zakonisht fillon me një shenjë dollari ( $) dhe përfundon me pikëpresje ( ;).
Në jQuery, shenja e dollarit ( $) është thjesht një pseudonim për jQuery. Merrni parasysh kodin e mëposhtëm të mostrës që demonstron deklaratën më të thjeshtë jQuery.
<script>
$(document).ready(function(){
alert("Hello I'm a JQuery sign");
});
</script>Shembulli thjesht shfaq një mesazh paralajmërues "Hello I'm a JQuery sign” tek përdoruesi. Le të shohim disa veçori:
<script>: jQuery është thjesht një bibliotekë JavaScript, kodi jQuery mund të vendoset brenda elementit <script>, ose mund ta vendosni në një skedar JavaScript të jashtëm;$(document).ready(handler); njihet si një ngjarje e gatshme. Ku eshte handler është një funksion që i kalohet metodës që do të ekzekutohet, sapo dokumenti të jetë gati, pra kur hierarkia DOM të jetë ndërtuar plotësisht.Metoda jQuery ready() zakonisht përdoret me një funksion anonim. Pra, shembulli i mësipërm mund të shkruhet edhe në stenografi si kjo:
<script>
$(function(){
alert("Hello I'm a JQuery sign");
});
</script>Brenda një funksioni mund të shkruani deklarata jQuery për të kryer çdo veprim sipas sintaksës bazë, si:
$(selector).action();Ku eshte, $(selector) në thelb zgjedh elementet HTML nga pema DOM në mënyrë që të mund të manipulohet dhe action() zbatoni disa veprime në elementët e zgjedhur, si ndryshimi i vlerës së vetive CSS, ose vendosja e përmbajtjes së elementit, etj.
Tani le të shohim një shembull tjetër që përcakton tekstin e paragrafit:
<head>
<title>jQuery Demo</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-3.6.3.min.js"></script>
<script>
$(document).ready(function(){
$("p").text("Hello World!");
});
</script>
</head>
<body>
<p>Not loaded yet.</p>
</body>
</html>Shembulli jQuery i referohet përzgjedhësit p, dhe kjo zgjedh të gjithë paragrafët, pastaj metodën text() vendosni përmbajtjen e tekstit të paragrafit me "Hello World!".
Teksti i paragrafit në shembullin e mëparshëm zëvendësohet automatikisht kur dokumenti të jetë gati. Por le të shohim se si ta bëjmë atë në rast se dëshironi të kryeni një veprim përpara se të ekzekutoni kodin jQuery, për të zëvendësuar tekstin e paragrafit.
Le të shqyrtojmë një shembull të fundit:
<head>
<title>jQuery Demo</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-3.6.3.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").text("Hello World!");
});
});
</script>
</head>
<body>
<p>Not loaded yet.</p>
<button type="button">Replace Text</button>
</body>
</html>Në këtë shembull teksti i paragrafit zëvendësohet vetëm kur ndodh një ngjarje klikimi në butonin "Replace Text“, që thjesht do të thotë kur një përdorues klikon këtë buton.
Mund të përdorni përzgjedhësin e ID-së për të zgjedhur një artikull të vetëm me ID-në unike në faqe.
Për shembull, kodi i mëposhtëm jQuery do të zgjedhë dhe nxjerrë në pah një element me atributin ID id="markid", kur dokumenti të jetë gati.
<script>
$(document).ready(function(){
// Highlight element with id markid
$("#markid").css("background", "grey");
});
</script>Përzgjedhësi i klasës mund të përdoret për të zgjedhur elementë me një klasë specifike.
Për shembull, kodi i mëposhtëm jQuery do të zgjedhë dhe nxjerrë në pah elementët me atributin class class="markclass", kur dokumenti të jetë gati.
<script>
$(document).ready(function(){
// Highlight elements with class markclass
$(".markclass").css("background", "grey");
});
</script>Zgjedhësi i artikullit mund të përdoret për të zgjedhur artikujt sipas emrit të artikullit.
Për shembull, kodi i mëposhtëm jQuery do të zgjedhë dhe nxjerrë në pah të gjithë paragrafin, d.m.th. elementët "<p>" të dokumentit kur të jetë gati.
<script>
$(document).ready(function(){
// Highlight paragraph elements
$("p").css("background", "grey");
});
</script>Ju mund të përdorni përzgjedhësin e atributeve për të zgjedhur një element bazuar në një nga atributet e tij HTML, të tilla si një atribut lidhje targetose atributin e një hyrjeje type, etj.
Për shembull, kodi i mëposhtëm jQuery do të zgjedhë dhe nxjerrë në pah të gjitha hyrjet e tekstit, siç janë elementët "<input>" me type="text", kur dokumenti të jetë gati.
<script>
$(document).ready(function(){
// Highlight paragraph elements
$('input[type="text"]').css("background", "grey");
});
</script>Ju gjithashtu mund të kombinoni përzgjedhësit CSS për ta bërë zgjedhjen tuaj edhe më të saktë.
Për shembull, ju mund të kombinoni përzgjedhësin e klasës me një përzgjedhës elementi për të gjetur elementë në një dokument që kanë një lloj dhe klasë të caktuar.
<script>
$(document).ready(function(){
// Highlight only paragraph elements with class mark
$("p.mark").css("background", "yellow");
// Highlight only span elements inside the element with ID mark
$("#mark span").css("background", "yellow");
// Highlight li elements inside the ul elements
$("ul li").css("background", "red");
// Highlight li elements only inside the ul element with id mark
$("ul#mark li").css("background", "yellow");
// Highlight li elements inside all the ul element with class mark
$("ul.mark li").css("background", "green");
// Highlight all anchor elements with target blank
$('a[target="_blank"]').css("background", "yellow");
});
</script>Përveç përzgjedhësve definiti, jQuery ofron përzgjedhësin e vet të personalizuar për të përmirësuar më tej aftësitë e zgjedhjes së elementeve në një faqe.
<script>
$(document).ready(function(){
// Highlight table rows appearing at odd places
$("tr:odd").css("background", "yellow");
// Highlight table rows appearing at even places
$("tr:even").css("background", "orange");
// Highlight first paragraph element
$("p:first").css("background", "red");
// Highlight last paragraph element
$("p:last").css("background", "green");
// Highlight all input elements with type text inside a form
$("form :text").css("background", "purple");
// Highlight all input elements with type password inside a form
$("form :password").css("background", "blue");
// Highlight all input elements with type submit inside a form
$("form :submit").css("background", "violet");
});
</script>Ngjarjet shpesh shkaktohen nga ndërveprimi i përdoruesit me faqen e internetit, të tilla si kur klikoni një lidhje ose buton, futni tekst në një kuti hyrëse ose zonë teksti, bëni një përzgjedhje në një kuti përzgjedhjeje, shtypni një tast në tastierë, lëvizni treguesin e miut , etj. Në disa raste, vetë shfletuesi mund të shkaktojë ngjarje, të tilla si ngarkimi i faqes dhe shkarkimi i ngjarjeve.
jQuery përmirëson mekanizmat bazë të trajtimit të ngjarjeve duke ofruar metoda ngjarjesh për shumicën e ngjarjeve të shfletuesit vendas, disa nga këto metoda janë ready(), click(), keypress(), focus(), blur(), change(), etj.
<script>
$(document).ready(function(){
// Code to be executed
alert("Hello World!");
});
</script>Në përgjithësi, ngjarjet mund të klasifikohen në katër grupe kryesore:
Një ngjarje e miut aktivizohet kur përdoruesi klikon mbi një artikull, lëviz treguesin e miut, etj.
Këtu janë disa metoda jQuery të përdorura zakonisht për të trajtuar ngjarjet e miut.
click()Metoda click() bashkëngjitni një funksion mbajtës të ngjarjeve në elementët e zgjedhur për ngjarjen "click“. Funksioni i lidhur ekzekutohet kur përdoruesi klikon në atë artikull. Shembulli i mëposhtëm do të fshehë elementet <p> në një faqe kur klikohet.
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).slideUp();
});
});
</script>dblclick()Metoda dblclick() bashkëngjitni një funksion mbajtës të ngjarjeve në elementët e zgjedhur për ngjarjen "dblclick“. Funksioni i lidhur ekzekutohet kur përdoruesi klikon dy herë atë artikull. Shembulli i mëposhtëm do të fshehë elementet <p> kur klikoni dy herë mbi to.
<script>
$(document).ready(function(){
$("p").dblclick(function(){
$(this).slideUp();
});
});
</script>hover()Metoda hover() bashkëngjitni një ose dy funksione të mbajtësit të ngjarjeve me elementët e përzgjedhur që ekzekutohen kur treguesi i miut lëviz brenda dhe jashtë elementeve. Funksioni i parë funksionon kur përdoruesi vendos treguesin e miut mbi një artikull, ndërsa funksioni i dytë funksionon kur përdoruesi heq treguesin e miut nga ai artikull.
Shembulli i mëposhtëm do të nxjerrë në pah artikujt <p> kur vendosni kursorin mbi të, theksimi do të hiqet kur të hiqni kursorin.
<script>
$(document).ready(function(){
$("p").hover(function(){
$(this).addClass("highlight");
}, function(){
$(this).removeClass("highlight");
});
});
</script>mouseenter()Metoda mouseenter() bashkëngjitni një funksion mbajtës të ngjarjeve në elementët e përzgjedhur, i cili ekzekutohet kur miu fut një element. Shembulli i mëposhtëm do t'i shtojë elementit theksimin e klasës <p> kur vendosni kursorin mbi të.
<script>
$(document).ready(function(){
$("p").mouseenter(function(){
$(this).addClass("highlight");
});
});
</script>mouseleave()Metoda mouseleave() bashkëngjitni një funksion mbajtës të ngjarjeve në artikujt e zgjedhur që funksionon kur miu largohet nga një artikull. Shembulli i mëposhtëm do të heqë theksimin e klasës nga elementi <p> kur hiqni kursorin prej tij.
<script>
$(document).ready(function(){
$("p").mouseleave(function(){
$(this).removeClass("highlight");
});
});
</script>Një ngjarje e tastierës ngrihet kur përdoruesi shtyp ose lëshon një tast në tastierë. Le të shohim disa metoda jQuery të përdorura zakonisht për të trajtuar ngjarjet e tastierës.
keypress()Metoda keypress() bashkangjit një funksion të trajtimit të ngjarjeve me elementët e zgjedhur (zakonisht kontrollet e formave) që funksionon kur shfletuesi merr të dhëna të tastierës nga përdoruesi. Shembulli i mëposhtëm do të shfaqë një mesazh kur ngjarja aktivizohet keypress dhe sa herë aktivizohet kur shtypni tastin në tastierë.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keypress(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>Ngjarja e shtypjes së tastierës është e ngjashme me ngjarjen e mbylljes së tastierës, me përjashtim të butonave modifikues dhe joprintues si Shift, Esc, Backspace ose Delete, tastet me shigjeta, etj. ata ndezin ngjarjet e tastierës, por jo ngjarjet e shtypjes së tastierës.
keydown()Metoda keydown() bashkangjit një funksion të trajtimit të ngjarjeve për artikujt e zgjedhur (zakonisht kontrollet e formave) që ekzekutohet kur përdoruesi shtyp për herë të parë një tast në tastierë. Shembulli i mëposhtëm do të shfaqë një mesazh kur ngjarja aktivizohet keydown dhe sa herë aktivizohet kur shtypni tastin në tastierë.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keydown(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>keyup()Metoda keyup() bashkëngjitni një funksion të trajtimit të ngjarjeve me elementët e zgjedhur (zakonisht komandat e formave) që ekzekutohet kur përdoruesi lëshon një çelës në tastierë. Shembulli i mëposhtëm do të shfaqë një mesazh kur ngjarja aktivizohet keyup dhe sa herë aktivizohet kur shtypni dhe lëshoni një tast në tastierën tuaj.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keyup(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>Një ngjarje e formës aktivizohet kur një kontroll formulari merr ose humb fokusin, ose kur përdoruesi ndryshon një vlerë të kontrollit të formularit, si p.sh. shtypja e tekstit në një hyrje teksti, zgjedhja e një opsioni në një kuti përzgjedhjeje, etj. Këtu janë disa metoda jQuery të përdorura zakonisht për të trajtuar ngjarjet e formave.
change()Metoda change() bashkëngjitni një funksion mbajtës të ngjarjeve në elementë <input> dhe ekzekutohet kur ndryshon vlera e tij. Shembulli i mëposhtëm do të shfaqë një mesazh paralajmërues kur zgjidhni një opsion në kutinë e zgjedhjes me zbritje.
<script>
$(document).ready(function(){
$("select").change(function(){
var selectedOption = $(this).find(":selected").val();
alert("You have selected - " + selectedOption);
});
});
</script>Për kutitë e klikimeve, kutitë e kontrollit dhe butonat e radios, ngjarja ndizet menjëherë kur përdoruesi bën një përzgjedhje të miut, por për futjen e tekstit dhe zonën e tekstit ngjarja ndizet pasi elementi humb fokusin.
focus()Metoda focus() i bashkangjit një funksion mbajtësit të ngjarjeve elementëve të përzgjedhur (zakonisht kontrollon dhe lidh forma) që ekzekutohet kur fokusohet. Shembulli i mëposhtëm do të shfaqë një mesazh kur futja e tekstit merr fokusin.
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>blur()Metoda blur() bashkëngjitni një funksion mbajtës të ngjarjeve për të formuar elementë si p.sh <input>, <textarea>, <select> e cila ekzekutohet kur humbet fokusin. Shembulli i mëposhtëm do të shfaqë një mesazh kur futja e tekstit humbet fokusin.
<script>
$(document).ready(function(){
$("input").blur(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>submit()Metoda submit() bashkëngjitni një funksion mbajtës të ngjarjeve në elementë <form> i cili funksionon kur përdoruesi përpiqet të dorëzojë një formular. Shembulli i mëposhtëm do të shfaqë një mesazh bazuar në vlerën e futur kur përpiqeni të dorëzoni formularin.
<script>
$(document).ready(function(){
$("form").submit(function(event){
var regex = /^[a-zA-Z]+$/;
var currentValue = $("#firstName").val();
if(regex.test(currentValue) == false){
$("#result").html('<p class="error">Not valid!</p>').show().fadeOut(1000);
// Preventing form submission
event.preventDefault();
}
});
});
</script>Ngjarjet aktivizohen gjithashtu në një situatë kur faqja DOM (Modeli i Objektit të Dokumentit) është gati ose kur përdoruesi ndryshon madhësinë ose lëviz dritaren e shfletuesit, etj. Këtu janë disa metoda jQuery të përdorura zakonisht për të trajtuar këtë lloj ngjarjeje.
ready()Metoda ready() specifikon një funksion për t'u ekzekutuar kur DOM është plotësisht i ngarkuar.
Shembulli i mëposhtëm do të zëvendësojë tekstin e paragrafit sapo hierarkia DOM të ndërtohet plotësisht dhe të jetë gati për t'u manipuluar.
<script>
$(document).ready(function(){
$("p").text("The DOM is now loaded and can be manipulated.");
});
</script>resize()Metoda resize() bashkëngjitni një funksion mbajtës të ngjarjeve në elementin e dritares që funksionon kur ndryshon madhësia e dritares së shfletuesit.
Shembulli i mëposhtëm do të tregojë gjerësinë dhe lartësinë aktuale të dritares së shfletuesit kur përpiqeni ta ndryshoni madhësinë e saj duke zvarritur qoshet e saj.
<script>
$(document).ready(function(){
$(window).resize(function() {
$(window).bind("resize", function(){
$("p").text("Window width: " + $(window).width() + ", " + "Window height: " + $(window).height());
});
});
});
</script>scroll()Metoda scroll() bashkëngjitni një funksion mbajtës të ngjarjeve në dritare ose në iframe dhe artikuj të lëvizshëm që funksionojnë sa herë që ndryshon pozicioni i lëvizjes së artikullit.
Shembulli i mëposhtëm do të shfaqë një mesazh kur lëvizni dritaren e shfletuesit.
<script>
$(document).ready(function(){
$(window).scroll(function() {
$("p").show().fadeOut("slow");
});
});
</script>Ercole Palmeri
.
Sektori detar është një fuqi e vërtetë ekonomike globale, e cila ka lundruar drejt një tregu prej 150 miliardë...
Të hënën e kaluar, Financial Times njoftoi një marrëveshje me OpenAI. FT licencon gazetarinë e saj të klasit botëror…
Miliona njerëz paguajnë për shërbimet e transmetimit, duke paguar tarifat mujore të abonimit. Është e zakonshme që ju…
Coveware nga Veeam do të vazhdojë të ofrojë shërbime të reagimit ndaj incidenteve të zhvatjes kibernetike. Coveware do të ofrojë aftësi mjeko-ligjore dhe riparimi…