В данном уроке мы с вами начнем изучать библиотеку 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('новый текст');