Онлайн-курсы по jQuery
Выбрать другой урок из курса
Обсуждение
Теория урока

Знакомство с jQuery

jQuery – это библиотека написанная на JavaScript специально для быстрого и простого взаимодействия с HTML и CSS. Благодаря jQuery можно легко получать доступ к любому элементу, атрибуту и всячески использовать их.

Чтобы работать с jQuery, нужно скачать библиотеку с официального сайта разработчика. После чего разместить в какой-то папке и подключать при помощи тега <script> в HTML документе. Можно не скачивать библиотеку jQuery, а указать абсолютный путь до библиотеки. Смотрим пример 1 и 2.

Пример 1
<!-- эта библиотека лежит на сайте codebra -->
<!-- можно ее подключать в практике -->
<script src = "/js/lib/jquery.min.js"></script>
Пример 2
<!-- эта библиотека лежит на сайте официальном сайте -->
<script src = "//code.jquery.com/jquery-1.11.3.min.js"></script>

Далее рассмотрим третий пример и разберем его по кускам.

Пример 3
$('h1').hide();

Как видите, код простой. Очень простое объяснение работы этого скрипта: интерпретатор находит знак доллара ($) и понимает, что это jQuery, далее проверяет, что находится в скобках после доллара, видит, что мы хотим работать с элементом h1, далее находит функцию (действие) hide() и выполняет ее для этого элемента. О hide() поговорим подробно позже. Функция hide() нужна нам, чтобы скрыть элемент. Что произойдет? Элемент h1 будет скрыт.

Еще пару примеров. Четвертый иллюстрирует работу с псевдоклассами. В пятом будет показано, как просто при помощи jQuery работать с классами, в шестом - с идентификаторами (id).

Пример 4
$('h1:first-of-type').hide();
Пример 5
$('.box .item').hide();
Пример 6
$('#header').hide();

В седьмом примере показан общий вид синтаксиса jQuery.

Пример 7
$("элемент").функция("атрибуты функции");
<
×
>
Не публикуйте свой код прямо в комментариях. Во-первых, он плохо отображается. Во-вторых, он может содержать для кого-то «спойлеры», т.е. ответы на практику. Воспользуйтесь специальными сервисами: cssdeck.com или jsfiddle.net.
Комментарии, содержащие код (пару строк не считается), будут безжалостно удаляться.