8.1 Подключение jQuery
Наконец-то мы добрались до библиотеки jQuery. К моменту написания этой статьи она уже морально устарела и ей почти не пользуются в новых проектах. Но в свое время она была очень популярна, очень хорошо документирована и в интернете есть очень много примеров с ее использованием.
Поэтому если ты пишешь небольшой web-проект и не хочешь тратить месяцы на изучение современных фреймворков, рекомендую тебе воспользоваться библиотекой jQuery.
Чтобы ты мог пользоваться тысячами функций jQuery, тебе нужно просто подключить ее к своей странице. Сделать это можно так:
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>Работу с jQuery можно разделить на два типа.
Во-первых, ты можешь получить объект библиотеки jQuery, который представляет из себя обычный HTML-элемент, обернутый в специальный объект из jQuery.
Во-вторых, у jQuery есть несколько глобальных объектов не привязанных к HTML-элементам. Их тоже бывает нужно использовать.
Начнем с первых.
8.2 Работа с селекторами
Для работы с объектами в jQuery используются селекторы (помнишь CSS и его классы?). Так вот, в jQuery, если хочешь выбрать какой-то объект или группу объектов, тебе нужно задать их селектор.
Примеры:
| Код | Описание | Примечание | |
|---|---|---|---|
| 1 | $("div") | Выбирает все объекты с тегом DIV | много объектов |
| 2 | $("img.#image123") | Выбирает все объекты с тегом IMG и ID == image123 | один объект |
| 3 | $("#image123") | Выбирает все объекты с ID == image123 | один объект |
| 4 | $("div.article") | Выбирает все объекты с тегом DIV у которых есть class article | много объектов |
Допустим, мы хотим всем ссылкам добавить обработку события onclick, вот как это можно сделать с помощью jQuery:
$("a").click(function() {
alert("Click");
});Тут делаются три действия:
- Получает объект(ы), которые удовлетворяют селектору
"a". - Создаем анонимную функцию, которая вызывает метод
alert(). - Устанавливаем эту функцию в качестве обработчика на событие
clickдля всех объектов из пункта 1.
Чем еще хорош jQuery, так это тем, что его код удобно читать. Не нужно сильно разбираться, как все работает. Если есть рабочий код, то достаточно просто понять, что он делает.
8.3 Работа с элементами документа
Давайте разберем несколько сценариев работы с документом с помощью jQuery.
Получить значение элемента (для элементов, у которых бывают значения):
var result = $ ("selector").value();Задать значение элемента (для элементов, у которых бывают значения):
$ ("selector").value(newValue);Как добавить HTML внутрь какого-нибудь элемента?
$ ("selector").html(newHTML);А как получить HTML, который внутри элемента?
var html = $ ("selector").html();А если я хочу получить/добавить не HTML, а простой текст? Тут тоже никаких сюрпризов:
var html = $ ("selector").text();А если я хочу получить/поменять цвет элемента?
$ ("selector").color("red");Если нужно работать со стилями, то это тоже просто сделать:
$ ("selector").css("color", "red");Как добавить новый элемент?
$ (".container").append($("h3"));