jQuery till JavaScript

jQuery är fortfarande ett användbart och pragmatiskt bibliotek, men chansen blir allt större att du inte är beroende av att använda det i dina projekt för att utföra grundläggande uppgifter som att välja element, styla dem, animera dem och hämta data – saker som jQuery var bra på. nu är förmodligen en bra tid att gå bort från jQuery

Element

Skapa element

Om du dynamiskt vill skapa ett element i JavaScript för att lägga till i DOM kan du anropa createElement() på dokumentet och ge det ett taggnamn för att indikera vilket element du vill skapa:

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

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

Välj element

Att välja ett eller flera DOM-element att göra något med är ett av de mest grundläggande elementen i jQuery. Motsvarigheten till $() eller jQuery() i JavaScript är querySelector()eller querySelectorAll(), som du, precis som med jQuery, kan anropa med en CSS-väljare.

// 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");

Kör en funktion på alla element i ett urval

querySelectorAll() returnerar en NodeList som innehåller alla element som matchar frågan. Medan du kan köra en funktion med jQuery på hela urvalet av element helt enkelt genom att anropa metoden på jQuery-objektet, men du måste iterera över NodeList av element med hjälp av NodeList.forEach() i 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" );

Hitta ett element i ett annat element

Ett vanligt jQuery-mönster är att välja ett element i ett annat element med .find(). Du kan uppnå samma effekt genom att omfånga markeringen till ett elements underordnade element genom att anropa querySelector eller querySelectorAll på ett element:

// Select the first instance of .box within .container
var container = $(".container");
// Later...
container.find(".box");

// Select the first instance of .box within .container
const container = document.querySelector(".container");
// Later...
container.querySelector(".box")

hide() and show()

Bekvämlighetsmetoderna .hide() och .show() är likvärdiga med att komma åt .style-egenskapen och inställningsvisningen till none och block:

// Hide and show and element
$(".box").hide();
$(".box").show();

// Hide and show an element by changing "display" to block and none
document.querySelector(".box").style.display = "none";
document.querySelector(".box").style.display = "block";

Att korsa DOM

Om du vill gå igenom DOM för att välja en subling eller ett överordnat element i förhållande till ett annat element, kan du komma åt dem via nextElementSibling, previousElementSibling och parentElement på det elementet:

// Return the next, previous, and parent element of .box
$(".box").next();
$(".box").prev();
$(".box").parent();

// Return the next, previous, and parent element of .box
const box = document.querySelector(".box");
box.nextElementSibling;
box.previousElementSibling;
box.parentElement;

Arbeta med klasser

Du kan enkelt komma åt och arbeta med klasser genom classList-egenskapen för att växla, ersätta, lägga till och ta bort klasser:

// Add, remove, and the toggle the "focus" class
$(".box").addClass("focus");
$(".box").removeClass("focus");
$(".box").toggleClass("focus");

// Add, remove, and the toggle the "focus" class
const box = document.querySelector(".box");
box.classList.add("focus");
box.classList.remove("focus");
box.classList.toggle("focus");

Om du vill ta bort eller lägga till flera klasser kan du bara skicka flera argument till .add() och .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");

Om du växlar mellan två klasser som utesluter varandra kan du komma åt classList-egenskapen och anropa .replace() för att ersätta en klass med en annan:

// Remove the "focus" class and add "blurred"
document.querySelector(".box").classList.replace("focus", "blurred");

Inline Styling

Om du anropar .css() på ett element för att ändra dess inline CSS med jQuery, skulle du använda .style i JavaScript och tilldela värden till dess olika egenskaper för att uppnå samma effekt:

// 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";

Med jQuery kan du skicka ett objekt med nyckel-värdepar för att utforma många egenskaper samtidigt. I JavaScript kan du ställa in värdena ett i taget, eller ställa in hela stilsträngen:

// 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";

Uppdatering av DOM:

Om du vill ändra texten i ett element eller lägga till nya element till DOM är chansen stor att du har stött på innerHTML(), men att använda den kan utsätta dig för cross-site scripting (XSS) attacker.

tips

Även om du kan kringgå det och rensa HTML, finns det några säkrare alternativ. Om du bara vill läsa eller uppdatera texten i ett element kan du använda egenskapen textContent för ett objekt för att returnera den aktuella texten, eller uppdatera Det: Om du konstruerar ett nytt element kan du sedan lägga till det elementet till ett annat element genom att använda metoden på det överordnade appendChild() eller 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";

Så här skapar du en div, uppdaterar dess text och klass och lägger till den i 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);

Jobba med event

Det finns en myriad av sätt att lyssna på händelser i jQuery, men oavsett om du använder .on(), .bind(), .live eller .click(), så nöjer du dig med JavaScript-motsvarigheten .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) => { /* ... */ });

Händelseavlyssnare för dynamiskt tillagda element

// 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);