Grundlegender Spickzettel: Konvertieren Sie jQuery in JavaScript

German (Deutsch) translation by Władysław Łucyszyn (you can also view the original English article)

Obwohl jQuery immer noch eine beliebte JavaScript-Bibliothek ist und einen Platz in der Webentwicklung hat, haben sich native Web-APIs in den letzten Jahren stark weiterentwickelt. Da moderne Browser eine Vielzahl von JavaScript-Funktionen unterstützen, benötigen wir keine Bibliothek von Drittanbietern mehr, um das DOM relativ einfach zu bearbeiten. Infolgedessen haben sich viele Frontend-Entwickler entschlossen, von jQuery auf JavaScript umzusteigen, um die Anzahl der Abhängigkeiten und damit die Ladezeiten der Seiten zu verringern.

Um Ihnen bei der Umstellung zu helfen, finden Sie hier einen Spickzettel für jQuery zu JavaScript, der die JavaScript-Entsprechungen zu den am häufigsten verwendeten jQuery-Funktionen enthält.

jQuery vs. JavaScript

jQuery ist eine JavaScript-Bibliothek, mit der Webentwickler das Dokumentobjektmodell (DOM) manipulieren können, um dynamisch auf Benutzeraktionen und Statusänderungen zu reagieren. Der größte Vorteil besteht darin, dass Sie auf einfache Weise jedes DOM-Element auf der Seite auswählen und Benutzeraktionen hinzufügen können, indem Sie beispielsweise die "Punktnotation" verwenden:

1	/* Adds the .active class to the toggle button */
2	$('#toggle').addClass('active');

Natives JavaScript ist ausführlicher. Sie können keinem DOM-Element einfach Aktionen hinzufügen. Zuerst müssen Sie es an eine Variable übergeben, dann können Sie verschiedene Aktionen ausführen. So sieht beispielsweise der obige Code in JavaScript aus:

1	let toggle = document.querySelector('#toggle');
2	toggle.classList.add('active');

Obwohl JavaScript ausführlicher ist, müssen Sie keine Bibliothek eines Drittanbieters verwenden, da die DOM-API (die Sie mit Ihrem JavaScript-Code aufrufen) in Ihren Webbrowser integriert ist. Infolgedessen haben Sie eine Abhängigkeit weniger und in den meisten Fällen wird Ihre Seite auch schneller geladen als mit jQuery. Sie müssen jedoch selbst beurteilen, ob es sich lohnt, auf natives JavaScript umzusteigen, da Sie mehr Code schreiben müssen, um das gleiche Ergebnis zu erzielen. Der Kompromiss zwischen jQuery und JavaScript besteht also aus mehr benutzerdefiniertem Code im Vergleich zu weniger Abhängigkeiten.

Sehen wir uns nun die 20 am häufigsten verwendeten jQuery-zu-JavaScript-Entsprechungen an.

1. Wählen Sie Elemente

jQuery:

Die Funktion jQuery(), kurz $(), ist die globale Funktion in jQuery, mit der Sie ein beliebiges Element im DOM auswählen können.

1	/* Syntax */
2
3	jQuery();
4	$(); // shortcut

/** 
 * Example
 * 
 * Selects all the links among the descendants of the 'my-class' class
 */
 
jQuery('.my-class a');
$('.my-class a');

Weitere Informationen finden Sie in den Dokumenten zur jQuery-API: jQuery() - globale Funktion

JavaScript:

1	/* Syntax */
2
3	Document.querySelectorAll();

1	/* Example */
2
3	document.querySelectorAll('.my-class a');

Weitere Informationen finden Sie in den DOM-API-Dokumenten: .querySelectorAll()-Methode

2. Wählen Sie Erstes Element

jQuery:

1	/* Syntax */
2
3	.first();

/**
 * Example
 * 
 * Selects the first link among the descendants of the 'my-class' class
 */

$('.my-class a').first();

Weitere Informationen finden Sie in der jQuery-API docs: first()-Methode

JavaScript:

1	/* Syntax */
2
3	Document.querySelector();

1	/* Example */
2
3	document.querySelector('.my-class a');

Weitere Informationen finden Sie in der DOM-API-Dokumentation: .querySelector()-Methode

3. Elemente finden

jQuery:

1	/* Syntax */
2
3	.find();

/**
 * Example
 * 
 * Find all the span tags that are descendants of links within 
 * the 'my-class' class
 * 
 * Note: searches for all descendants not just for children
 */
 
$('.my-class a').find('span');

$('.my-class a').find('span').css('color', 'red');  // for testing

