Ajaxi-põhise rakenduse loomine muutub jQuery abil väga lihtsaks ja kiireks.
jQuery lõi algselt John Resig 2006. aasta alguses. jQuery projekti haldab ja haldab praegu avatud lähtekoodiga projektina hajutatud arendajate rühm.
jQuery abil saate säästa palju aega ja vaeva. Nii et lisage see sait oma lemmikute hulka ja jätkake lugemist
jQueryga saate teha palju muid asju.
Loetelu ei lõpe sellega, jQueryga saate teha palju muid lahedaid asju.
JQuery kasuks on mitmeid eeliseid:
Alustuseks laadime esmalt alla jQuery koopia ja seejärel lisame selle oma projekti. Allalaadimiseks on saadaval kaks jQuery versiooni: kiiruga e pole kokku surutud .
Pakkimata fail sobib paremini arendamiseks või silumiseks; samas on minimeeritud ja tihendatud faili soovitatav tootmiseks, kuna see säästab ribalaiust ja parandab jõudlust tänu väiksemale failisuurusele.
Saame jQuery alla laadida siit: https://jquery.com/download/
Kui olete jQuery faili alla laadinud, näete, et sellel on js-laiend, st see on JavaScripti fail. Tegelikult pole JQuery midagi muud kui JavaScripti teek, nii et saate lisada jQuery faili HTML-dokumenti koos elemendiga nagu ka tavalisi JavaScripti faile.
<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>Ärge unustage alati lisada jQuery faili enne kohandatud skripte; vastasel juhul pole jQuery API-d saadaval, kui teie jQuery kood proovib neile juurde pääseda.
Nagu olete ehk märganud, jätsime eelmises näites atribuudi vahele type="text/javascript" sildi sees . Infatti questo non è richiesto in HTML5. JavaScript è il linguaggio di scripting predefiviimistletud HTML5-s ja kõigis kaasaegsetes brauserites.
Alternatiivina saate jQuery oma dokumenti manustada vabalt saadaolevate CDN-i (Content Delivery Network) linkide kaudu, kui eelistate faili allalaadimist vältida.
CDN-id võivad pakkuda jõudluseeelist, vähendades laadimisaega, kuna nad hostivad jQueryt mitmes serveris üle maailma ja kui kasutaja seda faili taotleb, edastatakse see lähimast serverist.
Selle eeliseks on ka see, et kui teie veebilehe külastaja on teisi saite külastades juba jQuery koopia samast CDN-ist alla laadinud, ei pea ta seda uuesti alla laadima, kuna see on juba nende brauseri vahemälus.
Sel juhul peate kirjutama:
<script src =" https://code.jquery.com/jquery-3.6.3.min.js "> </script>Lisaks jquery projekti pakutavale CDN-ile saate lisada jQuery kaudu Google e Microsoft cdn.
Olles näinud jQuery teegi eesmärke ja selle lisamist oma dokumenti, on nüüd aeg jQuery ellu viia.
Nüüd teeme lihtsa jQuery toimingu, muutes päise teksti värvi eelvärvistdefivärvitud mustast roheliseks.
<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>Koodis teostasime lihtsa jQuery toimingu, muutes päise ehk elemendi värvi kasutades jQuery elemendi valijat ja meetodit css(), kui dokument on valmis, mida nimetatakse dokumendi valmisoleku sündmuseks.
jQuery avaldus algab tavaliselt dollari märgiga ( $) ja lõpeb semikooloniga ( ;).
jQuerys on dollarimärk ( $) on lihtsalt jQuery varjunimi. Mõelge järgmisele näidiskoodile, mis demonstreerib kõige lihtsamat jQuery lauset.
<script>
$(document).ready(function(){
alert("Hello I'm a JQuery sign");
});
</script>Näites kuvatakse lihtsalt hoiatusteade "Hello I'm a JQuery sign” kasutajale. Vaatame mõnda funktsiooni:
<script>: jQuery on lihtsalt JavaScripti teek, jQuery koodi saab paigutada elemendi sisse <script>või saate selle panna välisesse JavaScripti faili;$(document).ready(handler); on tuntud kui valmis sündmus. Kus see on handler see on funktsioon, mis edastatakse käivitatavale meetodile kohe, kui dokument on valmis, st kui DOM-i hierarhia on täielikult üles ehitatud.jQuery meetod ready() seda kasutatakse tavaliselt koos anonüümse funktsiooniga. Seega saab ülaltoodud näite kirjutada ka stenogrammides järgmiselt:
<script>
$(function(){
alert("Hello I'm a JQuery sign");
});
</script>Funktsiooni sees saate kirjutada jQuery avaldusi, et teha mis tahes toiminguid, järgides põhisüntaksit, näiteks:
$(selector).action();Kus see on, $(selector) see valib põhimõtteliselt HTML-i elemendid DOM-puust, et seda saaks manipuleerida ja action() rakendab valitud elementidele mõningaid toiminguid, nagu CSS-i atribuudi väärtuse muutmine või elemendi sisu määramine jne.
Vaatame nüüd teist näidet, mis määrab lõigu teksti:
<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>jQuery näide viitab valijale p, ja see valib kõik lõigud ja seejärel meetodi text() määrake lõigu tekstisisu käsuga "Hello World!".
Eelmise näite lõigu tekst asendatakse automaatselt, kui dokument on valmis. Kuid vaatame, kuidas seda teha juhuks, kui soovite enne jQuery koodi käivitamist sooritada toimingu, mis asendab lõigu teksti.
Vaatleme viimast näidet:
<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>Selles näites asendatakse lõigu tekst ainult siis, kui klõpsab nupul "Replace Text“, mis tähendab lihtsalt seda, kui kasutaja sellel nupul klõpsab.
Saate kasutada ID-valijat, et valida lehel üks kordumatu ID-ga üksus.
Näiteks järgmine jQuery kood valib ja tõstab esile ID atribuudiga elemendi id="markid", kui dokument on valmis.
<script>
$(document).ready(function(){
// Highlight element with id markid
$("#markid").css("background", "grey");
});
</script>Klassivalijaga saab valida konkreetse klassiga elemente.
Näiteks järgmine jQuery kood valib ja tõstab esile klassi atribuudiga elemente class="markclass", kui dokument on valmis.
<script>
$(document).ready(function(){
// Highlight elements with class markclass
$(".markclass").css("background", "grey");
});
</script>Kauba valijat saab kasutada üksuste valimiseks üksuse nime järgi.
Näiteks järgmine jQuery kood valib ja tõstab esile kõik lõigud, st elemendid "<p>" dokumendist, kui see on valmis.
<script>
$(document).ready(function(){
// Highlight paragraph elements
$("p").css("background", "grey");
});
</script>Saate kasutada atribuudivalijat elemendi valimiseks ühe selle HTML-atribuudi (nt lingiatribuudi) alusel targetvõi sisendi atribuut type, jne.
Näiteks järgmine jQuery kood valib ja tõstab esile kõik tekstisisendid, näiteks elemendid "<input>" koos type="text", kui dokument on valmis.
<script>
$(document).ready(function(){
// Highlight paragraph elements
$('input[type="text"]').css("background", "grey");
});
</script>Saate oma valiku veelgi täpsemaks muutmiseks kombineerida ka CSS-i valijaid.
Näiteks saate kombineerida klassivalijat elementide valijaga, et leida dokumendist teatud tüüpi ja klassiga elemente.
<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>Lisaks valijatele definiti pakub jQuery oma kohandatud valijat, et veelgi täiustada lehe elementide valimise võimalusi.
<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>Sündmused käivitatakse sageli kasutaja interaktsioonist veebilehega, näiteks lingil või nupul klõpsamisel, teksti sisestamisel sisestuskasti või tekstialale, valiku tegemisel valikukastis, klaviatuuri klahvi vajutamisel, hiirekursori liigutamisel. , jne. Mõnel juhul võib brauser ise käivitada sündmusi, näiteks lehe laadimise ja allalaadimise sündmusi.
jQuery täiustab põhilisi sündmuste käsitlemise mehhanisme, pakkudes sündmuste meetodeid enamiku brauseri kohalike sündmuste jaoks, mõned neist meetoditest on ready(), click(), keypress(), focus(), blur(), change(), jne.
<script>
$(document).ready(function(){
// Code to be executed
alert("Hello World!");
});
</script>Üldiselt võib sündmused jagada nelja põhirühma:
Hiiresündmus käivitatakse, kui kasutaja klõpsab üksusel, liigutab hiirekursorit jne.
Siin on mõned sagedamini kasutatavad jQuery meetodid hiire sündmuste käsitlemiseks.
click()Meetod click() lisa sündmuse käitleja funktsioon sündmuse valitud elementidele "click“. Lingitud funktsioon käivitub, kui kasutaja sellel üksusel klõpsab. Järgmine näide peidab elemendid <p> klõpsamisel lehel.
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).slideUp();
});
});
</script>dblclick()Meetod dblclick() lisa sündmuse käitleja funktsioon sündmuse valitud elementidele "dblclick“. Lingitud funktsioon käivitub, kui kasutaja topeltklõpsab sellel üksusel. Järgmine näide peidab elemendid <p> kui neid topeltklõpsate.
<script>
$(document).ready(function(){
$("p").dblclick(function(){
$(this).slideUp();
});
});
</script>hover()Meetod hover() lisada valitud elementidele üks või kaks sündmuste käitleja funktsiooni, mis käivituvad, kui hiirekursor liigub elementidest sisse ja välja. Esimene funktsioon käivitub, kui kasutaja viib hiirekursori üksuse kohale, teine funktsioon aga siis, kui kasutaja eemaldab hiirekursori sellelt üksuselt.
Järgmine näide tõstab üksused esile <p> kui asetate kursori sellele, eemaldatakse kursori eemaldamisel esiletõst.
<script>
$(document).ready(function(){
$("p").hover(function(){
$(this).addClass("highlight");
}, function(){
$(this).removeClass("highlight");
});
});
</script>mouseenter()Meetod mouseenter() lisab valitud elementidele sündmuste käitleja funktsiooni, mis käivitatakse siis, kui hiir elementi siseneb. Järgmine näide lisab elemendile klassi esiletõstmise <p> kui asetate kursori selle kohale.
<script>
$(document).ready(function(){
$("p").mouseenter(function(){
$(this).addClass("highlight");
});
});
</script>mouseleave()Meetod mouseleave() lisab valitud üksustele sündmuste käitleja funktsiooni, mis käivitub, kui hiir üksuselt lahkub. Järgmine näide eemaldab elemendist klassi esiletõstmise <p> kui eemaldate kursori sellelt.
<script>
$(document).ready(function(){
$("p").mouseleave(function(){
$(this).removeClass("highlight");
});
});
</script>Klaviatuurisündmus käivitatakse, kui kasutaja vajutab või vabastab klaviatuuri klahvi. Vaatame mõnda sagedamini kasutatavat jQuery meetodit klaviatuuri sündmuste käsitlemiseks.
keypress()Meetod keypress() lisab valitud elementidele (tavaliselt vormi juhtelementidele) sündmuste haldamise funktsiooni, mis käivitatakse siis, kui brauser saab kasutajalt klaviatuurisisendi. Järgmises näites kuvatakse sündmuse käivitamisel teade keypress ja mitu korda see käivitub, kui vajutate klaviatuuri klahvi.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keypress(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>Klahvivajutuse sündmus sarnaneb klahvivajutuse sündmusega, välja arvatud muute- ja mitteprinditavad klahvid, nagu Shift, Esc, Backspace või Delete, nooleklahvid jne. nad käivitavad klahvivajutuse sündmusi, kuid mitte klahvivajutuse sündmusi.
keydown()Meetod keydown() lisab valitud üksustele (tavaliselt vormi juhtelementidele) sündmuste käsitlemise funktsiooni, mis käivitatakse siis, kui kasutaja vajutab esimest korda klaviatuuri klahvi. Järgmises näites kuvatakse sündmuse käivitamisel teade keydown ja mitu korda see käivitub, kui vajutate klaviatuuri klahvi.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keydown(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>keyup()Meetod keyup() lisada valitud elementidele (tavaliselt vormi juhtelementidele) sündmuste käsitlemise funktsioon, mis käivitatakse, kui kasutaja vabastab klaviatuuril klahvi. Järgmises näites kuvatakse sündmuse käivitamisel teade keyup ja mitu korda see käivitub, kui vajutate ja vabastate klaviatuuri klahvi.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keyup(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>Vormi sündmus käivitatakse siis, kui vormi juhtelement saab või kaotab fookuse või kui kasutaja muudab vormi juhtelemendi väärtust, näiteks sisestab teksti tekstisisestusse, valib valikukastis suvandi jne. Siin on mõned vormisündmuste käsitlemiseks sageli kasutatavad jQuery meetodid.
change()Meetod change() lisage elementidele sündmuste käitleja funktsioon <input> ja käivitatakse, kui selle väärtus muutub. Järgmises näites kuvatakse rippmenüü valikukastis suvandi valimisel hoiatusteade.
<script>
$(document).ready(function(){
$("select").change(function(){
var selectedOption = $(this).find(":selected").val();
alert("You have selected - " + selectedOption);
});
});
</script>Klõpsuruutude, märkeruutude ja raadionuppude puhul käivitub sündmus kohe, kui kasutaja teeb hiire valiku, kuid tekstisisestuse ja tekstiala puhul käivitub sündmus pärast elemendi fookuse kaotamist.
focus()Meetod focus() lisab valitud elementidele sündmuste käitleja funktsiooni (tavaliselt juhib ja vormide sidumist), mis käivitatakse fookuse saamisel. Järgmises näites kuvatakse teade, kui tekstisisestus saab fookuse.
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>blur()Meetod blur() lisage sündmuste käitleja funktsioon, et moodustada selliseid elemente nagu <input>, <textarea>, <select> mis täidetakse fookuse kaotamisel. Järgmises näites kuvatakse teade, kui tekstisisestus kaotab fookuse.
<script>
$(document).ready(function(){
$("input").blur(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>submit()Meetod submit() lisage elementidele sündmuste käitleja funktsioon <form> mis käivitatakse siis, kui kasutaja proovib vormi esitada. Järgmises näites kuvatakse teade, mis põhineb vormi esitamisel sisestatud väärtusel.
<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>Sündmused käivitatakse ka olukorras, kus DOM (Document Object Model) leht on valmis või kui kasutaja muudab brauseriakna suurust või kerib seda vms. Siin on mõned sagedamini kasutatavad jQuery meetodid seda tüüpi sündmuste käsitlemiseks.
ready()Meetod ready() määrab funktsiooni, mida käivitada, kui DOM on täielikult laaditud.
Järgmine näide asendab lõigu teksti niipea, kui DOM-i hierarhia on täielikult üles ehitatud ja manipuleerimiseks valmis.
<script>
$(document).ready(function(){
$("p").text("The DOM is now loaded and can be manipulated.");
});
</script>resize()Meetod resize() lisab aknaelemendile sündmuste käitleja funktsiooni, mis töötab brauseriakna suuruse muutumisel.
Järgmine näide näitab brauseriakna praegust laiust ja kõrgust, kui proovite selle suurust nurki lohistades muuta.
<script>
$(document).ready(function(){
$(window).resize(function() {
$(window).bind("resize", function(){
$("p").text("Window width: " + $(window).width() + ", " + "Window height: " + $(window).height());
});
});
});
</script>scroll()Meetod scroll() kinnitage sündmuste käitleja funktsioon aknale või iframe ja keritavad üksused, mis käivituvad alati, kui üksuse kerimisasend muutub.
Järgmises näites kuvatakse brauseriakna kerimisel teade.
<script>
$(document).ready(function(){
$(window).scroll(function() {
$("p").show().fadeOut("slow");
});
});
</script>Ercole Palmeri
.
Veeami Coveware jätkab küberväljapressimise juhtumitele reageerimise teenuste pakkumist. Coveware pakub kohtuekspertiisi ja heastamisvõimalusi…
Ennustav hooldus muudab nafta- ja gaasisektori pöördeliseks uuendusliku ja ennetava lähenemisega tehaste juhtimisele.…
Ühendkuningriigi CMA on väljastanud hoiatuse Big Techi käitumise kohta tehisintellekti turul. Seal…
Euroopa Liidu poolt hoonete energiatõhususe suurendamiseks koostatud roheliste majade dekreet on lõpetanud oma seadusandliku protsessi…