В данном уроке мы с вами начнем изучать библиотеку jQuery. Для работы с ней вы должны владеть хотя бы минимальными навыками JavaScript.
Если вы не изучали предыдущие уроки (но умеете что-то делать на JavaScript) - можете их пока не смотреть, дальше по тексту будут раскиданы ссылки на те темы, которые нужно будет знать к конкретному уроку.
Но все же я рекомендую обучаться последовательно - сначала JavaScript, потом jQuery, иначе вы постоянно будете спотыкаться на не знании элементарных базовых вещей.
Итак, приступим.
Что такое jQuery?
jQuery представляет собой библиотеку JavaScript - набор готовых функций, которые помогают делать некоторые вещи проще и удобнее, чем это делается в чистом JavaScript.
Сравните два кода, которые делают одно и тоже - первый на чистом JavaScript, а второй - на jQuery:
JavaScript:
document.getElementById('elem').innerHTML = '!';
jQuery:
$('#elem').html('!');
Код jQuery выглядит намного компактнее и проще для написания.
Сравните еще два кода: в первом мы получаем все элементы с классом .www и ставим им красный цвет текста с помощью чистого JavaScript, а во втором - на jQuery:
JavaScript:
var elems = document.getElementsByClassName('www');
for (var i = 0; i < elems.length; i++) {
elems[i].style.color = 'red';
}
jQuery:
$('.www').css('color', 'red');
Здесь уже ощущается огромная разница - в чистом JavaScript пришлось делать цикл, а код jQuery особо и не поменялся по сравнению с первым примером.
Подключение jQuery
Для начала его нужно скачать jQuery с официального сайта. Затем положить полученный файл в папку с вашим сайтом и подключить его таким образом:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="путь к файлу с jQuery"></script>
</head>
<body>
</body>
</html>
После подключения можно начинать писать код с использованием этой библиотеки.
Видео для тех, кто ничего не понял
Если вам все равно не понятно, что, как и куда подключать - смотрите следующее видео:
Здесь скоро появится видео по подключению jQuery.
Начало работы с jQuery
Работа с библиотекой jQuery осуществляется с помощью универсальной функции $, которая для краткости состоит всего лишь из одного символа.
После доллара следует писать круглые скобки (это же функция), в которых указываются параметры (обычно один параметр), примерно вот так: $(параметр).
Чаще всего с помощью доллара $ получают группу HTML элементов по CSS селектору.
Давайте получим все элементы с классом .www:
var elems = $('.www');
А теперь получим только абзацы с классом p.www:
var elems = $('p.www');
А теперь получим элемент с id, равным www:
var elems = $('#www');
Как вы видите, используются обычные CSS селекторы, подобно методу querySelectorAll. Только querySelectorAll появился гораздо позже, чем jQuery, и обладает меньшими возможностями (зато работает быстрее).
Наборы jQuery
Обратите внимание на переменную elems:
var elems = $('.www');
В нее запишется группа выбранных элементов, так называемый набор элементов jQuery.
Вы можете одновременно менять все элементы набора jQuery (в отличие от querySelectorAll никаких циклов не требуется).
В принципе, переменная elems чаще всего и не нужна, так как jQuery позволяет применять полезные функции прямо к набору, в виде методов.
К примеру, вот так мы получим все элементы с классом .www и поставим им красный цвет:
$('.www').css('color', 'red');
Почти все методы jQuery возвращают набор, к которому этот метод был применен, что позволяет выстраивать цепочки методов любой длины.
Давайте получим все элементы с классом .www, поставим им красный цвет, и сменим их текст на 'новый текст':
$('.www').css('color', 'red').html('новый текст');