Ukwenza isicelo esisekwe kwi-Ajax kuba lula kakhulu kwaye kuyakhawuleza ngejQuery.
I-jQuery yenziwa kuqala nguJohn Resig ekuqaleni kuka-2006.
Ungagcina ixesha elininzi kunye nomzamo ngejQuery. Ke yongeza le sayithi kwizinto ozithandayo kwaye uqhubeke ufunda
Zininzi izinto onokuzenza ngejQuery.
Uluhlu alupheli apho, zininzi ezinye izinto ezipholileyo onokuzenza ngejQuery.
Kukho iingenelo ezininzi zokuba kutheni kufuneka ukhethe ukusebenzisa i-jQuery:
Ukuqalisa, masiqale sikhuphele ikopi yejQuery kwaye siyifake kwiprojekthi yethu. Iinguqulelo ezimbini zejQuery ziyafumaneka ukuze zikhutshelwe: ekungxameni e ayicinezelwa .
Ifayile engaxinzelelwanga ilunge ngakumbi kuphuhliso okanye ukulungisa ingxaki; ngelixa, ifayile ye-minified kunye ne-compressed inconywa kwimveliso kuba igcina i-bandwidth kwaye iphucula ukusebenza ngenxa yobukhulu befayile encinci.
Sinokukhuphela i-jQuery apha: https://jquery.com/download/
Nje ukuba ukhuphele ifayile ye-jQuery unokubona ukuba inolwandiso lwe-js, okt yifayile yeJavaScript. Enyanisweni i-JQuery asiyonto ngaphandle kwelayibrari yeJavaScript, ngoko ungaquka ifayile ye-jQuery kuxwebhu lweHTML kunye nento. njengokuba ubandakanya iifayile zeJavaScript eziqhelekileyo.
<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>Khumbula ukusoloko ubandakanya ifayile yejQuery phambi kwemibhalo yesiko; kungenjalo, i jQuery APIs aziyi kufumaneka xa ikhowudi yakho yejQuery izama ukufikelela kuzo.
Njengoko usenokuba uqaphele, sitsibe uphawu kumzekelo wangaphambili type="text/javascript" ngaphakathi kwithegi . Infatti questo non è richiesto in HTML5. JavaScript è il linguaggio di scripting predefiifakwe kwi-HTML5 kunye nazo zonke iibhrawuza zangoku.
Njengenye indlela, ungalungisa ijQuery kuxwebhu lwakho ngokusebenzisa iCDN efumanekayo ngokukhululekileyo (Uthungelwano loThutho loThutho) amakhonkco, ukuba ukhetha ukunqanda ukukhuphela ifayile.
I-CDNs inokubonelela ngenzuzo yokusebenza ngokunciphisa ixesha lomthwalo, kuba ibamba i-jQuery kwiiseva ezininzi emhlabeni jikelele, kwaye xa umsebenzisi ecela ifayile, iya kunikwa kwi-server esondeleyo.
Oku kwakhona kunenzuzo yokuba ukuba umtyeleli wephepha lakho lewebhu sele ekhuphele ikopi ye-jQuery kwi-CDN efanayo ngelixa undwendwela ezinye iisayithi, abayi kuphinda bayikhuphele kuba sele ikwi-cache yesikhangeli sabo.
Kule meko kuya kufuneka ubhale:
<script src =" https://code.jquery.com/jquery-3.6.3.min.js "> </script>Ukongeza kwi-CDN enikezwe yiprojekthi yejquery, ungabandakanya i-jQuery nge Uphando e Microsoft cdn.
Uzibonile iinjongo zethala leencwadi lejQuery kunye nendlela yokuyibandakanya kuxwebhu lwakho, ngoku lixesha lokusebenzisa i-jQuery.
Ngoku masenze umsebenzi olula we-jQuery ngokutshintsha umbala wokubhaliweyo okusentloko ukusuka kumbala wangaphambilidefiumbala omnyama ukuya kumbala oluhlaza.
<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>Kwikhowudi senze umsebenzi olula we-jQuery ngokutshintsha umbala we-header i.e. element usebenzisa umkhethi wesiqalelo se-jQuery kunye ne-css () indlela xa uxwebhu selulungile, eyaziwa ngokuba sisiganeko esilungile soxwebhu.
Ingxelo ye-jQuery ihlala iqala ngophawu lwedola ( $) kwaye iphele ngesemicolon ( ;).
Kwi-jQuery, uphawu lwedola ( $) sisibizo nje sejQuery. Qwalasela le khowudi ilandelayo yesampulu ebonisa eyona ngxelo ilula yejQuery.
<script>
$(document).ready(function(){
alert("Hello I'm a JQuery sign");
});
</script>Umzekelo ubonisa nje umyalezo wesilumkiso "Hello I'm a JQuery sign” kumsebenzisi. Makhe sibone ezinye iimpawu:
<script>: I-jQuery yilayibrari yeJavaScript nje, ikhowudi ye-jQuery inokubekwa ngaphakathi kwendawo <script>, okanye ungayibeka kwifayile yeJavaScript yangaphandle;$(document).ready(handler); yaziwa njengesiganeko esisele silungile. Iphi handler ngumsebenzi ogqithiselwe kwindlela eya kuphunyezwa, ngokukhawuleza ukuba uxwebhu lulungile, oko kukuthi xa ulawulo lweDOM lwakhiwe ngokupheleleyo.Indlela yejQuery ready() iqhele ukusetyenziswa kunye nomsebenzi ongachazwanga. Ke, lo mzekelo ungasentla ungabhalwa ngobhalo olufutshane ngolu hlobo:
<script>
$(function(){
alert("Hello I'm a JQuery sign");
});
</script>Ngaphakathi komsebenzi ungabhala iingxelo zejQuery ukwenza nasiphi na isenzo esilandela isivakalisi esisisiseko, njenge:
$(selector).action();Iphi, $(selector) ikhetha ngokwesiseko izinto ze HTML kumthi weDOM ngoko ingasetyenziswa kwaye action() sebenzisa ezinye izenzo kwizinto ezikhethiweyo, ezinjengokutshintsha ixabiso lepropati yeCSS, okanye ukucwangcisa umxholo wento, njl.
Ngoku makhe sijonge omnye umzekelo oseka isicatshulwa somhlathi:
<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>Umzekelo wejQuery ubhekisa kumkhethi p, kwaye oku kukhetha yonke imihlathi, emva koko indlela text() cwangcisa umxholo wokubhaliweyo womhlathi nge “Hello World!".
Okubhaliweyo komhlathi kumzekelo wangaphambili kutshintshwa ngokuzenzekelayo xa uxwebhu lulungile. Kodwa makhe sibone ukuba siyenza njani xa ufuna ukwenza intshukumo phambi kokuba usebenzise ikhowudi ye-jQuery, ukubuyisela okubhaliweyo komhlathi.
Makhe siqwalasele umzekelo omnye wokugqibela:
<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>Kulo mzekelo okubhaliweyo komhlathi kutshintshwa kuphela xa isiganeko sonqakrazo senzeka kwiqhosha "Replace Text", okuthetha ngokulula xa umsebenzisi ecofa eli qhosha.
Ungasebenzisa umkhethi we-ID ukukhetha into enye ene-ID eyodwa kwiphepha.
Umzekelo, le khowudi ilandelayo yejQuery iya kukhetha kwaye iqaqambise into enophawu lwe-ID id="markid", xa uxwebhu lulungile.
<script>
$(document).ready(function(){
// Highlight element with id markid
$("#markid").css("background", "grey");
});
</script>Umkhethi weklasi unokusetyenziselwa ukukhetha izinto ezinodidi oluthile.
Umzekelo, ikhowudi yejQuery elandelayo iya kukhetha kwaye iqaqambise izinto ezinophawu lweklasi class="markclass", xa uxwebhu lulungile.
<script>
$(document).ready(function(){
// Highlight elements with class markclass
$(".markclass").css("background", "grey");
});
</script>Umkhethi wento unokusetyenziselwa ukukhetha izinto ngegama lomba.
Umzekelo, ikhowudi yejQuery elandelayo iya kukhetha kwaye iqaqambise yonke isiqendu, oko kukuthi izinto "<p>" yoxwebhu xa lulungile.
<script>
$(document).ready(function(){
// Highlight paragraph elements
$("p").css("background", "grey");
});
</script>Ungasebenzisa umkhethi wophawu ukukhetha into esekwe kwenye yeempawu zayo zeHTML, njengophawu lwekhonkco loyelelwano. targetokanye uphawu lwegalelo type, njl.
Umzekelo, ikhowudi yejQuery ilandelayo iya kukhetha kwaye iqaqambise onke amagalelo okubhaliweyo, njengezinto "<input>" nge type="text", xa uxwebhu lulungile.
<script>
$(document).ready(function(){
// Highlight paragraph elements
$('input[type="text"]').css("background", "grey");
});
</script>Unokudibanisa abakhethi beCSS ukwenza ukhetho lwakho luchaneke ngakumbi.
Umzekelo, unokudibanisa umkhethi weklasi kunye nomkhethi wento ukufumana izinto kuxwebhu ezinohlobo oluthile kunye nodidi.
<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>Ukongeza kubakhethi definited, i-jQuery ibonelela ngesakhe isikhethi sokwenza ngcono isakhono sokukhetha imiba kwiphepha.
<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>Iziganeko zihlala ziqhutywa lunxibelelwano lomsebenzisi nephepha lewebhu, njengaxa ucofa ikhonkco okanye iqhosha, ungenisa okubhaliweyo kwibhokisi yongeniso okanye indawo yokubhaliweyo, yenza ukhetho kwibhokisi yokukhetha, cofa isitshixo kwibhodi yezitshixo, hambisa isalathisi se mouse. , njl. Kwezinye iimeko, isikhangeli ngokwaso sinokuqalisa iziganeko, ezifana nokulayisha iphepha kunye neziganeko zokukhuphela.
I-jQuery iphucula kwindlela yokuphatha isiganeko ngokunika iindlela zesiganeko kwiziganeko ezininzi zomkhangeli zincwadi, ezinye zezi ndlela ready(), click(), keypress(), focus(), blur(), change(), njl.
<script>
$(document).ready(function(){
// Code to be executed
alert("Hello World!");
});
</script>Ngokubanzi, iziganeko zinokwahlulwa zibe ngamaqela amane aphambili:
Isiganeko semouse siqaliswa xa umsebenzisi ecofa into, ehambisa isalathisi semouse, njl.
Nazi ezinye iindlela eziqhele ukusetyenziswa jQuery ukusingatha iziganeko mouse.
click()Indlela click() Qhoboshela umsebenzi womphathi wesiganeko kwizinto ezikhethiweyo zomsitho "click“. Umsebenzi odityanisiweyo uphumeza xa umsebenzisi ecofa loo mba. Lo mzekelo ulandelayo uya kufihla izinto <p> kwiphepha xa ucofa.
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).slideUp();
});
});
</script>dblclick()Indlela dblclick() Qhoboshela umsebenzi womphathi wesiganeko kwizinto ezikhethiweyo zomsitho "dblclick“. Umsebenzi odityanisiweyo uphumeza xa umsebenzisi ecofa kabini loo nto. Lo mzekelo ulandelayo uya kufihla izinto <p> xa uzicofa kabini.
<script>
$(document).ready(function(){
$("p").dblclick(function(){
$(this).slideUp();
});
});
</script>hover()Indlela hover() ncamathela umsebenzi omnye okanye emibini yomphathi wesiganeko kwizinto ezikhethiweyo eziphumezayo xa isalathisi semouse singena kwaye siphuma kwizinto. Umsebenzi wokuqala uqhuba xa umsebenzisi ebeka isalathisi semouse phezu komba, ngelixa umsebenzi wesibini usebenza xa umsebenzisi esusa isalathisi semouse kulo mba.
Lo mzekelo ulandelayo uya kubalaselisa izinto <p> xa ubeka ikhesa kuyo, eyona nto ibalulekileyo iyakususwa xa ususa ikhesa.
<script>
$(document).ready(function(){
$("p").hover(function(){
$(this).addClass("highlight");
}, function(){
$(this).removeClass("highlight");
});
});
</script>mouseenter()Indlela mouseenter() ncamathela umsebenzi womphathi wesiganeko kwizinto ezikhethiweyo ezenziwayo xa imouse ingena into. Lo mzekelo ulandelayo uyakongeza ukuqaqambisa iklasi kwinto <p> xa ubeka ikhesa phezu kwayo.
<script>
$(document).ready(function(){
$("p").mouseenter(function(){
$(this).addClass("highlight");
});
});
</script>mouseleave()Indlela mouseleave() ncamathela umsebenzi wesiphathi sesiganeko kwizinto ezikhethiweyo ezisebenza xa imouse ishiya umba. Lo mzekelo ulandelayo uyakususa iklasi eqaqambeyo kwi element <p> xa ususa ikhesa kuyo.
<script>
$(document).ready(function(){
$("p").mouseleave(function(){
$(this).removeClass("highlight");
});
});
</script>Isiganeko sekhibhodi siphakanyiswa xa umsebenzisi ecinezela okanye ekhupha isitshixo kwikhibhodi. Makhe sijonge iindlela eziqhele ukusetyenziswa jQuery ukusingatha imisitho yebhodi yezitshixo.
keypress()Indlela keypress() incamathela umsebenzi wokuphatha isiganeko kwizinto ezikhethiweyo (ngokuqhelekileyo iifom zolawulo) ezisebenza xa isikhangeli sifumana igalelo lebhodi yezitshixo kumsebenzisi. Lo mzekelo ulandelayo uya kubonisa umyalezo xa isiganeko siqaliswa keypress kwaye mangaphi amaxesha isenziwa xa ucofa isitshixo kwikhibhodi yakho.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keypress(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>Isiganeko sokucinezela isitshixo siyafana nesiganeko sokuthoba isitshixo, ngaphandle kokuba isilungisi kunye nezitshixo ezingashicileliyo ezifana neShift, Esc, Backspace okanye Cima, izitshixo zotolo, njl. bacima imisitho yesitshixo kodwa abacinezeli iziganeko.
keydown()Indlela keydown() incamathela umsebenzi wokuphatha isiganeko kwizinto ezikhethiweyo (ngokwesiqhelo ifom yolawulo) eyenziwa xa umsebenzisi ecofa kuqala iqhosha kwibhodi yezitshixo. Lo mzekelo ulandelayo uya kubonisa umyalezo xa isiganeko siqaliswa keydown kwaye mangaphi amaxesha isenziwa xa ucofa isitshixo kwikhibhodi yakho.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keydown(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>keyup()Indlela keyup() ncamathela umsebenzi wokuphatha isiganeko kwizinto ezikhethiweyo (ulawulo lwefom eqhelekileyo) eyenziwa xa umsebenzisi ekhulula isitshixo kwibhodi yezitshixo. Lo mzekelo ulandelayo uya kubonisa umyalezo xa isiganeko siqaliswa keyup kwaye mangaphi amaxesha isenziwa xa ucofa kwaye ukhulula isitshixo kwikhibhodi yakho.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keyup(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>Isiganeko sefom siqaliswa xa ulawulo lwefom lufumana okanye lulahlekelwa ingqwalasela, okanye xa umsebenzisi etshintsha ixabiso lolawulo lwefom, njengokuchwetheza okubhaliweyo kwigalelo lombhalo, ukukhetha ukhetho kwibhokisi ekhethiweyo, njl. Nazi ezinye iindlela ezisetyenziswa ngokuqhelekileyo zejQuery ukusingatha imicimbi yefomu.
change()Indlela change() Qhoboshela umsebenzi wesiphathi sesiganeko kwiziqalelo <input> kwaye iyenziwa xa ixabiso layo litshintsha. Lo mzekelo ulandelayo uza kubonisa umyalezo wesilumkiso xa ukhetha ukhetho kwibhokisi yokukhetha eyehlayo.
<script>
$(document).ready(function(){
$("select").change(function(){
var selectedOption = $(this).find(":selected").val();
alert("You have selected - " + selectedOption);
});
});
</script>Kwiibhokisi zokucofa, iibhokisi zokukhangela, kunye namaqhosha erediyo, isiganeko sivutha ngokukhawuleza xa umsebenzisi esenza ukhetho lwemouse, kodwa kwigalelo lombhalo kunye nommandla wokubhaliweyo umcimbi uvutha emva kokuba into ilahlekelwe ingqwalasela.
focus()Indlela focus() incamathela umsebenzi wesibambi sesiganeko kwizinto ezikhethiweyo (ngokwesiqhelo ulawulo kunye nefom izibophelelo) ephumeza xa ifumana ujoliso. Lo mzekelo ulandelayo uza kubonisa umyalezo xa igalelo lombhalo lifumana ugxininiso.
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>blur()Indlela blur() Qhoboshela umsebenzi wesibambi sesiganeko ukwenza izinto ezinje <input>, <textarea>, <select> eyenziwayo xa ilahlekelwa lugqaliselo. Lo mzekelo ulandelayo uya kubonisa umyalezo xa igalelo lombhalo lilahlekelwa kujoliso.
<script>
$(document).ready(function(){
$("input").blur(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>submit()Indlela submit() Qhoboshela umsebenzi wesiphathi sesiganeko kwiziqalelo <form> esebenza xa umsebenzisi ezama ukungenisa ifomu. Lo mzekelo ulandelayo uya kubonisa umyalezo osekelwe kwixabiso elifakiweyo xa uzama ukungenisa ifomu.
<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>Iziganeko ziphinde zigxothwe kwimeko apho iphepha le-DOM (iModeli yeNgcaciso yeNgcaciso) lilungile okanye xa umsebenzisi ehlaziya okanye epheqa ifestile yesiphequluli, njl. Nazi iindlela eziqhele ukusetyenziswa jQuery ukusingatha olu hlobo lomsitho.
ready()Indlela ready() ikhankanya umsebenzi oza kuphunyezwa xa iDOM ilayishwe ngokupheleleyo.
Lo mzekelo ulandelayo uya kuthatha indawo yesicatshulwa somhlathi nje ukuba ulawulo lweDOM lwakhiwe ngokupheleleyo kwaye lulungele ukusetyenziswa.
<script>
$(document).ready(function(){
$("p").text("The DOM is now loaded and can be manipulated.");
});
</script>resize()Indlela resize() ncamathela umsebenzi womphathi wesiganeko kwisiqalelo sefestile esisebenza xa ubungakanani befestile yomkhangeli zincwadi itshintsha.
Lo mzekelo ulandelayo uza kubonisa ububanzi bangoku kunye nobude befestile yomkhangeli zincwadi xa uzama ukuyibuyisela kwakhona ngokurhuqa iikona zayo.
<script>
$(document).ready(function(){
$(window).resize(function() {
$(window).bind("resize", function(){
$("p").text("Window width: " + $(window).width() + ", " + "Window height: " + $(window).height());
});
});
});
</script>scroll()Indlela scroll() ncamathela umsebenzi wesibambi sesiganeko kwifestile okanye kwi iframe kunye nezinto ezishukumayo ezihamba nanini na indawo yokuskrola yento itshintsha.
Lo mzekelo ulandelayo uza kubonisa umyalezo xa upheqa ifestile yomkhangeli zincwadi.
<script>
$(document).ready(function(){
$(window).scroll(function() {
$("p").show().fadeOut("slow");
});
});
</script>Ercole Palmeri
.
Ukuphuhlisa izakhono zemoto ngokufaka imibala kulungiselela abantwana izakhono ezinzima ezifana nokubhala. Ukufaka umbala...
Icandelo lomkhosi wasemanzini ligunya lokwenyani loqoqosho lwehlabathi, elithe lajonga kwimarike ye-150 yeebhiliyoni...
NgoMvulo ophelileyo, i-Financial Times ibhengeze isivumelwano kunye ne-OpenAI. I-FT ikhupha iilayisensi kubuntatheli bayo obukumgangatho wehlabathi…
Izigidi zabantu zihlawula iinkonzo zokusasaza, zihlawula umrhumo wenyanga. Luluvo oluqhelekileyo ukuba…