Weitere Informationen finden Sie in den Dokumenten der jQuery-API: .find()-Methode

JavaScript:

/* Syntax */

// to find the first element (also if there's only one)
Document.querySelector();

// to find all elements
Document.querySelectorAll();

/**
 * Example
 * 
 * At first querySelectorAll() returns a NodeList, so we have to loop
 * through it to find all the span tags we want
 * 
 * For the sake of testing, I made the selected elements red, 
 * you can find the 'style.color' property below in this cheat sheet 
 */

// finds all '.my-class a'
let nodes = document.querySelectorAll('.my-class a');

// loops through all '.my-class a'
for (let i = 0; i < nodes.length; i++) {
    
    // checks if the individual '.my-class a' element has a 
    // 'span' descendant to avoid 'undefined' error
    if (nodes[i].querySelector('span')) {
        
      // colors span tags that are desdendants of '.my-class a'
      nodes[i].querySelector('span').style.color = 'red';
   
   }

}

Sehen Sie Code-Demo:

Please accept marketing cookies to load this content.

Weitere Informationen finden Sie in den DOM-API-Dokumenten: .querySelector()-Methode, .querySelectorAll()-Methode

4. Wählen Sie Children

jQuery:

1	/* Syntax */
2
3	.children();
4	.children('selector');

/**
 * Example
 * 
 * (1) Finds all the children of all '.my-class a' elements on the age
 * 
 * (2) Finds all the 'span' elements that are the children of 
 * any '.my-class a' element on the page
 * 
 * Note: searches only for children (first-level of descendants)
 */
 
$('.my-class a').children();

$('.my-class a').children('span');

$('.my-class a').children('span').css('color', 'blue'); // for testing

Weitere Informationen finden Sie in der jQuery API docs: .children()-Methode

JavaScript:

1	/* Syntax */
2
3	ParentNode.children;

/**
 * Example 
 * 
 * 2nd example of the jQuery version above, plus makes the selected span 
 * tags blue for the sake of easy testing
 * 
 * for 1st example, only leave out the if check at the end (we need this 
 * because the JS version is not a method but a property, so we 
 * need to check which children are 'span')
 * 
 */

// selects all the elements with 'my-class a' on the page
let items = document.querySelectorAll('.my-class a');

// loops through all the elements with '.my-class a'
for (let i = 0; i < items.length; i++) {
    
        // finds the children of the current '.my-class a' element
        let kids = items[i].children;
        
                // loops through the children of the current '.my-class a' element
        for (let j = 0; j < kids.length; j++) {
            
            // checks if the child element is a span tag
            if (kids[j].tagName == 'SPAN') {
        
                              kids[j].style.color = 'blue';
      
            }
                
                }

}

Sehen Sie Testcode:

Please accept marketing cookies to load this content.

Weitere Informationen finden Sie in den DOM-API-Dokumenten: .children-Eigenschaft - Denken Sie daran, dass die JavaScript-Version zwar eine Eigenschaft ist, die jQuery-Version jedoch eine Methode in Klammern.

5. Wählen Sie Parent

jQuery:

1	/* Syntax */
2
3	.parent();

/**
 * Example
 * 
 * Selects the parent elements of ALL elements with 'my-class a' 
 * on the page
 */
 
$('.my-class a');

Weitere Informationen finden Sie in der jQuery-API-Dokumentation: .parent()-Methode

JavaScript:

1	/* Syntax */
2
3	Node.parentNode;

/** 
 * Example 
 * 
 * Selects the parent of the FIRST element with 'my-class a' on the page 
 * (for the sake of less repetition)
 * 
 * For looping through all '.my-class a' elements, use the looping 
 * solution and querySelectorAll() from the two examples above.
 */

let item = document.querySelector('.my-class a');
item.parentNode;

Weitere Informationen finden Sie in den DOM-API-Dokumenten: .parentNode-Eigenschaft

6. Wählen Sie Siblings

jQuery:

1	/* Syntax */
2
3	.siblings();

/**
 * Example
 * 
 * Selects the siblings of ALL elements with the 'find-siblings' 
 * class on the page
 */
 
$('.find-siblings').siblings();

Weitere Informationen finden Sie in der jQuery-API-Dokumentation: .siblings()-Methode

JavaScript:

1	/* Syntax */
2
3	Node.parentNode.querySelectorAll(":not(#elem)");

/**
 * Example
 * 
 * Selects the siblings of the FIRST element with the
 * 'find-siblings' class
 * 
 * For looping through all 'find-siblings' elements, see examples #3 and #4
 * 
 * the ':scope' pseudoclass is necessary for preventing the child 
 * elements of 'item' from being selected (otherwise querySelectorAll() 
 * searches through all descendants of 'item', with ':scope >' it loops 
 * through just the first level)
 * 
 */

