При помощи jQuery вы выбираете HTML элементы и выполняете с ними определенные "действия".
Для работы с библиотекой jQuery используется специальный синтаксис для выборки HTML элементов и выполнения некоего действия с ними.
Базовый синтаксис имеет следующий вид:
- Знак $ указывает на доступ к jQuery
- (селектор) "ищет/отбирает" HTML элементы
- Метод jQuery действие() выполняет заданное действие с найденным элементом
Примеры:
- $(this).hide() - скрывает текущий элемент
- $("p").hide() - скрывает все элементы <p>
- $(".test").hide() - скрывает все элементы с атрибутом class="test"
- $("#test").hide() - скрывает элемент с атрибутом id="test"
А вы знакомы с CSS селекторами?
Для выборки элементов jQuery использует синтаксис CSS. Подробнее о синтаксисе селекторов вы узнаете в следующей главе этого учебника.
Совет: Если вы не знакомы с CSS, то вы можете прочитать Учебник CSS для начинающих.
Событие готовности документа
Вы, наверное, заметили, что все методы jQuery в наших примерах находятся внутри, так называемого, "события готовности документа":
$(document).ready(function(){
// методы jQuery пишем сюда...
});
Это делается для того, чтобы не допустить запуск кода jQuery до того, как веб-страница будет полностью загружена (готова).
Будет правильно подождать пока документ будет полностью загружен и сформирован, прежде чем начинать с ним работать. К тому же такой подход позволяет размещать код JavaScript до основного тела документа в его секции head.
А вот примеры, когда действие может не удаться, если методы jQuery будут вызваны до того, как документ будет полностью загружен:
- Попытка скрыть элемент, который еще не создан
- Попытка узнать размер изображения, которое еще не загружено
Совет: В jQuery также есть короткая форма записи события готовности документа:
$(function(){
// методы jQuery пишем сюда...
});
Вы можете использовать ту запись, которая вам больше нравится. Мы думаем, что понять событие готовности документа проще, когда читаешь код.
