Krei Ajax-bazitan aplikaĵon fariĝas tre simpla kaj rapida kun jQuery.
jQuery estis origine kreita fare de John Resig komence de 2006. La jQuery-projekto estas nuntempe konservita kaj prizorgata fare de distribuita grupo de programistoj kiel malfermfonteca projekto.
Vi povas ŝpari multan tempon kaj penadon kun jQuery. Do aldonu ĉi tiun retejon al viaj plej ŝatataj kaj daŭrigu legi
Estas multaj pliaj aferoj, kiujn vi povas fari kun jQuery.
La listo ne finiĝas tie, estas multaj aliaj bonegaj aferoj, kiujn vi povas fari per jQuery.
Estas pluraj avantaĝoj, kial oni elektu uzi jQuery:
Por komenci, ni unue elŝutu kopion de jQuery kaj poste inkludu ĝin en nia projekto. Du versioj de jQuery estas disponeblaj por elŝuto: haste e ne kunpremita .
La nekunpremita dosiero estas pli taŭga por disvolviĝo aŭ sencimigado; dum, la minigita kaj kunpremita dosiero estas rekomendita por produktado ĉar ĝi ŝparas bendolarĝon kaj plibonigas rendimenton pro la pli malgranda dosiergrandeco.
Ni povas elŝuti jQuery de ĉi tie: https://jquery.com/download/
Post kiam vi elŝutas la jQuery-dosieron, vi povas vidi, ke ĝi havas js-etendon, t.e. ĝi estas JavaScript-dosiero. Fakte JQuery estas nenio krom JavaScript-biblioteko, do vi povas inkluzivi la jQuery-dosieron en la HTML-dokumenton kun la elemento same kiel vi inkluzivas regulajn JavaScript-dosierojn.
<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>Memoru ĉiam inkluzivi la jQuery-dosieron antaŭ kutimaj skriptoj; alie, la jQuery API-oj ne estos disponeblaj kiam via jQuery-kodo provos aliri ilin.
Kiel vi eble rimarkis, ni preterlasis la atributon en la antaŭa ekzemplo type="text/javascript" ene de la etikedo . Infatti questo non è richiesto in HTML5. JavaScript è il linguaggio di scripting predefifinitaj en HTML5 kaj en ĉiuj modernaj retumiloj.
Kiel alternativo, vi povas enigi jQuery en vian dokumenton per libere disponeblaj ligiloj CDN (Content Delivery Network), se vi preferas eviti elŝuti la dosieron.
CDN-oj povas oferti rendimentan avantaĝon reduktante ŝarĝtempon, ĉar ili gastigas jQuery sur pluraj serviloj tra la mondo, kaj kiam uzanto petas la dosieron, ĝi estos servita de la plej proksima servilo.
Ĉi tio ankaŭ havas la avantaĝon, ke se via retpaĝa vizitanto jam elŝutis kopion de jQuery de la sama CDN dum vizitado de aliaj retejoj, ili ne devos elŝuti ĝin denove ĉar ĝi jam estas en la kaŝmemoro de sia retumilo.
En ĉi tiu kazo vi devos skribi:
<script src =" https://code.jquery.com/jquery-3.6.3.min.js "> </script>Krom la CDN provizita de la projekto jQuery, vi povas inkluzivi jQuery per google e microsoft cdn.
Vidinte la celojn de la biblioteko jQuery kaj kiel enmeti ĝin en vian dokumenton, nun estas la tempo por praktiki jQuery.
Nun ni faru simplan jQuery-operacion ŝanĝante la kapan tekstokoloron de la antaŭkolorodefinigre al verda koloro.
<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>En la kodo ni faris simplan jQuery-operacion ŝanĝante la koloron de la kaplinio t.e. la elemento uzante la elektilon kaj css() de la elemento jQuery kiam la dokumento estas preta, konata kiel la dokumentpreta evento.
JQuery deklaro kutime komenciĝas per dolara signo ( $) kaj finiĝas per punktokomo ( ;).
En jQuery, la dolara signo ( $) estas nur kaŝnomo por jQuery. Konsideru la sekvan ekzemplan kodon pruvantan la plej simplan deklaron de jQuery.
<script>
$(document).ready(function(){
alert("Hello I'm a JQuery sign");
});
</script>La ekzemplo simple montras avertan mesaĝon "Hello I'm a JQuery sign” al la uzanto. Ni vidu kelkajn funkciojn:
<script>: jQuery estas nur JavaScript biblioteko, jQuery kodo povas esti metita ene de la elemento <script>, aŭ vi povas meti ĝin en eksteran JavaScript-dosieron;$(document).ready(handler); estas konata kiel preta evento. Kie ĝi estas handler ĝi estas funkcio kiu estas transdonita al la metodo por esti ekzekutita, tuj kiam la dokumento estas preta, t.e. kiam la DOM-hierarkio estis tute konstruita.La metodo jQuery ready() ĝi estas kutime uzata kun anonima funkcio. Do, la supra ekzemplo ankaŭ povas esti skribita en stenografionotacio jene:
<script>
$(function(){
alert("Hello I'm a JQuery sign");
});
</script>Ene de funkcio vi povas skribi jQuery-deklarojn por plenumi ajnan agon sekvante bazan sintakson, kiel:
$(selector).action();Kie ĝi estas, $(selector) ĝi esence elektas la HTML-elementojn el la DOM-arbo por ke ĝi estu manipulita kaj action() apliki kelkajn agojn sur la elektitaj elementoj, kiel ŝanĝi la valoron de la CSS-posedaĵo, aŭ fiksi la enhavon de la elemento, ktp.
Nun ni rigardu alian ekzemplon kiu fiksas alinean tekston:
<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>La jQuery ekzemplo rilatas al la elektilo p, kaj ĉi tio elektas ĉiujn alineojn, poste la metodon text() agordu la tekstan enhavon de la alineo per "Hello World!".
La alinea teksto en la antaŭa ekzemplo estas aŭtomate anstataŭigita kiam la dokumento estas preta. Sed ni vidu kiel fari ĝin se vi volas fari agon antaŭ ol ruli la jQuery-kodon, por anstataŭigi la tekston de la alineo.
Ni konsideru lastan ekzemplon:
<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>En ĉi tiu ekzemplo la alinea teksto estas anstataŭigita nur kiam klakokazaĵo okazas sur la butono "Replace Text", kio simple signifas kiam uzanto klakas ĉi tiun butonon.
Vi povas uzi la ID-elektilon por elekti ununuran objekton kun la unika ID sur la paĝo.
Ekzemple, la sekva jQuery-kodo elektos kaj reliefigos elementon kun la ID-atributo id="markid", kiam la dokumento estas preta.
<script>
$(document).ready(function(){
// Highlight element with id markid
$("#markid").css("background", "grey");
});
</script>La klasselektilo povas esti uzata por elekti elementojn kun specifa klaso.
Ekzemple, la sekva jQuery-kodo elektos kaj reliefigos elementojn kun la klasa atributo class="markclass", kiam la dokumento estas preta.
<script>
$(document).ready(function(){
// Highlight elements with class markclass
$(".markclass").css("background", "grey");
});
</script>La elektilo de objektoj povas esti uzata por elekti erojn laŭ la nomo de la objekto.
Ekzemple, la sekva jQuery-kodo elektos kaj reliefigos ĉiujn alineojn, t.e. la elementojn "<p>" de la dokumento kiam ĝi estas preta.
<script>
$(document).ready(function(){
// Highlight paragraph elements
$("p").css("background", "grey");
});
</script>Vi povas uzi la atributan elektilon por elekti elementon surbaze de unu el ĝiaj HTML-atributoj, kiel ligo-atributo. targetaŭ la atributo de enigo type, ktp.
Ekzemple, la sekva jQuery-kodo elektos kaj reliefigos ĉiujn tekstajn enigojn, kiel elementojn "<input>" con type="text", kiam la dokumento estas preta.
<script>
$(document).ready(function(){
// Highlight paragraph elements
$('input[type="text"]').css("background", "grey");
});
</script>Vi ankaŭ povas kombini CSS-elektilojn por fari vian elekton eĉ pli preciza.
Ekzemple, vi povas kombini la klasselektilon kun elementa elektilo por trovi elementojn en dokumento kiuj havas certan tipon kaj klason.
<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>Krom la elektiloj defiNiti, jQuery provizas sian propran kutiman elektilon por plue plibonigi la kapablojn elekti elementojn sur paĝo.
<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>Okazaĵoj ofte estas deĉenigitaj de uzantinterago kun la retpaĝo, kiel kiam oni klakas ligon aŭ butonon, enigas tekston en enigkeston aŭ tekstan areon, faras elekton en elektkeston, premas klavon sur la klavaro, movas la musmontrilon. , ktp. En iuj kazoj, la retumilo mem povas ekigi eventojn, kiel paĝŝarĝon kaj elŝuton.
jQuery plibonigas la bazajn aranĝajn traktadmekanismojn proponante okazaĵmetodojn por la plej multaj denaskaj foliumilaj eventoj, kelkaj el ĉi tiuj metodoj estas ready(), click(), keypress(), focus(), blur(), change(), ktp.
<script>
$(document).ready(function(){
// Code to be executed
alert("Hello World!");
});
</script>Ĝenerale, okazaĵoj povas esti klasifikitaj en kvar ĉefajn grupojn:
Musokazaĵo estas ekigita kiam la uzanto klakas sur objekto, movas la musmontrilon ktp.
Jen kelkaj ofte uzataj jQuery-metodoj por trakti musajn eventojn.
click()La metodo click() aligu okazaĵan prizorgan funkcion al la elektitaj elementoj por la evento "click“. La ligita funkcio efektiviĝas kiam la uzanto klakas sur tiu objekto. La sekva ekzemplo kaŝos la elementojn <p> sur paĝo kiam oni klakas.
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).slideUp();
});
});
</script>dblclick()La metodo dblclick() aligu okazaĵan prizorgan funkcion al la elektitaj elementoj por la evento "dblclick“. La ligita funkcio efektiviĝas kiam la uzanto duoble alklakas tiun eron. La sekva ekzemplo kaŝos la elementojn <p> kiam duoble alklakas ilin.
<script>
$(document).ready(function(){
$("p").dblclick(function(){
$(this).slideUp();
});
});
</script>hover()La metodo hover() ligu unu aŭ du funkciojn pri aranĝo de eventoj al elektitaj elementoj, kiuj efektiviĝas kiam la musmontrilo moviĝas en kaj el elementoj. La unua funkcio funkcias kiam la uzanto metas la musmontrilon super objekto, dum la dua funkcio funkcias kiam la uzanto forigas la musmontrilon de tiu objekto.
La sekva ekzemplo reliefigos erojn <p> kiam vi metas la kursoron sur ĝin, la kulminaĵo estos forigita kiam vi forigas la kursoron.
<script>
$(document).ready(function(){
$("p").hover(function(){
$(this).addClass("highlight");
}, function(){
$(this).removeClass("highlight");
});
});
</script>mouseenter()La metodo mouseenter() ligu okazaĵan prizorgan funkcion al la elektitaj elementoj, kiu estas efektivigita kiam la muso eniras elementon. La sekva ekzemplo aldonos klasan reliefigon al la elemento <p> kiam vi metas la kursoron super ĝi.
<script>
$(document).ready(function(){
$("p").mouseenter(function(){
$(this).addClass("highlight");
});
});
</script>mouseleave()La metodo mouseleave() ligu okazaĵan prizorgan funkcion al elektitaj eroj, kiu funkcias kiam la muso forlasas objekton. La sekva ekzemplo forigos la klasan kulminaĵon de la elemento <p> kiam vi forigas la kursoron de ĝi.
<script>
$(document).ready(function(){
$("p").mouseleave(function(){
$(this).removeClass("highlight");
});
});
</script>Klavaro okazaĵo estas levita kiam la uzanto premas aŭ liberigas klavon sur la klavaro. Ni rigardu kelkajn ofte uzatajn jQuery-metodojn por trakti klavarajn eventojn.
keypress()La metodo keypress() ligas okazaĵ-traktan funkcion al elektitaj elementoj (tipe formkontroloj) kiu funkcias kiam la retumilo ricevas klavarenigon de la uzanto. La sekva ekzemplo montros mesaĝon kiam la evento estas ekigita keypress kaj kiom da fojoj ĝi estas ekigita kiam vi premas la klavon de via klavaro.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keypress(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>La klavpremokazaĵo estas simila al la klavmalalta evento, krom ke modifilo kaj nepresantaj klavoj kiel Majuskaĵo, Esc, Backspace aŭ Forigi, sagoklavoj ktp. ili lanĉas keydown-okazaĵojn sed ne klavpremokazaĵojn.
keydown()La metodo keydown() ligas okazaĵ-traktan funkcion al elektitaj eroj (tipe formkontroloj) kiu estas efektivigita kiam la uzanto unue premas klavon sur la klavaro. La sekva ekzemplo montros mesaĝon kiam la evento estas ekigita keydown kaj kiom da fojoj ĝi estas ekigita kiam vi premas la klavon de via klavaro.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keydown(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>keyup()La metodo keyup() ligu okazaĵ-traktan funkcion al elektitaj elementoj (tipe formkontroloj) kiu estas efektivigita kiam la uzanto liberigas klavon sur la klavaro. La sekva ekzemplo montros mesaĝon kiam la evento estas ekigita keyup kaj kiom da fojoj ĝi estas ekigita kiam vi premas kaj liberigas klavon de via klavaro.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keyup(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>Formokazaĵo estas ekigita kiam formokontrolo ricevas aŭ perdas fokuson, aŭ kiam la uzanto ŝanĝas formularan kontrolvaloron, kiel ekzemple tajpi tekston en tekstan enigaĵon, elektante opcion en elektkesto, ktp. Jen kelkaj ofte uzataj jQuery-metodoj por trakti formajn eventojn.
change()La metodo change() ligu okazaĵan prizorgan funkcion al elementoj <input> kaj estas efektivigita kiam ĝia valoro ŝanĝiĝas. La sekva ekzemplo montros avertan mesaĝon kiam vi elektas opcion en la menua elektkesto.
<script>
$(document).ready(function(){
$("select").change(function(){
var selectedOption = $(this).find(":selected").val();
alert("You have selected - " + selectedOption);
});
});
</script>Por klakskatoloj, markobutonoj kaj radiobutonoj, la okazaĵo ekfunkciigas tuj kiam la uzanto faras muselekton, sed por teksta enigo kaj teksta areo la okazaĵo ekfunkciigas post kiam la elemento perdas fokuson.
focus()La metodo focus() ligas okazaĵan prizorgan funkcion al elektitaj elementoj (tipe kontrolas kaj formas ligojn) kiu efektivigas kiam ĝi ricevas fokuson. La sekva ekzemplo montros mesaĝon kiam teksta enigo ricevas fokuson.
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>blur()La metodo blur() ligu okazaĵan prizorgan funkcion por formi elementojn kiel ekzemple <input>, <textarea>, <select> kiu estas efektivigita kiam ĝi perdas fokuson. La sekva ekzemplo montros mesaĝon kiam la teksta enigo perdas fokuson.
<script>
$(document).ready(function(){
$("input").blur(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>submit()La metodo submit() ligu okazaĵan prizorgan funkcion al elementoj <form> kiu funkcias kiam la uzanto provas sendi formularon. La sekva ekzemplo montros mesaĝon bazitan sur la enigita valoro kiam vi provas sendi la formularon.
<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>La eventoj ankaŭ estas pafitaj en situacio kie la paĝo DOM (Dokumenta Objekto-Modelo) estas preta aŭ kiam la uzanto regrandigas aŭ rulumas la foliumilan fenestron, ktp. Jen kelkaj ofte uzataj jQuery-metodoj por trakti ĉi tiun tipon de evento.
ready()La metodo ready() specifas funkcion por efektivigi kiam la DOM estas plene ŝarĝita.
La sekva ekzemplo anstataŭigos alinean tekston tuj kiam la DOM-hierarkio estos plene konstruita kaj preta por esti manipulita.
<script>
$(document).ready(function(){
$("p").text("The DOM is now loaded and can be manipulated.");
});
</script>resize()La metodo resize() aligu okazaĵan prizorgan funkcion al la fenestra elemento, kiu funkcias kiam la grandeco de la retumila fenestro ŝanĝiĝas.
La sekva ekzemplo montros la nunan larĝon kaj altecon de la retumila fenestro kiam vi provas regrandigi ĝin trenante ĝiajn angulojn.
<script>
$(document).ready(function(){
$(window).resize(function() {
$(window).bind("resize", function(){
$("p").text("Window width: " + $(window).width() + ", " + "Window height: " + $(window).height());
});
});
});
</script>scroll()La metodo scroll() ligu okazaĵan prizorgan funkcion al la fenestro aŭ al la iframe kaj ruleblaj eroj kiuj funkcias kiam ajn la rulpozicio de la ero ŝanĝiĝas.
La sekva ekzemplo montros mesaĝon kiam rulumas la foliumilan fenestron.
<script>
$(document).ready(function(){
$(window).scroll(function() {
$("p").show().fadeOut("slow");
});
});
</script>Ercole Palmeri
.
Milionoj da homoj pagas por streaming-servoj, pagante monatajn abonkotizojn. Estas komuna opinio, ke vi...
Coveware de Veeam daŭre liveros servojn de respondaj incidentoj pri ciberĉantaĝo. Coveware ofertos krimmedicinajn kaj solvajn kapablojn...
Prognoza prizorgado revolucias la petrolon kaj gasan sektoron, kun noviga kaj iniciatema aliro al plantadministrado...
La UK CMA publikigis averton pri la konduto de Big Tech en la merkato de artefarita inteligenteco. Tie…