let item = document.querySelector('.find-siblings');
let siblings = item.parentNode.querySelectorAll(':scope > :not(.find-siblings)');

Sehen Sie Testdemo:

Please accept marketing cookies to load this content.

Weitere Informationen finden Sie in den DOM-API-Dokumenten: .parentNode-Eigenschaft, .querySelectorAll() -Methode, :scope-Pseudoklasse (siehe Abschnitt "Direkte untergeordnete Elemente").

7. Wählen Sie Next Sibling

jQuery:

1	/* Syntax */
2
3	.next();

/**
 * Example
 * 
 * Selects the next siblings of all elements with 'my-class a' 
 * on the page
 */
 
$('.my-class a').next();

Weitere Informationen finden Sie in der jQuery-API-Dokumentation: .next()-Methode

JavaScript:

1	/* Syntax */
2
3	NonDocumentTypeChildNode.nextElementSibling;

/**
 * Example 
 * 
 * For declaring the 'item' variable by selecting elements with 
 * 'my-class a' on the page, see examples #3, #4, #5
 */
item.nextElementSibling;

Weitere Informationen finden Sie in den DOM-API-Dokumenten: .nextElementSibling-Eigenschaft

8. Wählen Sie Vorheriges Sibling

jQuery:

1	/* Syntax */
2
3	.prev();

/**
 * Example
 * 
 * Selects the previous siblings of all elements with 'my-class a' 
 * on the page
 */
 
$('.my-class a').prev();

Weitere Informationen finden Sie in den Dokumenten der jQuery-API: .prev()-Methode

JavaScript:

1	/* Syntax */
2
3	NonDocumentTypeChildNode.previousElementSibling;

/**
 * Example 
 * 
 * For declaring the 'item' variable by selecting elements with 
 * 'my-class a' on the page, see examples examples #3, #4, #5
 */
item.previousElementSibling;

Weitere Informationen finden Sie in den DOM-API-Dokumenten: .previousElementSibling-Eigenschaft

9. Add Class

jQuery:

1	/* Syntax */
2
3	.addClass();

/**
 * Example 
 * 
 * Adds the 'second-class' class to every 'my-class' element
 * 
 */
$('.my-class').addClass('second-class');

Weitere Informationen finden Sie in der jQuery-API-Dokumentation: .addClass()-Methode

JavaScript:

1	/* Syntax */
2
3	Element.classList.add();

/**
 * Example 
 * 
 * For declaring the 'item' variable by selecting elements with 'my-class' 
 * on the page, see examples examples #3, #4, #5
 */

item.classList.add('second-class');

Weitere Informationen finden Sie in den DOM-API-Dokumenten: .classList-Eigenschaft und .add()-Methode

10. Remove Class

jQuery:

1	/* Syntax */
2
3	.removeClass();

/**
 * Example 
 * 
 * (1) Removes the 'second-class' class from every 'my-class' element
 * 
 * (2) Removes 'second-class', then add 'third-class' to 
 * every 'my-class' element
 */
$('.my-class').removeClass('second-class');
$('.my-class').removeClass('second-class').addClass('third-class');

Weitere Informationen finden Sie in den Dokumenten der jQuery-API: .removeClass()-Methode

JavaScript:

1	/* Syntax */
2
3	Element.classList.remove();

/**
 * Example 
 * 
 * For declaring the 'item' variable by selecting elements with 'my-class' 
 * on the page, see examples examples #3, #4, #5
 */
 
item.classList.remove('second-class');

// To use it together with add(), you need two separate statements
item.classList.remove('second-class');
item.classList.add('third-class');

Weitere Informationen finden Sie in den DOM-API-Dokumenten: .classList-Eigenschaft, .remove()-Methode

11. Toggle Class

jQuery:

1	/* Syntax */
2
3	.toggleClass();

/** Example
 * 
 * Adds the 'active' class to elements with 'my-class' if they don' have it
 * remove it if they have it
 * 
 */
 
$('.my-class').toggleClass('active');

Weitere Informationen finden Sie in den Dokumenten der jQuery-API: .toggleClass()-Methode

JavaScript:

1	/* Syntax */
2
3	Element.classList.toggle();

/**
 * Example 
 * 
 * For declaring the 'item' variable, see examples #3, #4, #5
 */
 
item.classList.toggle('active');

Weitere Informationen finden Sie in den DOM-API-Dokumenten: .classList-Eigenschaft, .toggle()-Methode

