Å lage en Ajax-basert applikasjon blir veldig enkelt og raskt med jQuery.
jQuery ble opprinnelig opprettet av John Resig tidlig i 2006. jQuery-prosjektet vedlikeholdes og vedlikeholdes for tiden av en distribuert gruppe utviklere som et åpen kildekode-prosjekt.
Du kan spare mye tid og krefter med jQuery. Så legg til denne siden til dine favoritter og fortsett å lese
Det er mange flere ting du kan gjøre med jQuery.
Listen slutter ikke der, det er mange andre kule ting du kan gjøre med jQuery.
Det er flere fordeler hvorfor man bør velge å bruke jQuery:
For å komme i gang, la oss først laste ned en kopi av jQuery og deretter inkludere den i prosjektet vårt. To versjoner av jQuery er tilgjengelig for nedlasting: tablett e ikke komprimert .
Den ukomprimerte filen er bedre egnet for utvikling eller feilsøking; mens den forminskede og komprimerte filen anbefales for produksjon fordi den sparer båndbredde og forbedrer ytelsen på grunn av den mindre filstørrelsen.
Vi kan laste ned jQuery herfra: https://jquery.com/download/
Når du laster ned jQuery-filen, kan du se at den har en js-utvidelse, det vil si at det er en JavaScript-fil. Faktisk er JQuery ikke annet enn et JavaScript-bibliotek, så du kan inkludere jQuery-filen i HTML-dokumentet med elementet akkurat som du inkluderer vanlige JavaScript-filer.
<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>Husk å alltid inkludere jQuery-filen før tilpassede skript; ellers vil ikke jQuery API-ene være tilgjengelige når jQuery-koden din prøver å få tilgang til dem.
Som du kanskje har lagt merke til, hoppet vi over attributtet i forrige eksempel type="text/javascript" inne i taggen . Infatti questo non è richiesto in HTML5. JavaScript è il linguaggio di scripting predefiferdig i HTML5 og i alle moderne nettlesere.
Som et alternativ kan du legge inn jQuery i dokumentet ditt via fritt tilgjengelige CDN-koblinger (Content Delivery Network), hvis du heller vil unngå å laste ned filen.
CDN-er kan tilby en ytelsesfordel ved å redusere lastetiden, fordi de er vert for jQuery på flere servere rundt om i verden, og når en bruker ber om filen, vil den bli servert fra den nærmeste serveren.
Dette har også fordelen at hvis besøkende på nettsiden allerede har lastet ned en kopi av jQuery fra samme CDN mens de besøkte andre nettsteder, trenger de ikke å laste den ned igjen siden den allerede er i nettleserens buffer.
I dette tilfellet må du skrive:
<script src =" https://code.jquery.com/jquery-3.6.3.min.js "> </script>I tillegg til CDN levert av jquery-prosjektet, kan du inkludere jQuery via Google e Microsoft cdn.
Etter å ha sett målene for jQuery-biblioteket og hvordan du inkluderer det i dokumentet ditt, er det nå på tide å sette jQuery ut i livet.
La oss nå gjøre en enkel jQuery-operasjon ved å endre topptekstfargen fra pre-fargendefisvart til grønn farge.
<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>I koden utførte vi en enkel jQuery-operasjon ved å endre fargen på overskriften, dvs. elementet ved å bruke jQuery-elementets velger- og css()-metode når dokumentet er klart, kjent som dokumentklar-hendelsen.
En jQuery-setning starter vanligvis med et dollartegn ( $) og slutter med semikolon ( ;).
I jQuery, dollartegnet ( $) er bare et alias for jQuery. Tenk på følgende eksempelkode som viser den enkleste jQuery-setningen.
<script>
$(document).ready(function(){
alert("Hello I'm a JQuery sign");
});
</script>Eksemplet viser ganske enkelt en advarsel "Hello I'm a JQuery sign" til brukeren. La oss se noen funksjoner:
<script>: jQuery er bare et JavaScript-bibliotek, jQuery-kode kan plasseres inne i elementet <script>, eller du kan legge den i en ekstern JavaScript-fil;$(document).ready(handler); er kjent som et klart arrangement. Hvor er det handler det er en funksjon som sendes til metoden som skal utføres, så snart dokumentet er klart, dvs. når DOM-hierarkiet er ferdig bygget.jQuery-metoden ready() den brukes vanligvis med en anonym funksjon. Så eksemplet ovenfor kan også skrives i stenografi som dette:
<script>
$(function(){
alert("Hello I'm a JQuery sign");
});
</script>Inne i en funksjon kan du skrive jQuery-setninger for å utføre enhver handling etter grunnleggende syntaks, som:
$(selector).action();Due, $(selector) det velger i utgangspunktet HTML-elementene fra DOM-treet slik at det kan manipuleres og action() bruk noen handlinger på de valgte elementene, for eksempel å endre verdien på CSS-egenskapen, eller angi innholdet i elementet, etc.
La oss nå se på et annet eksempel som setter avsnittstekst:
<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-eksemplet refererer til velgeren p, og dette velger alle avsnittene, deretter metoden text() angi tekstinnholdet i avsnittet med "Hello World!".
Avsnittsteksten i forrige eksempel erstattes automatisk når dokumentet er klart. Men la oss se hvordan du gjør det i tilfelle du vil utføre en handling før du kjører jQuery-koden, for å erstatte teksten i avsnittet.
La oss se på et siste eksempel:
<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>I dette eksemplet erstattes avsnittsteksten bare når en klikkhendelse oppstår på knappen "Replace Text", som ganske enkelt betyr når en bruker klikker på denne knappen.
Du kan bruke ID-velgeren til å velge et enkelt element med den unike ID-en på siden.
For eksempel vil følgende jQuery-kode velge og utheve et element med ID-attributtet id="markid", når dokumentet er klart.
<script>
$(document).ready(function(){
// Highlight element with id markid
$("#markid").css("background", "grey");
});
</script>Klassevelgeren kan brukes til å velge elementer med en spesifikk klasse.
For eksempel vil følgende jQuery-kode velge og utheve elementer med klasseattributtet class="markclass", når dokumentet er klart.
<script>
$(document).ready(function(){
// Highlight elements with class markclass
$(".markclass").css("background", "grey");
});
</script>Elementvelgeren kan brukes til å velge elementer etter elementnavn.
For eksempel vil følgende jQuery-kode velge og utheve alle avsnittet, dvs. elementene "<p>" av dokumentet når det er klart.
<script>
$(document).ready(function(){
// Highlight paragraph elements
$("p").css("background", "grey");
});
</script>Du kan bruke attributtvelgeren til å velge et element basert på et av dets HTML-attributter, for eksempel et lenkeattributt targeteller attributtet til en inngang type, etc.
For eksempel vil følgende jQuery-kode velge og utheve alle tekstinndata, for eksempel elementer "<input>" med type="text", når dokumentet er klart.
<script>
$(document).ready(function(){
// Highlight paragraph elements
$('input[type="text"]').css("background", "grey");
});
</script>Du kan også kombinere CSS-velgere for å gjøre valget ditt enda mer presist.
Du kan for eksempel kombinere klassevelgeren med en elementvelger for å finne elementer i et dokument som har en bestemt type og klasse.
<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>I tillegg til velgerne definiti, gir jQuery sin egen tilpassede velger for ytterligere å forbedre mulighetene for å velge elementer på en 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>Hendelser utløses ofte av brukerinteraksjon med nettsiden, for eksempel når du klikker på en lenke eller knapp, skriver inn tekst i en inntastingsboks eller tekstområde, gjør et valg i en valgboks, trykker på en tast på tastaturet, flytter musepekeren , etc. I noen tilfeller kan nettleseren selv utløse hendelser, for eksempel sideinnlasting og nedlastingshendelser.
jQuery forbedrer de grunnleggende hendelseshåndteringsmekanismene ved å tilby hendelsesmetoder for de fleste native nettleserhendelser, noen av disse metodene er ready(), click(), keypress(), focus(), blur(), change(), etc.
<script>
$(document).ready(function(){
// Code to be executed
alert("Hello World!");
});
</script>Generelt kan hendelser klassifiseres i fire hovedgrupper:
En musehendelse utløses når brukeren klikker på et element, flytter musepekeren osv.
Her er noen vanlige jQuery-metoder for å håndtere musehendelser.
click()Metoden click() legg til en hendelsesbehandlerfunksjon til de valgte elementene for hendelsen "click". Den koblede funksjonen kjøres når brukeren klikker på det elementet. Følgende eksempel vil skjule elementene <p> på en side når du klikker.
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).slideUp();
});
});
</script>dblclick()Metoden dblclick() legg til en hendelsesbehandlerfunksjon til de valgte elementene for hendelsen "dblclick". Den koblede funksjonen kjøres når brukeren dobbeltklikker på elementet. Følgende eksempel vil skjule elementene <p> når du dobbeltklikker dem.
<script>
$(document).ready(function(){
$("p").dblclick(function(){
$(this).slideUp();
});
});
</script>hover()Metoden hover() knytte en eller to hendelsesbehandlerfunksjoner til utvalgte elementer som kjøres når musepekeren beveger seg inn og ut av elementer. Den første funksjonen kjører når brukeren plasserer musepekeren over et element, mens den andre funksjonen kjøres når brukeren fjerner musepekeren fra det elementet.
Følgende eksempel vil fremheve elementer <p> når du plasserer markøren på den, vil markeringen fjernes når du fjerner markøren.
<script>
$(document).ready(function(){
$("p").hover(function(){
$(this).addClass("highlight");
}, function(){
$(this).removeClass("highlight");
});
});
</script>mouseenter()Metoden mouseenter() knytte en hendelsesbehandlerfunksjon til de valgte elementene som utføres når musen går inn i et element. Følgende eksempel vil legge til klasseutheving til elementet <p> når du plasserer markøren over den.
<script>
$(document).ready(function(){
$("p").mouseenter(function(){
$(this).addClass("highlight");
});
});
</script>mouseleave()Metoden mouseleave() knytte en hendelsesbehandlerfunksjon til utvalgte elementer som kjører når musen forlater et element. Følgende eksempel vil fjerne klassehøydepunktet fra elementet <p> når du fjerner markøren fra den.
<script>
$(document).ready(function(){
$("p").mouseleave(function(){
$(this).removeClass("highlight");
});
});
</script>En tastaturhendelse oppstår når brukeren trykker eller slipper en tast på tastaturet. La oss se på noen vanlige jQuery-metoder for å håndtere tastaturhendelser.
keypress()Metoden keypress() knytter en hendelseshåndteringsfunksjon til utvalgte elementer (typisk skjemakontroller) som kjører når nettleseren mottar tastaturinndata fra brukeren. Følgende eksempel vil vise en melding når hendelsen utløses keypress og hvor mange ganger den utløses når du trykker på tasten på tastaturet.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keypress(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>Tastetrykkhendelsen ligner på tastene, bortsett fra at modifikasjonstaster og taster som ikke skrives ut, som Shift, Esc, Backspace eller Delete, piltaster osv. de utløser tastenedslag, men ikke tastetrykkhendelser.
keydown()Metoden keydown() knytter en hendelseshåndteringsfunksjon til utvalgte elementer (typisk formkontroller) som utføres når brukeren først trykker på en tast på tastaturet. Følgende eksempel vil vise en melding når hendelsen utløses keydown og hvor mange ganger den utløses når du trykker på tasten på tastaturet.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keydown(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>keyup()Metoden keyup() knytte en hendelseshåndteringsfunksjon til utvalgte elementer (typisk formkontroller) som utføres når brukeren slipper en tast på tastaturet. Følgende eksempel vil vise en melding når hendelsen utløses keyup og hvor mange ganger den utløses når du trykker og slipper en tast på tastaturet.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keyup(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>En skjemahendelse utløses når en skjemakontroll mottar eller mister fokus, eller når brukeren endrer en skjemakontrollverdi, for eksempel å skrive inn tekst i en tekstinntasting, velge et alternativ i en valgboks, osv. . Her er noen vanlige jQuery-metoder for å håndtere skjemahendelser.
change()Metoden change() knytte en hendelsesbehandlerfunksjon til elementer <input> og utføres når verdien endres. Følgende eksempel vil vise en advarsel når du velger et alternativ i rullegardinmenyen.
<script>
$(document).ready(function(){
$("select").change(function(){
var selectedOption = $(this).find(":selected").val();
alert("You have selected - " + selectedOption);
});
});
</script>For klikkbokser, avmerkingsbokser og radioknapper utløses hendelsen umiddelbart når brukeren velger et musevalg, men for tekstinntasting og tekstområde utløses hendelsen etter at elementet mister fokus.
focus()Metoden focus() knytter en hendelsesbehandlerfunksjon til utvalgte elementer (typisk kontroller og skjemabindinger) som kjøres når den får fokus. Følgende eksempel vil vise en melding når tekstinndata får fokus.
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>blur()Metoden blur() legg ved en hendelsesbehandlerfunksjon for å danne elementer som f.eks <input>, <textarea>, <select> som utføres når den mister fokus. Følgende eksempel vil vise en melding når tekstinndata mister fokus.
<script>
$(document).ready(function(){
$("input").blur(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>submit()Metoden submit() knytte en hendelsesbehandlerfunksjon til elementer <form> som kjører når brukeren prøver å sende inn et skjema. Følgende eksempel vil vise en melding basert på verdien som ble angitt ved forsøk på å sende inn skjemaet.
<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>Hendelsene utløses også i en situasjon der DOM-siden (Document Object Model) er klar eller når brukeren endrer størrelsen eller ruller i nettleservinduet, etc. Her er noen vanlige jQuery-metoder for å håndtere denne typen hendelser.
ready()Metoden ready() spesifiserer en funksjon som skal utføres når DOM-en er fulllastet.
Følgende eksempel vil erstatte avsnittstekst så snart DOM-hierarkiet er fullt bygget og klart til å bli manipulert.
<script>
$(document).ready(function(){
$("p").text("The DOM is now loaded and can be manipulated.");
});
</script>resize()Metoden resize() knytte en hendelsesbehandlerfunksjon til vinduselementet som kjører når størrelsen på nettleservinduet endres.
Følgende eksempel vil vise gjeldende bredde og høyde på nettleservinduet når du prøver å endre størrelsen på det ved å dra hjørnene.
<script>
$(document).ready(function(){
$(window).resize(function() {
$(window).bind("resize", function(){
$("p").text("Window width: " + $(window).width() + ", " + "Window height: " + $(window).height());
});
});
});
</script>scroll()Metoden scroll() knytte en hendelsesbehandlerfunksjon til vinduet eller til iframe og rullbare elementer som kjører når rulleposisjonen til elementet endres.
Følgende eksempel vil vise en melding når du blar i nettleservinduet.
<script>
$(document).ready(function(){
$(window).scroll(function() {
$("p").show().fadeOut("slow");
});
});
</script>Ercole Palmeri
.
Marinesektoren er en ekte global økonomisk makt, som har navigert mot et 150 milliarder marked...
Sist mandag kunngjorde Financial Times en avtale med OpenAI. FT lisensierer sin journalistikk i verdensklasse...
Millioner av mennesker betaler for strømmetjenester og betaler månedlige abonnementsavgifter. Det er vanlig oppfatning at du...
Coveware by Veeam vil fortsette å tilby responstjenester for cyberutpressing. Coveware vil tilby kriminaltekniske og utbedringsmuligheter...