0

В jQuery обращение к элементу происходит с помощью $('#id').onEventName()= {} или $('.class').onEventName()= {}, а как происходит обращение к элементу в JavaScript?

2
  • Запомните Все не декларация функции () - это ее вызов. Так вот $('#id').onEventName() это вызов функции и присвоить значение результату работы функции не получится. У вас идет запрос $('#id') почитайте jquery 12 окт 2020 в 12:18
  • Как интересно, изучать жквери, не разобравшись с основами... 12 окт 2020 в 15:15

3 ответа 3

4

document.querySelector('.class').addEventListener(ev, cb, {});

Поиск элемента и addEventListener.

Также для прослушивания событий можно использовать onclick(ev), onmouseenter(ev) и тд.

2

Прочитайте про селекторы JQuery

пример

Выберите элемент с идентификатором intro:

$("#intro")

пример

Выделите все элементы с классом "intro":

$(".intro")

А нативно на JS можно обратиться

document.getElementById(Id)

document.getElementsByClassName(class)

2
  • вопрос был про нативный эквивалент
    – teran
    12 окт 2020 в 12:43
  • @teran добавил в ответ 12 окт 2020 в 13:16
2

Проблема (или, преимущество) в том, что jQuery оставляет все необходимые циклы за кулисами. Что с одним элементом, что с нескольким - зачастую код выглядит одинаково. А на стандартном JS нужно делать переборы "вручную".

В JS есть:

  • document.querySelector(".class") - возвращает первый соответствующий элемент на странице, или null, если ничего не найдет.
    * на jQuery, обращение к первому элементу: $(".class").eq(0)

  • document.querySelectorAll(".class") - всегда возвращает NodeList коллекцию всех найденных элементов. К каждому элементу из коллекции можно обращаться через его номер. Если элементов не найдено, вернет коллекцию нулевой длины (length: 0)

И querySelector-ы, и jQuery-функция $() помимо классов, поддерживают любой стандартный CSS-селектор

$("div").addClass("blue");


let div = document.querySelectorAll("div");
for (let i = 0; i < div.length; i++) {
  div[i].classList.add("yellow");
}
// div[0].classList.add("yellow"); // первый
// div[1].classList.add("yellow"); // второй...
// ...


document.querySelector("div").style.backgroundColor = "#2ad";
// обращение к первому элементу
div {
  display: inline-block;
  width: 80px;
  height: 80px;
  margin: 4px;
  font-size: 50px;
}

.blue {
  background-color: #169;
}
.yellow {
  color: #fd0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.