Att skapa en Ajax-baserad applikation blir väldigt enkelt och snabbt med jQuery.
jQuery skapades ursprungligen av John Resig i början av 2006. jQuery-projektet underhålls och underhålls för närvarande av en distribuerad grupp av utvecklare som ett projekt med öppen källkod.
Du kan spara mycket tid och ansträngning med jQuery. Så lägg till den här sidan till dina favoriter och fortsätt läsa
Det finns många fler saker du kan göra med jQuery.
Listan slutar inte där, det finns många andra coola saker du kan göra med jQuery.
Det finns flera fördelar varför man bör välja att använda jQuery:
För att komma igång, låt oss först ladda ner en kopia av jQuery och sedan inkludera den i vårt projekt. Två versioner av jQuery är tillgängliga för nedladdning: läsplatta e inte komprimerad .
Den okomprimerade filen är bättre lämpad för utveckling eller felsökning; medan den minifierade och komprimerade filen rekommenderas för produktion eftersom den sparar bandbredd och förbättrar prestanda på grund av den mindre filstorleken.
Vi kan ladda ner jQuery härifrån: https://jquery.com/download/
När du har laddat ner jQuery-filen kan du se att den har en js-tillägg, dvs det är en JavaScript-fil. JQuery är faktiskt inget annat än ett JavaScript-bibliotek, så du kan inkludera jQuery-filen i HTML-dokumentet med elementet precis som du inkluderar vanliga 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>Kom ihåg att alltid inkludera jQuery-filen före anpassade skript; annars kommer jQuery API:erna inte att vara tillgängliga när din jQuery-kod försöker komma åt dem.
Som du kanske har märkt hoppade vi över attributet i föregående exempel type="text/javascript" inuti taggen . Infatti questo non è richiesto in HTML5. JavaScript è il linguaggio di scripting predefifärdig i HTML5 och i alla moderna webbläsare.
Som ett alternativ kan du bädda in jQuery i ditt dokument via fritt tillgängliga CDN-länkar (Content Delivery Network), om du hellre vill undvika att ladda ner filen.
CDN:er kan erbjuda en prestandafördel genom att minska laddningstiden, eftersom de är värd för jQuery på flera servrar runt om i världen, och när en användare begär filen kommer den att serveras från den närmaste servern.
Detta har också fördelen att om din webbsidasbesökare redan har laddat ner en kopia av jQuery från samma CDN när de besöker andra webbplatser, behöver de inte ladda ner den igen eftersom den redan finns i webbläsarens cache.
I det här fallet måste du skriva:
<script src =" https://code.jquery.com/jquery-3.6.3.min.js "> </script>Förutom CDN som tillhandahålls av jquery-projektet kan du inkludera jQuery via Google e Microsoft cdn.
Efter att ha sett målen för jQuery-biblioteket och hur man inkluderar det i ditt dokument, är det nu dags att omsätta jQuery i praktiken.
Låt oss nu göra en enkel jQuery-operation genom att ändra rubrikens textfärg från förfärgendefisvart till grön färg.
<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örde vi en enkel jQuery-operation genom att ändra färgen på rubriken, dvs elementet med hjälp av jQuery-elementets väljare och css()-metod när dokumentet är klart, känd som document ready-händelsen.
En jQuery-sats börjar vanligtvis med ett dollartecken ( $) och slutar med semikolon ( ;).
I jQuery, dollartecknet ( $) är bara ett alias för jQuery. Tänk på följande exempelkod som visar den enklaste jQuery-satsen.
<script>
$(document).ready(function(){
alert("Hello I'm a JQuery sign");
});
</script>Exemplet visar helt enkelt ett varningsmeddelande "Hello I'm a JQuery sign” till användaren. Låt oss se några funktioner:
<script>: jQuery är bara ett JavaScript-bibliotek, jQuery-kod kan placeras inuti elementet <script>, eller så kan du lägga den i en extern JavaScript-fil;$(document).ready(handler); är känt som ett färdigt evenemang. Var är det handler det är en funktion som skickas till metoden som ska exekveras, så snart dokumentet är klart, dvs när DOM-hierarkin har byggts upp helt.jQuery-metoden ready() den används vanligtvis med en anonym funktion. Så exemplet ovan kan också skrivas i stenografi så här:
<script>
$(function(){
alert("Hello I'm a JQuery sign");
});
</script>Inuti en funktion kan du skriva jQuery-satser för att utföra valfri åtgärd efter grundläggande syntax, som:
$(selector).action();Duva, $(selector) det väljer i princip HTML-elementen från DOM-trädet så att det kan manipuleras och action() tillämpa vissa åtgärder på de valda elementen, som att ändra värdet på CSS-egenskapen, eller ställa in innehållet i elementet, etc.
Låt oss nu titta på ett annat exempel som ställer in stycketext:
<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-exemplet hänvisar till väljaren p, och detta väljer alla stycken, sedan metoden text() ställ in textinnehållet i stycket med "Hello World!".
Stycketexten i föregående exempel ersätts automatiskt när dokumentet är klart. Men låt oss se hur du gör det om du vill utföra en åtgärd innan du kör jQuery-koden, för att ersätta texten i stycket.
Låt oss överväga ett sista exempel:
<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 det här exemplet ersätts stycketexten endast när en klickhändelse inträffar på knappen "Replace Text", vilket helt enkelt betyder när en användare klickar på den här knappen.
Du kan använda ID-väljaren för att välja en enskild artikel med det unika ID:t på sidan.
Till exempel kommer följande jQuery-kod att välja och markera ett element med ID-attributet id="markid", när dokumentet är klart.
<script>
$(document).ready(function(){
// Highlight element with id markid
$("#markid").css("background", "grey");
});
</script>Klassväljaren kan användas för att välja element med en specifik klass.
Till exempel kommer följande jQuery-kod att välja och markera element med klassattributet class="markclass", när dokumentet är klart.
<script>
$(document).ready(function(){
// Highlight elements with class markclass
$(".markclass").css("background", "grey");
});
</script>Objektväljaren kan användas för att välja objekt efter objektnamn.
Till exempel kommer följande jQuery-kod att välja och markera alla stycket, d.v.s. elementen "<p>" av dokumentet när det är klart.
<script>
$(document).ready(function(){
// Highlight paragraph elements
$("p").css("background", "grey");
});
</script>Du kan använda attributväljaren för att välja ett element baserat på ett av dess HTML-attribut, till exempel ett länkattribut targeteller attributet för en ingång type, etc.
Till exempel kommer följande jQuery-kod att välja och markera alla textinmatningar, till exempel element "<input>" med type="text", när dokumentet är klart.
<script>
$(document).ready(function(){
// Highlight paragraph elements
$('input[type="text"]').css("background", "grey");
});
</script>Du kan också kombinera CSS-väljare för att göra ditt val ännu mer exakt.
Du kan till exempel kombinera klassväljaren med en elementväljare för att hitta element i ett dokument som har en viss typ och klass.
<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>Förutom väljarna definiti, tillhandahåller jQuery sin egen anpassade väljare för att ytterligare förbättra möjligheterna att välja element på en sida.
<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>Händelser utlöses ofta av användarens interaktion med webbsidan, till exempel när man klickar på en länk eller knapp, skriver in text i en inmatningsruta eller textområde, gör ett val i en valruta, trycker på en tangent på tangentbordet, flyttar muspekaren , etc. I vissa fall kan webbläsaren själv utlösa händelser, såsom sidladdning och nedladdningshändelser.
jQuery förbättrar de grundläggande händelsehanteringsmekanismerna genom att erbjuda händelsemetoder för de flesta inbyggda webbläsarhändelser, några av dessa metoder är ready(), click(), keypress(), focus(), blur(), change(), etc.
<script>
$(document).ready(function(){
// Code to be executed
alert("Hello World!");
});
</script>I allmänhet kan händelser delas in i fyra huvudgrupper:
En mushändelse utlöses när användaren klickar på ett objekt, flyttar muspekaren osv.
Här är några vanliga jQuery-metoder för att hantera mushändelser.
click()Metoden click() koppla en händelsehanterarfunktion till de valda elementen för händelsen "click". Den länkade funktionen körs när användaren klickar på objektet. Följande exempel kommer att dölja elementen <p> på en sida när du klickar på den.
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).slideUp();
});
});
</script>dblclick()Metoden dblclick() koppla en händelsehanterarfunktion till de valda elementen för händelsen "dblclick". Den länkade funktionen körs när användaren dubbelklickar på objektet. Följande exempel kommer att dölja elementen <p> när du dubbelklickar på dem.
<script>
$(document).ready(function(){
$("p").dblclick(function(){
$(this).slideUp();
});
});
</script>hover()Metoden hover() bifoga en eller två händelsehanterarfunktioner till valda element som körs när muspekaren rör sig in och ut ur element. Den första funktionen körs när användaren placerar muspekaren över ett objekt, medan den andra funktionen körs när användaren tar bort muspekaren från det objektet.
Följande exempel kommer att markera objekt <p> när du placerar markören på den kommer markeringen att tas bort när du tar bort markören.
<script>
$(document).ready(function(){
$("p").hover(function(){
$(this).addClass("highlight");
}, function(){
$(this).removeClass("highlight");
});
});
</script>mouseenter()Metoden mouseenter() koppla en händelsehanterarfunktion till de valda elementen som exekveras när musen går in i ett element. Följande exempel kommer att lägga till klassmarkering till elementet <p> när du placerar markören över den.
<script>
$(document).ready(function(){
$("p").mouseenter(function(){
$(this).addClass("highlight");
});
});
</script>mouseleave()Metoden mouseleave() koppla en händelsehanterarfunktion till valda objekt som körs när musen lämnar ett objekt. Följande exempel tar bort klassmarkeringen från elementet <p> när du tar bort markören från den.
<script>
$(document).ready(function(){
$("p").mouseleave(function(){
$(this).removeClass("highlight");
});
});
</script>En tangentbordshändelse uppstår när användaren trycker på eller släpper en tangent på tangentbordet. Låt oss titta på några vanligt använda jQuery-metoder för att hantera tangentbordshändelser.
keypress()Metoden keypress() kopplar en händelsehanteringsfunktion till utvalda element (vanligtvis formkontroller) som körs när webbläsaren tar emot tangentbordsindata från användaren. Följande exempel visar ett meddelande när händelsen utlöses keypress och hur många gånger den utlöses när du trycker på tangenten på ditt tangentbord.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keypress(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>Tangenttryckningshändelsen liknar tangentnedtryckningshändelsen, förutom att modifieringstangenter och tangenter som inte skrivs ut som Shift, Esc, Backsteg eller Delete, piltangenter, etc. de aktiverar tangentnedtryckningshändelser men inte tangenttryckningshändelser.
keydown()Metoden keydown() kopplar en händelsehanteringsfunktion till valda objekt (typiskt formkontroller) som exekveras när användaren först trycker på en tangent på tangentbordet. Följande exempel visar ett meddelande när händelsen utlöses keydown och hur många gånger den utlöses när du trycker på tangenten på ditt tangentbord.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keydown(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>keyup()Metoden keyup() koppla en händelsehanteringsfunktion till valda element (typiskt formkontroller) som exekveras när användaren släpper en tangent på tangentbordet. Följande exempel visar ett meddelande när händelsen utlöses keyup och hur många gånger den utlöses när du trycker och släpper en tangent på ditt tangentbord.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keyup(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>En formulärhändelse utlöses när en formulärkontroll tar emot eller tappar fokus, eller när användaren ändrar ett formulärkontrollvärde, som att skriva text i en textinmatning, välja ett alternativ i en markeringsruta, etc. . Här är några vanligt använda jQuery-metoder för att hantera formulärhändelser.
change()Metoden change() koppla en händelsehanterarfunktion till element <input> och exekveras när dess värde ändras. Följande exempel kommer att visa ett varningsmeddelande när du väljer ett alternativ i rullgardinsmenyn.
<script>
$(document).ready(function(){
$("select").change(function(){
var selectedOption = $(this).find(":selected").val();
alert("You have selected - " + selectedOption);
});
});
</script>För klickrutor, kryssrutor och alternativknappar aktiveras händelsen omedelbart när användaren gör ett musval, men för textinmatning och textområde aktiveras händelsen efter att elementet tappar fokus.
focus()Metoden focus() kopplar en händelsehanterarfunktion till valda element (vanligtvis kontroller och formbindningar) som körs när den får fokus. Följande exempel visar ett meddelande när textinmatning får fokus.
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>blur()Metoden blur() bifoga en händelsehanterarfunktion för att bilda element som t.ex <input>, <textarea>, <select> som exekveras när den tappar fokus. Följande exempel visar ett meddelande när textinmatningen tappar fokus.
<script>
$(document).ready(function(){
$("input").blur(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>submit()Metoden submit() koppla en händelsehanterarfunktion till element <form> som körs när användaren försöker skicka ett formulär. Följande exempel visar ett meddelande baserat på värdet som angavs när du försökte skicka formuläret.
<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ändelserna utlöses också i en situation där DOM-sidan (Document Object Model) är klar eller när användaren ändrar storlek eller rullar webbläsarfönstret, etc. Här är några vanligt använda jQuery-metoder för att hantera denna typ av händelse.
ready()Metoden ready() anger en funktion som ska köras när DOM är fulladdat.
Följande exempel kommer att ersätta stycketext så snart DOM-hierarkin är färdigbyggd och redo att manipuleras.
<script>
$(document).ready(function(){
$("p").text("The DOM is now loaded and can be manipulated.");
});
</script>resize()Metoden resize() koppla en händelsehanterarfunktion till fönsterelementet som körs när storleken på webbläsarfönstret ändras.
Följande exempel visar webbläsarfönstrets aktuella bredd och höjd när du försöker ändra storlek på det genom att dra i hörnen.
<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() koppla en händelsehanterarfunktion till fönstret eller till iframe och rullningsbara objekt som körs när rullningspositionen för objektet ändras.
Följande exempel visar ett meddelande när du rullar i webbläsarfönstret.
<script>
$(document).ready(function(){
$(window).scroll(function() {
$("p").show().fadeOut("slow");
});
});
</script>Ercole Palmeri
.
Att utveckla finmotorik genom färgläggning förbereder barn för mer komplexa färdigheter som att skriva. Att färglägga…
Marinesektorn är en sann global ekonomisk makt, som har navigerat mot en marknad på 150 miljarder...
I måndags tillkännagav Financial Times ett avtal med OpenAI. FT licensierar sin journalistik i världsklass...
Miljontals människor betalar för streamingtjänster och betalar månatliga prenumerationsavgifter. Det är en allmän uppfattning att du...