Mae creu cymhwysiad sy'n seiliedig ar Ajax yn dod yn syml iawn ac yn gyflym gyda jQuery.
Crëwyd jQuery yn wreiddiol gan John Resig yn gynnar yn 2006. Ar hyn o bryd mae'r prosiect jQuery yn cael ei gynnal a'i gadw gan grŵp dosbarthedig o ddatblygwyr fel prosiect ffynhonnell agored.
Gallwch arbed llawer o amser ac ymdrech gyda jQuery. Felly ychwanegwch y wefan hon at eich ffefrynnau a pharhau i ddarllen
Mae llawer mwy o bethau y gallwch eu gwneud gyda jQuery.
Nid yw'r rhestr yn gorffen yno, mae yna lawer o bethau cŵl eraill y gallwch chi eu gwneud gyda jQuery.
Mae yna nifer o fanteision pam y dylai rhywun ddewis defnyddio jQuery:
I ddechrau, yn gyntaf gadewch i ni lawrlwytho copi o jQuery ac yna ei gynnwys yn ein prosiect. Mae dwy fersiwn o jQuery ar gael i'w lawrlwytho: mewn frys e heb ei gywasgu .
Mae'r ffeil anghywasgedig yn fwy addas ar gyfer datblygu neu ddadfygio; tra, argymhellir y ffeil miniified a chywasgedig ar gyfer cynhyrchu oherwydd ei fod yn arbed lled band ac yn gwella perfformiad oherwydd maint y ffeil llai.
Gallwn lawrlwytho jQuery yma: https://jquery.com/download/
Ar ôl i chi lawrlwytho'r ffeil jQuery gallwch weld bod ganddi estyniad js, h.y. ffeil JavaScript ydyw. Mewn gwirionedd nid yw JQuery yn ddim byd ond llyfrgell JavaScript, felly gallwch gynnwys y ffeil jQuery yn y ddogfen HTML gyda'r elfen yn union fel eich bod yn cynnwys ffeiliau JavaScript rheolaidd.
<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>Cofiwch gynnwys y ffeil jQuery cyn sgriptiau personol bob amser; fel arall, ni fydd yr APIs jQuery ar gael pan fydd eich cod jQuery yn ceisio cael mynediad iddynt.
Fel y gallech fod wedi sylwi, fe wnaethom hepgor y priodoledd yn yr enghraifft flaenorol type="text/javascript" tu mewn i'r tag . Infatti questo non è richiesto in HTML5. JavaScript è il linguaggio di scripting predefigorffen yn HTML5 ac ym mhob porwr modern.
Fel dewis arall, gallwch blannu jQuery yn eich dogfen trwy ddolenni CDN (Content Delivery Network) sydd ar gael yn rhwydd, os byddai'n well gennych osgoi lawrlwytho'r ffeil.
Gall CDNs gynnig mantais perfformiad trwy leihau amser llwyth, oherwydd eu bod yn cynnal jQuery ar weinyddion lluosog ledled y byd, a phan fydd defnyddiwr yn gofyn am y ffeil, bydd yn cael ei weini o'r gweinydd agosaf.
Mantais hyn hefyd yw, os yw eich ymwelydd tudalen we eisoes wedi lawrlwytho copi o jQuery o'r un CDN wrth ymweld â gwefannau eraill, ni fydd yn rhaid iddynt ei lawrlwytho eto gan ei fod eisoes yn storfa eu porwr.
Yn yr achos hwn bydd yn rhaid i chi ysgrifennu:
<script src =" https://code.jquery.com/jquery-3.6.3.min.js "> </script>Yn ogystal â'r CDN a ddarperir gan y prosiect jquery, gallwch gynnwys jQuery trwy google e microsoft cdn.
Ar ôl gweld nodau'r llyfrgell jQuery a sut i'w chynnwys yn eich dogfen, nawr yw'r amser i roi jQuery ar waith.
Nawr, gadewch i ni wneud llawdriniaeth jQuery syml trwy newid lliw testun y pennawd o'r lliw cyndefilliw du i wyrdd.
<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>Yn y cod fe wnaethom gyflawni gweithrediad jQuery syml trwy newid lliw y pennawd h.y. yr elfen defnyddio dewisydd elfen jQuery a dull css() pan fydd y ddogfen yn barod, a elwir yn ddigwyddiad parod dogfen.
Mae datganiad jQuery fel arfer yn dechrau gydag arwydd doler ( $) ac yn gorffen gyda hanner colon ( ;).
Yn jQuery, arwydd y ddoler ( $) yn ddim ond alias ar gyfer jQuery. Ystyriwch y cod sampl canlynol sy'n dangos y datganiad jQuery symlaf.
<script>
$(document).ready(function(){
alert("Hello I'm a JQuery sign");
});
</script>Mae'r enghraifft yn dangos neges rhybudd "Hello I'm a JQuery sign” i'r defnyddiwr. Gadewch i ni weld rhai nodweddion:
<script>: Llyfrgell JavaScript yn unig yw jQuery, gellir gosod cod jQuery y tu mewn i'r elfen <script>, neu gallwch ei roi mewn ffeil JavaScript allanol;$(document).ready(handler); yn cael ei adnabod fel digwyddiad parod. Ble mae e handler mae'n swyddogaeth sy'n cael ei throsglwyddo i'r dull i'w gweithredu, cyn gynted ag y bydd y ddogfen yn barod, h.y. pan fydd hierarchaeth DOM wedi'i hadeiladu'n llwyr.Y dull jQuery ready() fe'i defnyddir fel arfer gyda swyddogaeth ddienw. Felly, gellir ysgrifennu'r enghraifft uchod hefyd mewn nodiant llaw-fer fel hyn:
<script>
$(function(){
alert("Hello I'm a JQuery sign");
});
</script>Y tu mewn i swyddogaeth gallwch ysgrifennu datganiadau jQuery i gyflawni unrhyw weithred gan ddilyn cystrawen sylfaenol, fel:
$(selector).action();Ble mae o, $(selector) yn y bôn mae'n dewis yr elfennau HTML o'r goeden DOM fel y gellir ei drin a action() cymhwyso rhai gweithredoedd ar yr elfennau a ddewiswyd, megis newid gwerth yr eiddo CSS, neu osod cynnwys yr elfen, ac ati.
Nawr, gadewch i ni edrych ar enghraifft arall sy'n gosod testun paragraff:
<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>Mae'r enghraifft jQuery yn cyfeirio at y detholwr p, ac mae hwn yn dewis yr holl baragraffau, yna'r dull text() gosod cynnwys testun y paragraff gyda “Hello World!".
Mae testun y paragraff yn yr enghraifft flaenorol yn cael ei ddisodli'n awtomatig pan fydd y ddogfen yn barod. Ond gadewch i ni weld sut i wneud hynny rhag ofn eich bod am gyflawni gweithred cyn rhedeg y cod jQuery, i ddisodli testun y paragraff.
Gadewch i ni ystyried un enghraifft olaf:
<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>Yn yr enghraifft hon mae testun y paragraff yn cael ei ddisodli dim ond pan fydd digwyddiad clicio yn digwydd ar y botwm "Replace Text“, sy'n golygu'n syml pan fydd defnyddiwr yn clicio ar y botwm hwn.
Gallwch ddefnyddio'r dewisydd ID i ddewis un eitem gyda'r ID unigryw ar y dudalen.
Er enghraifft, bydd y cod jQuery canlynol yn dewis ac yn amlygu elfen gyda'r priodoledd ID id="markid", pan fydd y ddogfen yn barod.
<script>
$(document).ready(function(){
// Highlight element with id markid
$("#markid").css("background", "grey");
});
</script>Gellir defnyddio'r dewisydd dosbarth i ddewis elfennau gyda dosbarth penodol.
Er enghraifft, bydd y cod jQuery canlynol yn dewis ac yn amlygu elfennau gyda phriodoledd y dosbarth class="markclass", pan fydd y ddogfen yn barod.
<script>
$(document).ready(function(){
// Highlight elements with class markclass
$(".markclass").css("background", "grey");
});
</script>Gellir defnyddio'r dewisydd eitem i ddewis eitemau yn ôl enw'r eitem.
Er enghraifft, bydd y cod jQuery canlynol yn dewis ac yn amlygu'r holl baragraffau, h.y. yr elfennau "<p>" o’r ddogfen pan fydd yn barod.
<script>
$(document).ready(function(){
// Highlight paragraph elements
$("p").css("background", "grey");
});
</script>Gallwch ddefnyddio'r dewisydd priodoledd i ddewis elfen yn seiliedig ar un o'i briodoleddau HTML, megis priodoledd cyswllt targetneu briodoledd mewnbwn type, ac ati.
Er enghraifft, bydd y cod jQuery canlynol yn dewis ac yn amlygu pob mewnbwn testun, megis elfennau "<input>" gyda type="text", pan fydd y ddogfen yn barod.
<script>
$(document).ready(function(){
// Highlight paragraph elements
$('input[type="text"]').css("background", "grey");
});
</script>Gallwch hefyd gyfuno dewiswyr CSS i wneud eich dewis hyd yn oed yn fwy manwl gywir.
Er enghraifft, gallwch gyfuno'r dewisydd dosbarth gyda dewisydd elfen i ddod o hyd i elfennau mewn dogfen sydd â math a dosbarth penodol.
<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>Yn ogystal â'r detholwyr definiti, mae jQuery yn darparu ei ddetholydd personol ei hun i wella ymhellach y gallu i ddewis elfennau ar dudalen.
<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>Mae digwyddiadau yn aml yn cael eu sbarduno gan ryngweithio defnyddwyr â'r dudalen we, megis wrth glicio ar ddolen neu fotwm, rhoi testun i mewn i flwch mewnbwn neu faes testun, gwnewch ddetholiad mewn blwch dewis, gwasgwch allwedd ar y bysellfwrdd, symudwch bwyntydd y llygoden , etc. Mewn rhai achosion, gall y porwr ei hun sbarduno digwyddiadau, megis llwytho tudalen a digwyddiadau lawrlwytho.
Mae jQuery yn gwella'r mecanweithiau trin digwyddiadau sylfaenol trwy gynnig dulliau digwyddiad ar gyfer y rhan fwyaf o ddigwyddiadau porwr brodorol, mae rhai o'r dulliau hyn yn ready(), click(), keypress(), focus(), blur(), change(), ac ati.
<script>
$(document).ready(function(){
// Code to be executed
alert("Hello World!");
});
</script>Yn gyffredinol, gellir dosbarthu digwyddiadau yn bedwar prif grŵp:
Mae digwyddiad llygoden yn cael ei sbarduno pan fydd y defnyddiwr yn clicio ar eitem, yn symud pwyntydd y llygoden, ac ati.
Dyma rai dulliau jQuery a ddefnyddir yn gyffredin i drin digwyddiadau llygoden.
click()Y dull click() atodwch swyddogaeth triniwr digwyddiad i'r elfennau a ddewiswyd ar gyfer y digwyddiad "click“. Mae'r swyddogaeth gysylltiedig yn gweithredu pan fydd y defnyddiwr yn clicio ar yr eitem honno. Bydd yr enghraifft ganlynol yn cuddio'r elfennau <p> ar dudalen wrth glicio.
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).slideUp();
});
});
</script>dblclick()Y dull dblclick() atodwch swyddogaeth triniwr digwyddiad i'r elfennau a ddewiswyd ar gyfer y digwyddiad "dblclick“. Mae'r swyddogaeth gysylltiedig yn gweithredu pan fydd y defnyddiwr yn clicio ddwywaith ar yr eitem honno. Bydd yr enghraifft ganlynol yn cuddio'r elfennau <p> pan fyddwch chi'n clicio ddwywaith arnyn nhw.
<script>
$(document).ready(function(){
$("p").dblclick(function(){
$(this).slideUp();
});
});
</script>hover()Y dull hover() atodwch un neu ddau o swyddogaethau trin digwyddiad i elfennau dethol sy'n gweithredu pan fydd pwyntydd y llygoden yn symud i mewn ac allan o elfennau. Mae'r swyddogaeth gyntaf yn rhedeg pan fydd y defnyddiwr yn gosod pwyntydd y llygoden dros eitem, tra bod yr ail swyddogaeth yn rhedeg pan fydd y defnyddiwr yn tynnu pwyntydd y llygoden o'r eitem honno.
Bydd yr enghraifft ganlynol yn amlygu eitemau <p> pan fyddwch chi'n gosod y cyrchwr arno, bydd yr uchafbwynt yn cael ei dynnu pan fyddwch chi'n tynnu'r cyrchwr.
<script>
$(document).ready(function(){
$("p").hover(function(){
$(this).addClass("highlight");
}, function(){
$(this).removeClass("highlight");
});
});
</script>mouseenter()Y dull mouseenter() atodwch swyddogaeth triniwr digwyddiad i'r elfennau dethol a weithredir pan fydd y llygoden yn mynd i mewn i elfen. Bydd yr enghraifft ganlynol yn ychwanegu aroleuo dosbarth at yr elfen <p> pan fyddwch chi'n gosod y cyrchwr drosto.
<script>
$(document).ready(function(){
$("p").mouseenter(function(){
$(this).addClass("highlight");
});
});
</script>mouseleave()Y dull mouseleave() atodi swyddogaeth trin digwyddiad i eitemau dethol sy'n rhedeg pan fydd y llygoden yn gadael eitem. Bydd yr enghraifft ganlynol yn tynnu uchafbwynt y dosbarth o'r elfen <p> pan fyddwch chi'n tynnu'r cyrchwr ohono.
<script>
$(document).ready(function(){
$("p").mouseleave(function(){
$(this).removeClass("highlight");
});
});
</script>Codir digwyddiad bysellfwrdd pan fydd y defnyddiwr yn pwyso neu'n rhyddhau allwedd ar y bysellfwrdd. Gadewch i ni edrych ar rai dulliau jQuery a ddefnyddir yn gyffredin i drin digwyddiadau bysellfwrdd.
keypress()Y dull keypress() yn atodi swyddogaeth trin digwyddiadau i elfennau dethol (rheolyddion ffurf yn nodweddiadol) sy'n rhedeg pan fydd y porwr yn derbyn mewnbwn bysellfwrdd gan y defnyddiwr. Bydd yr enghraifft ganlynol yn dangos neges pan fydd y digwyddiad yn cael ei sbarduno keypress a sawl gwaith y caiff ei sbarduno pan fyddwch chi'n pwyso'r allwedd ar eich bysellfwrdd.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keypress(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>Mae'r digwyddiad pwyswch bysell yn debyg i'r digwyddiad bysellfyrddio, ac eithrio'r newidydd hwnnw a bysellau nad ydynt yn argraffu fel Shift, Esc, Backspace neu Delete, bysellau saeth, ac ati. maent yn tanio digwyddiadau bysellfyrddau ond nid digwyddiadau bysellwasg.
keydown()Y dull keydown() yn atodi swyddogaeth trin digwyddiad i eitemau dethol (rheolyddion ffurf yn nodweddiadol) a weithredir pan fydd y defnyddiwr yn pwyso allwedd ar y bysellfwrdd am y tro cyntaf. Bydd yr enghraifft ganlynol yn dangos neges pan fydd y digwyddiad yn cael ei sbarduno keydown a sawl gwaith y caiff ei sbarduno pan fyddwch chi'n pwyso'r allwedd ar eich bysellfwrdd.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keydown(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>keyup()Y dull keyup() atodi swyddogaeth trin digwyddiad i elfennau dethol (rheolyddion ffurf yn nodweddiadol) a weithredir pan fydd y defnyddiwr yn rhyddhau allwedd ar y bysellfwrdd. Bydd yr enghraifft ganlynol yn dangos neges pan fydd y digwyddiad yn cael ei sbarduno keyup a sawl gwaith y caiff ei sbarduno pan fyddwch yn pwyso a rhyddhau allwedd ar eich bysellfwrdd.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keyup(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>Mae digwyddiad ffurf yn cael ei sbarduno pan fydd rheolydd ffurflen yn derbyn neu'n colli ffocws, neu pan fydd y defnyddiwr yn newid gwerth rheoli ffurf, megis teipio testun i fewnbwn testun, dewis opsiwn mewn blwch dethol, ac ati. Dyma rai dulliau jQuery a ddefnyddir yn gyffredin i drin digwyddiadau ffurf.
change()Y dull change() atodwch swyddogaeth triniwr digwyddiad i elfennau <input> ac fe'i gweithredir pan fydd ei werth yn newid. Bydd yr enghraifft ganlynol yn dangos neges rhybudd wrth ddewis opsiwn yn y blwch dewis cwymplen.
<script>
$(document).ready(function(){
$("select").change(function(){
var selectedOption = $(this).find(":selected").val();
alert("You have selected - " + selectedOption);
});
});
</script>Ar gyfer blychau clicio, blychau gwirio, a botymau radio, mae'r digwyddiad yn tanio ar unwaith pan fydd y defnyddiwr yn gwneud dewis llygoden, ond ar gyfer mewnbwn testun a maes testun mae'r digwyddiad yn tanio ar ôl i'r elfen golli ffocws.
focus()Y dull focus() yn cysylltu swyddogaeth triniwr digwyddiad ag elfennau dethol (yn nodweddiadol yn rheoli ac yn ffurfio rhwymiadau) sy'n gweithredu pan fydd yn cael ffocws. Bydd yr enghraifft ganlynol yn dangos neges pan fydd mewnbwn testun yn derbyn ffocws.
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>blur()Y dull blur() atodi swyddogaeth trin digwyddiad i ffurfio elfennau megis <input>, <textarea>, <select> sy'n cael ei weithredu pan fydd yn colli ffocws. Bydd yr enghraifft ganlynol yn dangos neges pan fydd y mewnbwn testun yn colli ffocws.
<script>
$(document).ready(function(){
$("input").blur(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>submit()Y dull submit() atodwch swyddogaeth triniwr digwyddiad i elfennau <form> sy'n rhedeg pan fydd y defnyddiwr yn ceisio cyflwyno ffurflen. Bydd yr enghraifft ganlynol yn dangos neges yn seiliedig ar y gwerth a roddwyd wrth geisio cyflwyno'r ffurflen.
<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>Mae'r digwyddiadau hefyd yn cael eu tanio mewn sefyllfa lle mae'r dudalen DOM (Model Gwrthrych Dogfen) yn barod neu pan fydd y defnyddiwr yn newid maint neu'n sgrolio ffenestr y porwr, ac ati. Dyma rai dulliau jQuery a ddefnyddir yn gyffredin i drin y math hwn o ddigwyddiad.
ready()Y dull ready() yn pennu swyddogaeth i'w gweithredu pan fydd y DOM wedi'i lwytho'n llawn.
Bydd yr enghraifft ganlynol yn disodli testun paragraff cyn gynted ag y bydd hierarchaeth DOM wedi'i hadeiladu'n llawn ac yn barod i'w thrin.
<script>
$(document).ready(function(){
$("p").text("The DOM is now loaded and can be manipulated.");
});
</script>resize()Y dull resize() atodwch swyddogaeth triniwr digwyddiad i'r elfen ffenestr sy'n rhedeg pan fydd maint ffenestr y porwr yn newid.
Bydd yr enghraifft ganlynol yn dangos lled ac uchder presennol ffenestr y porwr pan geisiwch ei newid maint trwy lusgo ei gorneli.
<script>
$(document).ready(function(){
$(window).resize(function() {
$(window).bind("resize", function(){
$("p").text("Window width: " + $(window).width() + ", " + "Window height: " + $(window).height());
});
});
});
</script>scroll()Y dull scroll() atodwch swyddogaeth triniwr digwyddiad i'r ffenestr neu i'r iframe ac eitemau sgroladwy sy'n rhedeg pryd bynnag y bydd safle sgrolio'r eitem yn newid.
Bydd yr enghraifft ganlynol yn dangos neges wrth sgrolio ffenestr y porwr.
<script>
$(document).ready(function(){
$(window).scroll(function() {
$("p").show().fadeOut("slow");
});
});
</script>Ercole Palmeri
.
Mae CMA y DU wedi cyhoeddi rhybudd am ymddygiad Big Tech yn y farchnad deallusrwydd artiffisial. Yno…
Mae'r Archddyfarniad "Achos Gwyrdd", a luniwyd gan yr Undeb Ewropeaidd i wella effeithlonrwydd ynni adeiladau, wedi dod â'i broses ddeddfwriaethol i ben gyda…
Cyflwynwyd adroddiad blynyddol Casaleggio Associati ar E-fasnach yn yr Eidal. Adroddiad o'r enw “AI-Fasnach: ffiniau E-fasnach gyda Deallusrwydd Artiffisial”.…
Canlyniad arloesi technolegol cyson ac ymrwymiad i'r amgylchedd a lles pobl. Bandalux yn cyflwyno Airpure®, pabell…