Онлайн-курсы по 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
$("элемент").функция("атрибуты функции");
<
×
>
Внимание! Впервые на этом сайте?

Образовательный ресурс codebra.ru полностью посвящен программированию. Все курсы и уроки находятся на главной странице. Вы можете начать изучение прямо сейчас, кликнув на ссылки: HTML, CSS, JavaScript, C++, PHP, jQuery, Python, Bootstrap 3

Если что-то не нашли, то воспользуйтесь поиском по сайту, который находится на главной странице в самом верху.

Удачи в обучении!

Закрыть окно