It meitsjen fan in Ajax-basearre applikaasje wurdt heul ienfâldich en fluch mei jQuery.
jQuery waard oarspronklik makke troch John Resig yn it begjin fan 2006. De jQuery projekt wurdt op it stuit ûnderhâlden en ûnderhâlden troch in ferspraat groep fan ûntwikkelders as in iepen boarne projekt.
Jo kinne besparje in soad tiid en muoite mei jQuery. Sa foegje dizze side ta oan jo favoriten en trochgean mei lêzen
D'r binne folle mear dingen dy't jo dwaan kinne mei jQuery.
De list einiget net dêr, der binne in protte oare cool dingen kinne jo dwaan mei jQuery.
D'r binne ferskate foardielen wêrom't men moat kieze foar it brûken fan jQuery:
Om te begjinnen, litte wy earst in kopy fan jQuery downloade en it dan opnimme yn ús projekt. Twa ferzjes fan jQuery binne beskikber foar download: hastich e net komprimearre .
De net-komprimearre triem is better geskikt foar ûntwikkeling of debuggen; wylst, de minified en komprimearre triem wurdt oanrikkemandearre foar produksje omdat it besparret bânbreedte en ferbetteret prestaasjes fanwege de lytsere triem grutte.
Wy kinne jQuery downloade fan hjir: https://jquery.com/download/
As jo ienris it jQuery-bestân downloade, kinne jo sjen dat it in js-útwreiding hat, dat wol sizze dat it in JavaScript-bestân is. Yn feite is JQuery neat oars as in JavaScript-bibleteek, dus jo kinne it jQuery-bestân opnimme yn it HTML-dokumint mei it elemint krekt as jo gewoane JavaScript-bestannen opnimme.
<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>Unthâld dat jo it jQuery-bestân altyd opnimme foardat oanpaste skripts; oars, de jQuery APIs sille net beskikber as jo jQuery koade besiket tagong ta harren.
Lykas jo miskien hawwe opfallen, hawwe wy it attribút yn it foarige foarbyld oerslein type="text/javascript" binnen de tag . Infatti questo non è richiesto in HTML5. JavaScript è il linguaggio di scripting predefiklear yn HTML5 en yn alle moderne browsers.
As alternatyf, kinne jo ynbêde jQuery yn jo dokumint fia frij beskikber CDN (Content Delivery Network) keppelings, as jo leaver foarkomme it ynladen fan it bestân.
CDNs kinne biede in prestaasje foardiel troch it ferminderjen fan load tiid, omdat se host jQuery op meardere tsjinners om 'e wrâld, en as in brûker freget de triem, it sil wurde betsjinne út de tichtstby tsjinner.
Dit hat ek it foardiel dat as jo webside-besiker al in kopy fan jQuery fan deselde CDN hat ynladen wylst se oare siden besykje, se hoege it net opnij te downloaden, om't it al yn 'e cache fan har blêder is.
Yn dit gefal moatte jo skriuwe:
<script src =" https://code.jquery.com/jquery-3.6.3.min.js "> </script>Neist de CDN fersoarge troch de jquery projekt, kinne jo opnimme jQuery fia Google e Microsoft cdn.
Nei't jo de doelen fan 'e jQuery-biblioteek sjoen hawwe en hoe't jo it yn jo dokumint opnimme kinne, is it no de tiid om jQuery yn 'e praktyk te bringen.
Litte wy no in ienfâldige jQuery-operaasje dwaan troch de koptekstkleur te feroarjen fan 'e foarkleurdefinished swart oant griene kleur.
<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 'e koade hawwe wy in ienfâldige jQuery-operaasje útfierd troch de kleur fan' e koptekst te feroarjen, dat wol sizze it elemint mei help fan it jQuery elemint syn selector en css () metoade as it dokumint is klear, bekend as it dokumint klear evenemint.
In jQuery statement begjint normaal mei in dollarteken ( $) en einiget mei in puntkomma ( ;).
Yn jQuery is it dollarteken ( $) is gewoan in alias foar jQuery. Beskôgje de folgjende foarbyldkoade dy't de ienfâldichste jQuery-ferklearring demonstrearret.
<script>
$(document).ready(function(){
alert("Hello I'm a JQuery sign");
});
</script>It foarbyld toant gewoan in warskôgingsberjocht "Hello I'm a JQuery sign" oan de brûker. Litte wy wat funksjes sjen:
<script>: jQuery is gewoan in JavaScript-bibleteek, jQuery-koade kin binnen it elemint pleatst wurde <script>, of jo kinne it yn in eksterne JavaScript-bestân pleatse;$(document).ready(handler); stiet bekend as in klear evenemint. Wêr is it handler it is in funksje dy't trochjûn wurdt oan 'e metoade dy't moat wurde útfierd, sa gau as it dokumint klear is, dus as de DOM-hierarchy folslein boud is.De jQuery metoade ready() it wurdt normaal brûkt mei in anonime funksje. Dat, it foarbyld hjirboppe kin ek skreaun wurde yn koarte notaasje lykas dit:
<script>
$(function(){
alert("Hello I'm a JQuery sign");
});
</script>Binnen in funksje kinne jo jQuery-útspraken skriuwe om elke aksje út te fieren nei basissyntaksis, lykas:
$(selector).action();Wêr is it, $(selector) it selekteart yn prinsipe de HTML-eleminten fan 'e DOM-beam sadat it kin wurde manipulearre en action() tapasse guon aksjes op de selekteare eleminten, lykas it feroarjen fan de wearde fan it CSS-eigendom, of it ynstellen fan de ynhâld fan it elemint, ensfh.
Litte wy no nei in oar foarbyld sjen dat paragraaftekst ynsteld:
<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>It jQuery-foarbyld ferwiist nei de selector p, en dit selektearret alle paragrafen, dan de metoade text() set de tekstynhâld fan 'e paragraaf mei "Hello World!".
De paragraaftekst yn it foarige foarbyld wurdt automatysk ferfongen as it dokumint klear is. Mar litte wy sjen hoe't jo it dwaan as jo in aksje wolle útfiere foardat jo de jQuery-koade útfiere, om de tekst fan 'e paragraaf te ferfangen.
Litte wy ien lêste foarbyld beskôgje:
<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 dit foarbyld wurdt de alineatekst allinich ferfongen as in klikbarren op de knop "Replace Text", wat gewoan betsjut as in brûker op dizze knop klikt.
Jo kinne de ID-selektor brûke om ien item te selektearjen mei de unike ID op 'e side.
Bygelyks, de folgjende jQuery koade sil selektearje en markearje in elemint mei de ID attribút id="markid", as it dokumint klear is.
<script>
$(document).ready(function(){
// Highlight element with id markid
$("#markid").css("background", "grey");
});
</script>De klasseselektor kin brûkt wurde om eleminten te selektearjen mei in spesifike klasse.
Bygelyks, de folgjende jQuery koade sil selektearje en markearje eleminten mei de klasse attribút class="markclass", as it dokumint klear is.
<script>
$(document).ready(function(){
// Highlight elements with class markclass
$(".markclass").css("background", "grey");
});
</script>De itemselektor kin brûkt wurde om items op itemnamme te selektearjen.
Bygelyks, de folgjende jQuery-koade sil alle paragraaf selektearje en markearje, dus de eleminten "<p>" fan it dokumint as it klear is.
<script>
$(document).ready(function(){
// Highlight paragraph elements
$("p").css("background", "grey");
});
</script>Jo kinne de attribútselektor brûke om in elemint te selektearjen op basis fan ien fan syn HTML-attributen, lykas in keppeling attribút targetof it attribút fan in ynfier type, ensfh.
Bygelyks, de folgjende jQuery-koade sil alle tekstynfier selektearje en markearje, lykas eleminten "<input>" mei type="text", as it dokumint klear is.
<script>
$(document).ready(function(){
// Highlight paragraph elements
$('input[type="text"]').css("background", "grey");
});
</script>Jo kinne ek CSS-selektors kombinearje om jo seleksje noch krekter te meitsjen.
Jo kinne bygelyks de klasseselektor kombinearje mei in elemintselektor om eleminten yn in dokumint te finen dy't in bepaald type en klasse hawwe.
<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>Neist de seleksjes definiti, jQuery jout syn eigen oanpaste selector foar in fierder ferbetterjen fan de mooglikheden fan in selektearje eleminten op in side.
<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>Gebeurtenissen wurde faak ynskeakele troch brûkersynteraksje mei de webside, lykas by it klikken op in keppeling of knop, it ynfieren fan tekst yn in ynfierfak of tekstgebiet, in seleksje meitsje yn in seleksjefak, in toets op it toetseboerd drukke, de mûsoanwizer ferpleatse , ensfh. Yn guon gefallen kin de browser sels eveneminten triggerje, lykas sideladen en downloadeveneminten.
jQuery ferbettert de basismeganismen foar ôfhanneljen fan eveneminten troch evenemintmetoaden oan te bieden foar de measte native browser-eveneminten, guon fan dizze metoaden binne ready(), click(), keypress(), focus(), blur(), change(), ensfh.
<script>
$(document).ready(function(){
// Code to be executed
alert("Hello World!");
});
</script>Yn 't algemien kinne eveneminten wurde yndield yn fjouwer haadgroepen:
In mûsevenemint wurdt aktivearre as de brûker op in item klikt, de mûsoanwizer ferpleatst, ensfh.
Hjir binne wat gewoan brûkte jQuery-metoaden om mûseveneminten te behanneljen.
click()De metoade click() heakje in evenemintehannelerfunksje ta oan de selektearre eleminten foar it evenemint "click“. De keppele funksje wurdt útfierd as de brûker op dat item klikt. It folgjende foarbyld sil de eleminten ferbergje <p> op in side as jo klikke.
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).slideUp();
});
});
</script>dblclick()De metoade dblclick() heakje in evenemintehannelerfunksje ta oan de selektearre eleminten foar it evenemint "dblclick“. De keppele funksje wurdt útfierd as de brûker op dat item dûbelklikt. It folgjende foarbyld sil de eleminten ferbergje <p> as jo dûbelklikke op se.
<script>
$(document).ready(function(){
$("p").dblclick(function(){
$(this).slideUp();
});
});
</script>hover()De metoade hover() hechtsje ien of twa evenemint handler funksjes oan selektearre eleminten dy't útfiere as de mûsoanwizer beweecht yn en út eleminten. De earste funksje rint as de brûker de mûsoanwizer oer in item pleatst, wylst de twadde funksje rint as de brûker de mûsoanwizer fan dat item ferwideret.
It folgjende foarbyld sil items markearje <p> as jo de rinnerke derop pleatse, sil de hichtepunt fuortsmiten wurde as jo it rinnerke fuortsmite.
<script>
$(document).ready(function(){
$("p").hover(function(){
$(this).addClass("highlight");
}, function(){
$(this).removeClass("highlight");
});
});
</script>mouseenter()De metoade mouseenter() hechtsje in evenemint handler funksje oan de selektearre eleminten dy't wurdt útfierd as de mûs komt in elemint. It folgjende foarbyld sil klasse markearring tafoegje oan it elemint <p> as jo de rinnerke derop pleatse.
<script>
$(document).ready(function(){
$("p").mouseenter(function(){
$(this).addClass("highlight");
});
});
</script>mouseleave()De metoade mouseleave() hechtsje in evenemint handler funksje oan selektearre items dy't rint as de mûs ferlit in item. It folgjende foarbyld sil it klassehichtepunt fan it elemint fuortsmite <p> as jo de rinnerke derút fuortsmite.
<script>
$(document).ready(function(){
$("p").mouseleave(function(){
$(this).removeClass("highlight");
});
});
</script>In toetseboerdevenemint wurdt opheft as de brûker in toets op it toetseboerd yndrukt of loslitte. Litte wy nei guon faak brûkte jQuery-metoaden sjen om toetseboerdeveneminten te behanneljen.
keypress()De metoade keypress() hechtet in evenemint-ôfhanneling funksje oan selektearre eleminten (typysk foarm kontrôles) dat rint as de blêder ûntfangt toetseboerdynput fan de brûker. It folgjende foarbyld sil in berjocht werjaan as it evenemint wurdt trigger keypress en hoefolle kearen it wurdt aktivearre as jo op de toets op jo toetseboerd drukke.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keypress(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>It keypress-evenemint is fergelykber mei it keydown-evenemint, útsein dat modifikaasjetoetsen en net-printende toetsen lykas Shift, Esc, Backspace of Delete, pylktoetsen, ensfh. se fjoer keydown eveneminten mar net keypress events.
keydown()De metoade keydown() hechtet in evenemint-ôfhanneling funksje oan selektearre items (typysk foarm kontrôles) dat wurdt útfierd as de brûker earst op in toets op it toetseboerd. It folgjende foarbyld sil in berjocht werjaan as it evenemint wurdt trigger keydown en hoefolle kearen it wurdt aktivearre as jo op de toets op jo toetseboerd drukke.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keydown(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>keyup()De metoade keyup() hechtsje in evenemint-ôfhanneling funksje oan selektearre eleminten (typysk foarm kontrôles) dat wurdt útfierd as de brûker releases in kaai op it toetseboerd. It folgjende foarbyld sil in berjocht werjaan as it evenemint wurdt trigger keyup en hoefolle kearen it wurdt aktivearre as jo in toets op jo toetseboerd drukke en loslitte.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keyup(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>In formulier evenemint wurdt aktivearre as in formulier kontrôle ûntfangt of ferliest fokus, of as de brûker feroaret in foarm kontrôle wearde, lykas it typen fan tekst yn in tekst ynfier, selektearje in opsje yn in selektearje fak, ensfh. Hjir binne wat gewoan brûkte jQuery-metoaden om formuliereveneminten te behanneljen.
change()De metoade change() hechtsje in evenemint handler funksje oan eleminten <input> en wurdt útfierd as syn wearde feroaret. It folgjende foarbyld sil in warskôgingsberjocht werjaan as jo in opsje selektearje yn it útklapmenu seleksjefakje.
<script>
$(document).ready(function(){
$("select").change(function(){
var selectedOption = $(this).find(":selected").val();
alert("You have selected - " + selectedOption);
});
});
</script>Foar klikfakjes, karfakjes en radioknoppen, fjoer it evenemint fuortendaliks as de brûker in mûs seleksje makket, mar foar tekstynfier en tekstgebiet wurdt it barren fjoer nei't it elemint fokus ferliest.
focus()De metoade focus() hechtet in evenemint handler funksje oan selektearre eleminten (typysk kontrôles en foarm bindingen) dat útfiert as it krijt fokus. It folgjende foarbyld sil in berjocht werjaan as tekstynfier fokus krijt.
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>blur()De metoade blur() hechtsje in evenemint handler funksje te foarmjen eleminten lykas <input>, <textarea>, <select> dat wurdt útfierd as it ferliest fokus. It folgjende foarbyld sil in berjocht werjaan as de tekstynfier fokus ferliest.
<script>
$(document).ready(function(){
$("input").blur(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>submit()De metoade submit() hechtsje in evenemint handler funksje oan eleminten <form> dy't rint as de brûker besiket in formulier yn te tsjinjen. It folgjende foarbyld sil in berjocht werjaan op basis fan 'e wearde ynfierd by it besykjen om it formulier yn te tsjinjen.
<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>De eveneminten wurde ek ûntslein yn in situaasje wêryn de DOM (Document Object Model) side klear is of as de brûker it blêderfinster feroaret of rôlet, ensfh. Hjir binne wat gewoan brûkte jQuery-metoaden om dit soarte fan evenemint te behanneljen.
ready()De metoade ready() spesifisearret in funksje om út te fieren as de DOM folslein laden is.
It folgjende foarbyld sil alineatekst ferfange sa gau as de DOM-hierarchy folslein boud is en klear is om te manipulearjen.
<script>
$(document).ready(function(){
$("p").text("The DOM is now loaded and can be manipulated.");
});
</script>resize()De metoade resize() hechtsje in evenemint handler funksje oan it finster elemint dat rint as de grutte fan it blêder finster feroaret.
It folgjende foarbyld sil de aktuele breedte en hichte fan it browserfinster sjen litte as jo besykje it grutte te feroarjen troch de hoeken te slepen.
<script>
$(document).ready(function(){
$(window).resize(function() {
$(window).bind("resize", function(){
$("p").text("Window width: " + $(window).width() + ", " + "Window height: " + $(window).height());
});
});
});
</script>scroll()De metoade scroll() hechtsje in evenemint handler funksje oan it finster of oan de iframe en scrollbere items dy't rinne as de rôlposysje fan it item feroaret.
It folgjende foarbyld sil in berjocht werjaan by it rôljen fan it browserfinster.
<script>
$(document).ready(function(){
$(window).scroll(function() {
$("p").show().fadeOut("slow");
});
});
</script>Ercole Palmeri
.
Coveware troch Veeam sil trochgean mei it leverjen fan antwurdtsjinsten foar cyberafpersing ynsidint. Coveware sil forensyske en sanearjen mooglikheden oanbiede ...
Foarsizzend ûnderhâld revolúsjonearret de oalje- en gassektor, mei in ynnovative en proaktive oanpak foar plantbehear.…
De UK CMA hat in warskôging útjûn oer it gedrach fan Big Tech yn 'e merk foar keunstmjittige yntelliginsje. Dêr…
It Beslút "Case Green", formulearre troch de Jeropeeske Uny om de enerzjy-effisjinsje fan gebouwen te ferbetterjen, hat syn wetjouwingsproses ôfsletten mei ...