Vanilla JavaScript w przeglądarce ma teraz wiele wbudowanych funkcji jQuery,

Dlatego nie musimy używać jQuery do wielu rzeczy.

W tym artykule przyjrzymy się waniliowemu odpowiednikowi funkcji jQuery w JavaScript.

Wybieranie elementów

Możemy użyć querySelectormetody do wybrania pojedynczego elementu za pomocą podanego selektora w waniliowym JavaScript.

Waniliowy JavaScript ma również querySelectorAllmetodę wyboru wielu elementów za pomocą danego selektora z waniliowym JavaScriptem.

Na przykład możemy napisać:

document.querySelector("div");

I wybierz wszystkie div z:

document.querySelectorAll("div");

W jQuery mamy:

$("div");

Uruchom funkcję na wszystkich wybranych elementach

W jQuery możemy uruchomić funkcję na wszystkich wybranych elementach.

Na przykład możemy ukryć wszystkie divy, pisząc:

$("div").hide();

document.querySelectorAll("div")
  .forEach(div => {
    div.style.display = "none"
  })

for (const div of document.querySelectorAll("div")) {
  div.style.display = "none"
}

const divs = [...document.querySelectorAll("div")]
divs
  .forEach(div => {
    div.style.display = "none"
  })

Oznacza to, że możemy na nim uruchomić wiele metod tablicowych.

Znajdowanie elementu w innym

Aby znaleźć element w innym za pomocą jQuery, używamy findmetody:

const div = $("div");
//...
div.find(".box");

Piszemy więc:

const div = document.querySelector('div')
//...
div.querySelector(".box");

I piszemy:

const div = document.querySelector('div')
//...
div.querySelectorAll(".box");

Przechodzenie drzewa z parent(), next()iprev()

jQuery ma parentmetodę, aby pobrać element nadrzędny elementu.

nextMetoda jQuery zwraca następny element równorzędny elementu.

A prevmetoda jQuery zwraca poprzedni element rodzeństwa elementu.

Aby z nich skorzystać, możemy napisać:

$("div").next();
$("div").prev();
$("div").parent();

const div = document.querySelector("div");
div.nextElementSibling;
div.previousElementSibling;
div.parentElement;

previousElementSibling zwraca poprzedni element rodzeństwa.

I parentElementzwraca element nadrzędny.

Praca ze zdarzeniami

jQuery pozwala nam łatwo dodać obsługę zdarzeń do elementu.

Na przykład możemy napisać:

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

Aby zrobić to samo z waniliowym JavaScriptem, możemy użyć addEventListenermetody:

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

Wniosek

Możemy wykonać wiele podstawowych operacji DOM, takich jak wybieranie elementów, przechodzenie przez drzewo DOM i dodawanie detektorów zdarzeń do elementów za pomocą waniliowego JavaScript.

Więcej treści na plainenglish.io