Að búa til forrit sem byggir á Ajax verður mjög einfalt og hratt með jQuery.
jQuery var upphaflega búið til af John Resig snemma árs 2006. JQuery verkefninu er nú viðhaldið og viðhaldið af dreifðum hópi þróunaraðila sem opið uppspretta verkefni.
Þú getur sparað mikinn tíma og fyrirhöfn með jQuery. Svo bættu þessari síðu við eftirlæti þitt og haltu áfram að lesa
Það er margt fleira sem þú getur gert með jQuery.
Listinn endar ekki þar, það er margt annað flott sem þú getur gert með jQuery.
Það eru nokkrir kostir hvers vegna maður ætti að velja að nota jQuery:
Til að byrja, skulum fyrst hlaða niður afriti af jQuery og láta það síðan fylgja verkefninu okkar. Tvær útgáfur af jQuery eru fáanlegar til niðurhals: í flýti e ekki þjappað .
Óþjappaða skráin hentar betur fyrir þróun eða villuleit; á meðan er mælt með minni og þjöppuðu skránni til framleiðslu vegna þess að hún sparar bandbreidd og bætir afköst vegna minni skráarstærðar.
Við getum halað niður jQuery héðan: https://jquery.com/download/
Þegar þú hefur hlaðið niður jQuery skránni geturðu séð að hún er með js viðbót, þ.e.a.s. það er JavaScript skrá. Í raun er JQuery ekkert annað en JavaScript bókasafn, svo þú getur sett jQuery skrána í HTML skjalið með frumefninu alveg eins og þú lætur fylgja með venjulegar JavaScript skrár.
<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>
Mundu að hafa alltaf jQuery skrána á undan sérsniðnum forskriftum; annars verða jQuery API ekki tiltæk þegar jQuery kóðinn þinn reynir að fá aðgang að þeim.
Eins og þú hefur kannski tekið eftir slepptum við eigindinni í fyrra dæminu type="text/javascript"
inni í merkinu . Infatti questo non è richiesto in HTML5. JavaScript è il linguaggio di scripting predefilokið í HTML5 og í öllum nútíma vöfrum.
Í staðinn geturðu fellt jQuery inn í skjalið þitt með ókeypis CDN (Content Delivery Network) tenglum, ef þú vilt frekar forðast að hlaða niður skránni.
CDN geta boðið upp á frammistöðukosti með því að draga úr hleðslutíma, vegna þess að þeir hýsa jQuery á mörgum netþjónum um allan heim, og þegar notandi biður um skrána verður hún afgreidd frá næsta netþjóni.
Þetta hefur líka þann kost að ef vefsíðugestur þinn hefur þegar hlaðið niður afriti af jQuery frá sama CDN á meðan hann heimsækir aðrar síður, þá þurfa þeir ekki að hlaða því niður aftur þar sem það er þegar í skyndiminni vafrans þeirra.
Í þessu tilfelli verður þú að skrifa:
<script src =" https://code.jquery.com/jquery-3.6.3.min.js "> </script>
Til viðbótar við CDN sem jquery verkefnið gefur, geturðu látið jQuery fylgja með Google e Microsoft cdn.
Eftir að hafa séð markmið jQuery bókasafnsins og hvernig á að setja það inn í skjalið þitt, þá er kominn tími til að koma jQuery í framkvæmd.
Nú skulum við gera einfalda jQuery aðgerð með því að breyta haustextalitnum frá forlitnumdefisvartur til grænn litur.
<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>
Í kóðanum gerðum við einfalda jQuery aðgerð með því að breyta litnum á hausnum, þ.e. frumefninu með því að nota valmynd jQuery frumefnisins og css() aðferðina þegar skjalið er tilbúið, þekktur sem tilbúinn tilbúinn viðburður.
jQuery yfirlýsing byrjar venjulega á dollaramerki ( $
) og endar með semíkommu ( ;
).
Í jQuery, dollaramerkið ( $
) er bara samnefni fyrir jQuery. Íhugaðu eftirfarandi sýnishornskóða sem sýnir einföldustu jQuery setninguna.
<script>
$(document).ready(function(){
alert("Hello I'm a JQuery sign");
});
</script>
Dæmið sýnir einfaldlega viðvörunarskilaboð "Hello I'm a JQuery sign
“ til notandans. Við skulum sjá nokkra eiginleika:
<script>
: jQuery er bara JavaScript bókasafn, jQuery kóða er hægt að setja inni í frumefninu <script>
, eða þú getur sett það í utanaðkomandi JavaScript skrá;$(document).ready(handler)
; er þekktur sem tilbúinn atburður. Hvar er það handler
það er aðgerð sem er send til aðferðarinnar sem á að framkvæma, um leið og skjalið er tilbúið, þ.e.a.s. þegar DOM stigveldið hefur verið byggt upp.jQuery aðferðin ready()
það er venjulega notað með nafnlausri aðgerð. Svo, dæmið hér að ofan er líka hægt að skrifa með styttingu á þennan hátt:
<script>
$(function(){
alert("Hello I'm a JQuery sign");
});
</script>
Inni í falli geturðu skrifað jQuery staðhæfingar til að framkvæma hvaða aðgerð sem er eftir grunnsetningafræði, eins og:
$(selector).action();
Hvar er það, $(selector)
það velur í grundvallaratriðum HTML þættina úr DOM trénu svo hægt sé að vinna með það og action()
beita sumum aðgerðum á valda þætti, eins og að breyta gildi CSS eignarinnar, eða stilla innihald þáttarins o.s.frv.
Nú skulum við líta á annað dæmi sem setur málsgreinatexta:
<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 dæmið vísar til veljarans p, og þetta velur allar málsgreinar, síðan aðferðina text()
stilltu textainnihald málsgreinarinnar með „Hello World!
".
Málsgreinatextanum í fyrra dæmi er sjálfkrafa skipt út þegar skjalið er tilbúið. En við skulum sjá hvernig á að gera það ef þú vilt framkvæma aðgerð áður en þú keyrir jQuery kóðann, til að skipta um texta málsgreinarinnar.
Við skulum íhuga eitt síðasta dæmi:
<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>
Í þessu dæmi er aðeins skipt út fyrir málsgreinatexta þegar smellitilvik á sér stað á hnappinum "Replace Text
“, sem þýðir einfaldlega þegar notandi smellir á þennan hnapp.
Þú getur notað auðkennisvalið til að velja stakan hlut með einstaka auðkenninu á síðunni.
Til dæmis mun eftirfarandi jQuery kóða velja og auðkenna þátt með ID eigindinni id="markid"
, þegar skjalið er tilbúið.
<script>
$(document).ready(function(){
// Highlight element with id markid
$("#markid").css("background", "grey");
});
</script>
Hægt er að nota flokkavalið til að velja þætti með tilteknum flokki.
Til dæmis mun eftirfarandi jQuery kóði velja og auðkenna þætti með bekkjareigindinni class="markclass"
, þegar skjalið er tilbúið.
<script>
$(document).ready(function(){
// Highlight elements with class markclass
$(".markclass").css("background", "grey");
});
</script>
Hlutavalið er hægt að nota til að velja hluti eftir heiti hlutar.
Til dæmis mun eftirfarandi jQuery kóða velja og auðkenna alla málsgreinina, þ.e. þættina "<p>"
skjalsins þegar það er tilbúið.
<script>
$(document).ready(function(){
// Highlight paragraph elements
$("p").css("background", "grey");
});
</script>
Þú getur notað eigindavalið til að velja þátt byggt á einum af HTML eiginleikum þess, eins og tengieigind target
eða eiginleiki inntaks type
o.s.frv.
Til dæmis mun eftirfarandi jQuery kóða velja og auðkenna öll textainnsláttur, svo sem þætti "<input>"
með type="text"
, þegar skjalið er tilbúið.
<script>
$(document).ready(function(){
// Highlight paragraph elements
$('input[type="text"]').css("background", "grey");
});
</script>
Þú getur líka sameinað CSS veljara til að gera val þitt enn nákvæmara.
Til dæmis er hægt að sameina flokkavalið með þáttavali til að finna þætti í skjali sem hafa ákveðna gerð og flokk.
<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>
Auk valmanna definiti, jQuery býður upp á eigin sérsniðna val til að auka enn frekar möguleika á að velja þætti á síðu.
<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>
Atburðir koma oft af stað af samskiptum notenda við vefsíðuna, svo sem þegar smellt er á hlekk eða hnapp, texti sleginn inn í innsláttarreit eða textasvæði, valið í valreit, ýtt á takka á lyklaborðinu, hreyft músarbendlinum , o.s.frv. Í sumum tilfellum getur vafrinn sjálfur kallað fram atburði, svo sem síðuhleðslu og niðurhalsviðburði.
jQuery bætir grunnaðferðir við meðhöndlun viðburða með því að bjóða upp á viðburðaaðferðir fyrir flesta innfædda vafraviðburði, sumar þessara aðferða eru ready()
, click()
, keypress()
, focus()
, blur()
, change()
o.s.frv.
<script>
$(document).ready(function(){
// Code to be executed
alert("Hello World!");
});
</script>
Almennt er hægt að flokka atburði í fjóra meginhópa:
Músarviðburður kemur af stað þegar notandi smellir á hlut, færir músarbendilinn o.s.frv.
Hér eru nokkrar algengar jQuery aðferðir til að meðhöndla músaviðburði.
click(
)Aðferðin click()
hengja atburðastjórnunaraðgerð við valda þætti fyrir atburðinn “click
“. Tengda aðgerðin keyrir þegar notandinn smellir á það atriði. Eftirfarandi dæmi mun fela þættina <p>
á síðu þegar smellt er.
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).slideUp();
});
});
</script>
dblclick()
Aðferðin dblclick()
hengja atburðastjórnunaraðgerð við valda þætti fyrir atburðinn “dblclick
“. Tengda aðgerðin keyrir þegar notandinn tvísmellir á það atriði. Eftirfarandi dæmi mun fela þættina <p>
þegar tvísmellt er á þær.
<script>
$(document).ready(function(){
$("p").dblclick(function(){
$(this).slideUp();
});
});
</script>
hover()
Aðferðin hover()
hengja eina eða tvær atburðastjórnunaraðgerðir við valda þætti sem keyra þegar músarbendillinn færist inn og út úr þáttum. Fyrsta aðgerðin keyrir þegar notandi setur músarbendilinn yfir hlut, en önnur aðgerðin keyrir þegar notandinn fjarlægir músarbendilinn úr þeim hlut.
Eftirfarandi dæmi mun auðkenna atriði <p>
þegar þú setur bendilinn á hann verður hápunkturinn fjarlægður þegar þú fjarlægir bendilinn.
<script>
$(document).ready(function(){
$("p").hover(function(){
$(this).addClass("highlight");
}, function(){
$(this).removeClass("highlight");
});
});
</script>
mouseenter()
Aðferðin mouseenter()
hengja atburðastjórnunaraðgerð við valda þætti sem er keyrð þegar músin fer inn í frumefni. Eftirfarandi dæmi mun bæta flokkaáherslu við frumefnið <p>
þegar þú setur bendilinn yfir það.
<script>
$(document).ready(function(){
$("p").mouseenter(function(){
$(this).addClass("highlight");
});
});
</script>
mouseleave()
Aðferðin mouseleave()
hengja atburðastjórnunaraðgerð við valin atriði sem keyra þegar músin yfirgefur hlut. Eftirfarandi dæmi mun fjarlægja hápunktinn í bekknum úr þættinum <p>
þegar þú fjarlægir bendilinn af honum.
<script>
$(document).ready(function(){
$("p").mouseleave(function(){
$(this).removeClass("highlight");
});
});
</script>
Lyklaborðsviðburður kemur upp þegar notandi ýtir á eða sleppir takka á lyklaborðinu. Við skulum skoða nokkrar algengar jQuery aðferðir til að takast á við lyklaborðsatburði.
keypress()
Aðferðin keypress()
tengir aðgerð til að meðhöndla atburði við valda þætti (venjulega formstýringar) sem keyrir þegar vafrinn fær lyklaborðsinntak frá notandanum. Eftirfarandi dæmi mun birta skilaboð þegar atburðurinn er settur af stað keypress
og hversu oft það er ræst þegar þú ýtir á takkann á lyklaborðinu þínu.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keypress(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>
Lyklatilvikið er svipað og lyklatilvikið, nema að breytilyklar og óprentaðir lyklar eins og Shift, Esc, Backspace eða Delete, örvatakkar o.s.frv. þeir skjóta niður lyklaviðburðum en ekki takkapressunarviðburðum.
keydown()
Aðferðin keydown()
tengir atburðameðferðaraðgerð við valin atriði (venjulega formstýringar) sem er keyrð þegar notandinn ýtir fyrst á takka á lyklaborðinu. Eftirfarandi dæmi mun birta skilaboð þegar atburðurinn er settur af stað keydown
og hversu oft það er ræst þegar þú ýtir á takkann á lyklaborðinu þínu.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keydown(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>
keyup()
Aðferðin keyup()
tengja aðgerð til að meðhöndla atburði við valda þætti (venjulega formstýringar) sem er keyrð þegar notandinn sleppir takka á lyklaborðinu. Eftirfarandi dæmi mun birta skilaboð þegar atburðurinn er settur af stað keyup
og hversu oft það er ræst þegar þú ýtir á og sleppir takka á lyklaborðinu þínu.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keyup(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>
Eyðublaðatilvik kemur af stað þegar eyðublaðastýring fær eða missir fókus, eða þegar notandi breytir eyðublaðstýringargildi, eins og að slá inn texta í textainnslátt, velja valmöguleika í valreit osfrv. Hér eru nokkrar algengar jQuery aðferðir til að meðhöndla form atburði.
change()
Aðferðin change()
hengja atburðastjórnunaraðgerð við þætti <input>
og er framkvæmt þegar gildi þess breytist. Eftirfarandi dæmi mun birta viðvörunarskilaboð þegar valkostur er valinn í fellivalmyndinni.
<script>
$(document).ready(function(){
$("select").change(function(){
var selectedOption = $(this).find(":selected").val();
alert("You have selected - " + selectedOption);
});
});
</script>
Fyrir smelliboxa, gátreiti og útvarpshnappa, ræsir atburðurinn strax þegar notandinn velur mús, en fyrir textainnslátt og textasvæði kviknar atburðurinn eftir að þátturinn missir fókus.
focus()
Aðferðin focus()
tengir atburðastjórnunaraðgerð við valda þætti (venjulega stýringar og formbindingar) sem keyrir þegar það fær fókus. Eftirfarandi dæmi birtir skilaboð þegar textainnsláttur fær fókus.
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>
blur()
Aðferðin blur()
hengja við atburðastjórnunaraðgerð til að mynda þætti eins og <input>
, <textarea>
, <select>
sem er framkvæmt þegar það missir einbeitinguna. Eftirfarandi dæmi birtir skilaboð þegar textainnslátturinn missir fókus.
<script>
$(document).ready(function(){
$("input").blur(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>
submit()
Aðferðin submit()
hengja atburðastjórnunaraðgerð við þætti <form>
sem keyrir þegar notandi reynir að senda inn eyðublað. Eftirfarandi dæmi birtir skilaboð sem byggjast á gildinu sem var slegið inn þegar reynt var að senda eyðublaðið.
<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>
Atburðirnir eru einnig ræstir í aðstæðum þar sem DOM (Document Object Model) síðan er tilbúin eða þegar notandinn breytir stærð eða flettir vafraglugganum o.s.frv. Hér eru nokkrar algengar jQuery aðferðir til að takast á við þessa tegund atburða.
ready()
Aðferðin ready()
tilgreinir aðgerð sem á að framkvæma þegar DOM er fullhlaðinn.
Eftirfarandi dæmi mun koma í stað málsgreinatexta um leið og DOM stigveldið er að fullu byggt og tilbúið til meðhöndlunar.
<script>
$(document).ready(function(){
$("p").text("The DOM is now loaded and can be manipulated.");
});
</script>
resize()
Aðferðin resize()
hengja atburðastjórnunaraðgerð við gluggaþáttinn sem keyrir þegar stærð vafragluggans breytist.
Eftirfarandi dæmi sýnir núverandi breidd og hæð vafragluggans þegar þú reynir að breyta stærð hans með því að draga hornin.
<script>
$(document).ready(function(){
$(window).resize(function() {
$(window).bind("resize", function(){
$("p").text("Window width: " + $(window).width() + ", " + "Window height: " + $(window).height());
});
});
});
</script>
scroll()
Aðferðin scroll()
hengja atburðastjórnunaraðgerð við gluggann eða við iframe
og skrunanlegir hlutir sem keyra í hvert skipti sem skrunstaða hlutarins breytist.
Eftirfarandi dæmi birtir skilaboð þegar vafraglugganum er skrunað.
<script>
$(document).ready(function(){
$(window).scroll(function() {
$("p").show().fadeOut("slow");
});
});
</script>
Ercole Palmeri
.
I caratteri sono i singoli elementi di un testo. Possono essere lettere, punteggiatura segni, numeri, spazi e simboli. Ogni parola…
Hugtakið Smart Lock Market vísar til iðnaðarins og vistkerfisins í kringum framleiðslu, dreifingu og notkun ...
Í hugbúnaðarverkfræði eru hönnunarmynstur ákjósanlegar lausnir á vandamálum sem venjulega koma upp í hugbúnaðarhönnun. ég er eins og…
Iðnaðarmerking er víðtækt hugtak sem nær yfir nokkrar aðferðir sem notaðar eru til að búa til varanleg merki á yfirborði...