12. Has Class

jQuery:

1	/* Syntax */
2
3	.hasClass();

/**
 * Example
 * 
 * Checks if any element with 'my-class' has the 'active' class
 * 
 * Returns true or false
 * 
 * If there's at least one element with 'active' it's true,
 * otherwise false.
 * 
 */

$('.my-class').hasClass('active');

Weitere Informationen finden Sie in den Dokumenten der jQuery-API: .hasClass()-Methode

JavaScript:

1	/* Syntax */
2
3	Element.classList.contains();

/**
 * Example 
 * 
 * Similar to the jQuery version, this one also checks if any element
 * in the whole classList has the 'active' class
 * 
 * If at least one element has 'active', it's true, otherwise false
 * 
 * For declaring the 'item' variable, see examples #3, #4, #5
 */
 
item.classList.contains('active');

Weitere Informationen finden Sie in den DOM-API-Dokumenten: .classList-Eigenschaft, .contains()-Methode

13. Attribut abrufen

jQuery:

1	/* Syntax */
2
3	.attr('attr-name');

/**
 * Example
 * 
 * Returns the value of the href property of the FIRST occurrence of 
 * an element with 'my-class'
 * 
 */
 
$('.my-class').attr('href');

Weitere Informationen finden Sie in der jQuery-API-Dokumentation: .attr()-Methode

JavaScript:

1	/* Syntax */
2
3	Element.getAttribute('attr-name');

/**
 * Example 
 * 
 * For declaring the 'item' variable, see examples #3, #4, #5
 */
 
 item.getAttribute('href');

Weitere Informationen finden Sie in den DOM-API-Dokumenten: .getAttribute()-Methode

14. Attribut festlegen

jQuery:

1	/* Syntax */
2
3	.attr('attr-name', value);

/**
 * Example
 * 
 * Sets the value of the href property for ALL contact links that
 * have the 'contact-link' class
 * 
 */
 
$('.contact-link').attr('href', 'contact.html');

Weitere Informationen finden Sie in den Dokumenten zur jQuery-API: .attr()-Methode (Sie müssen dieselbe .attr()-Methode verwenden, um einen Attributwert abzurufen, jedoch mit zwei Parametern anstelle von einem).

JavaScript:

1	/* Syntax */
2
3	Element.setAttribute();

/**
 * Example 
 * 
 * For declaring the 'item' variable, see examples #3, #4, #5
 */
 
 item.setAttribute('href', 'contact.html');

Weitere Informationen finden Sie in den DOM-API-Dokumenten: .setAttribute()-Methode

15. Attribut entfernen

jQuery:

1	/* Syntax */
2
3	.removeAttr('attr-name');

/**
 * Example
 * 
 * Removes 'target' attributes from contact links
 */
 
$('.contact-link').removeAttr('target');

Weitere Informationen finden Sie in den Dokumenten der jQuery-API: .removeAttr()-Methode

JavaScript:

1	/* Syntax */
2
3	Element.removeAttribute();

/**
 * Example 
 * 
 * For declaring the 'item' variable, see examples #3, #4, #5
 */
 
 item.removeAttribute('target');

Weitere Informationen finden Sie in den DOM-API-Dokumenten: .removeAttribute()-Methode

16. HTML-Inhalt abrufen oder festlegen

jQuery:

1	/* Syntax */
2
3	.html();
4	.html('html-string');

/**
 * Example
 * 
 * (1) Gets the HTML content of the FIRST element that matches 'my-class'
 * 
 * (2) Sets/resets the HTML content of EACH element that matches 'my-class'
 * 
 */
 
$('.my-class').html();

$('.my-class').html('<em>Hello</em>');

Weitere Informationen finden Sie in der jQuery-API-Dokumentation: .html()-Methode

JavaScript:

1	/* Syntax */
2
3	Element.innerHTML;

/**
 * Example 
 * 
 * For declaring the 'item' variable, see examples #3, #4, #5
 */
 
item.innerHTML;                         // gets the value
item.innerHTML = '<em>Hello</em>';      // sets the value

Weitere Informationen finden Sie in den DOM-API-Dokumenten: .innerHTML-Eigenschaft

17. CSS-Eigenschaft abrufen oder festlegen

jQuery:

1	/* Syntax */
2
3	.css('property-name');
4	.css('property-name', value);

/**
 * Example
 * 
 * (1) Gets the 'color' value of the FIRST element
 * that has 'my-class'
 * 
 * (2) Sets the 'color' value to 'white' for EVERY element that has 
 * 'my-class'
 */
 
