Det ville være svært at overvurdere den indflydelse jQuery har haft på webudvikling, efter at JavaScript-biblioteket med åben kildekode blev frigivet for mere end 15 år siden. JQuery er en værktøjskasse, der skabte en ny forkortelse for ellers kompleks JavaScript-programmering, og den lever fortsat op til udviklernes motto: “Skriv mindre, gør mere.”
Selv i dag er jQuery populær blandt professionelle udviklere, mens andre med lidt eller ingen programmeringserfaring kan bruge biblioteket til at tilføje avancerede funktioner til deres websteder. Her er hvad der ligger bag en af webudviklingens største succeshistorier.
Hvor populær er jQuery?
StackOverflow’s 2022-undersøgelse af webteknologier, der anvendes af professionelle udviklere, viste, at lidt over 29% af mere end 45.000 respondenter arbejdede med jQuery. Blandt JavaScript-bibliotekerne var jQuery kun overgået af React.js, biblioteket, der først blev udviklet på Facebook (nu Meta) i 2011, og som nu er flittigt benyttet af over 44% af disse udviklere.
Men webudviklernes nuværende projekter fortæller ikke hele historien. Baseret på BuiltWiths internetteknologitrends blev jQuery fundet på mere end 80 millioner websites i 2022. Det er et stort forspring i forhold til de næsten 11 millioner websteder, der kører React.
Biblioteket jQuery har været pakket med kernen i WordPress i mere end et årti, hvilket gør det tilgængeligt uden for kassen til hundredvis af temaer, der er afhængige af dets funktionalitet for at skabe dynamiske websteder. Drupal er et andet populært icontent management system, der har inkluderet jQuery blandt sine kernekomponenter. Uanset hvilke teknologier der er udviklernes aktuelle favoritter, er jQuery fortsat det mest anvendte JavaScript-bibliotek på nettet.
En kort historie om jQuery
Kampen om browserne har stået på siden starten af internettet, og udviklerne har altid været ofre. I 2006, da webudvikleren John Resig præsenterede jQuery, var Microsofts Internet Explorer-browser den ubestridte markedsleder — en omvending af Netscape’s fordel mindre end ti år tidligere.
På det tidspunkt havde Mozillas nye Firefox en markedsandel på 10% (sammenlignet med Microsofts 84%), og Apples Safari var lige dukket op på markedet. Googles Chrome, der i dag er markedsleder, eksisterede ikke. JavaScript-programmører som Resig kæmpede regelmæssigt med at skrive kode, der kunne køre i alle browsere.
Hans nye jQuery-bibliotek blev bygget for at tage højde for forskellene i den måde, JavaScript blev implementeret af disse browsere, og hjælpe udviklere med at skrive mindre kode, mens de udførte opgaver som disse:
- Manipulering af HTML-elementer på en webside
- Dynamisk ændring af CSS
- Reagere på begivenheder som museklik og tastetryk
- Håndtering af Ajax-forespørgsler for at opdatere sidens indhold uden genindlæsning
Efter Resigs udgivelse af biblioteket byggede andre udviklere programmer oven på jQuery og delte ofte deres arbejde som plugins for at gøre nye funktioner tilgængelige for alle.
Hvad er jQuery UI?
jQuery UI er en populær samling af plugins, der er designet til at forbedre brugergrænseflader. Det betragtes som et “officielt” supplement til jQuery-biblioteket og tilføjer et væld af specielle effekter og widgets som dato-vælgere, fremskridtsbjælker, slidere, spinnere og paneler med faneblade eller sammenklappelige paneler.
Hvad er forskellen mellem jQuery og JavaScript?
Det er vigtigt at vide, at jQuery er JavaScript. Når du bruger jQuery, arbejder du med instanser af JavaScript-objekter, der afspejler jQuerys navngivningskonventioner for metoder (funktioner) og egenskaber. Lad os tage et kig på vanilla JavaScript og jQuery, der tager fat på den samme opgave.
Her er et HTML-uddrag et sted på en webside:
<p id="target">Old text</p>Vanilla JavaScript-kode, der kan finde <p> -elementet med id “target” — og derefter erstatte teksten mellem tags — kunne se således ud:
const content = document.getElementById( "target" );
content.textContent = "New text";JavaScript-metoden getElementById() returnerer et objekt, der indeholder HTML- og tekstindholdet i afsnittet med “target” id. Objektet tildeles den konstante reference content, hvorefter dets textContent -egenskab ændres til “New text”.
JavaScript giver mulighed for at kæde metoder, hvilket gør det muligt at opnå ovenstående med en enkelt erklæring:
document.getElementById( "target" ).textContent = "New text"; Det er derfor ikke overraskende, at du også kan kæde jQuery-handlinger. Hvis du vil ændre “Old text” til “New text” ved hjælp af jQuery, kan du gøre dette:
$( "#target" ).text( "New text" );Dollartegnet ($) er et kort alias for jQuery, og ( "#target" ) er et eksempel på en jQuery-selektor. I dette tilfælde leder selektoren efter et HTML-element med id for vores målafsnit. Metoden jQuery text() er kædet sammen for at gøre “New text” til afsnitets indhold.
Sådan bruger du jQuery på dit websted
Tilføj jQuery til dit websted ved at linke bibliotekets kode fra webstedets sider. JQuery-biblioteket kan ligge på din webserver eller på et offentligt tilgængeligt content delivery network (CDN). På det officielle jQuery-websted kan du få fat i de nyeste versioner af biblioteket.
JQuery-biblioteket er tilgængeligt i minificeret (komprimeret) JavaScript for hurtig indlæsning i produktionen eller ukomprimeret for at gøre det lettere at læse og fejlfinde.
Du vil også skrive mindst en smule JavaScript for at påkalde jQuery og løse opgaver, der er specifikke for din webapplikation. I HTML’en på siderne på dit websted kan du linke jQuery-biblioteket og filen med din kode på følgende måde:
<script type="text/javascript" src="/js/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="/js/my_script.js"></script>I dette eksempel er version 3.6.0 af jQuery og din webstedsspecifikke kode i en fil kaldet my_script.js placeret i mappen/js/ på webstedet. Biblioteket jQuery er normalt inkluderet i afsnittet <head> på en webside. Det er almindeligt for udviklere at placere nogle links til JavaScript-filer, herunder kode, der er afhængig af jQuery-biblioteket, nær bunden af en side, normalt lige før lukningen af <body> -tagget. Du vil altid ha’, at enhver webstedsspecifik kode, der påkalder jQuery, vises efter linket til selve biblioteket.
Link til jQuery på et CDN
JQuery-biblioteket downloades ofte hurtigere, når det leveres af et robust CDN. jQuery er så udbredt på nettet, at der er en god chance for, at en besøgende på dit websted allerede har biblioteket gemt i deres browser på flere CDN’er. Vi kan ændre HTML-udsnittet ovenfor for at gøre brug af Cloudflares JavaScript-content delivery network Cloudflare på følgende måde:
<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>Påkaldelse af jQuery i din applikation
Når du skriver din jQuery-applikation, er det en bedste praksis at bekræfte, at websiden er færdig med at indlæse, før din kode begynder at køre. Du kan teste dette ved at bruge metoden ready(), som afleverer din kode, når dokumentet er indlæst, som her:
$(document).ready(function() {
// Your jQuery application will go here
});Denne start for en jQuery-applikation er så almindelig, at bibliotekets udviklere har udtænkt en endnu kortere syntaks:
$(function() {
// Your jQuery application will go here
});Valg af elementer i DOM med jQuery
Grundlaget for de fleste jQuery-applikationer er evnen til at gennemløbe strukturen af en webside som et objekt (dokumentobjektmodellen, eller DOM) og målrette forskellige elementer i HTML. Valg af et element (eller en gruppe af elementer) er det skridt, der går forud for at gøre noget med det pågældende element, f.eks. ændre dets udseende eller opdatere nærliggende indhold. jQuery-selektorer er målrettet DOM-egenskaber på en række forskellige måder. De mest almindelige omfatter:
- Efter HTML-element (tag) navn
- Ved hjælp af CSS-egenskaber (herunder ID’er og klassebetegnelser)
- Ved et elements relative position i DOM’en
- Ved værdien af indholdet i formularfelter
- Ved et elements aktuelle tilstand
Her er nogle eksempler:
// 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 kombinere jQuery-selektorer for at opnå mere specifik målretning. Eksempler:
// 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 af DOM med jQuery
Nu hvor du ved, hvordan du kan vælge forskellige elementer på en webside, kan du ændre dem ved hjælp af jQuery-metoder. Som tidligere nævnt kan du ofte kæde disse handlinger for at få meget gjort med lidt kodning. Nogle eksempler:
// 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();Håndtering af begivenheder med jQuery
Den slags DOM-manipulationer, der er beskrevet ovenfor, ville gå ubemærket hen af webbesøgende, hvis det hele skete, så snart en side blev indlæst. Derfor kan din jQuery-applikation registrere og reagere på hændelser som museklik, musebevægelser, tastetryk og meget mere for at skabe en virkelig responsiv oplevelse.
Registrering af museklik med jQuery
At reagere på et museklik (eller et tryk på en touchscreen-enhed) er en almindelig opgave for webapplikationer. Vi har kombineret noget jQuery og HTML i et eksempel, der også udnytter jQuerys indbyggede event -object, som vil indeholde nyttige oplysninger om vores “klikbegivenhed”:
<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> Resultatet:
Registrering af musebevægelser med jQuery
Det er nyttigt i mange responsive webapplikationer at kende musemarkørens aktuelle placering over en webside. Her er et eksempel på, hvordan jQuery kan hjælpe:
<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>Eksemplet ovenfor viser også, hvordan jQuerys css() -metode kan bruges til at indstille flere CSS-egenskaber på én gang. Her er resultatet:
Håndtering af Ajax-forespørgsler med jQuery
En stor del af jQuerys popularitet er dens evne til at forenkle de Ajax-forespørgsler, som webapplikationer kan bruge til at udveksle data med servere uden at genindlæse sider. Biblioteket har mange værktøjer til at håndtere Ajax-forespørgsler om data i formaterne almindelig tekst, HTML, XML og JSON. JQuery-tilgangen er at tilbyde kortfattede muligheder for de mest almindelige opgaver. En af de enkleste i Ajax-værktøjskassen er 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>Der sker meget der med kun tre linjer JavaScript og to HTML-elementer. Resultatet ville se nogenlunde sådan her ud:
Sådan bruger du jQuery UI
Tilføj jQuery UI-plugins til dine projekter, og du vil få adgang til mange specielle effekter og widgets, der er bygget på jQuery-kernebiblioteket. Her er et eksempel, hvor du bruger jQuery UI til at tilføje en pop-up-kalender som en datovælger i en webformular.
Først skal du tilføje jQuery UI-biblioteket og dets understøttende CSS til dine websider. I dette eksempel linker vi til bibliotekerne på Cloudflares JavaScript CDN sammen med det centrale jQuery-bibliotek:
<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" />Derefter skal du tilføje en formular input -feltet i din HTML og via JavaScript vedhæfte jQuery UI’s datepicker() -metode ved hjælp af en selector:
<label for="myDate">Date:</label>
<input type="text" id="myDate" name="myDate">
<script>
$( function() {
$( "#myDate" ).datepicker();
} );
</script> Hvis du klikker på input formularfeltet, starter datovælgeren nu:
Sådan bruger du jQuery i WordPress
Biblioteket jQuery leveres med WordPress og er en vigtig komponent i mange WordPress-temaer. Selv hvis dit nuværende tema ikke allerede bruger jQuery, kan du drage fordel af registreringen af JavaScript-afhængigheder i WordPress for at få al din jQuery-kode op og køre.
Du gør dette ved at redigere filen functions.php, der er en del af dit tema. En opdatering af et tema kan overskrive denne fil, så det er en god praksis at holde dine ændringer sikre ved først at oprette et child theme og redigere functions.php-filen der. Opret i det mindste en manuel WordPress-backup, før du fortsætter.
Registrering af dit jQuery JavaScript i functions.php
Du kan bruge en FTP- eller SFTP-klient til at overføre functions.php-filen mellem dit skrivebord og webserveren for at redigere den. WordPress-administratorer kan også ændre functions.php i CMS’et:
Vælg Udseende > Temafileditor fra dashboardet.
Klik på Theme functions i menuen til venstre.
Indholdet af din functions.php-fil vil afhænge af det aktuelt aktive tema. Ovenstående er funktioner i Twenty Twenty-One-temaet. Du kan tilføje dit eget jQuery-script til din hjemmesides konfiguration ved hjælp af WordPress-hjælpefunktionen wp_enqueue_script(). Her er skabelonen for denne funktion:
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );Og her er, hvad alt det betyder:
- $handle: Det brugervenlige navn, der er knyttet til dette script. (jQuery-kernebiblioteket er allerede registreret i WordPress med Handle jquery)
- $src: Stien og filnavnet eller URL’en, der peger på JavaScript-kildekoden.
- $deps: Handles for eventuelle andre JavaScript-kilder, som dette script kræver for at fungere korrekt.
- $ver: Ethvert versionsnummer, som du har tildelt din JavaScript-kildekode.
- $in_footer: Hvis indstillet til true, vil scriptet blive tilføjet nær bunden af siden. Ellers vil scripts blive placeret i blokken
<head>.
Når et script er sat i kø, tilføjes det til en side med funktionen add_action(). Se det hele i aktion ved at tilføje en blok som denne nederst 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' );Ovenfor får det nye jQuery-script Handle my_script, og WordPress-hjælpefunktionen get_template_directory_uri() hjælper med at oprette en URL til JavaScript-filen i temaets mapper.
Et array af andre handles fortæller WordPress, at my_script afhænger af jQuery core, jQuery-UI core og jQuery-UI datepicker-pluginet Endelig har vi tildelt scriptets versionsnummer 1.0 og bedt om at få det placeret nær bunden af siden.
Sådan indlæses jQuery fra et CDN i WordPress
Vi ved, at jQuery kan serveres fra flere content delivery networks. Vi ved også, at WordPress ud af boksen ønsker at indlæse jQuery og mange jQuery-plugins fra filsystemet på den lokale webserver.
Du kan ændre denne adfærd ved at fjerne de konfigurationsoplysninger, der er registreret med det eksisterende jquery-handle, og omskrive dem. For at gøre det skal du tilføje en kodeblok i functions.php, der begynder 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' );Jquery-handle er blevet tildelt jQuery-biblioteket på Cloudflare CDN, og det er fortsat en afhængighed for det lokale my_script. Du kan bruge den samme fremgangsmåde til at hente andre jQuery-komponenter — som jQuery-UI — fra et CDN.
Hvis du vil vide mere om jQuery og WordPress, har vi en vejledning til fejlfinding af konfigurationsproblemer, der kan resultere i fejl som “jQuery Is Not Defined“.
Opsummering
I mere end 15 år har open source-biblioteket jQuery hjulpet udviklere med at bygge rige, dynamiske webapplikationer med så lidt kodning som muligt. I dag bruges jQuery på flere websteder end noget andet JavaScript-bibliotek.
Det er også inkluderet i nogle populære content management systemer, herunder WordPress. Desuden hjælper et robust økosystem af jQuery-plugins, der er oprettet af andre JavaScript-programmører, udviklere med forskellige niveauer af erfaring med at tilføje avancerede funktioner til deres websteder.
Og hvis du ønsker at bygge jQuery-drevne websteder og applikationer, skal du tage et kig på Kinstas Administreret WordPress-hostingplaner og applikations- og databasehostingløsninger.
