jQuery naar JavaScript

jQuery is nog steeds een nuttige en pragmatische bibliotheek, maar de kans wordt steeds groter dat u niet afhankelijk bent van het gebruik ervan in uw projecten om basistaken uit te voeren, zoals het selecteren van elementen, ze opmaken, ze animeren en gegevens ophalen - dingen waar jQuery geweldig in was. nu is waarschijnlijk een goed moment om af te stappen van jQuery

Elementen

Elementen maken

Als u dynamisch een element in JavaScript wilt maken om toe te voegen aan de DOM, kunt u createElement() in het document aanroepen en het een tagnaam doorgeven om aan te geven welk element u wilt maken:

// Create a div and a span
$("<div>");
$("<span>");

// Create a div and a span
document.createElement("div");
document.createElement("span");

Selecteer elementen

Het selecteren van een of meerdere DOM-elementen om iets mee te doen, is een van de meest elementaire elementen van jQuery. Het equivalent van $() of jQuery() in JavaScript is querySelector()of querySelectorAll(), die je, net als bij jQuery, kunt aanroepen met een CSS-selector.

// jQuery, select all instances of .box
$(".box");

// Instead, select the first instance of .box
document.querySelector(".box");

// …or select all instances of .box
document.querySelectorAll(".box");

Voer een functie uit op alle elementen in een selectie

querySelectorAll() retourneert een NodeList met alle elementen die overeenkomen met de query. Terwijl u een functie met jQuery op de gehele selectie van elementen kunt uitvoeren door simpelweg de methode op het jQuery-object aan te roepen, moet u de NodeList van elementen herhalen met NodeList.forEach() in vanilla JavaScript:

// Hide all instances of .box
$(".box").hide();

// Iterate over the nodelist of elements to hide all instances of .box
document.querySelectorAll(".box").forEach(box =>  box.style.display = "none" );

Vind het ene element in het andere

Een veelgebruikt jQuery-patroon is om een ​​element binnen een ander element te selecteren met .find(). U kunt hetzelfde effect bereiken door de selectie te richten op de onderliggende elementen van een element, door querySelector of querySelectorAll op een element aan te roepen:

// Selecteer het eerste exemplaar van .box binnen .container
var container = $(".container");
// Later...
container.find(".box");

// Selecteer het eerste exemplaar van .box binnen .container
const container = document.querySelector(".container");
// Later...
container.querySelector(".box")

verberg() en toon()

De gemaksmethoden .hide() en .show() zijn gelijk aan het openen van de eigenschap .style en het instellen van display op none en block:

$(".box").hide();
$(".box").show();

document.querySelector(".box").style.display = "none";
document.querySelector(".box").style.display = "block";

De DOM doorkruisen

Als u de DOM wilt doorkruisen om een ​​subling of een ouderelement te selecteren ten opzichte van een ander element, kunt u deze openen via nextElementSibling, previousElementSibling en parentElement op dat element:

$(".box").volgende();
$(".box").prev();
$(".box").ouder();

const box = document.querySelector(".box");
box.nextElementSibling;
box.vorigeElementSibling;
box.parentElement;

Werken met klassen

U kunt gemakkelijk toegang krijgen tot klassen en ermee werken via de eigenschap classList om klassen te wisselen, te vervangen, toe te voegen en te verwijderen:

$(".box").addClass("focus");
$(".box").removeClass("focus");
$(".box").toggleClass("focus");

const box = document.querySelector(".box");
box.classList.add("focus");
box.classList.remove("focus");
box.classList.toggle("focus");

Als je meerdere klassen wilt verwijderen of toevoegen, kun je gewoon meerdere argumenten doorgeven aan .add() en .remove():

// Add "focus" and "highlighted" classes, and then remove them
const box = document.querySelector(".box");
box.classList.add("focus", "highlighted");
box.classList.remove("focus", "highlighted");

Als je twee klassen omschakelt die elkaar uitsluiten, kun je de eigenschap classList openen en .replace() aanroepen om de ene klasse door een andere te vervangen:

document.querySelector(".box").classList.replace("focus", "blurred");

Inline-styling

Als je .css() aanroept voor een element om de inline CSS te wijzigen met jQuery, zou je .style in JavaScript gebruiken en waarden toewijzen aan de verschillende eigenschappen om hetzelfde effect te bereiken:

// Select .box and change text color to #000
$(".box").css("color", "#000");

// Select the first .box and change its text color to #000
document.querySelector(".box").style.color = "#000";

Met jQuery kunt u een object met sleutel-waardeparen doorgeven om veel eigenschappen tegelijk te stylen. In JavaScript kunt u de waarden één voor één instellen, of de hele stijlreeks instellen:

// Pass multiple styles
$(".box").css({ "color": "#000", "background-color": "red"});

// Set color to #000 and background to red
const box = document.querySelector(".box");
box.style.color = "#000";
box.style.backgroundColor = "red";

// Set all styles at once (and override any existing styles)
box.style.cssText = "color: #000; background-color: red";

De DOM bijwerken

Als u de tekst van een element wilt wijzigen of nieuwe elementen aan de DOM wilt toevoegen, is de kans groot dat u innerHTML() bent tegengekomen, maar als u het gebruikt, wordt u mogelijk blootgesteld aan XSS-aanvallen (cross-site scripting).

TIP

Hoewel u er omheen kunt werken en de HTML kunt opschonen, zijn er enkele veiligere alternatieven. Als u alleen de tekst van een element wilt lezen of bijwerken, kunt u de eigenschap textContent van een object gebruiken om de huidige tekst te retourneren of bij te werken het: Als u een nieuw element maakt, kunt u dat element vervolgens aan een ander element toevoegen met behulp van de methode op de bovenliggende appendChild() of append():

// Update the text of a .button
$(".button").text("New text");

// Read the text of a .button
$(".button").text(); // Returns "New text"

// Update the text of a .button
document.querySelector(".button").textContent = "New text";

// Read the text of a .button
document.querySelector(".button").textContent; // Returns "New text";

Samengesteld, hier is hoe u een div maakt, de tekst en klasse bijwerkt en deze toevoegt aan de DOM:

// Create div element and append it to .container
$(".container").append($("<div>"));

// Create a div and append it to .container
const element = document.createElement("div");
document.querySelector(".container").appendChild(element);
// or
document.querySelector(".container").append(element);

Werken met evenementen

Er zijn talloze manieren om naar gebeurtenissen in jQuery te luisteren, maar of je nu .on(), .bind(), .live of .click() gebruikt, je zult genoegen moeten nemen met het JavaScript-equivalent .addEventListener:

$(".button").click(function(e) { /* handle click event */ });
$(".button").mouseenter(function(e) { /* handle mouseenter event */ });
$(document).keyup(function(e) { /* handle key up event */ });

document.querySelector(".button").addEventListener("click", (e) => { /* ... */ });
document.querySelector(".button").addEventListener("mouseenter", (e) => { /* ... */ });
document.addEventListener("keyup", (e) => { /* ... */ });

Event luisteren naar dynamisch toegevoegde elementen

// Handle click events .search-result elements,
// even when they're added to the DOM programmatically
$(".search-container").on("click", ".search-result", handleClick);

const searchElement = document.createElement("div");
document.querySelector(".search-container").appendChild(searchElement);

// Add an event listener to the element
searchElement.addEventListener("click", handleClick);