Det är svårt att överskatta den inverkan som jQuery har haft på webbutvecklingen. Detta JavaScript-bibliotek med öppen källkod släpptes för mer än 15 år sedan.
Det var en verktygslåda som skapade en ny förenkling för annars komplicerad JavaScript-programmering. jQuery fortsätter att leva upp till utvecklarnas motto: ”Än idag är jQuery populärt bland professionella utvecklare.
Även de som har liten eller noll programmeringserfarenhet kan dock använda biblioteket för att lägga till avancerade funktioner på sina webbplatser. Här är vad som ligger bakom en av webbutvecklingens största framgångssagor.
Kolla in vår videoguide om jQuery, webbens mest använda JavaScript-bibliotek
Hur populärt är jQuery?
StackOverflow’s undersökning 2022 av webbtekniker som används av professionella utvecklare visade att drygt 29 % av de över 45 000 svarande arbetade med jQuery. Bland JavaScript-biblioteken så var jQuery näst bäst efter React.js. React är ett bibliotek som först utvecklades på Facebook (numera Meta) 2011 och som nu används av över 44 % av dessa utvecklare.
Men webbutvecklarnas nuvarande projekt berättar inte hela historien. Baserat på BuiltWith’s Internetteknologi-trender så återfinns jQuery på mer än 80 miljoner webbplatser år 2022. Det är ett stort försprång jämfört med de nästan 11 miljoner webbplatser som kör React.
Biblioteket jQuery har varit med i kärnan i WordPress i mer än ett decennium. Som ett resultat så är det tillgängligt direkt i lådan för hundratals teman som förlitar sig på dess funktionalitet. Det exempelvis att skapa väldigt dynamiska webbplatser.
Drupal är ett annat populärt innehållshanteringssystem som har inkluderat jQuery i sina kärnkomponenter. Oavsett vilken teknik som är utvecklarnas aktuella favoriter så förblir jQuery det mest använda JavaScript-biblioteket på webben.
En kort historia om jQuery
Kampen om webbläsarna har utkämpats sedan webbens början. Utvecklare har alltid haft många alternativ. När webbutvecklaren John Resig presenterade jQuery år 2006 så var Microsofts webbläsare Internet Explorer den obestridda marknadsledaren.
Det skedde en omkastning av Netscap mindre än ett decennium tidigare. Vid den tidpunkten så hade Mozilla’s nya Firefox en marknadsandel på 10 % (jämfört med Microsofts 84 %) och Apples Safari hade precis dykt upp på scenen. Google’s Chrome, dagens marknadsledare, fanns ännu inte. JavaScript-programmerare som Resig kämpade regelbundet med att skriva kod som skulle fungera i alla webbläsare.
Hans nya jQuery-bibliotek byggdes för att ta itu med skillnaderna i hur JavaScript implementerades av dessa webbläsare. Som ett resultat så skulle utvecklare behöva skriva mindre kod samtidigt som de utförde uppgifter som dessa:
- Manipulera HTML-element på en webbsida
- Dynamisk ändring av CSS
- Svar på händelser som musklick och tangenttryckningar
- Hantering av Ajax-begäranden för att uppdatera sidans innehåll utan att ladda om
Efter Resigs lansering av biblioteket så byggde andra utvecklare tillämpningar på jQuery. De delade ofta sitt arbete som plugins för att göra nya funktioner tillgängliga för alla.
Vad är jQuery UI?
jQuery UI är en populär samling plugins som är utformade för att förbättra användargränssnitt. Det ses som ett ”officiellt” komplement till jQuery-biblioteket och lägger till en mängd specialeffekter och widgetar. Detta inkluderar exempelvis datumväljare, progressionsfält, skjutreglage, spinnare och paneler med flikar eller hopfällbara paneler.
Vad är skillnaden mellan jQuery och JavaScript?
Det är viktigt att veta att jQuery är JavaScript. När du använder jQuery så arbetar du med instanser av JavaScript-objekt som återspeglar jQuery’s namngivningskonventioner för metoder (funktioner) och egenskaper. Låt oss ta en titt på vanilla JavaScript och jQuery som tar sig an samma uppgift.
Här är ett stycke HTML någonstans på en webbsida:
<p id="target">Old text</p>Vanilla JavaScript-kod kan hitta elementet <p> med id ”target” – och sedan ersätta texten mellan taggarna. Det kan se ut så här:
const content = document.getElementById( "target" );
content.textContent = "New text";JavaScript-metoden getElementById() returnerar ett objekt som innehåller HTML- och textinnehållet i stycket med ”target” id. Objektet tilldelas den konstanta referensen content Dess egenskap textContent ändras sedan till ”New text”.
JavaScript gör det möjligt att kedja metoder. Som ett resultat så blir det möjligt att uppnå ovanstående med ett enda uttalande:
document.getElementById( "target" ).textContent = "New text"; Det är därför inte förvånande att du även kan kedja jQuery-åtgärder. Om du vill ändra ”gammal text” till ”ny text” med hjälp av jQuery så kan du göra så här:
$( "#target" ).text( "New text" );Dollartecknet ($) är ett kort alias för jQuery. ( "#target" ) är ett exempel på en jQuery-selektor. I det här fallet så letar selektorn efter ett HTML-element med id för vårt målavsnitt. Metoden jQuery text() är kedjad för att göra ”New text” till styckets innehåll.
Hur du använder jQuery på din webbplats
Lägg till jQuery på din webbplats för att länka bibliotekets kod från webbplatsens sidor. JQuery-biblioteket kan finnas på din webbserver eller på ett offentligt tillgängligt innehållsleveransnätverk (CDN). På den officiella webbplatsen för jQuery så kan du få tillgång till de senaste versionerna av biblioteket.
JQuery-biblioteket finns i minifierad (komprimerad) JavaScript för snabb laddning i produktionen eller okomprimerad för läsbarhet och felsökning.
Du kommer även att skriva åtminstone lite JavaScript för att åberopa jQuery och ta itu med uppgifter som är specifika för din webbapplikation. I HTML-sidorna på din webbplats så kan du länka jQuery-biblioteket och filen med din kod på följande sätt:
<script type="text/javascript" src="/js/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="/js/my_script.js"></script>I det här exemplet så finns version 3.6.0 av jQuery och din platsspecifika kod i en fil som heter my_script.js i katalogen/js/ på webbplatsen. Biblioteket jQuery ingår vanligtvis i avsnittet <head> på en webbsida. Det är vanligt att utvecklare placerar vissa länkar till JavaScript-filer, inklusive kod som är beroende av jQuery-biblioteket, nära botten på en sida. De placeras vanligtvis strax före stängningen av <body>-taggen. Du vill alltid att all platsspecifik kod som åberopar jQuery ska visas efter länken till själva biblioteket.
Länka till jQuery på ett CDN-bibliotek
Biblioteket jQuery laddas ofta ner snabbare när det levereras av ett robust CDN. jQuery är så utbrett på webben att det finns en god chans att en besökare på din webbplats redan har biblioteket cachelagrat i sin webbläsare för flera CDN: er. Vi kan ändra HTML-utdraget ovan för att använda Cloudflare’s nätverk för leverans av JavaScript-innehåll på följande sätt:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="/js/my_script.js"></script>Anropa jQuery i din applikation
När du skriver din jQuery-applikation så är det bra att bekräfta att webbsidan har laddats färdigt innan din kod börjar köras. Du kan exempelvis testa detta genom att använda metoden ready(), som överlämnar din kod när dokumentet har laddats, så här:
$(document).ready(function() {
// Your jQuery application will go here
});Denna start för en jQuery-applikation är så vanlig att bibliotekets utvecklare har utarbetat en ännu kortare syntax:
$(function() {
// Your jQuery application will go here
});Att välja element i DOM med jQuery
Grunden för de flesta jQuery-applikationer är förmågan att gå igenom strukturer på en webbsida som ett objekt (dokumentobjektmodellen, eller DOM). De kan sedan rikta in sig på olika element i HTML. Att välja ett element (eller en grupp av element) är steget innan man gör något med det elementet. Det kan exempelvis handla om att ändra dess utseende eller uppdatera närliggande innehåll. jQuery-selektorer riktar sig mot DOM-egenskaper på olika sätt. De vanligaste inkluderar:
- Med HTML-element (tagg) namn
- Genom CSS-egenskaper (inklusive ID och klassnamn)
- Med hjälp av ett elements relativa position i DOM
- Genom värdet på innehållet i formulärfält
- Ett elementets aktuella tillstånd
Här är några exempel:
// Select all HTML paragraph tags in a document
$( "p" );
// Select the element with the ID "myID"
$( "#myID" );
// Select all elements with the CSS class name "myClass"
$( ".myClass" );
// Select all input, textarea, select, and button elements in a form
$( ":input" );
// Select the children of some other element
// (In this case, the entries in an unordered list)
$( "ul > li" );
// Select all anchors with the rel attribute “nofollow”
$( "a[rel='nofollow']" );
// Select all checkboxes in a “checked” state
$( "input:checked" )Du kan kombinera jQuery-selektorer för en mer specifik inriktning. Exempel:
// HTML paragraph tags with the CSS class “myClass”
$( "p.myClass" );
// HTML paragraphs with the text “Kinsta” anywhere within them
$( "p:contains('Kinsta')" );
// HTML div tags that have at least one paragraph tag as a descendent
$( "div:has(p)" );
// The first entry in any unordered list with the CSS class “myList”
$( "ul.myList li:first" ); Manipulering av DOM med jQuery
Nu när du vet hur du väljer olika element på en webbsida så kan du ändra dem med hjälp av jQuery-metoder. Som vi har nämnt tidigare så kan du ofta kedja dessa åtgärder för att få mycket gjort med lite kodning. Några exempel:
// Select the element with the ID “alert” and add a red background
$( "#alert" ).css( "background-color", "red" );
// Select the element with the ID “alert” and add the class “urgent” to its markup
$( "#alert" ).addClass( "urgent" );
// Find any paragraph with the class “myName” and make its content “Kinsta”
$( "p.myName" ).text( "Kinsta" );
// Like the statement above, but with support for HTML markup
$( "p.myName" ).html( "<strong>Kinsta</strong>" );
// Add the attribute/value rel=”nofollow” to every anchor
$( "a" ).attr( "rel", "nofollow" );
// Hide the element with the ID “myDiv” (but keep it in the DOM)
$( "#myDiv" ).hide();
// Make the element hidden above visible again
$( "#myDiv" ).show();
// Remove from the DOM everything INSIDE the element with the ID “myDiv”
$( "#myDiv" ).empty();
// Remove from the DOM the entire element with the ID “myDiv”
$( "#myDiv" ).remove();Hantering av händelser med jQuery
Tänk om den typ av DOM-manipulation som beskrivs ovan skedde så fort en sida laddas. Då skulle den gå obemärkt förbi av webbesökare. Därför kan din jQuery-applikation upptäcka och reagera på händelser som musklick, musrörelser, tangenttryckningar med mera för att skapa en verkligt responsiv upplevelse.
Reaktion på musklick med jQuery
Att reagera på ett musklick (eller ett tryck på en pekskärmsenhet) är en vanlig uppgift för webbapplikationer. Vi har kombinerat lite jQuery och HTML i ett exempel som också drar nytta av jQuerys inbyggda objekt event, som kommer att innehålla användbar information om vår ”klickhändelse”:
<script>
// Invoke jQuery
$(document).ready(function () {
// Assign “click” method to all button elements
// Our function passes the built-in object with event details
$( "button" ).click(function ( event ) {
// Make sure all button backgrounds are white
$( "button" ).css( "background-color", "white" );
// Change our H2 text to report the ID of the clicked button
$( "#buttonReport" ).text("You clicked " + event.target.id);
// Set the background color of the clicked button to red
$( "#" + event.target.id ).css("background-color", "red");
});
});
</script>
<h2 id="buttonReport">Click a button!</h2>
<button id="Button1">Button 1</button>
<button id="Button2">Button 2</button>
<button id="Button3">Button 3</button> Resultat:
Upptäckt av musens rörelse med jQuery
Att veta var muspekaren befinner sig på en webbsida är användbart i många responsiva webbapplikationer. Här är ett exempel på hur jQuery kan hjälpa till:
<script>
$(document).ready(function () {
// Detect when the mouse is over a div with the mouseover() method
$( "div" ).mouseover(function ( event ) {
// Make the div under the mouse grey and taller
$( "#" + event.target.id ).css({
"background-color" : "lightgrey",
"height" : "8em"
});
});
// Detect when the mouse moves away with the mouseout() method
$( "div" ).mouseout(function ( event ) {
// Return the size and color of the div to its original state
$( "#" + event.target.id ).css({
"background-color" : "white",
"height" : "4em"
});
});
});
</script>
<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
<div id="div3">Div 3</div>Exemplet ovan visar även hur jQuerys css()-metod kan användas för att ställa in flera CSS-egenskaper samtidigt. Här är resultatet:
Hantering av Ajax-begäranden med jQuery
En stor del av jQuery’s popularitet är dess förmåga att förenkla Ajax-begäranden. Dessa kan webbapplikationer använda för att utbyta data med servrar utan att ladda om sidorna. Biblioteket har många verktyg för att hantera Ajax-begäranden om data i formaten vanlig text, HTML, XML och JSON. JQuery’s tillvägagångssätt är att erbjuda kortfattade alternativ för de vanligaste uppgifterna. Ett av de enklaste i Ajax-verktygslådan är load()-metoden:
<div id="myContent">Replace Me</div>
<button>Load Content</button>
<script>
// Request the file content.php from the server after a button is clicked.
// Place the results in the HTML element with the ID “myContent”
$( "button" ).click( function (){
$( "#myContent" ).load( "content.php" );
});
</script>Där händer mycket med bara tre rader JavaScript och två HTML-element. Resultatet skulle se ut ungefär så här:
Hur man använder jQuery UI
Lägg till jQuery UI-plugins till dina projekt, så får du tillgång till många specialeffekter och widgets som är byggda på jQuerys kärnbibliotek. Här är ett exempel som använder jQuery UI för att lägga till en popup-kalender som en datumväljare i ett webbformulär.
Lägg först till jQuery UI-biblioteket och dess stödjande CSS på dina webbsidor. I det här exemplet så länkar vi till biblioteken på Cloudflare’s JavaScript CDN tillsammans med kärnbiblioteket i jQuery:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css" />Lägg sedan till ett input-fält för formulär i din HTML och bifoga jQuery UI:s datepicker()-metod via JavaScript med hjälp av en väljare:
<label for="myDate">Date:</label>
<input type="text" id="myDate" name="myDate">
<script>
$( function() {
$( "#myDate" ).datepicker();
} );
</script> Genom att klicka i input-fält för formulär så startar nu datumväljaren:
Hur man använder jQuery i WordPress
Biblioteket jQuery levereras med WordPress och är en viktig komponent i många WordPress-teman. Även om ditt nuvarande tema inte redan använder jQuery så kan du dra nytta av registreringen av JavaScript-beroenden i WordPress för att få igång all din jQuery-kod.
Du gör detta genom att redigera filen functions.php som är en del av ditt tema. En uppdatering av ett tema kan skriva över den filen. Det är med andra ord en bra metod att hålla dina ändringar säkra genom att först skapa ett undertema och redigera functions.php-filen där. Skapa åtminstone en manuell WordPress-säkerhetskopia innan du fortsätter.
Registrera ditt jQuery JavaScript i functions.php
Du kan använda en FTP- eller SFTP-klient för att överföra filen functions.php mellan ditt skrivbord och webbservern för att redigera den. WordPress-administratörer kan även ändra functions.php i CMS: et:
Från instrumentpanelen väljer du Utseende > Temafilredigerare.
Klicka på Temafunktioner i den vänstra menyn.
![Inne i redigeringsverktyget för temafiler.[/caption ]](https://kinsta.com/wp-content/uploads/2022/08/theme-file-editor-view.jpg)
wp_enqueue_script(). Här är mallen för den funktionen:
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );Och här är vad allt detta betyder:
- $handle: Det användarvänliga namnet som är kopplat till det här skriptet. (Biblioteket jQuery core library är redan registrerat i WordPress med handtaget jquery.)
- $src: Sökväg och filnamn eller webbadress som riktas mot JavaScript-källkoden.
- $deps: Hanteraren av eventuella andra JavaScript-källor som skriptet kräver för att fungera korrekt.
- $ver: Alla versionsnummer som du har tilldelat din JavaScript-källkod.
- $in_footer: Om den är inställd på true så kommer skriptet att läggas till nära botten av sidan. Annars så placeras skript i blocket
<head>.
När ett skript har ställts i kö så läggs det till på en sida med funktionen add_action(). Se hur det fungerar genom att lägga till ett sådant här block längst ner i din functions.php-fil:
// 'my_custom_scripts' is a function name of your choice
function my_custom_scripts() {
wp_enqueue_script(
'my_script'
get_template_directory_uri() . '/assets/js/my_script.js',
array( 'jquery', 'jquery-ui-core', 'jquery-ui-datepicker' ),
'1.0',
true );
}
add_action( 'wp_enqueue_scripts', 'my_custom_scripts' );Ovan så får det nya jQuery-skriptet handtaget my_script. WordPress-verktygsfunktionen get_template_directory_uri() hjälper till att skapa en webbadress för JavaScript-filen i temats kataloger.
En rad andra handtag talar om för WordPress att my_script är beroende av jQuery core, jQuery-UI core och jQuery-UI datepicker-plugin. Slutligen så har vi tilldelat skriptet versionsnummer 1.0 och bett om att det ska placeras nära sidans botten.
Hur man laddar jQuery från ett CDN i WordPress
Vi vet att jQuery kan serveras från flera innehållsleveransnätverk. Vi vet även att WordPress, vill ladda jQuery och många jQuery-plugins från filsystemet på den lokala webbservern. Trots att det inte är en standardlösning.
Du kan ändra det beteendet genom att eliminera den konfigurationsinformation som har registrerats med den befintliga jquery-handlingen och skriva om den. För att göra det så lägger du till ett kodblock i functions.php som börjar med funktionen wp_deregister_script():
// 'my_custom_scripts' is a function name of your choice
function my_custom_scripts() {
wp_deregister_script('jquery');
wp_register_script(
'jquery',
'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js',
null,
'3.6.0',
False
);
wp_enqueue_script(
'my_script'
get_template_directory_uri() . '/assets/js/my_script.js',
array( 'jquery', 'jquery-ui-core', 'jquery-ui-datepicker' ),
'1.0',
true
);
}
add_action( 'wp_enqueue_scripts', 'my_custom_scripts' );Detta är ett beroende för det lokala my_script. Du kan använda samma tillvägagångssätt för att hämta andra jQuery-komponenter – som exempelvis jQuery-UI – från en CDN.
Om du vill veta mer om jQuery och WordPress så har vi en guide för att felsöka konfigurationsproblem som kan resultera i fel som ”jQuery är inte definierat”.
Sammanfattning
I mer än 15 år har biblioteket jQuery med öppen källkod hjälpt utvecklare att bygga rika, dynamiska webbapplikationer med så lite kodning som möjligt. Idag så används jQuery på fler webbplatser än något annat JavaScript-bibliotek. Det är även paketerat med några populära innehållshanteringssystem, inklusive WordPress.
Det finns dessutom ett robust ekosystem av jQuery-plugins som har skapats av andra JavaScript-programmerare och som hjälper utvecklare med olika erfarenhetsnivåer att lägga till avancerade funktioner på sina webbplatser.
Om du vill bygga webbplatser och applikationer som drivs av jQuery så kan du ta en titt på Kinsta’s planer för hanterad WordPress-hosting och hostinglösningar för applikationer och databaser.
