Код работает только через команду $(document).ready() ... почему?

Question

Начал читать jQuery, решил попробовать на практике, но не понятно почему код не работает.

Вот элементы меню, при наведении меняют цвет.

$(document).ready(function(){$(".navbar a").mouseenter(function(){$(this).addClass('onnavpoint');});})
$(document).ready(function(){$(".navbar a").mouseout(function(){$(this).removeClass('onnavpoint');});})

Но если я убираю $(document).ready(), то перестает работать.
Я далек от мысли, что эту команду перед каждой функцией придется добавлять, поэтому прошу гуру объяснить в чем дело...

Кроме того, this вообще зачем здесь?
я ведь уже обратился к элементу ".navbar a" и повесил на него событие.
Непонятно. Извините за тупость. =(

Спасибо.

Answer 1

$(document).ready используют для того, чтобы долждаться, когда загрузиться всё DOM дерево. Иначе при обращению к узлу HTML, которого ещё нет на странице будет ошибка
Вешать везде где попало $(document).ready( не нужно. Можно воспользоваться делегированием и событие вешать на часть, которая всегда есть на странице,в Jquery это происходит за счёт on. Пример:
```
$(document).on('mouseout', '.navbar a', function() {
    $(this).removeClass('onnavpoint');
});
```
this вообще зачем здесь? я ведь уже обратился к элементу ".navbar a"

this указаывает как раз на контекст использования. в данном случае на этот самый элемент, над которым происходит событие. Методы применяются через точку к какому-то элементу. Зная это взаимный вопрос: как Jquery должен применить метод без $(this).?

Answer 2

Браузер обрабатывает страницы поэлементно сверху вниз, постепенно наполняя dom-дерево (глобальный объект document) Если ваш скрипт подключен в <head>, то он выполнится раньше, чем ваше меню, которое, очевидно, лежит ниже в <boby> окажется в внутри document.

Чтобы этого не произошло вы просите браузер зарегистрировать событие — дождаться, пока весь контент окажется в document и только потом искать в нем .navbar a

Конструкция

$(document).ready(function() {
   ...
});

эквивалентна нативной

document.addEventListener('DOMContentLoaded', function(){
    ...
});

Событие, которое должно произойти, когда весь html загрузится.

Если вы перенесете вызов вашего скрипта вниз, после объявления .navbar, например переда звкрывающим <\body> то ваш код будет работать без $(document).ready(...), потому что в тот момент времени, когда браузер дойдет до его выполнения, ваше меню уже будет лежать в document.

Теперь далее, никто не мешает вам один раз вызвать

$(document).ready(function() {
   $(".navbar a").mouseenter(...);
   $(".navbar a").mouseout(...);
   ...и сколько угодно ещё других действий.
});

Но если вы используете jQuery, то подход c .on(), который привел в ответе Алексей Шиманский, пожалуй более предпочтителен.

$(this) нужен, потому что addClass и removeClass - методы которые есть у элемента, а точнее у объекта jQuery. Если бы вы писали на нативном js, то вам пришлось бы там вместо this использовать event.target

А вообще я бы советовал начать изучение с нативного js, а не с jQuery. Тогда многие вопросы отпадут.

БЛОГ НА HUSL

Код работает только через команду $(document).ready() ... почему?

Ответы (2 шт):