$('.my-class').css('color');

$('.my-class').css('color', 'white');

Weitere Informationen finden Sie in der jQuery-API-Dokumentation: .css()-Methode

JavaScript:

1	/* Syntax */
2
3	ElementCSSInlineStyle.style.{propertyName};

/**
 * Example 
 * 
 * For declaring the 'item' variable, see examples #3, #4, #5
 */
 
item.style.color;               // getting value

item.style.color = 'white';     // setting value

Weitere Informationen finden Sie in den DOM-API-Dokumenten: .style-Eigenschaft und CSS-Eigenschaftenreferenz (für die JavaScript-Namen der CSS-Eigenschaften).

18. Element ausblenden

jQuery:

1	/* Syntax */
2
3	.hide();

/**
 * Example
 * 
 * Hides all elements with 'my-class'
 */
 
$('.my-class').hide();

Weitere Informationen finden Sie in den Dokumenten der jQuery-API: .hide()-Methode

JavaScript:

1	/* Syntax */
2
3	ElementCSSInlineStyle.style.display = 'none';

/**
 * Example 
 * 
 * For declaring the 'item' variable, see examples #3, #4, #5
 */
 
item.style.display = 'none';

Weitere Informationen finden Sie in den DOM-API-Dokumenten: .style-Eigenschaft

19. Element anzeigen

jQuery:

1	/* Syntax */
2
3	.show();

/**
 * Example
 * 
 * Displays all elements with 'my-class'
 */

$('.my-class').show()

Weitere Informationen finden Sie in den Dokumenten der jQuery-API: .show()-Methode

JavaScript:

1	/* Syntax */
2
3	ElementCSSInlineStyle.style.display = '';

/**
 * Example  
 * 
 * For declaring the 'item' variable, see examples #3, #4, #5
 */

item.style.display = '';            // resets default
item.style.display = 'block';       // sets display as block
item.style.display = 'flex';        // sets display as flex

Weitere Informationen finden Sie in den DOM-API-Dokumenten: .style-Eigenschaft

20. Fügen Sie den Ereignis-Listener hinzu

jQuery:

1	/* Syntax */
2
3	.on();

/**
 * Example
 * 
 * Adds or removes the 'active' class to/from all elements with 
 * '.submenu' when #toggle is clicked
 */
 
$('#toggle').on('click', function(){
    $('.submenu').toggleClass('active');
});

Weitere Informationen finden Sie in der Methode jQuery API docs: .on()-Methode

JavaScript:

1	/* Syntax */
2
3	EventTarget.addEventListener('event', functionName);

/**
 * Example  
 * 
 * The code below only selects the FIRST element with the 
 * 'submenu' class.
 * 
 * To select all submenus, use the 'for' loop in Example #3 and #4
 */

let toggle = document.querySelector("#toggle");
let submenu = document.querySelector(".submenu");

toggle.addEventListener('click', function() {
   submenu.classList.toggle('active'); 
});

Sehen Sie Testcode:

Please accept marketing cookies to load this content.

Weitere Informationen finden Sie in den DOM-API-Dokumenten: .addEventListener()-Methode und DOM-Ereignisreferenz

Nächste Schritte

Dieser Spickzettel zu jQuery to JavaScript enthält die wichtigsten Funktionen, die Sie zum Erstellen einer Website benötigen. Wenn Sie sich mit diesen Eigenschaften und Methoden vertraut machen, können Sie von jQuery zu JavaScript springen. Sie müssen jedoch wahrscheinlich mehr wissen, wenn Sie komplexere Funktionen erstellen möchten.

Es gibt zwei weitere Ressourcen, die ich empfehlen würde, um das von Ihnen benötigte jQuery-zu-JavaScript-Äquivalent zu finden: die jQuery-Website, die Sie möglicherweise nicht benötigen, und Jack O’Connors jQuery-zu-JavaScript-Repo auf GitHub.

Obwohl ich die klassische for-Schleife verwendet habe, um querySelectorAll()-Matches zu durchlaufen, bietet Ihnen modernes JavaScript auch andere Optionen - Chris Coyier zeigt einige davon in diesem Artikel über JavaScript-Schleifen.

Das Experimentieren und Erstellen eigener Codefragmente kann auch sehr hilfreich sein, wenn Sie natives JavaScript und die DOM-API in Ihrem täglichen Workflow sicher verwenden möchten.

Weitere Informationen JavaScript mit Tuts+

Wenn Sie gerade erst mit JavaScript beginnen, bringen Sie diese Tuts+ -Kurse in die richtige Richtung: