Oprettelse af en Ajax-baseret applikation bliver meget enkel og hurtig med jQuery.
jQuery blev oprindeligt skabt af John Resig i begyndelsen af 2006. jQuery-projektet vedligeholdes og vedligeholdes i øjeblikket af en distribueret gruppe af udviklere som et open source-projekt.
Du kan spare en masse tid og kræfter med jQuery. Så føj denne side til dine favoritter og fortsæt med at læse
Der er mange flere ting, du kan gøre med jQuery.
Listen slutter ikke der, der er mange andre fede ting du kan lave med jQuery.
Der er flere fordele, hvorfor man bør vælge at bruge jQuery:
For at komme i gang, lad os først downloade en kopi af jQuery og derefter inkludere den i vores projekt. To versioner af jQuery er tilgængelige til download: tablet e ikke komprimeret .
Den ukomprimerede fil er bedre egnet til udvikling eller fejlretning; mens den minificerede og komprimerede fil anbefales til produktion, fordi den sparer båndbredde og forbedrer ydeevnen på grund af den mindre filstørrelse.
Vi kan downloade jQuery herfra: https://jquery.com/download/
Når du har downloadet jQuery-filen, kan du se, at den har en js-udvidelse, dvs. det er en JavaScript-fil. Faktisk er JQuery intet andet end et JavaScript-bibliotek, så du kan inkludere jQuery-filen i HTML-dokumentet med elementet ligesom du inkluderer almindelige 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 altid at inkludere jQuery-filen før brugerdefinerede scripts; ellers vil jQuery API'erne ikke være tilgængelige, når din jQuery-kode forsøger at få adgang til dem.
Som du måske har bemærket, sprang vi attributten over i det forrige eksempel type="text/javascript" inde i mærket . Infatti questo non è richiesto in HTML5. JavaScript è il linguaggio di scripting predefifærdig i HTML5 og i alle moderne browsere.
Som et alternativ kan du indlejre jQuery i dit dokument via frit tilgængelige CDN-links (Content Delivery Network), hvis du hellere vil undgå at downloade filen.
CDN'er kan tilbyde en ydeevnefordel ved at reducere indlæsningstiden, fordi de hoster jQuery på flere servere rundt om i verden, og når en bruger anmoder om filen, vil den blive serveret fra den nærmeste server.
Dette har også den fordel, at hvis din webside besøgende allerede har downloadet en kopi af jQuery fra det samme CDN, mens de besøger andre websteder, behøver de ikke at downloade det igen, da det allerede er i deres browsers cache.
I dette tilfælde skal du skrive:
<script src =" https://code.jquery.com/jquery-3.6.3.min.js "> </script>Ud over det CDN, der leveres af jquery-projektet, kan du inkludere jQuery via Google e microsoft cdn.
Efter at have set målene for jQuery-biblioteket, og hvordan det inkluderes i dit dokument, er det nu, du skal omsætte jQuery i praksis.
Lad os nu lave en simpel jQuery-operation ved at ændre sidehovedtekstfarven fra pre-farvendefifarvet sort til grøn.
<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 udførte vi en simpel jQuery-operation ved at ændre farven på headeren, dvs. elementet ved at bruge jQuery-elementets selector og css()-metode, når dokumentet er klar, kendt som document ready-hændelsen.
En jQuery-sætning starter normalt med et dollartegn ( $) og slutter med semikolon ( ;).
I jQuery er dollartegnet ( $) er blot et alias for jQuery. Overvej følgende eksempelkode, der viser den enkleste jQuery-sætning.
<script>
$(document).ready(function(){
alert("Hello I'm a JQuery sign");
});
</script>Eksemplet viser blot en advarselsmeddelelse "Hello I'm a JQuery sign” til brugeren. Lad os se nogle funktioner:
<script>: jQuery er kun et JavaScript-bibliotek, jQuery-kode kan placeres inde i elementet <script>, eller du kan lægge den i en ekstern JavaScript-fil;$(document).ready(handler); er kendt som en klar begivenhed. Hvor er det handler det er en funktion, der overføres til den metode, der skal udføres, så snart dokumentet er klar, dvs. når DOM-hierarkiet er blevet fuldstændigt bygget.jQuery metoden ready() det bruges normalt med en anonym funktion. Så eksemplet ovenfor kan også skrives i stenografi som denne:
<script>
$(function(){
alert("Hello I'm a JQuery sign");
});
</script>Inde i en funktion kan du skrive jQuery-sætninger for at udføre enhver handling efter grundlæggende syntaks, som:
$(selector).action();Hvor er det, $(selector) det vælger grundlæggende HTML-elementerne fra DOM-træet, så det kan manipuleres og action() anvende nogle handlinger på de valgte elementer, såsom ændring af værdien af CSS-egenskaben, eller indstilling af indholdet af elementet osv.
Lad os nu se på et andet eksempel, der sætter afsnitstekst:
<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>Eksemplet med jQuery refererer til vælgeren p, og dette vælger alle afsnit, derefter metoden text() indstil tekstindholdet i afsnittet med "Hello World!".
Afsnitsteksten i det foregående eksempel erstattes automatisk, når dokumentet er klar. Men lad os se, hvordan du gør det, hvis du vil udføre en handling, før du kører jQuery-koden, for at erstatte teksten i afsnittet.
Lad os overveje et sidste 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 eksempel erstattes afsnitsteksten kun, når der sker en klikhændelse på knappen "Replace Text", hvilket simpelthen betyder, når en bruger klikker på denne knap.
Du kan bruge ID-vælgeren til at vælge en enkelt vare med det unikke ID på siden.
For eksempel vil følgende jQuery-kode vælge og fremhæve et element med ID-attributten id="markid", når dokumentet er klar.
<script>
$(document).ready(function(){
// Highlight element with id markid
$("#markid").css("background", "grey");
});
</script>Klassevælgeren kan bruges til at vælge elementer med en specifik klasse.
For eksempel vil følgende jQuery-kode vælge og fremhæve elementer med klasseattributten class="markclass", når dokumentet er klar.
<script>
$(document).ready(function(){
// Highlight elements with class markclass
$(".markclass").css("background", "grey");
});
</script>Varevælgeren kan bruges til at vælge emner efter emnenavn.
For eksempel vil følgende jQuery-kode vælge og fremhæve hele afsnittet, dvs. elementerne "<p>" af dokumentet, når det er klar.
<script>
$(document).ready(function(){
// Highlight paragraph elements
$("p").css("background", "grey");
});
</script>Du kan bruge attributvælgeren til at vælge et element baseret på en af dets HTML-attributter, såsom en link-attribut targeteller attributten for et input typeosv.
For eksempel vil følgende jQuery-kode vælge og fremhæve alle tekstinput, såsom elementer "<input>" med type="text", når dokumentet er klar.
<script>
$(document).ready(function(){
// Highlight paragraph elements
$('input[type="text"]').css("background", "grey");
});
</script>Du kan også kombinere CSS-vælgere for at gøre dit valg endnu mere præcist.
For eksempel kan du kombinere klassevælgeren med en elementvælger for at finde elementer i et dokument, der 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>Ud over vælgerne definiti, giver jQuery sin egen brugerdefinerede vælger for yderligere at forbedre mulighederne for at vælge 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>Begivenheder udløses ofte af brugerinteraktion med websiden, såsom når man klikker på et link eller en knap, indtaster tekst i et inputfelt eller tekstområde, foretager et valg i et valgfelt, trykker på en tast på tastaturet, flyt musemarkøren , etc. I nogle tilfælde kan browseren selv udløse hændelser, såsom sideindlæsning og downloadhændelser.
jQuery forbedrer de grundlæggende hændelseshåndteringsmekanismer ved at tilbyde hændelsesmetoder til de fleste native browserbegivenheder, nogle af disse metoder er ready(), click(), keypress(), focus(), blur(), change()osv.
<script>
$(document).ready(function(){
// Code to be executed
alert("Hello World!");
});
</script>Generelt kan begivenheder klassificeres i fire hovedgrupper:
En musehændelse udløses, når brugeren klikker på et element, flytter musemarkøren osv.
Her er nogle almindeligt anvendte jQuery-metoder til at håndtere musehændelser.
click()Metoden click() tilknyt en hændelseshåndteringsfunktion til de valgte elementer for hændelsen "click“. Den tilknyttede funktion udføres, når brugeren klikker på det pågældende element. Følgende eksempel vil skjule elementerne <p> på en side, når der klikkes.
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).slideUp();
});
});
</script>dblclick()Metoden dblclick() tilknyt en hændelseshåndteringsfunktion til de valgte elementer for hændelsen "dblclick“. Den sammenkædede funktion kører, når brugeren dobbeltklikker på det element. Følgende eksempel vil skjule elementerne <p> når du dobbeltklikker på dem.
<script>
$(document).ready(function(){
$("p").dblclick(function(){
$(this).slideUp();
});
});
</script>hover()Metoden hover() vedhæfte en eller to hændelseshåndteringsfunktioner til udvalgte elementer, der udføres, når musemarkøren bevæger sig ind og ud af elementer. Den første funktion kører, når brugeren placerer musemarkøren over et element, mens den anden funktion kører, når brugeren fjerner musemarkøren fra det pågældende element.
Følgende eksempel vil fremhæve elementer <p> når du placerer markøren på den, fjernes markeringen, når du fjerner markøren.
<script>
$(document).ready(function(){
$("p").hover(function(){
$(this).addClass("highlight");
}, function(){
$(this).removeClass("highlight");
});
});
</script>mouseenter()Metoden mouseenter() tilknytte en hændelseshåndteringsfunktion til de valgte elementer, som udføres, når musen går ind i et element. Følgende eksempel vil tilføje klassefremhævning til elementet <p> når du placerer markøren over den.
<script>
$(document).ready(function(){
$("p").mouseenter(function(){
$(this).addClass("highlight");
});
});
</script>mouseleave()Metoden mouseleave() tilknytte en hændelseshåndteringsfunktion til udvalgte elementer, der kører, når musen forlader et element. Følgende eksempel vil fjerne klassefremhævningen fra elementet <p> når du fjerner markøren fra den.
<script>
$(document).ready(function(){
$("p").mouseleave(function(){
$(this).removeClass("highlight");
});
});
</script>En tastaturhændelse opstår, når brugeren trykker på eller slipper en tast på tastaturet. Lad os se på nogle almindeligt anvendte jQuery-metoder til at håndtere tastaturbegivenheder.
keypress()Metoden keypress() knytter en hændelseshåndteringsfunktion til udvalgte elementer (typisk formkontrol), der kører, når browseren modtager tastaturinput fra brugeren. Følgende eksempel vil vise en meddelelse, når hændelsen udløses keypress og hvor mange gange den udløses, når du trykker på tasten på dit tastatur.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keypress(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>Tastetryk-hændelsen ligner tastenedhændelsen, bortset fra at ændringstaster og taster, der ikke udskrives, såsom Shift, Esc, Backspace eller Delete, piletaster osv. de udløser tastetrykhændelser, men ikke tastetrykhændelser.
keydown()Metoden keydown() knytter en hændelseshåndteringsfunktion til udvalgte elementer (typisk formkontrol), der udføres, når brugeren første gang trykker på en tast på tastaturet. Følgende eksempel vil vise en meddelelse, når hændelsen udløses keydown og hvor mange gange den udløses, når du trykker på tasten på dit tastatur.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keydown(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>keyup()Metoden keyup() tilknytte en hændelseshåndteringsfunktion til udvalgte elementer (typisk form kontroller), der udføres, når brugeren slipper en tast på tastaturet. Følgende eksempel vil vise en meddelelse, når hændelsen udløses keyup og hvor mange gange den udløses, når du trykker og slipper en tast på dit tastatur.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keyup(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>En formularhændelse udløses, når et formularkontrolelement modtager eller mister fokus, eller når brugeren ændrer en formularkontrolværdi, såsom at skrive tekst i en tekstinput, vælge en indstilling i en markeringsboks osv. Her er nogle almindeligt anvendte jQuery-metoder til at håndtere formhændelser.
change()Metoden change() vedhæfte en hændelseshåndteringsfunktion til elementer <input> og udføres, når dens værdi ændres. Følgende eksempel vil vise en advarselsmeddelelse, når du vælger en mulighed i rullemenuen.
<script>
$(document).ready(function(){
$("select").change(function(){
var selectedOption = $(this).find(":selected").val();
alert("You have selected - " + selectedOption);
});
});
</script>For klikbokse, afkrydsningsfelter og radioknapper udløses begivenheden med det samme, når brugeren foretager et musevalg, men for tekstinput og tekstområde udløses begivenheden, efter at elementet mister fokus.
focus()Metoden focus() knytter en hændelseshåndteringsfunktion til udvalgte elementer (typisk kontroller og formbindinger), der udføres, når den får fokus. Følgende eksempel viser en meddelelse, når tekstinput får fokus.
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>blur()Metoden blur() vedhæft en hændelseshåndteringsfunktion for at danne elementer som f.eks <input>, <textarea>, <select> som udføres, når den mister fokus. Følgende eksempel viser en meddelelse, når tekstinput mister fokus.
<script>
$(document).ready(function(){
$("input").blur(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>submit()Metoden submit() vedhæfte en hændelseshåndteringsfunktion til elementer <form> som kører, når brugeren forsøger at indsende en formular. Følgende eksempel viser en meddelelse baseret på den værdi, der blev indtastet ved forsøg på at indsende formularen.
<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>Hændelserne udløses også i en situation, hvor DOM-siden (Document Object Model) er klar, eller når brugeren ændrer størrelsen eller ruller browservinduet osv. Her er nogle almindeligt anvendte jQuery-metoder til at håndtere denne type begivenhed.
ready()Metoden ready() angiver en funktion, der skal udføres, når DOM'en er fuldt indlæst.
Følgende eksempel erstatter afsnitstekst, så snart DOM-hierarkiet er fuldt bygget og klar til at blive manipuleret.
<script>
$(document).ready(function(){
$("p").text("The DOM is now loaded and can be manipulated.");
});
</script>resize()Metoden resize() vedhæfte en hændelseshåndteringsfunktion til vindueselementet, der kører, når størrelsen på browservinduet ændres.
Følgende eksempel viser den aktuelle bredde og højde af browservinduet, når du forsøger at ændre størrelsen på det ved at trække i hjørnerne.
<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() tilknyt en hændelseshåndteringsfunktion til vinduet eller til iframe og rullebare elementer, der kører, hver gang elementets rulleposition ændres.
Følgende eksempel vil vise en meddelelse, når du ruller i browservinduet.
<script>
$(document).ready(function(){
$(window).scroll(function() {
$("p").show().fadeOut("slow");
});
});
</script>Ercole Palmeri
.
Flådesektoren er en sand global økonomisk magt, som har navigeret mod et 150 milliarder marked...
Sidste mandag offentliggjorde Financial Times en aftale med OpenAI. FT licenserer sin verdensklasses journalistik...
Millioner af mennesker betaler for streamingtjenester og betaler månedlige abonnementsgebyrer. Det er almindelig opfattelse, at du...
Coveware by Veeam vil fortsætte med at levere responstjenester til cyberafpresning. Coveware vil tilbyde kriminaltekniske og afhjælpende funktioner...