Работа с библиотекой jQuery
В этой статье мы узнаем, что такое библиотека jQuery, как с ней работать и какое отношение она имеет к JavaScript. JQuery не является отдельным языком программирования - это всего лишь дополнение в функциональности JavaScript, существенно уменьшающее количество строчек кода. Она фокусируется на взаимодействии HTML/CSS и JavaScript.
Иными словами, вам не надо каждый раз "изобретать велосипед", в библиотеке jQuery уже созданы наиболее часто встречающиеся функции, которые в принципе можно применить к различным элементам сайта. Использование библиотеки JQuery прежде всего экономит время веб-разработчика и существенно сокращает код.
Библиотека jQuery позволяет получить доступ к любому элементу DOM и манипулировать ими.
Поиск информации по jQuery
Имеет ли смысл методично изучать всю библиотеку jQuery? Однозначно нет, даже если вы обладаете неограниченным запасом времени и терпения. Надо уметь искать нужную вам информацию. Эта гигантская библиотека содержит в себе множество уже созданных функций, эффектов и событий, которые нам могут никогда и не понадобиться.
Искать нужный вам код можно через поисковые системы или в онлайн справочниках:
http://jquery-docs.ru/
Просто вбиваете в поиск ключевое слово + jQuery и нужный вам код обязательно найдется.
Как подключить jQuery?
Открываете официальный сайт: jquery.com и тут у вас есть два варианта подключения. Первый вариант - скачать себе на компьютер последнюю сжатую версию jquery-3.3.1.min.js (меньше весит) и в HTML-файле указать путь до папки с файлом jQuery, в конце документа, перед закрывающимя тегом body.
<!doctype html>
<head>
<title></title>
<body>
<script src="js/3.3.1/jquery.min.js"></script>
</body>
</html>
Второй вариант - ничего не скачивать, а воспользоваться, например Google CDN, на самом деле подобных CDN-ссылок много. Вставляется данная ссылка через тег script, так же в конец HTML-файла.
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
Какой же вариант выбрать? Я обычно выбираю второй вариант, ведь пользователь пришедший на ваш сайт, уже возможно до вас посещал сайты с библиотекой JQuery на CDN (она очень популярна среди веб-разработчиков), следовательно браузер это дело закешировал и сразу отдает страницу из браузера, не тратя время на скачивание библиотеки.
Вызов функции jQuery
Одна из наиболее используемых функций jQuery - это $() или jQuery(). Через неё jQuery взаимодействует с тегами, классами, id, селекторами в HTML/CSS. В примере ниже идет привязка к классу button. Эта строка получает все элементы с классом button. Кавычки могут быть как двойные, так и одинарные.
$(".button")
В HTML-файле jQuery, как и JavaScript всегда пишется между тегами , во внешем js файле без этих тегов. В случае, если код пишется в начале страницы, то необходимо отслеживать событие "ready".
Функция будет выполнена тогда, когда DOM будет готов к событию "ready"
.
$(document).ready(function()
В получение нужных элементов страницы заключается большая часть успешной работы с библиотекой jQuery. Создадим простую HTML структуру для выборки элементов.
<header>
<div>
<h3 class="brand">Привет, мир!</h3>
</div>
</header>
<main>
<p>Следуйте за мной.</p>
</main>
<footer>
<p>©Copyright</p>
</footer>
Поиск элементов на странице
Ставим значок $, в круглых скобках и двойных кавычках выводим название класса .brand, событие имеет прямое отношение к стилям CSS, зададим ему синий цвет. Заголовок стал синего цвета. Поиск и замена цвета у тега h3 с классом .brand состоялись.
$(".brand").css("color", "blue")
Можно одновременно обратиться к двум элементам страницы и заменить цвет, через запятую и пробел.
$("div, p").css("color", "blue")
Найти тег внутри другого тега, чтобы изменить цвет текста:
$("div h3").css("color", "blue")
Найти тег внутри другого тега - альтернативный вариант:
$("div").find("h3").css("color", "blue")
Выбрать все элементы и заменить цвет.
$("*").css("color", "blue")
Верстальщику, который хочет развиваться, а значит и больше зарабатывать, вопрос изучения jQuery, JavaScript черезвычайно важен, мой видеокурс может вам реально помочь.
-
Создано 06.07.2018 10:36:35
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.