В jQuery обращение к элементу происходит с помощью $('#id').onEventName()= {}
или $('.class').onEventName()= {}
, а как происходит обращение к элементу в JavaScript?
-
Запомните Все не декларация функции () - это ее вызов. Так вот $('#id').onEventName() это вызов функции и присвоить значение результату работы функции не получится. У вас идет запрос $('#id') почитайте jquery– Aziz UmarovCommented 12 окт. 2020 в 12:18
-
Как интересно, изучать жквери, не разобравшись с основами...– ИнквизиторCommented 12 окт. 2020 в 15:15
3 ответа
document.querySelector('.class').addEventListener(ev, cb, {});
Поиск элемента и addEventListener.
Также для прослушивания событий можно использовать onclick(ev)
, onmouseenter(ev)
и тд.
Прочитайте про селекторы JQuery
Выберите элемент с идентификатором intro:
$("#intro")
Выделите все элементы с классом "intro":
$(".intro")
А нативно на JS можно обратиться
Проблема (или, преимущество) в том, что 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>