{"id":54114,"date":"2022-09-09T08:56:08","date_gmt":"2022-09-09T07:56:08","guid":{"rendered":"https:\/\/kinsta.com\/de\/?p=54114&#038;post_type=knowledgebase&#038;preview_id=54114"},"modified":"2025-10-01T20:17:36","modified_gmt":"2025-10-01T19:17:36","slug":"was-ist-jquery","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/was-ist-jquery\/","title":{"rendered":"Was ist jQuery? Ein Blick auf die meistgenutzte JavaScript-Bibliothek des Internets"},"content":{"rendered":"<p>Der Einfluss, den <a href=\"https:\/\/kinsta.com\/de\/blog\/javascript-bibliotheken\/#jquery\" rel=\"noopener\">jQuery<\/a> auf die Webentwicklung hatte, nachdem die Open-Source-JavaScript-Bibliothek vor mehr als 15 Jahren ver\u00f6ffentlicht wurde, kann gar nicht hoch genug eingesch\u00e4tzt werden. Als Werkzeugkasten, der eine neue Kurzschrift f\u00fcr die sonst so komplexe <a href=\"https:\/\/kinsta.com\/de\/blog\/beste-programmiersprache-lernen-sollte\/#javascript\" rel=\"noopener\">JavaScript-Programmierung<\/a> schuf, wird jQuery auch heute noch dem Motto seiner Entwickler gerecht: &#8222;Weniger schreiben, mehr tun&#8220;.<\/p>\n<p>Auch heute noch ist jQuery bei professionellen Entwicklern beliebt, w\u00e4hrend andere mit wenig oder gar keiner Programmiererfahrung die Bibliothek nutzen k\u00f6nnen, um ihren Websites erweiterte Funktionen hinzuzuf\u00fcgen. Hier erf\u00e4hrst du, was hinter einer der gr\u00f6\u00dften Erfolgsgeschichten der <a href=\"https:\/\/kinsta.com\/web-development\/\" rel=\"noopener\">Webentwicklung<\/a> steckt.<\/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<h2>Wie beliebt ist jQuery?<\/h2>\n<p>Die Umfrage von StackOverflow aus dem Jahr 2022 \u00fcber die <a href=\"https:\/\/survey.stackoverflow.co\/2022\/#most-popular-technologies-webframe-prof\" target=\"_blank\" rel=\"noopener noreferrer\">von professionellen Entwicklern verwendeten Webtechnologien<\/a> ergab, dass etwas mehr als 29 % der \u00fcber 45.000 Befragten mit jQuery arbeiten. Unter den <a href=\"https:\/\/kinsta.com\/de\/blog\/javascript-bibliotheken\/#the-most-popular-javascript-libraries\" rel=\"noopener\">JavaScript-Bibliotheken<\/a> lag jQuery an zweiter Stelle nach <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-react-js\/\" rel=\"noopener\">React.js<\/a>, der Bibliothek, die 2011 bei Facebook (jetzt Meta) entwickelt wurde und die inzwischen von \u00fcber 44 % der Entwickler\/innen genutzt wird.<\/p>\n<figure style=\"width: 1024px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/stackoverflow-2022-web-technologies-survey.png\" alt=\"Screenshot mit jQuery unter den beliebtesten Technologien in der StackOverflow-Umfrage von 2022.\" width=\"1024\" height=\"490\"><figcaption class=\"wp-caption-text\">Beliebte Web-Frameworks und Technologien im Jahr 2022. (Bildquelle: <a href=\"https:\/\/survey.stackoverflow.co\/2022\/\" target=\"_blank\" rel=\"noopener noreferrer\">StackOverflow<\/a>)<\/figcaption><\/figure>\n<p>Aber die aktuellen Projekte von Webentwicklern erz\u00e4hlen nicht die ganze Geschichte. Laut den <a href=\"https:\/\/trends.builtwith.com\/javascript\/jQuery\" target=\"_blank\" rel=\"noopener noreferrer\">Internet-Technologietrends<\/a> von BuiltWith wird jQuery im Jahr 2022 auf mehr als 80 Millionen Websites zu finden sein. Das ist ein riesiger Vorsprung vor den fast 11 Millionen Websites, auf denen React l\u00e4uft.<\/p>\n\n<p>Die jQuery-Bibliothek ist seit mehr als einem Jahrzehnt im Kern von WordPress enthalten und steht damit Hunderten von <a href=\"https:\/\/kinsta.com\/de\/blog\/schnellsten-wordpress-theme\/\" rel=\"noopener\">Themes<\/a> zur Verf\u00fcgung, die sich auf ihre Funktionalit\u00e4t verlassen, um dynamische Websites zu erstellen. <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-vs-drupal\/\" rel=\"noopener\">Drupal<\/a> ist ein weiteres beliebtes <a href=\"https:\/\/kinsta.com\/de\/blog\/content-management-system\/\" rel=\"noopener\">Content Management System<\/a>, das jQuery in seine Kernkomponenten integriert hat. Unabh\u00e4ngig davon, welche Technologien die aktuellen Favoriten der Entwickler sind, bleibt jQuery die <em>meistgenutzte<\/em> JavaScript-Bibliothek im Web.<\/p>\n<h2>Eine kurze Geschichte von jQuery<\/h2>\n<p>Der <a href=\"https:\/\/kinsta.com\/de\/browser-marktanteil\/\" rel=\"noopener\">Kampf der Browser<\/a> wird seit den Anf\u00e4ngen des Internets gef\u00fchrt, und die Entwickler waren immer die Leidtragenden. Im Jahr 2006, als der Webentwickler John Resig jQuery vorstellte, war der Internet Explorer von Microsoft der <a href=\"https:\/\/www.visualcapitalist.com\/internet-browser-market-share\/\" target=\"_blank\" rel=\"noopener noreferrer\">unangefochtene Marktf\u00fchrer<\/a> &#8211; eine Umkehrung des Vorsprungs von Netscape weniger als ein Jahrzehnt zuvor.<\/p>\n<p>Damals hatte Mozillas neuer Firefox einen Marktanteil von 10 % (im Vergleich zu Microsofts 84 %) und Apples Safari war gerade auf der Bildfl\u00e4che erschienen. Googles Chrome, den heutigen Marktf\u00fchrer, gab es noch nicht. JavaScript-Programmierer\/innen wie Resig hatten regelm\u00e4\u00dfig damit zu k\u00e4mpfen, Code zu schreiben, der in allen Browsern lief.<\/p>\n<p>Seine neue jQuery-Bibliothek wurde entwickelt, um die Unterschiede in der Art und Weise, wie JavaScript von diesen Browsern implementiert wurde, auszugleichen und Entwicklern zu helfen, weniger Code zu schreiben, w\u00e4hrend sie Aufgaben wie diese erledigen:<\/p>\n<ul>\n<li><a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-html\/\">HTML-Elemente<\/a> in einer Webseite manipulieren<\/li>\n<li>Dynamisches \u00c4ndern von CSS<\/li>\n<li>Reagieren auf Ereignisse wie Mausklicks und Tastendruck<\/li>\n<li>Ajax-Anfragen bearbeiten, um den Inhalt einer Seite ohne Neuladen zu aktualisieren<\/li>\n<\/ul>\n<p>Nachdem Resig die Bibliothek ver\u00f6ffentlicht hatte, bauten andere Entwickler Anwendungen auf jQuery auf und stellten ihre Arbeit oft als Plugins zur Verf\u00fcgung, um neue Funktionen f\u00fcr alle zug\u00e4nglich zu machen.<\/p>\n<h3>Was ist jQuery UI?<\/h3>\n<p><a href=\"https:\/\/jqueryui.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">jQuery UI<\/a> ist eine <a href=\"https:\/\/trends.builtwith.com\/javascript\/jQuery-UI\" target=\"_blank\" rel=\"noopener noreferrer\">beliebte Sammlung von Plugins<\/a>, die dazu dienen, Benutzeroberfl\u00e4chen zu verbessern. Sie gilt als &#8222;offizielles&#8220; Pendant zur jQuery-Kernbibliothek und f\u00fcgt eine Vielzahl von Spezialeffekten und Widgets wie Datumsauswahlen, Fortschrittsbalken, Schieberegler, Spinner und Registerkarten oder ausklappbare Panels hinzu.<\/p>\n<h2>Was ist der Unterschied zwischen jQuery und JavaScript?<\/h2>\n<p><strong>Es ist<\/strong> <strong>wichtig zu wissen, dass jQuery JavaScript <em>ist<\/em><\/strong>. Wenn du jQuery verwendest, arbeitest du mit Instanzen von JavaScript-Objekten, die die Namenskonventionen von jQuery f\u00fcr Methoden (Funktionen) und Eigenschaften widerspiegeln. Werfen wir einen Blick auf <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-javascript\/#vanilla-javascript\" rel=\"noopener\">Vanilla JavaScript<\/a> und jQuery, die die gleiche Aufgabe bew\u00e4ltigen.<\/p>\n<p>Hier ist ein HTML-Schnipsel irgendwo auf einer Webseite:<\/p>\n<pre><code class=\"language-html\">&lt;p id=\"target\"&gt;Old text&lt;\/p&gt;<\/code><\/pre>\n<p>Vanilla JavaScript-Code, der das Element <code>&lt;p&gt;<\/code> mit dem <code>id<\/code> &#8222;target&#8220; findet &#8211; und dann den Text zwischen den Tags ersetzt &#8211; k\u00f6nnte so aussehen:<\/p>\n<pre><code class=\"language-js\">const content = document.getElementById( \"target\" );\ncontent.textContent = \"New text\";<\/code><\/pre>\n<p>Die Methode <code>getElementById()<\/code> von JavaScript gibt ein Objekt zur\u00fcck, das den HTML- und den Textinhalt des Absatzes mit dem &#8222;Ziel&#8220; <code>id<\/code> enth\u00e4lt. Das Objekt wird der Konstantenreferenz <code>content<\/code> zugewiesen, dann wird seine Eigenschaft <code>textContent<\/code> in &#8222;Neuer Text&#8220; ge\u00e4ndert.<\/p>\n<p>JavaScript erlaubt die Verkettung von Methoden, so dass die oben genannten Aufgaben mit einer einzigen Anweisung erledigt werden k\u00f6nnen:<\/p>\n<pre><code class=\"language-js\"> document.getElementById( \"target\" ).textContent = \"New text\"; <\/code><\/pre>\n<p>Es \u00fcberrascht also nicht, dass du auch jQuery-Aktionen verketten kannst. Um mit jQuery &#8222;Alter Text&#8220; in &#8222;Neuer Text&#8220; zu \u00e4ndern, k\u00f6nntest du Folgendes tun:<\/p>\n<pre><code class=\"language-js\">$( \"#target\" ).text( \"New text\" );<\/code><\/pre>\n<p>Das Dollarzeichen (<code>$<\/code>) ist ein kurzer Alias f\u00fcr <code>jQuery<\/code>, und <code>( \"#target\" )<\/code> ist ein Beispiel f\u00fcr einen jQuery-Selektor. In diesem Fall sucht der Selektor nach einem HTML-Element mit dem <code>id<\/code> unseres Zielabsatzes. Die jQuery-Methode <code>text()<\/code> wird verkettet, damit &#8222;Neuer Text&#8220; der Inhalt des Absatzes wird.<\/p>\n<h2>So verwendest du jQuery auf deiner Website<\/h2>\n<p>F\u00fcge jQuery zu deiner Website hinzu, indem du den Code der Bibliothek auf den Seiten der Website verlinkst. Die jQuery-Bibliothek kann auf deinem Webserver oder in einem \u00f6ffentlich zug\u00e4nglichen <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-cdn\/\">Content Delivery Network (CDN)<\/a> liegen. Auf der offiziellen jQuery-Website kannst du die <a href=\"https:\/\/jquery.com\/download\/\" target=\"_blank\" rel=\"noopener noreferrer\">neuesten Versionen der Bibliothek herunterladen<\/a>.<\/p>\n<p>Die jQuery-Bibliothek ist in <a href=\"https:\/\/kinsta.com\/de\/blog\/javascript-minimieren\/\">minifiziertem (komprimiertem) JavaScript<\/a> f\u00fcr schnelles Laden in der Produktion oder unkomprimiert f\u00fcr Lesbarkeit und Debugging verf\u00fcgbar.<\/p>\n<figure style=\"width: 1017px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/jquery-official-download.jpg\" alt=\"Screenshot der offiziellen jQuery-Website mit einem hervorgehobenen Download-Link.\" width=\"1017\" height=\"498\"><figcaption class=\"wp-caption-text\">Die offizielle jQuery-Website.<\/figcaption><\/figure>\n<p>Du wirst auch ein wenig JavaScript schreiben, um jQuery aufzurufen und spezielle Aufgaben f\u00fcr deine Webanwendung zu erledigen. Im HTML der Seiten deiner Website kannst du die jQuery-Bibliothek und die Datei mit deinem Code wie folgt verlinken:<\/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>In diesem Beispiel befinden sich die Version 3.6.0 von jQuery und dein Site-spezifischer Code in einer Datei namens <strong>my_script.js<\/strong> im Verzeichnis<code>\/js\/<\/code> auf der Website. Die jQuery-Bibliothek ist normalerweise im Abschnitt <code>&lt;head&gt;<\/code> einer Webseite enthalten. Es ist \u00fcblich, dass Entwickler einige Links zu JavaScript-Dateien, einschlie\u00dflich des Codes, der auf die jQuery-Bibliothek angewiesen ist, am Ende einer Seite platzieren, normalerweise kurz vor dem Schlie\u00dfen des <code>&lt;body&gt;<\/code> -Tags. Du willst immer, dass der Code, der jQuery aufruft, <strong>nach dem<\/strong> Link zur Bibliothek selbst erscheint.<\/p>\n<h3>Verlinkung zu jQuery in einem CDN<\/h3>\n<p>Die jQuery-Bibliothek wird oft schneller heruntergeladen, wenn sie \u00fcber ein <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-cdn\/\">stabiles CDN<\/a> bereitgestellt wird. jQuery ist im Web so weit verbreitet, dass die Wahrscheinlichkeit gro\u00df ist, dass ein Besucher deiner Website die Bibliothek bereits bei mehreren CDNs in seinem Browser zwischengespeichert hat. Wir k\u00f6nnen das obige HTML-Snippet so \u00e4ndern, dass es das JavaScript Content Delivery Network von Cloudflare nutzt:<\/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>Aufrufen von jQuery in deiner Anwendung<\/h3>\n<p>Wenn du deine jQuery-Anwendung schreibst, solltest du dich vergewissern, dass die Webseite vollst\u00e4ndig geladen wurde, bevor dein Code ausgef\u00fchrt wird. Du kannst dies testen, indem du die Methode <code>ready()<\/code> verwendest, die deinen Code ausf\u00fchrt, wenn das Dokument geladen ist:<\/p>\n<pre><code class=\"language-js\">$(document).ready(function() {\n  \/\/ Your jQuery application will go here\n});<\/code><\/pre>\n<p>Dieser Start f\u00fcr eine jQuery-Anwendung ist so \u00fcblich, dass die Entwickler der Bibliothek eine noch k\u00fcrzere Syntax entwickelt haben:<\/p>\n<pre><code class=\"language-js\">$(function() { \n  \/\/ Your jQuery application will go here\n});<\/code><\/pre>\n<h3>Ausw\u00e4hlen von Elementen im DOM mit jQuery<\/h3>\n<p>Die Grundlage der meisten jQuery-Anwendungen ist die F\u00e4higkeit, die Struktur einer Webseite als Objekt (das <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-javascript\/#the-javascript-dom\" rel=\"noopener\">Document Object Model, kurz DOM<\/a>) zu durchlaufen und verschiedene Elemente im HTML auszuw\u00e4hlen. Die Auswahl eines Elements (oder einer Gruppe von Elementen) ist der erste Schritt, bevor etwas mit diesem Element <em>gemacht wird <\/em>, wie z. B. das \u00c4ndern seines Aussehens oder das Aktualisieren des Inhalts. jQuery-Selektoren zielen auf verschiedene Arten auf DOM-Eigenschaften ab. Zu den h\u00e4ufigsten geh\u00f6ren:<\/p>\n<ul>\n<li>Nach dem Namen des HTML-Elements (Tag)<\/li>\n<li>Anhand von CSS-Eigenschaften (einschlie\u00dflich IDs und Klassennamen)<\/li>\n<li>Durch die relative Position eines Elements innerhalb des DOM<\/li>\n<li>Durch den Wert des Inhalts in Formularfeldern<\/li>\n<li>Durch den aktuellen Status eines Elements<\/li>\n<\/ul>\n<p>Hier sind einige Beispiele:<\/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 kannst jQuery-Selektoren kombinieren, um eine spezifischere Ausrichtung zu erreichen. Beispiele:<\/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>Das DOM mit jQuery manipulieren<\/h3>\n<p>Jetzt, wo du wei\u00dft, wie du verschiedene Elemente auf einer Webseite ausw\u00e4hlen kannst, kannst du sie mit jQuery-Methoden ver\u00e4ndern. Wie bereits erw\u00e4hnt, kannst du diese Aktionen oft verketten, um mit wenig Code viel zu erreichen. Einige Beispiele:<\/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>Behandlung von Ereignissen mit jQuery<\/h3>\n<p>Die oben beschriebenen DOM-Manipulationen w\u00fcrden von den Webbesuchern unbemerkt bleiben, wenn sie sofort nach dem Laden einer Seite stattfinden w\u00fcrden. Deshalb kann deine jQuery-Anwendung Ereignisse wie Mausklicks, Mausbewegungen, Tastendr\u00fccke und vieles mehr erkennen und darauf reagieren, um ein wirklich reaktionsf\u00e4higes Erlebnis zu schaffen.<\/p>\n<h4>Erkennen von Mausklicks mit jQuery<\/h4>\n<p>Die Reaktion auf einen Mausklick (oder ein Tippen auf einem Touchscreen) ist eine h\u00e4ufige Aufgabe f\u00fcr Webanwendungen. Wir haben jQuery und HTML in einem Beispiel kombiniert, das auch das in jQuery integrierte <code>event<\/code> Objekt nutzt, das n\u00fctzliche Informationen \u00fcber unser &#8222;Klick-Ereignis&#8220; enth\u00e4lt:<\/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>Das Ergebnis:<\/p>\n<figure style=\"width: 1024px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/jquery-detecting-mouse-clicks.png\" alt=\"Der Screenshot zeigt die Erkennung von Mausklicks auf mehreren Schaltfl\u00e4chen.\" width=\"1024\" height=\"426\"><figcaption class=\"wp-caption-text\">Erkennung von Mausklicks.<\/figcaption><\/figure>\n<h4><strong>Erkennen von Mausbewegungen mit jQuery<\/strong><\/h4>\n<p>Zu wissen, wo sich der Mauszeiger auf einer Webseite befindet, ist in vielen responsiven Webanwendungen n\u00fctzlich. Hier ist ein Beispiel daf\u00fcr, wie jQuery helfen kann:<\/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>Das obige Beispiel zeigt auch, wie die <code>css()<\/code> Methode von jQuery verwendet werden kann, um mehrere CSS-Eigenschaften auf einmal zu setzen. Hier ist das Ergebnis:<\/p>\n<figure style=\"width: 1024px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/jquery-detecting-mouse-movement.png\" alt=\"Der Screenshot zeigt die Erkennung von Mausbewegungen auf mehreren Div-Bl\u00f6cken.\" width=\"1024\" height=\"461\"><figcaption class=\"wp-caption-text\">Erkennung von Mouse-Over-Ereignissen.<\/figcaption><\/figure>\n<h3>Umgang mit Ajax-Anfragen mit jQuery<\/h3>\n<p>Ein gro\u00dfer Teil der Popularit\u00e4t von jQuery ist seine F\u00e4higkeit, Ajax-Anfragen zu vereinfachen, mit denen Webanwendungen Daten mit Servern austauschen k\u00f6nnen, ohne dass die Seiten neu geladen werden m\u00fcssen. Die Bibliothek verf\u00fcgt \u00fcber viele Werkzeuge, um Ajax-Anfragen f\u00fcr Daten im Text-, HTML-, XML- und JSON-Format zu verwalten. Der Ansatz von jQuery besteht darin, Kurzbefehle f\u00fcr die h\u00e4ufigsten Aufgaben anzubieten. Eine der einfachsten im Ajax-Werkzeugkasten ist die Methode <code>load()<\/code>:<\/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>Mit nur drei Zeilen <a href=\"https:\/\/kinsta.com\/javascript\/\">JavaScript<\/a> und zwei HTML-Elementen passiert dort eine Menge. Das Ergebnis w\u00fcrde etwa so aussehen:<\/p>\n<figure style=\"width: 984px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/jquery-ajax-handling-with-load-method.png\" alt=\"Screenshot eines Textbereichs auf einer Website vor und nach einer Ajax-Anfrage.\" width=\"984\" height=\"375\"><figcaption class=\"wp-caption-text\">jQuery load()-Methode f\u00fcgt Inhalte ohne einen Seitenrefresh hinzu.<\/figcaption><\/figure>\n<h3>So verwendest du jQuery UI<\/h3>\n<p>Wenn du jQuery UI-Plugins zu deinen Projekten hinzuf\u00fcgst, hast du Zugang zu vielen Spezialeffekten und Widgets, die auf der Kernbibliothek von jQuery aufbauen. Hier ist ein Beispiel f\u00fcr die Verwendung von jQuery UI, um einen Pop-up-Kalender als Datumsauswahl in ein Webformular einzuf\u00fcgen.<\/p>\n<p>F\u00fcge zun\u00e4chst die jQuery UI-Bibliothek und die zugeh\u00f6rigen CSS zu deinen Webseiten hinzu. In diesem Beispiel verlinken wir auf die Bibliotheken im JavaScript CDN von Cloudflare zusammen mit der jQuery-Kernbibliothek:<\/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>Als N\u00e4chstes f\u00fcgst du ein <code>input<\/code> Feld in dein HTML-Formular ein und bindest \u00fcber JavaScript die <code>datepicker()<\/code> Methode von jQuery UI mit einem Selektor ein:<\/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>Wenn du nun in das <code>input<\/code> Formularfeld klickst, wird der Datums-Picker gestartet:<\/p>\n<figure style=\"width: 900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/jquery-ui-library-datepicker.png\" alt=\"Screenshot eines jQuery UI Datumspickers im Einsatz.\" width=\"900\" height=\"317\"><figcaption class=\"wp-caption-text\">Der jQuery UI Datumspicker.<\/figcaption><\/figure>\n<h2>Wie man jQuery in WordPress verwendet<\/h2>\n<p>Die jQuery-Bibliothek wird mit WordPress mitgeliefert und ist ein wichtiger Bestandteil vieler <a href=\"https:\/\/kinsta.com\/de\/blog\/schnellsten-wordpress-theme\/\">WordPress-Themes<\/a>. Auch wenn dein aktuelles Theme jQuery noch nicht verwendet, kannst du die Registrierung der JavaScript-Abh\u00e4ngigkeiten in WordPress nutzen, um deinen jQuery-Code zum Laufen zu bringen.<\/p>\n<p>Dazu bearbeitest du die Datei <strong>functions.php<\/strong>, die Teil deines Themes ist. Eine Theme-Aktualisierung kann diese Datei \u00fcberschreiben. Deshalb ist es ratsam, deine \u00c4nderungen zu sichern, indem du zuerst <a href=\"https:\/\/kinsta.com\/de\/blog\/child-theme-wordpress-erstellen\/\" rel=\"noopener\">ein Child-Theme erstellst<\/a> und die <strong>functions.php-Datei<\/strong> dort bearbeitest. <a href=\"https:\/\/kinsta.com\/de\/docs\/wordpress-hosting\/wordpress-backups\/#wordpress-backup#create-wordpress-backup\" rel=\"noopener\">Erstelle zumindest ein manuelles WordPress-Backup<\/a>, bevor du fortf\u00e4hrst.<\/p>\n<h3>Registrierung deines jQuery-JavaScripts in der functions.php<\/h3>\n<p>Du kannst einen <a href=\"https:\/\/kinsta.com\/de\/blog\/ftp-vs-sftp\/\" rel=\"noopener\">FTP- oder SFTP-Client<\/a> verwenden, um die Datei <strong>functions.php<\/strong> zwischen deinem Desktop und dem Webserver zu \u00fcbertragen und sie zu bearbeiten. <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-benutzerrollen\/\">WordPress-Administratoren<\/a> k\u00f6nnen die <strong>functions.php<\/strong> auch innerhalb des CMS \u00e4ndern:<\/p>\n<p>W\u00e4hle im Dashboard <strong>Erscheinungsbild<\/strong> &gt; <strong>Theme File Editor<\/strong>.<\/p>\n<figure style=\"width: 1024px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/launching-theme-file-editor.jpg\" alt=\"Screenshot mit den Men\u00fcoptionen zum Starten des WordPress Theme File Editors.\" width=\"1024\" height=\"605\"><figcaption class=\"wp-caption-text\">Start des Theme File Editors.<\/figcaption><\/figure>\n<p>Klicke im linken Men\u00fc auf <strong>Themenfunktionen<\/strong>.<\/p>\n<figure style=\"width: 1024px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/08\/theme-file-editor-view.jpg\" alt=\"Screenshot zur Hervorhebung der functions.php in einer Liste von Dateien im Themendateieditor.\" width=\"1024\" height=\"473\"><figcaption class=\"wp-caption-text\">Innerhalb des Themendateieditors.<\/figcaption><\/figure>\n<p>Der Inhalt deiner <strong>functions.php<\/strong> Datei h\u00e4ngt von dem gerade aktiven Theme ab. Oben siehst du die Funktionen des <a href=\"https:\/\/kinsta.com\/de\/blog\/twenty-twenty-one-theme\/\" rel=\"noopener\">Themas Twenty Twenty-One<\/a>. Du kannst dein eigenes jQuery-Skript in die Konfiguration deiner Seite einf\u00fcgen, indem du die WordPress-Funktion <code>wp_enqueue_script()<\/code> verwendest. Hier ist die Vorlage f\u00fcr diese Funktion:<\/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>Und hier ist, was das alles bedeutet:<\/p>\n<ul>\n<li><strong>$handle<\/strong>: Der benutzerfreundliche Name, der mit diesem Skript verkn\u00fcpft ist. (Die jQuery-Kernbibliothek ist in WordPress bereits mit dem Handle <strong>jquery<\/strong> registriert.)<\/li>\n<li><strong>$src<\/strong>: Der Pfad und Dateiname oder die URL, die auf den JavaScript-Quellcode verweist.<\/li>\n<li><strong>$deps<\/strong>: Die Handles aller anderen JavaScript-Quellen, die dieses Skript ben\u00f6tigt, um richtig zu funktionieren.<\/li>\n<li><strong>$ver<\/strong>: Die Versionsnummer, die du deinem JavaScript-Quellcode zugewiesen hast.<\/li>\n<li><strong>$in_footer<\/strong>: Wenn diese Option auf <strong>true<\/strong> gesetzt ist, wird das Skript am unteren Ende der Seite eingef\u00fcgt. Andernfalls wird das Skript in den <code>&lt;head&gt;<\/code> Block eingef\u00fcgt.<\/li>\n<\/ul>\n<p>Nachdem ein Skript in die Warteschlange gestellt wurde, wird es mit der Funktion <code>add_action()<\/code> zu einer Seite hinzugef\u00fcgt. Um das Ganze in Aktion zu sehen, f\u00fcge einen Block wie diesen am Ende deiner <strong>functions.php-Datei<\/strong> ein:<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>Oben erh\u00e4lt das neue jQuery-Skript den Handle <strong>my_script<\/strong>, und die WordPress-Dienstprogrammfunktion <code>get_template_directory_uri()<\/code> hilft dabei, eine <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-eine-url\/\">URL<\/a> f\u00fcr die JavaScript-Datei in den Verzeichnissen des Themas zu erstellen.<\/p>\n<p>Ein Array anderer Handles teilt WordPress mit, dass <strong>my_script<\/strong> von jQuery core, jQuery-UI core und dem jQuery-UI datepicker Plugin abh\u00e4ngt. Schlie\u00dflich haben wir dem Skript die Versionsnummer 1.0 zugewiesen und darum gebeten, dass es am unteren Ende der Seite platziert wird.<\/p>\n<h3>Wie lade ich jQuery von einem CDN in WordPress?<\/h3>\n<p>Wir wissen, dass jQuery von verschiedenen Content Delivery Networks ausgeliefert werden kann. Wir wissen auch, dass WordPress jQuery und viele jQuery-Plugins standardm\u00e4\u00dfig aus dem Dateisystem des lokalen Webservers laden m\u00f6chte.<\/p>\n<p>Du kannst dieses Verhalten \u00e4ndern, indem du die Konfigurationsinformationen, die mit dem bestehenden <strong>jquery-Handle<\/strong> registriert sind, l\u00f6schst und neu schreibst. Dazu f\u00fcgst du einen Codeblock in der <strong>functions.php<\/strong> ein, der mit der Funktion <code>wp_deregister_script()<\/code> beginnt:<\/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>Das <strong>jquery-Handle<\/strong> wurde der jQuery-Bibliothek im Cloudflare CDN zugewiesen und bleibt eine Abh\u00e4ngigkeit f\u00fcr das lokale <strong>my_script<\/strong>. Du kannst den gleichen Ansatz verwenden, um andere jQuery-Komponenten &#8211; wie jQuery-UI &#8211; aus einem CDN zu beziehen.<\/p>\n<p>Wenn du mehr \u00fcber jQuery und WordPress wissen m\u00f6chtest, findest du hier eine Anleitung zur Behebung von Konfigurationsproblemen, die zu Fehlern wie &#8222;<a href=\"https:\/\/kinsta.com\/de\/blog\/jquery-ist-nicht-definiert\/\" rel=\"noopener\">jQuery ist nicht definiert<\/a>&#8220; f\u00fchren k\u00f6nnen<\/p>\n\n<h2>Zusammenfassung<\/h2>\n<p>Seit mehr als 15 Jahren hilft die Open-Source-Bibliothek jQuery Entwicklern dabei, reichhaltige, dynamische Webanwendungen mit so wenig Code wie m\u00f6glich zu erstellen. Heute wird jQuery auf mehr Websites eingesetzt als jede andere JavaScript-Bibliothek.<\/p>\n<p>Sie ist auch in einigen beliebten Content-Management-Systemen enthalten, darunter WordPress. Dar\u00fcber hinaus gibt es ein robustes \u00d6kosystem von jQuery-Plugins, die von anderen JavaScript-Programmierern entwickelt wurden und es Entwicklern mit unterschiedlichem Erfahrungsstand erm\u00f6glichen, ihren Websites erweiterte Funktionen hinzuzuf\u00fcgen.<\/p>\n<p>Wenn du jQuery-basierte Websites und Anwendungen erstellen m\u00f6chtest, solltest du dir die <a href=\"https:\/\/kinsta.com\/de\/preise\/\" rel=\"noopener\">Managed WordPress-Hosting-Pakete<\/a> und die <a href=\"https:\/\/sevalla.com\/application-hosting\/\">Hosting-L\u00f6sungen f\u00fcr Anwendungen und Datenbanken<\/a> von Kinsta ansehen.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Der Einfluss, den jQuery auf die Webentwicklung hatte, nachdem die Open-Source-JavaScript-Bibliothek vor mehr als 15 Jahren ver\u00f6ffentlicht wurde, kann gar nicht hoch genug eingesch\u00e4tzt werden. Als &#8230;<\/p>\n","protected":false},"author":259,"featured_media":54201,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[465,511,749],"topic":[951],"class_list":["post-54114","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-javascript","tag-jquery","tag-languages","topic-javascript-frameworks"],"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>Was ist jQuery? Ein Blick auf die meistgenutzte JavaScript-Bibliothek<\/title>\n<meta name=\"description\" content=\"Die Open-Source-JavaScript-Bibliothek jQuery hilft Entwicklern, dynamische Webanwendungen mit so wenig Programmieraufwand wie m\u00f6glich, zu erstellen. Erfahre hier mehr.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-jquery\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Was ist jQuery? Ein Blick auf die meistgenutzte JavaScript-Bibliothek des Internets\" \/>\n<meta property=\"og:description\" content=\"Die Open-Source-JavaScript-Bibliothek jQuery hilft Entwicklern, dynamische Webanwendungen mit so wenig Programmieraufwand wie m\u00f6glich, zu erstellen. Erfahre hier mehr.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/de\/blog\/was-ist-jquery\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-09T07:56:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-01T19:17:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/09\/was-ist-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=\"Die Open-Source-JavaScript-Bibliothek jQuery hilft Entwicklern, dynamische Webanwendungen mit so wenig Programmieraufwand wie m\u00f6glich, zu erstellen. Erfahre hier mehr.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/09\/was-ist-jquery.png\" \/>\n<meta name=\"twitter:creator\" content=\"@Kinsta_DE\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_DE\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Steve Bonisteel\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"15\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/was-ist-jquery\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/was-ist-jquery\/\"},\"author\":{\"name\":\"Steve Bonisteel\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/d84ceff87bd64a4368a581fc8aa8bd6f\"},\"headline\":\"Was ist jQuery? Ein Blick auf die meistgenutzte JavaScript-Bibliothek des Internets\",\"datePublished\":\"2022-09-09T07:56:08+00:00\",\"dateModified\":\"2025-10-01T19:17:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/was-ist-jquery\/\"},\"wordCount\":2424,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/was-ist-jquery\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/09\/was-ist-jquery.png\",\"keywords\":[\"JavaScript\",\"JQuery\",\"languages\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/was-ist-jquery\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/was-ist-jquery\/\",\"url\":\"https:\/\/kinsta.com\/de\/blog\/was-ist-jquery\/\",\"name\":\"Was ist jQuery? Ein Blick auf die meistgenutzte JavaScript-Bibliothek\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/was-ist-jquery\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/was-ist-jquery\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/09\/was-ist-jquery.png\",\"datePublished\":\"2022-09-09T07:56:08+00:00\",\"dateModified\":\"2025-10-01T19:17:36+00:00\",\"description\":\"Die Open-Source-JavaScript-Bibliothek jQuery hilft Entwicklern, dynamische Webanwendungen mit so wenig Programmieraufwand wie m\u00f6glich, zu erstellen. Erfahre hier mehr.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/was-ist-jquery\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/was-ist-jquery\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/was-ist-jquery\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/09\/was-ist-jquery.png\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/09\/was-ist-jquery.png\",\"width\":1460,\"height\":730,\"caption\":\"Was ist jQuery? Ein Blick auf die meistgenutzte JavaScript-Bibliothek\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/was-ist-jquery\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript-Frameworks\",\"item\":\"https:\/\/kinsta.com\/de\/thema\/javascript-frameworks\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Was ist jQuery? Ein Blick auf die meistgenutzte JavaScript-Bibliothek des Internets\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/de\/#website\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/de\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/de\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\",\"https:\/\/x.com\/Kinsta_DE\",\"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:\/\/kinsta.com\/de\/#\/schema\/person\/d84ceff87bd64a4368a581fc8aa8bd6f\",\"name\":\"Steve Bonisteel\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/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:\/\/kinsta.com\/de\/blog\/author\/stevebonisteel\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Was ist jQuery? Ein Blick auf die meistgenutzte JavaScript-Bibliothek","description":"Die Open-Source-JavaScript-Bibliothek jQuery hilft Entwicklern, dynamische Webanwendungen mit so wenig Programmieraufwand wie m\u00f6glich, zu erstellen. Erfahre hier mehr.","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:\/\/kinsta.com\/de\/blog\/was-ist-jquery\/","og_locale":"de_DE","og_type":"article","og_title":"Was ist jQuery? Ein Blick auf die meistgenutzte JavaScript-Bibliothek des Internets","og_description":"Die Open-Source-JavaScript-Bibliothek jQuery hilft Entwicklern, dynamische Webanwendungen mit so wenig Programmieraufwand wie m\u00f6glich, zu erstellen. Erfahre hier mehr.","og_url":"https:\/\/kinsta.com\/de\/blog\/was-ist-jquery\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","article_published_time":"2022-09-09T07:56:08+00:00","article_modified_time":"2025-10-01T19:17:36+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/09\/was-ist-jquery.png","type":"image\/png"}],"author":"Steve Bonisteel","twitter_card":"summary_large_image","twitter_description":"Die Open-Source-JavaScript-Bibliothek jQuery hilft Entwicklern, dynamische Webanwendungen mit so wenig Programmieraufwand wie m\u00f6glich, zu erstellen. Erfahre hier mehr.","twitter_image":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/09\/was-ist-jquery.png","twitter_creator":"@Kinsta_DE","twitter_site":"@Kinsta_DE","twitter_misc":{"Verfasst von":"Steve Bonisteel","Gesch\u00e4tzte Lesezeit":"15\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/de\/blog\/was-ist-jquery\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/blog\/was-ist-jquery\/"},"author":{"name":"Steve Bonisteel","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/d84ceff87bd64a4368a581fc8aa8bd6f"},"headline":"Was ist jQuery? Ein Blick auf die meistgenutzte JavaScript-Bibliothek des Internets","datePublished":"2022-09-09T07:56:08+00:00","dateModified":"2025-10-01T19:17:36+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/was-ist-jquery\/"},"wordCount":2424,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/was-ist-jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/09\/was-ist-jquery.png","keywords":["JavaScript","JQuery","languages"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/de\/blog\/was-ist-jquery\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/de\/blog\/was-ist-jquery\/","url":"https:\/\/kinsta.com\/de\/blog\/was-ist-jquery\/","name":"Was ist jQuery? Ein Blick auf die meistgenutzte JavaScript-Bibliothek","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/was-ist-jquery\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/was-ist-jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/09\/was-ist-jquery.png","datePublished":"2022-09-09T07:56:08+00:00","dateModified":"2025-10-01T19:17:36+00:00","description":"Die Open-Source-JavaScript-Bibliothek jQuery hilft Entwicklern, dynamische Webanwendungen mit so wenig Programmieraufwand wie m\u00f6glich, zu erstellen. Erfahre hier mehr.","breadcrumb":{"@id":"https:\/\/kinsta.com\/de\/blog\/was-ist-jquery\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/de\/blog\/was-ist-jquery\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/blog\/was-ist-jquery\/#primaryimage","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/09\/was-ist-jquery.png","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2022\/09\/was-ist-jquery.png","width":1460,"height":730,"caption":"Was ist jQuery? Ein Blick auf die meistgenutzte JavaScript-Bibliothek"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/de\/blog\/was-ist-jquery\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/de\/"},{"@type":"ListItem","position":2,"name":"JavaScript-Frameworks","item":"https:\/\/kinsta.com\/de\/thema\/javascript-frameworks\/"},{"@type":"ListItem","position":3,"name":"Was ist jQuery? Ein Blick auf die meistgenutzte JavaScript-Bibliothek des Internets"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/de\/#website","url":"https:\/\/kinsta.com\/de\/","name":"Kinsta\u00ae","description":"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen","publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/de\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","https:\/\/x.com\/Kinsta_DE","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:\/\/kinsta.com\/de\/#\/schema\/person\/d84ceff87bd64a4368a581fc8aa8bd6f","name":"Steve Bonisteel","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/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:\/\/kinsta.com\/de\/blog\/author\/stevebonisteel\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/54114","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/users\/259"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/comments?post=54114"}],"version-history":[{"count":9,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/54114\/revisions"}],"predecessor-version":[{"id":54204,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/54114\/revisions\/54204"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/54114\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/54114\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/54114\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/54114\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/54114\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/54114\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/54114\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/54114\/translations\/es"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/54114\/translations\/se"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/54114\/translations\/dk"},{"href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/54114\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media\/54201"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media?parent=54114"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/tags?post=54114"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/topic?post=54114"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}