Продолжим изучение функции $ и научимся обращаться к элементу на странице по его ID. Ранее использовали атрибут onclick для вызова функций, указывая ID элемента внутри тега. Однако часто нужно обращаться к элементам из отдельного скрипта, находящегося в другом файле или вынесенного из основного HTML-кода.
Обращение к элементу по ID
В jQuery есть два основных способа обращения к элементам: по ID и по классу. Рассмотрим обращение по ID.
Использование функции $
Для обращения к элементу по ID в jQuery используется функция $. В JavaScript можно использовать getElementById, но jQuery предлагает более удобный подход.
let test; // Объявляем переменную
test = $('#test').html(); // Обращаемся к элементу с ID "test" и получаем его HTML-содержимое
alert(test); // Выводим содержимое в alertВ этом коде:
- $ — функция jQuery.
- #test — указывает на элемент с ID «test». Символ # обозначает ID. Для обращения к классу используется точка (.).
- .html() — метод jQuery, возвращающий HTML-содержимое элемента.
Порядок элементов в HTML
Важно: если блок с ID «test» расположен в HTML-коде после скрипта, jQuery не найдёт его. Выведется ошибка, например, «undefined». Элемент, к которому происходит обращение, должен находиться выше скрипта или в подключенном файле, загружающемся до выполнения скрипта.
Функция $ в jQuery
Функция $ в jQuery используется часто, как и объявление переменных с помощью var в JavaScript. Важно понимать её возможности и принципы работы.
Мы научились обращаться к элементам по ID с помощью функции $ в jQuery. Это важный навык для разработки веб-приложений с использованием jQuery. Обратите внимание на порядок элементов в HTML-коде, чтобы избежать ошибок.