Ukudala uhlelo olusekelwe ku-Ajax kuba lula kakhulu futhi kuyashesha nge-jQuery.
I-jQuery yasungulwa ngu-John Resig ekuqaleni kuka-2006. Iphrojekthi ye-jQuery okwamanje inakekelwa futhi inakekelwa iqembu elisabalalisiwe lonjiniyela njengephrojekthi yomthombo ovulekile.
Ungagcina isikhathi esiningi nomzamo nge-jQuery. Ngakho-ke engeza le sayithi ezintandokazini zakho futhi uqhubeke ufunda
Kukhona ezinye izinto eziningi ongazenza nge-jQuery.
Uhlu alugcini lapho, ziningi ezinye izinto ezinhle ongazenza nge-jQuery.
Kunezinzuzo ezimbalwa zokuthi kungani umuntu kufanele akhethe ukusebenzisa i-jQuery:
Ukuze uqalise, ake siqale sidawunilode ikhophi ye-jQuery bese siyifaka kuphrojekthi yethu. Izinguqulo ezimbili ze-jQuery ziyatholakala ukuze zilandwe: ngokushesha e ayicindezelwe .
Ifayela elingacindezelwanga lifaneleka kangcono ukuthuthukiswa noma ukulungisa iphutha; kuyilapho, ifayela elincishisiwe nelicindezelwe linconywa ukukhiqizwa ngoba ligcina umkhawulokudonsa futhi lithuthukisa ukusebenza ngenxa yosayizi wefayela elincane.
Singalanda i-jQuery kusuka lapha: https://jquery.com/download/
Uma usulande ifayela le-jQuery ungabona ukuthi linesandiso se-js, okungukuthi ifayela le-JavaScript. Eqinisweni i-JQuery ayilutho ngaphandle kwelabhulali ye-JavaScript, ngakho-ke ungafaka ifayela le-jQuery kudokhumenti ye-HTML nesici. njengoba nje ufaka amafayela e-JavaScript avamile.
<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 ukufaka njalo ifayela le-jQuery ngaphambi kwemibhalo yangokwezifiso; uma kungenjalo, ama-API we-jQuery ngeke atholakale uma ikhodi yakho ye-jQuery izama ukuwafinyelela.
Njengoba kungenzeka ukuthi uqaphele, seqe isibaluli esibonelweni sangaphambilini type="text/javascript" ngaphakathi kwethegi . Infatti questo non è richiesto in HTML5. JavaScript è il linguaggio di scripting predefiiqedwe nge-HTML5 nakuzo zonke iziphequluli zesimanje.
Okunye, ungakwazi ukushumeka i-jQuery kudokhumenti yakho usebenzisa izixhumanisi ezitholakala mahhala ze-CDN (Content Delivery Network), uma ungathanda ukugwema ukulanda ifayela.
Ama-CDN anganikeza inzuzo yokusebenza ngokunciphisa isikhathi sokulayisha, ngoba asingatha i-jQuery kumaseva amaningi emhlabeni jikelele, futhi uma umsebenzisi ecela ifayela, lizonikezwa kusuka kuseva eseduze.
Lokhu futhi kunenzuzo yokuthi uma isivakashi sekhasi lakho lewebhu sesivele silande ikhophi ye-jQuery ku-CDN efanayo ngenkathi sivakashela amanye amasayithi, ngeke kudingeke ukuthi siyilande futhi njengoba isivele ikunqolobane yesiphequluli sabo.
Kulokhu kuzodingeka ukuthi ubhale:
<script src =" https://code.jquery.com/jquery-3.6.3.min.js "> </script>Ngaphezu kwe-CDN ehlinzekwe iphrojekthi ye-jquery, ungafaka i-jQuery nge -Google e Microsoft I-CDN.
Ngemva kokubona imigomo yelabhulali ye-jQuery nokuthi ungayifaka kanjani kudokhumenti yakho, manje yisikhathi sokusebenzisa i-jQuery.
Manje masenze umsebenzi olula we-jQuery ngokushintsha umbala wombhalo kanhlokweni ukusuka kumbala wangaphambilidefiumbala omnyama kuya koluhlaza okotshani.
<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>Ekhodini senze umsebenzi olula we-jQuery ngokushintsha umbala wesihloko i.e. isici usebenzisa isikhethi sesici se-jQuery kanye nendlela ye-css() uma idokhumenti isilungile, eyaziwa ngokuthi umcimbi osulungile wedokhumenti.
Isitatimende se-jQuery ngokuvamile siqala ngophawu lwedola ( $) futhi iphetha ngesemikholoni ( ;).
Ku-jQuery, uphawu lwedola ( $) isibizo nje se-jQuery. Cabangela ikhodi yesampula elandelayo ebonisa isitatimende esilula se-jQuery.
<script>
$(document).ready(function(){
alert("Hello I'm a JQuery sign");
});
</script>Isibonelo sibonisa umyalezo oyisixwayiso "Hello I'm a JQuery sign” kumsebenzisi. Ake sibone izici ezithile:
<script>: I-jQuery iwumtapo wezincwadi we-JavaScript nje, ikhodi ye-jQuery ingafakwa ngaphakathi kwento <script>, noma ungayifaka efayeleni langaphandle le-JavaScript;$(document).ready(handler); waziwa njengomcimbi osulungile. Kuphi handler kuwumsebenzi odluliswa endleleni ezokwenziwa, ngokushesha nje lapho idokhumenti isilungile, okungukuthi lapho isigaba se-DOM sesakhiwe ngokuphelele.Indlela ye-jQuery ready() ngokuvamile isetshenziswa nomsebenzi ongaziwa. Ngakho-ke, isibonelo esingenhla singabuye sibhalwe nge-shorthand notation kanje:
<script>
$(function(){
alert("Hello I'm a JQuery sign");
});
</script>Ngaphakathi komsebenzi ungabhala izitatimende ze-jQuery ukuze wenze noma yisiphi isenzo esilandela i-syntax eyisisekelo, njenge:
$(selector).action();Kuphi, $(selector) ngokuyisisekelo ikhetha izakhi ze-HTML esihlahleni se-DOM ukuze isetshenziswe futhi action() sebenzisa izenzo ezithile ezicini ezikhethiwe, njengokushintsha inani lesakhiwo se-CSS, noma ukusetha okuqukethwe kwesici, njll.
Manje ake sibheke esinye isibonelo esibeka umbhalo wendima:
<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>Isibonelo se-jQuery sibhekisele kusikhethi p, futhi lokhu kukhetha zonke izigaba, bese indlela text() setha okuqukethwe kombhalo endimeni ngokuthi “Hello World!".
Umbhalo wendima esibonelweni sangaphambilini ushintshwa ngokuzenzakalelayo lapho idokhumenti isilungile. Kodwa ake sibone ukuthi sikwenza kanjani uma ufuna ukwenza isenzo ngaphambi kokusebenzisa ikhodi ye-jQuery, ukufaka umbhalo wendima esikhundleni.
Ake sicabangele isibonelo esisodwa sokugcina:
<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>Kulesi sibonelo umbhalo wendima uthathelwa indawo kuphela uma kwenzeka umcimbi wokuchofoza inkinobho "Replace Text", okusho ukuthi uma umsebenzisi echofoza le nkinobho.
Ungasebenzisa isikhethi se-ID ukuze ukhethe into eyodwa ene-ID ehlukile ekhasini.
Isibonelo, ikhodi elandelayo ye-jQuery izokhetha futhi igqamise into enesibaluli se-ID id="markid", uma idokhumenti isilungile.
<script>
$(document).ready(function(){
// Highlight element with id markid
$("#markid").css("background", "grey");
});
</script>Isikhethi sekilasi singasetshenziswa ukukhetha ama-elementi anekilasi elithile.
Isibonelo, ikhodi elandelayo ye-jQuery izokhetha futhi igqamise izinto ngesibaluli sekilasi class="markclass", uma idokhumenti isilungile.
<script>
$(document).ready(function(){
// Highlight elements with class markclass
$(".markclass").css("background", "grey");
});
</script>Isikhethi sento singasetshenziswa ukukhetha izinto ngegama lento.
Isibonelo, ikhodi elandelayo ye-jQuery izokhetha futhi igqamise zonke izigaba, okungukuthi izakhi "<p>" yombhalo uma isilungile.
<script>
$(document).ready(function(){
// Highlight paragraph elements
$("p").css("background", "grey");
});
</script>Ungasebenzisa isikhethi sesibaluli ukuze ukhethe i-elementi esekelwe kwesinye sezibaluli zayo ze-HTML, njengesibaluli sesixhumanisi. targetnoma imfanelo yokokufaka type, njll.
Isibonelo, ikhodi ye-jQuery elandelayo izokhetha futhi igqamise konke okokufaka kombhalo, njengama-elementi "<input>" con type="text", uma idokhumenti isilungile.
<script>
$(document).ready(function(){
// Highlight paragraph elements
$('input[type="text"]').css("background", "grey");
});
</script>Ungakwazi futhi ukuhlanganisa izikhethi ze-CSS ukuze wenze ukukhetha kwakho kucace nakakhulu.
Isibonelo, ungahlanganisa isikhethi sekilasi nesikhethi sesici ukuze uthole izici kudokhumenti ezinohlobo oluthile nesigaba.
<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>Ngaphezu kwabakhethiwe definiti, i-jQuery inikeza isikhethi sayo sangokwezifiso ukuze ithuthukise amakhono okukhetha izici ekhasini.
<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>Imicimbi ivamise ukuvuswa ukuxhumana komsebenzisi nekhasi lewebhu, njengalapho uchofoza isixhumanisi noma inkinobho, ufaka umbhalo ebhokisini lokufaka noma indawo yombhalo, khetha ibhokisi lokukhetha, cindezela ukhiye kukhibhodi, hambisa isikhombi segundane. , njll. Kwezinye izimo, isiphequluli ngokwaso singaqalisa imicimbi, njengokulayisha ikhasi nokulanda imicimbi.
I-jQuery ithuthuka ezindleleni eziyisisekelo zokusingatha imicimbi ngokunikeza izindlela zomcimbi zemicimbi eminingi yesiphequluli somdabu, ezinye zalezi zindlela ready(), click(), keypress(), focus(), blur(), change(), njll.
<script>
$(document).ready(function(){
// Code to be executed
alert("Hello World!");
});
</script>Ngokuvamile, imicimbi ingahlukaniswa ngamaqembu amane amakhulu:
Umcimbi wegundane uqaliswa lapho umsebenzisi achofoza entweni, ehambisa isikhombi segundane, njll.
Nazi ezinye izindlela ezivame ukusetshenziswa ze-jQuery ukuphatha imicimbi yegundane.
click()Indlela click() namathisela umsebenzi wesibambi somcimbi ezintweni ezikhethiwe zomcimbi “click“. Umsebenzi oxhunyiwe usayinda uma umsebenzisi achofoza kuleyo nto. Isibonelo esilandelayo sizofihla izakhi <p> ekhasini uma ichofozwa.
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).slideUp();
});
});
</script>dblclick()Indlela dblclick() namathisela umsebenzi wesibambi somcimbi ezintweni ezikhethiwe zomcimbi “dblclick“. Umsebenzi oxhunyiwe usayinda lapho umsebenzisi echofoza kabili leyo nto. Isibonelo esilandelayo sizofihla izakhi <p> uma uwachofoza kabili.
<script>
$(document).ready(function(){
$("p").dblclick(function(){
$(this).slideUp();
});
});
</script>hover()Indlela hover() namathisela umsebenzi owodwa noma emibili yesibambi somcimbi ezintweni ezikhethiwe ezisebenza lapho isikhombi segundane singena siphuma ezicini. Umsebenzi wokuqala usebenza lapho umsebenzisi ebeka isikhombi segundane phezu kwento ethile, kuyilapho umsebenzi wesibili usebenza lapho umsebenzisi esusa isikhombi segundane kuleyo nto.
Isibonelo esilandelayo sizogqamisa izinto <p> uma ubeka ikhesa kuyo, okugqamile kuzokhishwa uma ususa ikhesa.
<script>
$(document).ready(function(){
$("p").hover(function(){
$(this).addClass("highlight");
}, function(){
$(this).removeClass("highlight");
});
});
</script>mouseenter()Indlela mouseenter() namathisela umsebenzi wesibambi somcimbi ezintweni ezikhethiwe ezisetshenziswa lapho igundane lingena engxenyeni. Isibonelo esilandelayo sizokwengeza ukugqamisa kwekilasi ku-elementi <p> uma ubeka ikhesa phezu kwayo.
<script>
$(document).ready(function(){
$("p").mouseenter(function(){
$(this).addClass("highlight");
});
});
</script>mouseleave()Indlela mouseleave() namathisela umsebenzi wesibambi somcimbi ezintweni ezikhethiwe ezisebenza lapho igundane lishiya into. Isibonelo esilandelayo sizosusa ukugqama kwekilasi ku-elementi <p> uma ususa ikhesa kuyo.
<script>
$(document).ready(function(){
$("p").mouseleave(function(){
$(this).removeClass("highlight");
});
});
</script>Umcimbi wekhibhodi uyaphakanyiswa lapho umsebenzisi ecindezela noma ekhulula ukhiye kukhibhodi. Ake sibheke ezinye izindlela ezivame ukusetshenziswa ze-jQuery ukuphatha imicimbi yekhibhodi.
keypress()Indlela keypress() inamathisela umsebenzi wokuphatha umcimbi ezintweni ezikhethiwe (ngokuvamile izilawuli zefomu) esebenza lapho isiphequluli sithola okokufaka kwekhibhodi kumsebenzisi. Isibonelo esilandelayo sizobonisa umlayezo uma umcimbi ucushiwe keypress nokuthi icushwa kangaki uma ucindezela ukhiye kukhibhodi yakho.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keypress(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>Umcimbi wokucindezela ukhiye ufana nomcimbi wokhiye, ngaphandle kwalowo okhiye bokulungisa nabangaphrinti abafana no-Shift, Esc, Backspace noma Delete, okhiye bemicibisholo, njll. bacisha imicimbi yokhiye kodwa abacindezeli imicimbi.
keydown()Indlela keydown() inamathisela umsebenzi wokuphatha umcimbi ezintweni ezikhethiwe (ngokuvamile izilawuli zefomu) ezenziwa lapho umsebenzisi eqala ngokucindezela ukhiye kukhibhodi. Isibonelo esilandelayo sizobonisa umlayezo uma umcimbi ucushiwe keydown nokuthi icushwa kangaki uma ucindezela ukhiye kukhibhodi yakho.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keydown(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>keyup()Indlela keyup() namathisela umsebenzi wokuphatha umcimbi ezintweni ezikhethiwe (ngokuvamile izilawuli zefomu) ezenziwa lapho umsebenzisi ekhulula ukhiye kukhibhodi. Isibonelo esilandelayo sizobonisa umlayezo uma umcimbi ucushiwe keyup nokuthi icushwa kangaki uma ucindezela futhi ukhulula ukhiye kukhibhodi yakho.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keyup(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>Umcimbi wefomu uqalwa lapho isilawuli sefomu sithola noma silahlekelwa ukugxila, noma lapho umsebenzisi eshintsha inani lokulawula lefomu, njengokuthayipha umbhalo ube okokufaka kombhalo, ukukhetha inketho ebhokisini elikhethiwe, njll. . Nazi ezinye izindlela ezivame ukusetshenziswa ze-jQuery zokusingatha imicimbi yefomu.
change()Indlela change() namathisela umsebenzi wesibambi somcimbi kuma-elementi <input> futhi isenziwa lapho inani layo lishintsha. Isibonelo esilandelayo sizobonisa umlayezo oyisixwayiso lapho ukhetha inketho ebhokisini lokukhetha lokudonsela phansi.
<script>
$(document).ready(function(){
$("select").change(function(){
var selectedOption = $(this).find(":selected").val();
alert("You have selected - " + selectedOption);
});
});
</script>Kumabhokisi okuchofoza, amabhokisi okuhlola, nezinkinobho zomsakazo, umcimbi uvutha ngokushesha lapho umsebenzisi enza ukukhetha kwegundane, kodwa endaweni yokufaka umbhalo nendawo yombhalo umcimbi uyavutha ngemva kokuba isici silahlekelwe ukugxila.
focus()Indlela focus() inamathisela umsebenzi wesibambi somcimbi ezintweni ezikhethiwe (imvamisa ilawula futhi yakha ukubophezela) esayinda lapho ithola ukugxila. Isibonelo esilandelayo sizobonisa umlayezo uma okokufaka kombhalo kuthola ukugxila.
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>blur()Indlela blur() namathisela umsebenzi wesibambi somcimbi ukuze wenze izinto ezifana <input>, <textarea>, <select> eyenziwa lapho ilahlekelwa ukugxila. Isibonelo esilandelayo sizobonisa umlayezo uma okokufaka kombhalo kulahlekelwa ukugxila.
<script>
$(document).ready(function(){
$("input").blur(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>submit()Indlela submit() namathisela umsebenzi wesibambi somcimbi kuma-elementi <form> esebenza lapho umsebenzisi ezama ukuhambisa ifomu. Isibonelo esilandelayo sizobonisa umlayezo osuselwe kunani elifakiwe lapho uzama ukuhambisa 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>Izehlakalo ziphinde zixoshwe esimweni lapho ikhasi le-DOM (Document Object Model) selilungile noma lapho umsebenzisi eshintsha usayizi noma eskrola iwindi lesiphequluli, njll. Nazi ezinye izindlela ezivame ukusetshenziswa ze-jQuery ukuphatha lolu hlobo lomcimbi.
ready()Indlela ready() icacisa umsebenzi ozokwenziwa uma i-DOM isilayishwe ngokugcwele.
Isibonelo esilandelayo sizongena esikhundleni sombhalo wendima ngokushesha nje lapho isigaba se-DOM sesakhiwe ngokugcwele futhi silungele ukusetshenziswa.
<script>
$(document).ready(function(){
$("p").text("The DOM is now loaded and can be manipulated.");
});
</script>resize()Indlela resize() namathisela umsebenzi wesibambi somcimbi engxenyeni yewindi esebenza lapho usayizi wewindi lesiphequluli ushintsha.
Isibonelo esilandelayo sizobonisa ububanzi bamanje nobude bewindi lesiphequluli uma uzama ukulenza usayizi omusha ngokuhudula amakhona alo.
<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() namathisela umsebenzi wesibambi somcimbi efasiteleni noma ku iframe kanye nezinto ezinyakazayo ezisebenza noma nini lapho indawo yokuskrola yento ishintsha.
Isibonelo esilandelayo sizobonisa umlayezo lapho uskrola iwindi lesiphequluli.
<script>
$(document).ready(function(){
$(window).scroll(function() {
$("p").show().fadeOut("slow");
});
});
</script>Ercole Palmeri
.
I-Coveware ye-Veeam izoqhubeka nokuhlinzeka ngezinsizakalo zokuphendula izigameko zokuntshontshwa kwe-inthanethi. I-Coveware izohlinzeka ngama-forensics kanye nekhono lokulungisa…
Ukulungiswa okuqagelayo kuguqula umkhakha kawoyela negesi, ngendlela emisha nesebenzayo yokuphatha izitshalo.…
I-CMA yase-UK ikhiphe isexwayiso mayelana nokuziphatha kwe-Big Tech emakethe yezobunhloli bokwenziwa. Lapho…
Isinqumo esithi "Case Green", esakhiwe yi-European Union ukuze kuthuthukiswe ukusebenza kahle kwamandla ezakhiwo, siphothule inqubo yaso yomthetho ngokuthi...