{"id":45962,"date":"2022-09-27T10:51:05","date_gmt":"2022-09-27T10:51:05","guid":{"rendered":"https:\/\/kinqsta.com\/se\/?p=45962&#038;post_type=knowledgebase&#038;preview_id=45962"},"modified":"2025-10-01T20:02:39","modified_gmt":"2025-10-01T20:02:39","slug":"vad-ar-jquery","status":"publish","type":"post","link":"https:\/\/kinqsta.com\/se\/blog\/vad-ar-jquery\/","title":{"rendered":"Vad \u00e4r jQuery? En titt p\u00e5 webbens mest anv\u00e4nda JavaScript-bibliotek"},"content":{"rendered":"<p>Det \u00e4r sv\u00e5rt att \u00f6verskatta den inverkan som <a href=\"https:\/\/kinqsta.com\/se\/blog\/javascript-biblioteken\/#jquery\" rel=\"noopener\">jQuery<\/a> har haft p\u00e5 webbutvecklingen. Detta JavaScript-bibliotek med \u00f6ppen k\u00e4llkod sl\u00e4pptes f\u00f6r mer \u00e4n 15 \u00e5r sedan.<\/p>\n<p>Det var en verktygsl\u00e5da som skapade en ny f\u00f6renkling f\u00f6r annars komplicerad <a href=\"https:\/\/kinqsta.com\/se\/blog\/basta-programmeringsspraket-att-lara-sig\/#javascript\" rel=\"noopener\">JavaScript-programmering<\/a>. jQuery forts\u00e4tter att leva upp till utvecklarnas motto: &#8221;\u00c4n idag \u00e4r jQuery popul\u00e4rt bland professionella utvecklare.<\/p>\n<p>\u00c4ven de som har liten eller noll programmeringserfarenhet kan dock anv\u00e4nda biblioteket f\u00f6r att l\u00e4gga till avancerade funktioner p\u00e5 sina webbplatser. H\u00e4r \u00e4r vad som ligger bakom en av <a href=\"https:\/\/kinqsta.com\/web-development\/\" rel=\"noopener\">webbutvecklingens<\/a> st\u00f6rsta framg\u00e5ngssagor.<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<p><strong>Kolla in v\u00e5r <a href=\"https:\/\/www.youtube.com\/watch?v=aN8V-Ah2y4Q\">videoguide om jQuery, webbens mest anv\u00e4nda JavaScript-bibliotek<\/a><\/strong><\/p>\n<kinsta-video src=\"https:\/\/www.youtube.com\/watch?v=aN8V-Ah2y4Q\"><\/kinsta-video>\n<h2>Hur popul\u00e4rt \u00e4r jQuery?<\/h2>\n<p>StackOverflow&#8217;s unders\u00f6kning 2022 av <a href=\"https:\/\/survey.stackoverflow.co\/2022\/#most-popular-technologies-webframe-prof\" target=\"_blank\" rel=\"noopener noreferrer\">webbtekniker som anv\u00e4nds av professionella utvecklare<\/a> visade att drygt 29 % av de \u00f6ver 45 000 svarande arbetade med jQuery. Bland <a href=\"https:\/\/kinqsta.com\/se\/blog\/javascript-biblioteken\/#the-most-popular-javascript-libraries\" rel=\"noopener\">JavaScript-biblioteken<\/a> s\u00e5 var jQuery n\u00e4st b\u00e4st efter <a href=\"https:\/\/kinqsta.com\/blog\/what-is-react-js\/\" rel=\"noopener\">React.js<\/a>. React \u00e4r ett bibliotek som f\u00f6rst utvecklades p\u00e5 Facebook (numera Meta) 2011 och som nu anv\u00e4nds av \u00f6ver 44 % av dessa utvecklare.<\/p>\n<figure style=\"width: 1024px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/08\/stackoverflow-2022-web-technologies-survey.png\" alt=\"Popul\u00e4ra ramverk och tekniker f\u00f6r webben \u00e5r 2022. (Bildk\u00e4lla: StackOverflow)\" width=\"1024\" height=\"490\"><figcaption class=\"wp-caption-text\">Popul\u00e4ra ramverk och tekniker f\u00f6r webben \u00e5r 2022. (Bildk\u00e4lla: <a href=\"https:\/\/survey.stackoverflow.co\/2022\/\">StackOverflow<\/a>)<\/figcaption><\/figure>\n<p>Men webbutvecklarnas nuvarande projekt ber\u00e4ttar inte hela historien. Baserat p\u00e5 BuiltWith&#8217;s <a href=\"https:\/\/trends.builtwith.com\/javascript\/jQuery\" target=\"_blank\" rel=\"noopener noreferrer\">Internetteknologi-trender<\/a> s\u00e5 \u00e5terfinns jQuery p\u00e5 mer \u00e4n 80 miljoner webbplatser \u00e5r 2022. Det \u00e4r ett stort f\u00f6rspr\u00e5ng j\u00e4mf\u00f6rt med de n\u00e4stan 11 miljoner webbplatser som k\u00f6r React.<\/p>\n\n<p>Biblioteket jQuery har varit med i k\u00e4rnan i WordPress i mer \u00e4n ett decennium. Som ett resultat s\u00e5 \u00e4r det tillg\u00e4ngligt direkt i l\u00e5dan f\u00f6r hundratals <a href=\"https:\/\/kinqsta.com\/se\/blog\/snabbaste-wordpress-theme\/\" rel=\"noopener\">teman<\/a> som f\u00f6rlitar sig p\u00e5 dess funktionalitet. Det exempelvis att skapa v\u00e4ldigt dynamiska webbplatser.<br \/>\n<a href=\"https:\/\/kinqsta.com\/se\/blog\/wordpress-vs-drupal\/\" rel=\"noopener\">Drupal<\/a> \u00e4r ett annat popul\u00e4rt <a href=\"https:\/\/kinqsta.com\/blog\/content-management-system\/\" rel=\"noopener\">inneh\u00e5llshanteringssystem<\/a> som har inkluderat jQuery i sina k\u00e4rnkomponenter. Oavsett vilken teknik som \u00e4r utvecklarnas aktuella favoriter s\u00e5 f\u00f6rblir jQuery det <em>mest anv\u00e4nda<\/em> JavaScript-biblioteket p\u00e5 webben.<\/p>\n<h2>En kort historia om jQuery<\/h2>\n<p><a href=\"https:\/\/kinqsta.com\/se\/marknadsandel-for-webblasare\/\" rel=\"noopener\">Kampen om webbl\u00e4sarna<\/a> har utk\u00e4mpats sedan webbens b\u00f6rjan. Utvecklare har alltid haft m\u00e5nga alternativ. N\u00e4r webbutvecklaren John Resig presenterade jQuery \u00e5r 2006 s\u00e5 var Microsofts webbl\u00e4sare Internet Explorer den <a href=\"https:\/\/www.visualcapitalist.com\/internet-browser-market-share\/\" target=\"_blank\" rel=\"noopener noreferrer\">obestridda marknadsledaren<\/a>.<\/p>\n<p>Det skedde en omkastning av Netscap mindre \u00e4n ett decennium tidigare. Vid den tidpunkten s\u00e5 hade Mozilla&#8217;s nya Firefox en marknadsandel p\u00e5 10 % (j\u00e4mf\u00f6rt med Microsofts 84 %) och Apples Safari hade precis dykt upp p\u00e5 scenen. Google&#8217;s Chrome, dagens marknadsledare, fanns \u00e4nnu inte. JavaScript-programmerare som Resig k\u00e4mpade regelbundet med att skriva kod som skulle fungera i alla webbl\u00e4sare.<\/p>\n<p>Hans nya jQuery-bibliotek byggdes f\u00f6r att ta itu med skillnaderna i hur JavaScript implementerades av dessa webbl\u00e4sare. Som ett resultat s\u00e5 skulle utvecklare beh\u00f6va skriva mindre kod samtidigt som de utf\u00f6rde uppgifter som dessa:<\/p>\n<ul>\n<li>Manipulera <a href=\"https:\/\/kinqsta.com\/blog\/what-is-html\/\">HTML-element<\/a> p\u00e5 en webbsida<\/li>\n<li>Dynamisk \u00e4ndring av CSS<\/li>\n<li>Svar p\u00e5 h\u00e4ndelser som musklick och tangenttryckningar<\/li>\n<li>Hantering av Ajax-beg\u00e4randen f\u00f6r att uppdatera sidans inneh\u00e5ll utan att ladda om<\/li>\n<\/ul>\n<p>Efter Resigs lansering av biblioteket s\u00e5 byggde andra utvecklare till\u00e4mpningar p\u00e5 jQuery. De delade ofta sitt arbete som plugins f\u00f6r att g\u00f6ra nya funktioner tillg\u00e4ngliga f\u00f6r alla.<\/p>\n<h3>Vad \u00e4r jQuery UI?<\/h3>\n<p><a href=\"https:\/\/jqueryui.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">jQuery UI<\/a> \u00e4r en <a href=\"https:\/\/trends.builtwith.com\/javascript\/jQuery-UI\" target=\"_blank\" rel=\"noopener noreferrer\">popul\u00e4r samling plugins<\/a> som \u00e4r utformade f\u00f6r att f\u00f6rb\u00e4ttra anv\u00e4ndargr\u00e4nssnitt. Det ses som ett &#8221;officiellt&#8221; komplement till jQuery-biblioteket och l\u00e4gger till en m\u00e4ngd specialeffekter och widgetar. Detta inkluderar exempelvis datumv\u00e4ljare, progressionsf\u00e4lt, skjutreglage, spinnare och paneler med flikar eller hopf\u00e4llbara paneler.<\/p>\n<h2>Vad \u00e4r skillnaden mellan jQuery och JavaScript?<\/h2>\n<p><strong>Det \u00e4r viktigt att veta att jQuery <em>\u00e4r<\/em> JavaScript.<\/strong> N\u00e4r du anv\u00e4nder jQuery s\u00e5 arbetar du med instanser av JavaScript-objekt som \u00e5terspeglar jQuery&#8217;s namngivningskonventioner f\u00f6r metoder (funktioner) och egenskaper. L\u00e5t oss ta en titt p\u00e5 <a href=\"https:\/\/kinqsta.com\/blog\/what-is-javascript\/#vanilla-javascript\" rel=\"noopener\">vanilla JavaScript<\/a> och jQuery som tar sig an samma uppgift.<\/p>\n<p>H\u00e4r \u00e4r ett stycke HTML n\u00e5gonstans p\u00e5 en webbsida:<\/p>\n<pre><code class=\"lang-html\">&lt;p id=\"target\"&gt;Old text&lt;\/p&gt;<\/code><\/pre>\n<p>Vanilla JavaScript-kod kan hitta elementet <code>&lt;p&gt;<\/code> med <code>id<\/code> &#8221;target&#8221; &#8211; och sedan ers\u00e4tta texten mellan taggarna. Det kan se ut s\u00e5 h\u00e4r:<\/p>\n<pre><code class=\"language-js\">const content = document.getElementById( \"target\" );\ncontent.textContent = \"New text\";<\/code><\/pre>\n<p>JavaScript-metoden <code>getElementById()<\/code> returnerar ett objekt som inneh\u00e5ller HTML- och textinneh\u00e5llet i stycket med &#8221;target&#8221; <code>id<\/code>. Objektet tilldelas den konstanta referensen <code>content<\/code> Dess egenskap <code>textContent<\/code> \u00e4ndras sedan till &#8221;New text&#8221;.<\/p>\n<p>JavaScript g\u00f6r det m\u00f6jligt att kedja metoder. Som ett resultat s\u00e5 blir det m\u00f6jligt att uppn\u00e5 ovanst\u00e5ende med ett enda uttalande:<\/p>\n<pre><code class=\"language-js\"> document.getElementById( \"target\" ).textContent = \"New text\"; <\/code><\/pre>\n<p>Det \u00e4r d\u00e4rf\u00f6r inte f\u00f6rv\u00e5nande att du \u00e4ven kan kedja jQuery-\u00e5tg\u00e4rder. Om du vill \u00e4ndra &#8221;gammal text&#8221; till &#8221;ny text&#8221; med hj\u00e4lp av jQuery s\u00e5 kan du g\u00f6ra s\u00e5 h\u00e4r:<\/p>\n<pre><code class=\"language-js\">$( \"#target\" ).text( \"New text\" );<\/code><\/pre>\n<p>Dollartecknet (<code>$<\/code>) \u00e4r ett kort alias f\u00f6r <code>jQuery<\/code>. <code>( \"#target\" )<\/code> \u00e4r ett exempel p\u00e5 en jQuery-selektor. I det h\u00e4r fallet s\u00e5 letar selektorn efter ett HTML-element med <code>id<\/code> f\u00f6r v\u00e5rt m\u00e5lavsnitt. Metoden jQuery <code>text()<\/code> \u00e4r kedjad f\u00f6r att g\u00f6ra &#8221;New text&#8221; till styckets inneh\u00e5ll.<\/p>\n<h2>Hur du anv\u00e4nder jQuery p\u00e5 din webbplats<\/h2>\n<p>L\u00e4gg till jQuery p\u00e5 din webbplats f\u00f6r att l\u00e4nka bibliotekets kod fr\u00e5n webbplatsens sidor. JQuery-biblioteket kan finnas p\u00e5 din webbserver eller p\u00e5 ett offentligt tillg\u00e4ngligt <a href=\"https:\/\/kinqsta.com\/se\/blog\/wordpress-cdn\/\">inneh\u00e5llsleveransn\u00e4tverk (CDN)<\/a>. P\u00e5 den officiella webbplatsen f\u00f6r jQuery s\u00e5 kan du f\u00e5 tillg\u00e5ng till de <a href=\"https:\/\/jquery.com\/download\/\" target=\"_blank\" rel=\"noopener noreferrer\">senaste versionerna av biblioteket<\/a>.<\/p>\n<p>JQuery-biblioteket finns i <a href=\"https:\/\/kinqsta.com\/blog\/minify-javascript\/\">minifierad (komprimerad) JavaScript<\/a> f\u00f6r snabb laddning i produktionen eller okomprimerad f\u00f6r l\u00e4sbarhet och fels\u00f6kning.<\/p>\n<figure style=\"width: 1017px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/08\/jquery-official-download.jpg\" alt=\"Den officiella webbplatsen f\u00f6r jQuery.\" width=\"1017\" height=\"498\"><figcaption class=\"wp-caption-text\">Den officiella webbplatsen f\u00f6r jQuery.<\/figcaption><\/figure>\n<p>Du kommer \u00e4ven att skriva \u00e5tminstone lite JavaScript f\u00f6r att \u00e5beropa jQuery och ta itu med uppgifter som \u00e4r specifika f\u00f6r din webbapplikation. I HTML-sidorna p\u00e5 din webbplats s\u00e5 kan du l\u00e4nka jQuery-biblioteket och filen med din kod p\u00e5 f\u00f6ljande s\u00e4tt:<\/p>\n<pre><code class=\"language-html\">&lt;script type=\"text\/javascript\" src=\"\/js\/jquery-3.6.0.min.js\"&gt;&lt;\/script&gt;\n&lt;script type=\"text\/javascript\" src=\"\/js\/my_script.js\"&gt;&lt;\/script&gt;<\/code><\/pre>\n<p>I det h\u00e4r exemplet s\u00e5 finns version 3.6.0 av jQuery och din platsspecifika kod i en fil som heter <strong>my_script.js<\/strong> i katalogen<code>\/js\/<\/code> p\u00e5 webbplatsen. Biblioteket jQuery ing\u00e5r vanligtvis i avsnittet <code>&lt;head&gt;<\/code> p\u00e5 en webbsida. Det \u00e4r vanligt att utvecklare placerar vissa l\u00e4nkar till JavaScript-filer, inklusive kod som \u00e4r beroende av jQuery-biblioteket, n\u00e4ra botten p\u00e5 en sida. De placeras vanligtvis strax f\u00f6re st\u00e4ngningen av <code>&lt;body&gt;<\/code>-taggen. Du vill alltid att all platsspecifik kod som \u00e5beropar jQuery ska visas <strong>efter<\/strong> l\u00e4nken till sj\u00e4lva biblioteket.<\/p>\n<h3>L\u00e4nka till jQuery p\u00e5 ett CDN-bibliotek<\/h3>\n<p>Biblioteket jQuery laddas ofta ner snabbare n\u00e4r det levereras av ett <a href=\"https:\/\/kinqsta.com\/se\/blog\/wordpress-cdn\/\">robust CDN<\/a>. jQuery \u00e4r s\u00e5 utbrett p\u00e5 webben att det finns en god chans att en bes\u00f6kare p\u00e5 din webbplats redan har biblioteket cachelagrat i sin webbl\u00e4sare f\u00f6r flera CDN: er. Vi kan \u00e4ndra HTML-utdraget ovan f\u00f6r att anv\u00e4nda Cloudflare&#8217;s n\u00e4tverk f\u00f6r leverans av JavaScript-inneh\u00e5ll p\u00e5 f\u00f6ljande s\u00e4tt:<\/p>\n<pre><code class=\"language-html\">&lt;script type=\"text\/javascript\" src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.6.0\/jquery.min.js\"&gt;&lt;\/script&gt;\n&lt;script type=\"text\/javascript\" src=\"\/js\/my_script.js\"&gt;&lt;\/script&gt;<\/code><\/pre>\n<h3>Anropa jQuery i din applikation<\/h3>\n<p>N\u00e4r du skriver din jQuery-applikation s\u00e5 \u00e4r det bra att bekr\u00e4fta att webbsidan har laddats f\u00e4rdigt innan din kod b\u00f6rjar k\u00f6ras. Du kan exempelvis testa detta genom att anv\u00e4nda metoden <code>ready()<\/code>, som \u00f6verl\u00e4mnar din kod n\u00e4r dokumentet har laddats, s\u00e5 h\u00e4r:<\/p>\n<pre><code class=\"language-js\">$(document).ready(function() {\n\/\/ Your jQuery application will go here\n});<\/code><\/pre>\n<p>Denna start f\u00f6r en jQuery-applikation \u00e4r s\u00e5 vanlig att bibliotekets utvecklare har utarbetat en \u00e4nnu kortare syntax:<\/p>\n<pre><code class=\"language-js\">$(function() {\n\/\/ Your jQuery application will go here\n});<\/code><\/pre>\n<h3>Att v\u00e4lja element i DOM med jQuery<\/h3>\n<p>Grunden f\u00f6r de flesta jQuery-applikationer \u00e4r f\u00f6rm\u00e5gan att g\u00e5 igenom strukturer p\u00e5 en webbsida som ett objekt (<a href=\"https:\/\/kinqsta.com\/blog\/what-is-javascript\/#the-javascript-dom\" rel=\"noopener\">dokumentobjektmodellen, eller DOM<\/a>). De kan sedan rikta in sig p\u00e5 olika element i HTML. Att v\u00e4lja ett element (eller en grupp av element) \u00e4r steget innan man <em>g\u00f6r <\/em>n\u00e5got med det elementet. Det kan exempelvis handla om att \u00e4ndra dess utseende eller uppdatera n\u00e4rliggande inneh\u00e5ll. jQuery-selektorer riktar sig mot DOM-egenskaper p\u00e5 olika s\u00e4tt. De vanligaste inkluderar:<\/p>\n<ul>\n<li>Med HTML-element (tagg) namn<\/li>\n<li>Genom CSS-egenskaper (inklusive ID och klassnamn)<\/li>\n<li>Med hj\u00e4lp av ett elements relativa position i DOM<\/li>\n<li>Genom v\u00e4rdet p\u00e5 inneh\u00e5llet i formul\u00e4rf\u00e4lt<\/li>\n<li>Ett elementets aktuella tillst\u00e5nd<\/li>\n<\/ul>\n<p>H\u00e4r \u00e4r n\u00e5gra exempel:<\/p>\n<pre><code class=\"language-js\">\/\/ Select all HTML paragraph tags in a document\n$( \"p\" );\n\n\/\/ Select the element with the ID \"myID\"\n$( \"#myID\" );\n\n\/\/ Select all elements with the CSS class name \"myClass\"\n$( \".myClass\" );\n\n\/\/ Select all input, textarea, select, and button elements in a form\n$( \":input\" );\n\n\/\/ Select the children of some other element\n\/\/ (In this case, the entries in an unordered list)\n$( \"ul &gt; li\" ); \n\n\/\/ Select all anchors with the rel attribute \u201cnofollow\u201d\n$( \"a[rel='nofollow']\" ); \n\n\/\/ Select all checkboxes in a \u201cchecked\u201d state\n$( \"input:checked\" )<\/code><\/pre>\n<p>Du kan kombinera jQuery-selektorer f\u00f6r en mer specifik inriktning. Exempel:<\/p>\n<pre><code class=\"language-js\">\/\/ HTML paragraph tags with the CSS class \u201cmyClass\u201d\n$( \"p.myClass\" ); \n\n\/\/ HTML paragraphs with the text \u201cKinsta\u201d anywhere within them\n$( \"p:contains('Kinsta')\" ); \n\n\/\/ HTML div tags that have at least one paragraph tag as a descendent\n$( \"div:has(p)\" ); \n\n\/\/ The first entry in any unordered list with the CSS class \u201cmyList\u201d \n$( \"ul.myList li:first\" ); <\/code><\/pre>\n<h3>Manipulering av DOM med jQuery<\/h3>\n<p>Nu n\u00e4r du vet hur du v\u00e4ljer olika element p\u00e5 en webbsida s\u00e5 kan du \u00e4ndra dem med hj\u00e4lp av jQuery-metoder. Som vi har n\u00e4mnt tidigare s\u00e5 kan du ofta kedja dessa \u00e5tg\u00e4rder f\u00f6r att f\u00e5 mycket gjort med lite kodning. N\u00e5gra exempel:<\/p>\n<pre><code class=\"language-js\">\/\/ Select the element with the ID \u201calert\u201d and add a red background\n$( \"#alert\" ).css( \"background-color\", \"red\" ); \n\n\/\/ Select the element with the ID \u201calert\u201d and add the class \u201curgent\u201d to its markup\n$( \"#alert\" ).addClass( \"urgent\" ); \n\n\/\/ Find any paragraph with the class \u201cmyName\u201d and make its content \u201cKinsta\u201d\n$( \"p.myName\" ).text( \"Kinsta\" );\n\n\/\/ Like the statement above, but with support for HTML markup\n$( \"p.myName\" ).html( \"&lt;strong&gt;Kinsta&lt;\/strong&gt;\" ); \n\n\/\/ Add the attribute\/value rel=\u201dnofollow\u201d to every anchor\n$( \"a\" ).attr( \"rel\", \"nofollow\" );\n\n\/\/ Hide the element with the ID \u201cmyDiv\u201d (but keep it in the DOM)\n$( \"#myDiv\" ).hide(); \n\n\/\/ Make the element hidden above visible again\n$( \"#myDiv\" ).show();\n\n\/\/ Remove from the DOM everything INSIDE the element with the ID \u201cmyDiv\u201d\n$( \"#myDiv\" ).empty(); \n\n\/\/ Remove from the DOM the entire element with the ID \u201cmyDiv\u201d\n$( \"#myDiv\" ).remove();<\/code><\/pre>\n<h3>Hantering av h\u00e4ndelser med jQuery<\/h3>\n<p>T\u00e4nk om den typ av DOM-manipulation som beskrivs ovan skedde s\u00e5 fort en sida laddas. D\u00e5 skulle den g\u00e5 obem\u00e4rkt f\u00f6rbi av webbes\u00f6kare. D\u00e4rf\u00f6r kan din jQuery-applikation uppt\u00e4cka och reagera p\u00e5 h\u00e4ndelser som musklick, musr\u00f6relser, tangenttryckningar med mera f\u00f6r att skapa en verkligt responsiv upplevelse.<\/p>\n<h4>Reaktion p\u00e5 musklick med jQuery<\/h4>\n<p>Att reagera p\u00e5 ett musklick (eller ett tryck p\u00e5 en peksk\u00e4rmsenhet) \u00e4r en vanlig uppgift f\u00f6r webbapplikationer. Vi har kombinerat lite jQuery och HTML i ett exempel som ocks\u00e5 drar nytta av jQuerys inbyggda objekt <code>event<\/code>, som kommer att inneh\u00e5lla anv\u00e4ndbar information om v\u00e5r &#8221;klickh\u00e4ndelse&#8221;:<\/p>\n<pre><code class=\"language-html\">&lt;script&gt;\n\/\/ Invoke jQuery\n$(document).ready(function () {\n    \/\/ Assign \u201cclick\u201d method to all button elements\n    \/\/ Our function passes the built-in object with event details\n    $( \"button\" ).click(function ( event ) { \n        \/\/ Make sure all button backgrounds are white\n        $( \"button\" ).css( \"background-color\", \"white\" );\n        \/\/ Change our H2 text to report the ID of the clicked button\n        $( \"#buttonReport\" ).text(\"You clicked \" + event.target.id); \n        \/\/ Set the background color of the clicked button to red \n        $( \"#\" + event.target.id ).css(\"background-color\", \"red\");\n    });\n}); \n&lt;\/script&gt;\n\n&lt;h2 id=\"buttonReport\"&gt;Click a button!&lt;\/h2&gt;\n&lt;button id=\"Button1\"&gt;Button 1&lt;\/button&gt;\n&lt;button id=\"Button2\"&gt;Button 2&lt;\/button&gt;\n&lt;button id=\"Button3\"&gt;Button 3&lt;\/button&gt; <\/code><\/pre>\n<p>Resultat:<\/p>\n<figure style=\"width: 1024px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/08\/jquery-detecting-mouse-clicks.png\" alt=\"Uppt\u00e4ckt av musklick.\" width=\"1024\" height=\"426\"><figcaption class=\"wp-caption-text\">Uppt\u00e4ckt av musklick.<\/figcaption><\/figure>\n<h4><strong>Uppt\u00e4ckt av musens r\u00f6relse med jQuery<\/strong><\/h4>\n<p>Att veta var muspekaren befinner sig p\u00e5 en webbsida \u00e4r anv\u00e4ndbart i m\u00e5nga responsiva webbapplikationer. H\u00e4r \u00e4r ett exempel p\u00e5 hur jQuery kan hj\u00e4lpa till:<\/p>\n<pre><code class=\"language-html\">&lt;script&gt;\n$(document).ready(function () { \n    \/\/ Detect when the mouse is over a div with the mouseover() method  \n    $( \"div\" ).mouseover(function ( event ) { \n        \/\/ Make the div under the mouse grey and taller\n        $( \"#\" + event.target.id ).css({ \n           \"background-color\" : \"lightgrey\",\n           \"height\" : \"8em\"\n        });\n    }); \n    \/\/ Detect when the mouse moves away with the mouseout() method \n    $( \"div\" ).mouseout(function ( event ) { \n        \/\/ Return the size and color of the div to its original state\n        $( \"#\" + event.target.id ).css({\n           \"background-color\" : \"white\",\n            \"height\" : \"4em\"\n        });\n    });\n}); \n&lt;\/script&gt;\n\n&lt;div id=\"div1\"&gt;Div 1&lt;\/div&gt;\n&lt;div id=\"div2\"&gt;Div 2&lt;\/div&gt;\n&lt;div id=\"div3\"&gt;Div 3&lt;\/div&gt;<\/code><\/pre>\n<p>Exemplet ovan visar \u00e4ven hur jQuerys <code>css()<\/code>-metod kan anv\u00e4ndas f\u00f6r att st\u00e4lla in flera CSS-egenskaper samtidigt. H\u00e4r \u00e4r resultatet:<\/p>\n<figure style=\"width: 1024px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/08\/jquery-detecting-mouse-movement.png\" alt=\"Uppt\u00e4ckt av mus-h\u00e4ndelser.\" width=\"1024\" height=\"461\"><figcaption class=\"wp-caption-text\">Uppt\u00e4ckt av mus-h\u00e4ndelser.<\/figcaption><\/figure>\n<h3>Hantering av Ajax-beg\u00e4randen med jQuery<\/h3>\n<p>En stor del av jQuery&#8217;s popularitet \u00e4r dess f\u00f6rm\u00e5ga att f\u00f6renkla Ajax-beg\u00e4randen. Dessa kan webbapplikationer anv\u00e4nda f\u00f6r att utbyta data med servrar utan att ladda om sidorna. Biblioteket har m\u00e5nga verktyg f\u00f6r att hantera Ajax-beg\u00e4randen om data i formaten vanlig text, HTML, XML och JSON. JQuery&#8217;s tillv\u00e4gag\u00e5ngss\u00e4tt \u00e4r att erbjuda kortfattade alternativ f\u00f6r de vanligaste uppgifterna. Ett av de enklaste i Ajax-verktygsl\u00e5dan \u00e4r <code>load()<\/code>-metoden:<\/p>\n<pre><code class=\"language-html\">&lt;div id=\"myContent\"&gt;Replace Me&lt;\/div&gt;\n&lt;button&gt;Load Content&lt;\/button&gt;\n\n&lt;script&gt; \n\/\/ Request the file content.php from the server after a button is clicked.\n\/\/ Place the results in the HTML element with the ID \u201cmyContent\u201d \n$( \"button\" ).click( function (){ \n    $( \"#myContent\" ).load( \"content.php\" );\n}); \n&lt;\/script&gt;<\/code><\/pre>\n<p>D\u00e4r h\u00e4nder mycket med bara tre rader <a href=\"https:\/\/kinqsta.com\/javascript\/\">JavaScript<\/a> och tv\u00e5 HTML-element. Resultatet skulle se ut ungef\u00e4r s\u00e5 h\u00e4r:<\/p>\n<figure style=\"width: 984px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/08\/jquery-ajax-handling-with-load-method.png\" alt=\"jQuery load()-metoden l\u00e4gger till inneh\u00e5ll utan att sidan uppdateras.\" width=\"984\" height=\"375\"><figcaption class=\"wp-caption-text\">jQuery load()-metoden l\u00e4gger till inneh\u00e5ll utan att sidan uppdateras.<\/figcaption><\/figure>\n<h3>Hur man anv\u00e4nder jQuery UI<\/h3>\n<p>L\u00e4gg till jQuery UI-plugins till dina projekt, s\u00e5 f\u00e5r du tillg\u00e5ng till m\u00e5nga specialeffekter och widgets som \u00e4r byggda p\u00e5 jQuerys k\u00e4rnbibliotek. H\u00e4r \u00e4r ett exempel som anv\u00e4nder jQuery UI f\u00f6r att l\u00e4gga till en popup-kalender som en datumv\u00e4ljare i ett webbformul\u00e4r.<\/p>\n<p>L\u00e4gg f\u00f6rst till jQuery UI-biblioteket och dess st\u00f6djande CSS p\u00e5 dina webbsidor. I det h\u00e4r exemplet s\u00e5 l\u00e4nkar vi till biblioteken p\u00e5 Cloudflare\u2019s JavaScript CDN tillsammans med k\u00e4rnbiblioteket i jQuery:<\/p>\n<pre><code class=\"language-html\">&lt;script type=\"text\/javascript\" src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.6.0\/jquery.min.js\"&gt;&lt;\/script&gt; \n&lt;script type=\"text\/javascript\" src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jqueryui\/1.13.2\/jquery-ui.min.js\"&gt;&lt;\/script&gt\n&lt;link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jqueryui\/1.13.2\/themes\/base\/jquery-ui.min.css\" \/&gt;<\/code><\/pre>\n<p>L\u00e4gg sedan till ett <code>input<\/code>-f\u00e4lt f\u00f6r formul\u00e4r i din HTML och bifoga jQuery UI:s <code>datepicker()<\/code>-metod via JavaScript med hj\u00e4lp av en v\u00e4ljare:<\/p>\n<pre><code class=\"language-html\">&lt;label for=\"myDate\"&gt;Date:&lt;\/label&gt;\n&lt;input type=\"text\" id=\"myDate\" name=\"myDate\"&gt;\n\n&lt;script&gt;\n$( function() { \n    $( \"#myDate\" ).datepicker();\n} );\n&lt;\/script&gt; <\/code><\/pre>\n<p>Genom att klicka i <code>input<\/code>-f\u00e4lt f\u00f6r formul\u00e4r s\u00e5 startar nu datumv\u00e4ljaren:<\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/08\/jquery-ui-library-datepicker.png\" alt=\"Datumv\u00e4ljaren f\u00f6r jQuery UI.\" width=\"900\" height=\"317\"><figcaption class=\"wp-caption-text\">Datumv\u00e4ljaren f\u00f6r jQuery UI.<\/figcaption><\/figure>\n<h2>Hur man anv\u00e4nder jQuery i WordPress<\/h2>\n<p>Biblioteket jQuery levereras med WordPress och \u00e4r en viktig komponent i m\u00e5nga <a href=\"https:\/\/kinqsta.com\/se\/blog\/snabbaste-wordpress-theme\/\">WordPress-teman<\/a>. \u00c4ven om ditt nuvarande tema inte redan anv\u00e4nder jQuery s\u00e5 kan du dra nytta av registreringen av JavaScript-beroenden i WordPress f\u00f6r att f\u00e5 ig\u00e5ng all din jQuery-kod.<\/p>\n<p>Du g\u00f6r detta genom att redigera filen <strong>functions.php<\/strong> som \u00e4r en del av ditt tema. En uppdatering av ett tema kan skriva \u00f6ver den filen. Det \u00e4r med andra ord en bra metod att h\u00e5lla dina \u00e4ndringar s\u00e4kra genom att f\u00f6rst <a href=\"https:\/\/kinqsta.com\/se\/blog\/wordpress-barntema\/\" rel=\"noopener\">skapa ett undertema<\/a> och redigera <strong>functions.php<\/strong>-filen d\u00e4r. <a href=\"https:\/\/kinqsta.com\/docs\/wordpress-hosting\/wordpress-backups\/#wordpress-backup#create-wordpress-backup\" rel=\"noopener\">Skapa \u00e5tminstone en manuell WordPress-s\u00e4kerhetskopia<\/a>\u00a0innan du forts\u00e4tter.<\/p>\n<h3>Registrera ditt jQuery JavaScript i functions.php<\/h3>\n<p>Du kan anv\u00e4nda en <a href=\"https:\/\/kinqsta.com\/blog\/ftp-vs-sftp\/\" rel=\"noopener\">FTP- eller SFTP<\/a>-klient f\u00f6r att \u00f6verf\u00f6ra filen <strong>functions.php<\/strong> mellan ditt skrivbord och webbservern f\u00f6r att redigera den. <a href=\"https:\/\/kinqsta.com\/se\/blog\/wordpress-anvanderroller\/\">WordPress-administrat\u00f6rer<\/a> kan \u00e4ven \u00e4ndra <strong>functions.php<\/strong> i CMS: et:<\/p>\n<p>Fr\u00e5n instrumentpanelen v\u00e4ljer du <b>Utseende <\/b>&gt; <strong>Temafilredigerare<\/strong>.<\/p>\n<figure style=\"width: 1024px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/08\/launching-theme-file-editor.jpg\" alt=\"Starta temafilredigeraren.\" width=\"1024\" height=\"605\"><figcaption class=\"wp-caption-text\">Starta temafilredigeraren.<\/figcaption><\/figure>\n<p>Klicka p\u00e5 <strong>Temafunktioner<\/strong> i den v\u00e4nstra menyn.<\/p>\n<p><figure style=\"width: 1024px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/08\/theme-file-editor-view.jpg\" alt=\"Inne i redigeringsverktyget f\u00f6r temafiler.[\/caption ]\" width=\"1024\" height=\"473\"><figcaption class=\"wp-caption-text\">Inne i redigeringsverktyget f\u00f6r temafiler.<\/figcaption><\/figure>Inneh\u00e5llet i filen <strong>functions.php<\/strong> beror p\u00e5 vilket tema som \u00e4r aktivt f\u00f6r tillf\u00e4llet. Ovan finns funktioner f\u00f6r <a href=\"https:\/\/kinqsta.com\/se\/blog\/twenty-twenty-one-temat\/\" rel=\"noopener\">temat Twenty Twenty-One<\/a>. Du kan l\u00e4gga till ditt eget jQuery-skript i konfigurationen av din webbplats med hj\u00e4lp av WordPress-verktygsfunktionen <code>wp_enqueue_script()<\/code>. H\u00e4r \u00e4r mallen f\u00f6r den funktionen:<\/p>\n<pre><code class=\"language-php\">wp_enqueue_script( <strong>$handle<\/strong>, <strong>$src<\/strong>, <strong>$deps<\/strong>, <strong>$ver<\/strong>, <strong>$in_footer<\/strong> );<\/code><\/pre>\n<p>Och h\u00e4r \u00e4r vad allt detta betyder:<\/p>\n<ul>\n<li><strong>$handle<\/strong>: Det anv\u00e4ndarv\u00e4nliga namnet som \u00e4r kopplat till det h\u00e4r skriptet. (Biblioteket jQuery core library \u00e4r redan registrerat i WordPress med handtaget <strong>jquery<\/strong>.)<\/li>\n<li><strong>$src<\/strong>: S\u00f6kv\u00e4g och filnamn eller webbadress som riktas mot JavaScript-k\u00e4llkoden.<\/li>\n<li><strong>$deps: <\/strong>Hanteraren av eventuella andra JavaScript-k\u00e4llor som skriptet kr\u00e4ver f\u00f6r att fungera korrekt.<\/li>\n<li><strong>$ver<\/strong>: Alla versionsnummer som du har tilldelat din JavaScript-k\u00e4llkod.<\/li>\n<li><strong>$in_footer<\/strong>: Om den \u00e4r inst\u00e4lld p\u00e5 <strong>true<\/strong> s\u00e5 kommer skriptet att l\u00e4ggas till n\u00e4ra botten av sidan. Annars s\u00e5 placeras skript i blocket <code>&lt;head&gt;<\/code>.<\/li>\n<\/ul>\n<p>N\u00e4r ett skript har st\u00e4llts i k\u00f6 s\u00e5 l\u00e4ggs det till p\u00e5 en sida med funktionen <code>add_action()<\/code>. Se hur det fungerar genom att l\u00e4gga till ett s\u00e5dant h\u00e4r block l\u00e4ngst ner i din <strong>functions.php<\/strong>-fil:<code class=\"language-php\"><\/code><\/p>\n<pre><code class=\"language-php\">\/\/ 'my_custom_scripts' is a function name of your choice\nfunction my_custom_scripts() {\n    wp_enqueue_script( \n       'my_script'\n       get_template_directory_uri() . '\/assets\/js\/my_script.js',\n       array( 'jquery', 'jquery-ui-core', 'jquery-ui-datepicker' ),\n       '1.0',\n       true ); \n} \nadd_action( 'wp_enqueue_scripts', 'my_custom_scripts' );<\/code><\/pre>\n<p>Ovan s\u00e5 f\u00e5r det nya jQuery-skriptet handtaget <strong>my_script<\/strong>. WordPress-verktygsfunktionen <code>get_template_directory_uri()<\/code> hj\u00e4lper till att skapa en <a href=\"https:\/\/kinqsta.com\/blog\/what-is-a-url\/\">webbadress<\/a>\u00a0f\u00f6r JavaScript-filen i temats kataloger.<\/p>\n<p>En rad andra handtag talar om f\u00f6r WordPress att <strong>my_script<\/strong> \u00e4r beroende av jQuery core, jQuery-UI core och jQuery-UI datepicker-plugin. Slutligen s\u00e5 har vi tilldelat skriptet versionsnummer 1.0 och bett om att det ska placeras n\u00e4ra sidans botten.<\/p>\n<h3>Hur man laddar jQuery fr\u00e5n ett CDN i WordPress<\/h3>\n<p>Vi vet att jQuery kan serveras fr\u00e5n flera inneh\u00e5llsleveransn\u00e4tverk. Vi vet \u00e4ven att WordPress, vill ladda jQuery och m\u00e5nga jQuery-plugins fr\u00e5n filsystemet p\u00e5 den lokala webbservern. Trots att det inte \u00e4r en standardl\u00f6sning.<\/p>\n<p>Du kan \u00e4ndra det beteendet genom att eliminera den konfigurationsinformation som har registrerats med den befintliga <strong>jquery<\/strong>-handlingen och skriva om den. F\u00f6r att g\u00f6ra det s\u00e5 l\u00e4gger du till ett kodblock i <strong>functions.php<\/strong> som b\u00f6rjar med funktionen <code>wp_deregister_script()<\/code>:<\/p>\n<pre><code class=\"language-php\">\/\/ 'my_custom_scripts' is a function name of your choice\nfunction my_custom_scripts() {\n    wp_deregister_script('jquery');\n    wp_register_script(\n        'jquery', \n        'https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.6.0\/jquery.min.js',\n         null,\n        '3.6.0',\n         False\n    ); \n    wp_enqueue_script( \n        'my_script'\n        get_template_directory_uri() . '\/assets\/js\/my_script.js',\n        array( 'jquery', 'jquery-ui-core', 'jquery-ui-datepicker' ),\n        '1.0',\n        true\n    ); \n } \nadd_action( 'wp_enqueue_scripts', 'my_custom_scripts' );<\/code><\/pre>\n<p>Detta \u00e4r ett beroende f\u00f6r det lokala <strong>my_script<\/strong>. Du kan anv\u00e4nda samma tillv\u00e4gag\u00e5ngss\u00e4tt f\u00f6r att h\u00e4mta andra jQuery-komponenter &#8211; som exempelvis jQuery-UI &#8211; fr\u00e5n en CDN.<\/p>\n<p>Om du vill veta mer om jQuery och WordPress s\u00e5 har vi en guide f\u00f6r att fels\u00f6ka konfigurationsproblem som kan resultera i fel som &#8221;<a href=\"https:\/\/kinqsta.com\/blog\/jquery-is-not-defined\/\" rel=\"noopener\">jQuery \u00e4r inte definierat<\/a>&#8221;.<\/p>\n\n<h2>Sammanfattning<\/h2>\n<p>I mer \u00e4n 15 \u00e5r har biblioteket jQuery med \u00f6ppen k\u00e4llkod hj\u00e4lpt utvecklare att bygga rika, dynamiska webbapplikationer med s\u00e5 lite kodning som m\u00f6jligt. Idag s\u00e5 anv\u00e4nds jQuery p\u00e5 fler webbplatser \u00e4n n\u00e5got annat JavaScript-bibliotek. Det \u00e4r \u00e4ven paketerat med n\u00e5gra popul\u00e4ra inneh\u00e5llshanteringssystem, inklusive WordPress.<\/p>\n<p>Det finns dessutom ett robust ekosystem av jQuery-plugins som har skapats av andra JavaScript-programmerare och som hj\u00e4lper utvecklare med olika erfarenhetsniv\u00e5er att l\u00e4gga till avancerade funktioner p\u00e5 sina webbplatser.<\/p>\n<p>Om du vill bygga webbplatser och applikationer som drivs av jQuery s\u00e5 kan du ta en titt p\u00e5 Kinsta&#8217;s planer f\u00f6r hanterad <a href=\"https:\/\/kinqsta.com\/se\/priser\/\" rel=\"noopener\">WordPress-hosting<\/a>\u00a0och <a href=\"https:\/\/sevalla.com\/application-hosting\/\">hostingl\u00f6sningar f\u00f6r applikationer<\/a> och <a href=\"https:\/\/sevalla.com\/database-hosting\/\">databaser<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Det \u00e4r sv\u00e5rt att \u00f6verskatta den inverkan som jQuery har haft p\u00e5 webbutvecklingen. Detta JavaScript-bibliotek med \u00f6ppen k\u00e4llkod sl\u00e4pptes f\u00f6r mer \u00e4n 15 \u00e5r sedan. Det &#8230;<\/p>\n","protected":false},"author":259,"featured_media":45963,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[360,714,672],"topic":[783],"class_list":["post-45962","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-javascript","tag-jquery","tag-languages","topic-javascript-ramverk"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Vad \u00e4r jQuery? En titt p\u00e5 webbens mest anv\u00e4nda JavaScript-bibliotek<\/title>\n<meta name=\"description\" content=\"JavaScript-biblioteket jQuery med \u00f6ppen k\u00e4llkod hj\u00e4lper utvecklare att bygga dynamiska webbappar med s\u00e5 lite kod som m\u00f6jligt. L\u00e4r dig mer.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinqsta.com\/se\/blog\/vad-ar-jquery\/\" \/>\n<meta property=\"og:locale\" content=\"sv_SE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Vad \u00e4r jQuery? En titt p\u00e5 webbens mest anv\u00e4nda JavaScript-bibliotek\" \/>\n<meta property=\"og:description\" content=\"JavaScript-biblioteket jQuery med \u00f6ppen k\u00e4llkod hj\u00e4lper utvecklare att bygga dynamiska webbappar med s\u00e5 lite kod som m\u00f6jligt. L\u00e4r dig mer.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinqsta.com\/se\/blog\/vad-ar-jquery\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstasweden\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-27T10:51:05+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-01T20:02:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinqsta.com\/se\/wp-content\/uploads\/sites\/9\/2022\/09\/what-is-jquery.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Steve Bonisteel\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"JavaScript-biblioteket jQuery med \u00f6ppen k\u00e4llkod hj\u00e4lper utvecklare att bygga dynamiska webbappar med s\u00e5 lite kod som m\u00f6jligt. L\u00e4r dig mer.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinqsta.com\/se\/wp-content\/uploads\/sites\/9\/2022\/09\/what-is-jquery.png\" \/>\n<meta name=\"twitter:creator\" content=\"@kinsta_se\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_se\" \/>\n<meta name=\"twitter:label1\" content=\"Skriven av\" \/>\n\t<meta name=\"twitter:data1\" content=\"Steve Bonisteel\" \/>\n\t<meta name=\"twitter:label2\" content=\"Ber\u00e4knad l\u00e4stid\" \/>\n\t<meta name=\"twitter:data2\" content=\"14 minuter\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinqsta.com\/se\/blog\/vad-ar-jquery\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/se\/blog\/vad-ar-jquery\/\"},\"author\":{\"name\":\"Steve Bonisteel\",\"@id\":\"https:\/\/kinqsta.com\/se\/#\/schema\/person\/d84ceff87bd64a4368a581fc8aa8bd6f\"},\"headline\":\"Vad \u00e4r jQuery? En titt p\u00e5 webbens mest anv\u00e4nda JavaScript-bibliotek\",\"datePublished\":\"2022-09-27T10:51:05+00:00\",\"dateModified\":\"2025-10-01T20:02:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/se\/blog\/vad-ar-jquery\/\"},\"wordCount\":2668,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/se\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/se\/blog\/vad-ar-jquery\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/se\/wp-content\/uploads\/sites\/9\/2022\/09\/what-is-jquery.png\",\"keywords\":[\"JavaScript\",\"jQuery\",\"languages\"],\"inLanguage\":\"sv-SE\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinqsta.com\/se\/blog\/vad-ar-jquery\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinqsta.com\/se\/blog\/vad-ar-jquery\/\",\"url\":\"https:\/\/kinqsta.com\/se\/blog\/vad-ar-jquery\/\",\"name\":\"Vad \u00e4r jQuery? En titt p\u00e5 webbens mest anv\u00e4nda JavaScript-bibliotek\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/se\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/se\/blog\/vad-ar-jquery\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/se\/blog\/vad-ar-jquery\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/se\/wp-content\/uploads\/sites\/9\/2022\/09\/what-is-jquery.png\",\"datePublished\":\"2022-09-27T10:51:05+00:00\",\"dateModified\":\"2025-10-01T20:02:39+00:00\",\"description\":\"JavaScript-biblioteket jQuery med \u00f6ppen k\u00e4llkod hj\u00e4lper utvecklare att bygga dynamiska webbappar med s\u00e5 lite kod som m\u00f6jligt. L\u00e4r dig mer.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinqsta.com\/se\/blog\/vad-ar-jquery\/#breadcrumb\"},\"inLanguage\":\"sv-SE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinqsta.com\/se\/blog\/vad-ar-jquery\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"sv-SE\",\"@id\":\"https:\/\/kinqsta.com\/se\/blog\/vad-ar-jquery\/#primaryimage\",\"url\":\"https:\/\/kinqsta.com\/se\/wp-content\/uploads\/sites\/9\/2022\/09\/what-is-jquery.png\",\"contentUrl\":\"https:\/\/kinqsta.com\/se\/wp-content\/uploads\/sites\/9\/2022\/09\/what-is-jquery.png\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinqsta.com\/se\/blog\/vad-ar-jquery\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinqsta.com\/se\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript-ramverk\",\"item\":\"https:\/\/kinqsta.com\/se\/topics\/javascript-ramverk\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Vad \u00e4r jQuery? En titt p\u00e5 webbens mest anv\u00e4nda JavaScript-bibliotek\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinqsta.com\/se\/#website\",\"url\":\"https:\/\/kinqsta.com\/se\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Snabba, s\u00e4kra, premium hosting-l\u00f6sningar\",\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/se\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinqsta.com\/se\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"sv-SE\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinqsta.com\/se\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinqsta.com\/se\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"sv-SE\",\"@id\":\"https:\/\/kinqsta.com\/se\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinqsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinqsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/se\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstasweden\/\",\"https:\/\/x.com\/kinsta_se\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinqsta.com\/se\/#\/schema\/person\/d84ceff87bd64a4368a581fc8aa8bd6f\",\"name\":\"Steve Bonisteel\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"sv-SE\",\"@id\":\"https:\/\/kinqsta.com\/se\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0adffb3f9c86a6ec8245f8399d540823?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0adffb3f9c86a6ec8245f8399d540823?s=96&d=mm&r=g\",\"caption\":\"Steve Bonisteel\"},\"description\":\"Steve Bonisteel is a Technical Editor at Kinsta who began his writing career as a print journalist, chasing ambulances and fire trucks. He has been covering Internet-related technology since the late 1990s.\",\"url\":\"https:\/\/kinqsta.com\/se\/blog\/author\/stevebonisteel\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Vad \u00e4r jQuery? En titt p\u00e5 webbens mest anv\u00e4nda JavaScript-bibliotek","description":"JavaScript-biblioteket jQuery med \u00f6ppen k\u00e4llkod hj\u00e4lper utvecklare att bygga dynamiska webbappar med s\u00e5 lite kod som m\u00f6jligt. L\u00e4r dig mer.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinqsta.com\/se\/blog\/vad-ar-jquery\/","og_locale":"sv_SE","og_type":"article","og_title":"Vad \u00e4r jQuery? En titt p\u00e5 webbens mest anv\u00e4nda JavaScript-bibliotek","og_description":"JavaScript-biblioteket jQuery med \u00f6ppen k\u00e4llkod hj\u00e4lper utvecklare att bygga dynamiska webbappar med s\u00e5 lite kod som m\u00f6jligt. L\u00e4r dig mer.","og_url":"https:\/\/kinqsta.com\/se\/blog\/vad-ar-jquery\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstasweden\/","article_published_time":"2022-09-27T10:51:05+00:00","article_modified_time":"2025-10-01T20:02:39+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinqsta.com\/se\/wp-content\/uploads\/sites\/9\/2022\/09\/what-is-jquery.png","type":"image\/png"}],"author":"Steve Bonisteel","twitter_card":"summary_large_image","twitter_description":"JavaScript-biblioteket jQuery med \u00f6ppen k\u00e4llkod hj\u00e4lper utvecklare att bygga dynamiska webbappar med s\u00e5 lite kod som m\u00f6jligt. L\u00e4r dig mer.","twitter_image":"https:\/\/kinqsta.com\/se\/wp-content\/uploads\/sites\/9\/2022\/09\/what-is-jquery.png","twitter_creator":"@kinsta_se","twitter_site":"@kinsta_se","twitter_misc":{"Skriven av":"Steve Bonisteel","Ber\u00e4knad l\u00e4stid":"14 minuter"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinqsta.com\/se\/blog\/vad-ar-jquery\/#article","isPartOf":{"@id":"https:\/\/kinqsta.com\/se\/blog\/vad-ar-jquery\/"},"author":{"name":"Steve Bonisteel","@id":"https:\/\/kinqsta.com\/se\/#\/schema\/person\/d84ceff87bd64a4368a581fc8aa8bd6f"},"headline":"Vad \u00e4r jQuery? En titt p\u00e5 webbens mest anv\u00e4nda JavaScript-bibliotek","datePublished":"2022-09-27T10:51:05+00:00","dateModified":"2025-10-01T20:02:39+00:00","mainEntityOfPage":{"@id":"https:\/\/kinqsta.com\/se\/blog\/vad-ar-jquery\/"},"wordCount":2668,"commentCount":0,"publisher":{"@id":"https:\/\/kinqsta.com\/se\/#organization"},"image":{"@id":"https:\/\/kinqsta.com\/se\/blog\/vad-ar-jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/se\/wp-content\/uploads\/sites\/9\/2022\/09\/what-is-jquery.png","keywords":["JavaScript","jQuery","languages"],"inLanguage":"sv-SE","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinqsta.com\/se\/blog\/vad-ar-jquery\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinqsta.com\/se\/blog\/vad-ar-jquery\/","url":"https:\/\/kinqsta.com\/se\/blog\/vad-ar-jquery\/","name":"Vad \u00e4r jQuery? En titt p\u00e5 webbens mest anv\u00e4nda JavaScript-bibliotek","isPartOf":{"@id":"https:\/\/kinqsta.com\/se\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinqsta.com\/se\/blog\/vad-ar-jquery\/#primaryimage"},"image":{"@id":"https:\/\/kinqsta.com\/se\/blog\/vad-ar-jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/se\/wp-content\/uploads\/sites\/9\/2022\/09\/what-is-jquery.png","datePublished":"2022-09-27T10:51:05+00:00","dateModified":"2025-10-01T20:02:39+00:00","description":"JavaScript-biblioteket jQuery med \u00f6ppen k\u00e4llkod hj\u00e4lper utvecklare att bygga dynamiska webbappar med s\u00e5 lite kod som m\u00f6jligt. L\u00e4r dig mer.","breadcrumb":{"@id":"https:\/\/kinqsta.com\/se\/blog\/vad-ar-jquery\/#breadcrumb"},"inLanguage":"sv-SE","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinqsta.com\/se\/blog\/vad-ar-jquery\/"]}]},{"@type":"ImageObject","inLanguage":"sv-SE","@id":"https:\/\/kinqsta.com\/se\/blog\/vad-ar-jquery\/#primaryimage","url":"https:\/\/kinqsta.com\/se\/wp-content\/uploads\/sites\/9\/2022\/09\/what-is-jquery.png","contentUrl":"https:\/\/kinqsta.com\/se\/wp-content\/uploads\/sites\/9\/2022\/09\/what-is-jquery.png","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinqsta.com\/se\/blog\/vad-ar-jquery\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinqsta.com\/se\/"},{"@type":"ListItem","position":2,"name":"JavaScript-ramverk","item":"https:\/\/kinqsta.com\/se\/topics\/javascript-ramverk\/"},{"@type":"ListItem","position":3,"name":"Vad \u00e4r jQuery? En titt p\u00e5 webbens mest anv\u00e4nda JavaScript-bibliotek"}]},{"@type":"WebSite","@id":"https:\/\/kinqsta.com\/se\/#website","url":"https:\/\/kinqsta.com\/se\/","name":"Kinsta\u00ae","description":"Snabba, s\u00e4kra, premium hosting-l\u00f6sningar","publisher":{"@id":"https:\/\/kinqsta.com\/se\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinqsta.com\/se\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"sv-SE"},{"@type":"Organization","@id":"https:\/\/kinqsta.com\/se\/#organization","name":"Kinsta","url":"https:\/\/kinqsta.com\/se\/","logo":{"@type":"ImageObject","inLanguage":"sv-SE","@id":"https:\/\/kinqsta.com\/se\/#\/schema\/logo\/image\/","url":"https:\/\/kinqsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinqsta.com\/se\/wp-content\/uploads\/sites\/9\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinqsta.com\/se\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstasweden\/","https:\/\/x.com\/kinsta_se","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinqsta.com\/se\/#\/schema\/person\/d84ceff87bd64a4368a581fc8aa8bd6f","name":"Steve Bonisteel","image":{"@type":"ImageObject","inLanguage":"sv-SE","@id":"https:\/\/kinqsta.com\/se\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0adffb3f9c86a6ec8245f8399d540823?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0adffb3f9c86a6ec8245f8399d540823?s=96&d=mm&r=g","caption":"Steve Bonisteel"},"description":"Steve Bonisteel is a Technical Editor at Kinsta who began his writing career as a print journalist, chasing ambulances and fire trucks. He has been covering Internet-related technology since the late 1990s.","url":"https:\/\/kinqsta.com\/se\/blog\/author\/stevebonisteel\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinqsta.com\/se\/wp-json\/wp\/v2\/posts\/45962","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinqsta.com\/se\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinqsta.com\/se\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/se\/wp-json\/wp\/v2\/users\/259"}],"replies":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/se\/wp-json\/wp\/v2\/comments?post=45962"}],"version-history":[{"count":16,"href":"https:\/\/kinqsta.com\/se\/wp-json\/wp\/v2\/posts\/45962\/revisions"}],"predecessor-version":[{"id":51565,"href":"https:\/\/kinqsta.com\/se\/wp-json\/wp\/v2\/posts\/45962\/revisions\/51565"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinqsta.com\/se\/wp-json\/kinsta\/v1\/posts\/45962\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinqsta.com\/se\/wp-json\/kinsta\/v1\/posts\/45962\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinqsta.com\/se\/wp-json\/kinsta\/v1\/posts\/45962\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinqsta.com\/se\/wp-json\/kinsta\/v1\/posts\/45962\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinqsta.com\/se\/wp-json\/kinsta\/v1\/posts\/45962\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinqsta.com\/se\/wp-json\/kinsta\/v1\/posts\/45962\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinqsta.com\/se\/wp-json\/kinsta\/v1\/posts\/45962\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinqsta.com\/se\/wp-json\/kinsta\/v1\/posts\/45962\/translations\/es"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinqsta.com\/se\/wp-json\/kinsta\/v1\/posts\/45962\/translations\/se"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinqsta.com\/se\/wp-json\/kinsta\/v1\/posts\/45962\/translations\/dk"},{"href":"https:\/\/kinqsta.com\/se\/wp-json\/kinsta\/v1\/posts\/45962\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/se\/wp-json\/wp\/v2\/media\/45963"}],"wp:attachment":[{"href":"https:\/\/kinqsta.com\/se\/wp-json\/wp\/v2\/media?parent=45962"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinqsta.com\/se\/wp-json\/wp\/v2\/tags?post=45962"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinqsta.com\/se\/wp-json\/wp\/v2\/topic?post=45962"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}