Der Einfluss, den jQuery auf die Webentwicklung hatte, nachdem die Open-Source-JavaScript-Bibliothek vor mehr als 15 Jahren veröffentlicht wurde, kann gar nicht hoch genug eingeschätzt werden. Als Werkzeugkasten, der eine neue Kurzschrift für die sonst so komplexe JavaScript-Programmierung schuf, wird jQuery auch heute noch dem Motto seiner Entwickler gerecht: „Weniger schreiben, mehr tun“.
Auch heute noch ist jQuery bei professionellen Entwicklern beliebt, während andere mit wenig oder gar keiner Programmiererfahrung die Bibliothek nutzen können, um ihren Websites erweiterte Funktionen hinzuzufügen. Hier erfährst du, was hinter einer der größten Erfolgsgeschichten der Webentwicklung steckt.
Wie beliebt ist jQuery?
Die Umfrage von StackOverflow aus dem Jahr 2022 über die von professionellen Entwicklern verwendeten Webtechnologien ergab, dass etwas mehr als 29 % der über 45.000 Befragten mit jQuery arbeiten. Unter den JavaScript-Bibliotheken lag jQuery an zweiter Stelle nach React.js, der Bibliothek, die 2011 bei Facebook (jetzt Meta) entwickelt wurde und die inzwischen von über 44 % der Entwickler/innen genutzt wird.
Aber die aktuellen Projekte von Webentwicklern erzählen nicht die ganze Geschichte. Laut den Internet-Technologietrends 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äuft.
Die jQuery-Bibliothek ist seit mehr als einem Jahrzehnt im Kern von WordPress enthalten und steht damit Hunderten von Themes zur Verfügung, die sich auf ihre Funktionalität verlassen, um dynamische Websites zu erstellen. Drupal ist ein weiteres beliebtes Content Management System, das jQuery in seine Kernkomponenten integriert hat. Unabhängig davon, welche Technologien die aktuellen Favoriten der Entwickler sind, bleibt jQuery die meistgenutzte JavaScript-Bibliothek im Web.
Eine kurze Geschichte von jQuery
Der Kampf der Browser wird seit den Anfängen des Internets geführt, und die Entwickler waren immer die Leidtragenden. Im Jahr 2006, als der Webentwickler John Resig jQuery vorstellte, war der Internet Explorer von Microsoft der unangefochtene Marktführer – eine Umkehrung des Vorsprungs von Netscape weniger als ein Jahrzehnt zuvor.
Damals hatte Mozillas neuer Firefox einen Marktanteil von 10 % (im Vergleich zu Microsofts 84 %) und Apples Safari war gerade auf der Bildfläche erschienen. Googles Chrome, den heutigen Marktführer, gab es noch nicht. JavaScript-Programmierer/innen wie Resig hatten regelmäßig damit zu kämpfen, Code zu schreiben, der in allen Browsern lief.
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ährend sie Aufgaben wie diese erledigen:
- HTML-Elemente in einer Webseite manipulieren
- Dynamisches Ändern von CSS
- Reagieren auf Ereignisse wie Mausklicks und Tastendruck
- Ajax-Anfragen bearbeiten, um den Inhalt einer Seite ohne Neuladen zu aktualisieren
Nachdem Resig die Bibliothek veröffentlicht hatte, bauten andere Entwickler Anwendungen auf jQuery auf und stellten ihre Arbeit oft als Plugins zur Verfügung, um neue Funktionen für alle zugänglich zu machen.
Was ist jQuery UI?
jQuery UI ist eine beliebte Sammlung von Plugins, die dazu dienen, Benutzeroberflächen zu verbessern. Sie gilt als „offizielles“ Pendant zur jQuery-Kernbibliothek und fügt eine Vielzahl von Spezialeffekten und Widgets wie Datumsauswahlen, Fortschrittsbalken, Schieberegler, Spinner und Registerkarten oder ausklappbare Panels hinzu.
Was ist der Unterschied zwischen jQuery und JavaScript?
Es ist wichtig zu wissen, dass jQuery JavaScript ist. Wenn du jQuery verwendest, arbeitest du mit Instanzen von JavaScript-Objekten, die die Namenskonventionen von jQuery für Methoden (Funktionen) und Eigenschaften widerspiegeln. Werfen wir einen Blick auf Vanilla JavaScript und jQuery, die die gleiche Aufgabe bewältigen.
Hier ist ein HTML-Schnipsel irgendwo auf einer Webseite:
<p id="target">Old text</p>Vanilla JavaScript-Code, der das Element <p> mit dem id „target“ findet – und dann den Text zwischen den Tags ersetzt – könnte so aussehen:
const content = document.getElementById( "target" );
content.textContent = "New text";Die Methode getElementById() von JavaScript gibt ein Objekt zurück, das den HTML- und den Textinhalt des Absatzes mit dem „Ziel“ id enthält. Das Objekt wird der Konstantenreferenz content zugewiesen, dann wird seine Eigenschaft textContent in „Neuer Text“ geändert.
JavaScript erlaubt die Verkettung von Methoden, so dass die oben genannten Aufgaben mit einer einzigen Anweisung erledigt werden können:
document.getElementById( "target" ).textContent = "New text"; Es überrascht also nicht, dass du auch jQuery-Aktionen verketten kannst. Um mit jQuery „Alter Text“ in „Neuer Text“ zu ändern, könntest du Folgendes tun:
$( "#target" ).text( "New text" );Das Dollarzeichen ($) ist ein kurzer Alias für jQuery, und ( "#target" ) ist ein Beispiel für einen jQuery-Selektor. In diesem Fall sucht der Selektor nach einem HTML-Element mit dem id unseres Zielabsatzes. Die jQuery-Methode text() wird verkettet, damit „Neuer Text“ der Inhalt des Absatzes wird.
So verwendest du jQuery auf deiner Website
Füge 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 öffentlich zugänglichen Content Delivery Network (CDN) liegen. Auf der offiziellen jQuery-Website kannst du die neuesten Versionen der Bibliothek herunterladen.
Die jQuery-Bibliothek ist in minifiziertem (komprimiertem) JavaScript für schnelles Laden in der Produktion oder unkomprimiert für Lesbarkeit und Debugging verfügbar.
Du wirst auch ein wenig JavaScript schreiben, um jQuery aufzurufen und spezielle Aufgaben für deine Webanwendung zu erledigen. Im HTML der Seiten deiner Website kannst du die jQuery-Bibliothek und die Datei mit deinem Code wie folgt verlinken:
<script type="text/javascript" src="/js/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="/js/my_script.js"></script>In diesem Beispiel befinden sich die Version 3.6.0 von jQuery und dein Site-spezifischer Code in einer Datei namens my_script.js im Verzeichnis/js/ auf der Website. Die jQuery-Bibliothek ist normalerweise im Abschnitt <head> einer Webseite enthalten. Es ist üblich, dass Entwickler einige Links zu JavaScript-Dateien, einschließlich des Codes, der auf die jQuery-Bibliothek angewiesen ist, am Ende einer Seite platzieren, normalerweise kurz vor dem Schließen des <body> -Tags. Du willst immer, dass der Code, der jQuery aufruft, nach dem Link zur Bibliothek selbst erscheint.
Verlinkung zu jQuery in einem CDN
Die jQuery-Bibliothek wird oft schneller heruntergeladen, wenn sie über ein stabiles CDN bereitgestellt wird. jQuery ist im Web so weit verbreitet, dass die Wahrscheinlichkeit groß ist, dass ein Besucher deiner Website die Bibliothek bereits bei mehreren CDNs in seinem Browser zwischengespeichert hat. Wir können das obige HTML-Snippet so ändern, dass es das JavaScript Content Delivery Network von Cloudflare nutzt:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="/js/my_script.js"></script>Aufrufen von jQuery in deiner Anwendung
Wenn du deine jQuery-Anwendung schreibst, solltest du dich vergewissern, dass die Webseite vollständig geladen wurde, bevor dein Code ausgeführt wird. Du kannst dies testen, indem du die Methode ready() verwendest, die deinen Code ausführt, wenn das Dokument geladen ist:
$(document).ready(function() {
// Your jQuery application will go here
});Dieser Start für eine jQuery-Anwendung ist so üblich, dass die Entwickler der Bibliothek eine noch kürzere Syntax entwickelt haben:
$(function() {
// Your jQuery application will go here
});Auswählen von Elementen im DOM mit jQuery
Die Grundlage der meisten jQuery-Anwendungen ist die Fähigkeit, die Struktur einer Webseite als Objekt (das Document Object Model, kurz DOM) zu durchlaufen und verschiedene Elemente im HTML auszuwählen. Die Auswahl eines Elements (oder einer Gruppe von Elementen) ist der erste Schritt, bevor etwas mit diesem Element gemacht wird , wie z. B. das Ändern seines Aussehens oder das Aktualisieren des Inhalts. jQuery-Selektoren zielen auf verschiedene Arten auf DOM-Eigenschaften ab. Zu den häufigsten gehören:
- Nach dem Namen des HTML-Elements (Tag)
- Anhand von CSS-Eigenschaften (einschließlich IDs und Klassennamen)
- Durch die relative Position eines Elements innerhalb des DOM
- Durch den Wert des Inhalts in Formularfeldern
- Durch den aktuellen Status eines Elements
Hier sind einige Beispiele:
// Select all HTML paragraph tags in a document
$( "p" );
// Select the element with the ID "myID"
$( "#myID" );
// Select all elements with the CSS class name "myClass"
$( ".myClass" );
// Select all input, textarea, select, and button elements in a form
$( ":input" );
// Select the children of some other element
// (In this case, the entries in an unordered list)
$( "ul > li" );
// Select all anchors with the rel attribute “nofollow”
$( "a[rel='nofollow']" );
// Select all checkboxes in a “checked” state
$( "input:checked" )Du kannst jQuery-Selektoren kombinieren, um eine spezifischere Ausrichtung zu erreichen. Beispiele:
// HTML paragraph tags with the CSS class “myClass”
$( "p.myClass" );
// HTML paragraphs with the text “Kinsta” anywhere within them
$( "p:contains('Kinsta')" );
// HTML div tags that have at least one paragraph tag as a descendent
$( "div:has(p)" );
// The first entry in any unordered list with the CSS class “myList”
$( "ul.myList li:first" ); Das DOM mit jQuery manipulieren
Jetzt, wo du weißt, wie du verschiedene Elemente auf einer Webseite auswählen kannst, kannst du sie mit jQuery-Methoden verändern. Wie bereits erwähnt, kannst du diese Aktionen oft verketten, um mit wenig Code viel zu erreichen. Einige Beispiele:
// Select the element with the ID “alert” and add a red background
$( "#alert" ).css( "background-color", "red" );
// Select the element with the ID “alert” and add the class “urgent” to its markup
$( "#alert" ).addClass( "urgent" );
// Find any paragraph with the class “myName” and make its content “Kinsta”
$( "p.myName" ).text( "Kinsta" );
// Like the statement above, but with support for HTML markup
$( "p.myName" ).html( "<strong>Kinsta</strong>" );
// Add the attribute/value rel=”nofollow” to every anchor
$( "a" ).attr( "rel", "nofollow" );
// Hide the element with the ID “myDiv” (but keep it in the DOM)
$( "#myDiv" ).hide();
// Make the element hidden above visible again
$( "#myDiv" ).show();
// Remove from the DOM everything INSIDE the element with the ID “myDiv”
$( "#myDiv" ).empty();
// Remove from the DOM the entire element with the ID “myDiv”
$( "#myDiv" ).remove();Behandlung von Ereignissen mit jQuery
Die oben beschriebenen DOM-Manipulationen würden von den Webbesuchern unbemerkt bleiben, wenn sie sofort nach dem Laden einer Seite stattfinden würden. Deshalb kann deine jQuery-Anwendung Ereignisse wie Mausklicks, Mausbewegungen, Tastendrücke und vieles mehr erkennen und darauf reagieren, um ein wirklich reaktionsfähiges Erlebnis zu schaffen.
Erkennen von Mausklicks mit jQuery
Die Reaktion auf einen Mausklick (oder ein Tippen auf einem Touchscreen) ist eine häufige Aufgabe für Webanwendungen. Wir haben jQuery und HTML in einem Beispiel kombiniert, das auch das in jQuery integrierte event Objekt nutzt, das nützliche Informationen über unser „Klick-Ereignis“ enthält:
<script>
// Invoke jQuery
$(document).ready(function () {
// Assign “click” method to all button elements
// Our function passes the built-in object with event details
$( "button" ).click(function ( event ) {
// Make sure all button backgrounds are white
$( "button" ).css( "background-color", "white" );
// Change our H2 text to report the ID of the clicked button
$( "#buttonReport" ).text("You clicked " + event.target.id);
// Set the background color of the clicked button to red
$( "#" + event.target.id ).css("background-color", "red");
});
});
</script>
<h2 id="buttonReport">Click a button!</h2>
<button id="Button1">Button 1</button>
<button id="Button2">Button 2</button>
<button id="Button3">Button 3</button> Das Ergebnis:
Erkennen von Mausbewegungen mit jQuery
Zu wissen, wo sich der Mauszeiger auf einer Webseite befindet, ist in vielen responsiven Webanwendungen nützlich. Hier ist ein Beispiel dafür, wie jQuery helfen kann:
<script>
$(document).ready(function () {
// Detect when the mouse is over a div with the mouseover() method
$( "div" ).mouseover(function ( event ) {
// Make the div under the mouse grey and taller
$( "#" + event.target.id ).css({
"background-color" : "lightgrey",
"height" : "8em"
});
});
// Detect when the mouse moves away with the mouseout() method
$( "div" ).mouseout(function ( event ) {
// Return the size and color of the div to its original state
$( "#" + event.target.id ).css({
"background-color" : "white",
"height" : "4em"
});
});
});
</script>
<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
<div id="div3">Div 3</div>Das obige Beispiel zeigt auch, wie die css() Methode von jQuery verwendet werden kann, um mehrere CSS-Eigenschaften auf einmal zu setzen. Hier ist das Ergebnis:
Umgang mit Ajax-Anfragen mit jQuery
Ein großer Teil der Popularität von jQuery ist seine Fähigkeit, Ajax-Anfragen zu vereinfachen, mit denen Webanwendungen Daten mit Servern austauschen können, ohne dass die Seiten neu geladen werden müssen. Die Bibliothek verfügt über viele Werkzeuge, um Ajax-Anfragen für Daten im Text-, HTML-, XML- und JSON-Format zu verwalten. Der Ansatz von jQuery besteht darin, Kurzbefehle für die häufigsten Aufgaben anzubieten. Eine der einfachsten im Ajax-Werkzeugkasten ist die Methode load():
<div id="myContent">Replace Me</div>
<button>Load Content</button>
<script>
// Request the file content.php from the server after a button is clicked.
// Place the results in the HTML element with the ID “myContent”
$( "button" ).click( function (){
$( "#myContent" ).load( "content.php" );
});
</script>Mit nur drei Zeilen JavaScript und zwei HTML-Elementen passiert dort eine Menge. Das Ergebnis würde etwa so aussehen:
So verwendest du jQuery UI
Wenn du jQuery UI-Plugins zu deinen Projekten hinzufügst, hast du Zugang zu vielen Spezialeffekten und Widgets, die auf der Kernbibliothek von jQuery aufbauen. Hier ist ein Beispiel für die Verwendung von jQuery UI, um einen Pop-up-Kalender als Datumsauswahl in ein Webformular einzufügen.
Füge zunächst die jQuery UI-Bibliothek und die zugehörigen CSS zu deinen Webseiten hinzu. In diesem Beispiel verlinken wir auf die Bibliotheken im JavaScript CDN von Cloudflare zusammen mit der jQuery-Kernbibliothek:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css" />Als Nächstes fügst du ein input Feld in dein HTML-Formular ein und bindest über JavaScript die datepicker() Methode von jQuery UI mit einem Selektor ein:
<label for="myDate">Date:</label>
<input type="text" id="myDate" name="myDate">
<script>
$( function() {
$( "#myDate" ).datepicker();
} );
</script> Wenn du nun in das input Formularfeld klickst, wird der Datums-Picker gestartet:
Wie man jQuery in WordPress verwendet
Die jQuery-Bibliothek wird mit WordPress mitgeliefert und ist ein wichtiger Bestandteil vieler WordPress-Themes. Auch wenn dein aktuelles Theme jQuery noch nicht verwendet, kannst du die Registrierung der JavaScript-Abhängigkeiten in WordPress nutzen, um deinen jQuery-Code zum Laufen zu bringen.
Dazu bearbeitest du die Datei functions.php, die Teil deines Themes ist. Eine Theme-Aktualisierung kann diese Datei überschreiben. Deshalb ist es ratsam, deine Änderungen zu sichern, indem du zuerst ein Child-Theme erstellst und die functions.php-Datei dort bearbeitest. Erstelle zumindest ein manuelles WordPress-Backup, bevor du fortfährst.
Registrierung deines jQuery-JavaScripts in der functions.php
Du kannst einen FTP- oder SFTP-Client verwenden, um die Datei functions.php zwischen deinem Desktop und dem Webserver zu übertragen und sie zu bearbeiten. WordPress-Administratoren können die functions.php auch innerhalb des CMS ändern:
Wähle im Dashboard Erscheinungsbild > Theme File Editor.
Klicke im linken Menü auf Themenfunktionen.
Der Inhalt deiner functions.php Datei hängt von dem gerade aktiven Theme ab. Oben siehst du die Funktionen des Themas Twenty Twenty-One. Du kannst dein eigenes jQuery-Skript in die Konfiguration deiner Seite einfügen, indem du die WordPress-Funktion wp_enqueue_script() verwendest. Hier ist die Vorlage für diese Funktion:
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );Und hier ist, was das alles bedeutet:
- $handle: Der benutzerfreundliche Name, der mit diesem Skript verknüpft ist. (Die jQuery-Kernbibliothek ist in WordPress bereits mit dem Handle jquery registriert.)
- $src: Der Pfad und Dateiname oder die URL, die auf den JavaScript-Quellcode verweist.
- $deps: Die Handles aller anderen JavaScript-Quellen, die dieses Skript benötigt, um richtig zu funktionieren.
- $ver: Die Versionsnummer, die du deinem JavaScript-Quellcode zugewiesen hast.
- $in_footer: Wenn diese Option auf true gesetzt ist, wird das Skript am unteren Ende der Seite eingefügt. Andernfalls wird das Skript in den
<head>Block eingefügt.
Nachdem ein Skript in die Warteschlange gestellt wurde, wird es mit der Funktion add_action() zu einer Seite hinzugefügt. Um das Ganze in Aktion zu sehen, füge einen Block wie diesen am Ende deiner functions.php-Datei ein:
// 'my_custom_scripts' is a function name of your choice
function my_custom_scripts() {
wp_enqueue_script(
'my_script'
get_template_directory_uri() . '/assets/js/my_script.js',
array( 'jquery', 'jquery-ui-core', 'jquery-ui-datepicker' ),
'1.0',
true );
}
add_action( 'wp_enqueue_scripts', 'my_custom_scripts' );Oben erhält das neue jQuery-Skript den Handle my_script, und die WordPress-Dienstprogrammfunktion get_template_directory_uri() hilft dabei, eine URL für die JavaScript-Datei in den Verzeichnissen des Themas zu erstellen.
Ein Array anderer Handles teilt WordPress mit, dass my_script von jQuery core, jQuery-UI core und dem jQuery-UI datepicker Plugin abhängt. Schließlich haben wir dem Skript die Versionsnummer 1.0 zugewiesen und darum gebeten, dass es am unteren Ende der Seite platziert wird.
Wie lade ich jQuery von einem CDN in WordPress?
Wir wissen, dass jQuery von verschiedenen Content Delivery Networks ausgeliefert werden kann. Wir wissen auch, dass WordPress jQuery und viele jQuery-Plugins standardmäßig aus dem Dateisystem des lokalen Webservers laden möchte.
Du kannst dieses Verhalten ändern, indem du die Konfigurationsinformationen, die mit dem bestehenden jquery-Handle registriert sind, löschst und neu schreibst. Dazu fügst du einen Codeblock in der functions.php ein, der mit der Funktion wp_deregister_script() beginnt:
// 'my_custom_scripts' is a function name of your choice
function my_custom_scripts() {
wp_deregister_script('jquery');
wp_register_script(
'jquery',
'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js',
null,
'3.6.0',
False
);
wp_enqueue_script(
'my_script'
get_template_directory_uri() . '/assets/js/my_script.js',
array( 'jquery', 'jquery-ui-core', 'jquery-ui-datepicker' ),
'1.0',
true
);
}
add_action( 'wp_enqueue_scripts', 'my_custom_scripts' );Das jquery-Handle wurde der jQuery-Bibliothek im Cloudflare CDN zugewiesen und bleibt eine Abhängigkeit für das lokale my_script. Du kannst den gleichen Ansatz verwenden, um andere jQuery-Komponenten – wie jQuery-UI – aus einem CDN zu beziehen.
Wenn du mehr über jQuery und WordPress wissen möchtest, findest du hier eine Anleitung zur Behebung von Konfigurationsproblemen, die zu Fehlern wie „jQuery ist nicht definiert“ führen können
Zusammenfassung
Seit mehr als 15 Jahren hilft die Open-Source-Bibliothek jQuery Entwicklern dabei, reichhaltige, dynamische Webanwendungen mit so wenig Code wie möglich zu erstellen. Heute wird jQuery auf mehr Websites eingesetzt als jede andere JavaScript-Bibliothek.
Sie ist auch in einigen beliebten Content-Management-Systemen enthalten, darunter WordPress. Darüber hinaus gibt es ein robustes Ökosystem von jQuery-Plugins, die von anderen JavaScript-Programmierern entwickelt wurden und es Entwicklern mit unterschiedlichem Erfahrungsstand ermöglichen, ihren Websites erweiterte Funktionen hinzuzufügen.
Wenn du jQuery-basierte Websites und Anwendungen erstellen möchtest, solltest du dir die Managed WordPress-Hosting-Pakete und die Hosting-Lösungen für Anwendungen und Datenbanken von Kinsta ansehen.
