Приветствую вас, уважаемый читатель. Сегодня я расскажу, как подключить jquery библиотеку к вашему сайту, чтобы получить в свои руки всю мощь этой библиотеки. На самом деле я не вижу никаких трудностей в этом, но давайте рассмотрим процесс детально.
Скачивание и подключение
Для начала нужно скачать саму библиотеку. Для этого идем на официальный сайт — https://jquery.com/. На данный момент нам предлагают скачать одну из двух версий библиотеки – 1.21.1 или 2.2.1. Качаем любую из этих. Скачать можно полную (несжатую) версию и минифицированную. Сжатую лучше использовать на рабочем проекте, если же у вас есть желание копаться в исходном коде, лучше качайте полную.
Итак, теперь полученный файл нужно забросить в папку с вашим сайтом или html-страницей. В зависимости от структуры вашего проекта, файл библиотеки может попасть либо в главную папку, либо в директорию scripts, где обычно хранят скрипты.
Теперь остается только задать правильный путь к файлу, подключив его в теге head с помощью контейнера script. Вот так:
<script src = “scripts/jquery-2.2.1.min.js”></script>
Путь задан так, как будто это сжатая версия и она лежит в папке scripts, которая в свою очередь находится в корневой директории сайта. По сути, мы уже подключили, теперь нужно проверить.
Проверка работы
Создайте новый javascript-файл там, где уже лежит jquery. Сейчас мы напишем в нем простейшую функцию и проверим работу библиотеки. Итак, создайте пустой файл script.js и также подключите его через script, как и саму библиотеку. Теперь создадим в html простой блок:
<div></div>
Сейчас его никак не видно на странице, потому что не заданы стили. Мы зададим в css его размеры и рамку, а после попробуем задать его фоновый цвет с помощью возможностей jquery.
div{
width: 200px;
height: 150px;
border: 1px solid black;
}
Это простой css-код. Теперь наш блок имеет черную рамку. Давайте сделаем так, чтобы при клике по нем, его фоновый цвет становился красным. Для этого напишем в script.js простейшую функцию:
function addStyles(){
$('div').css("backgroundColor", "red");
}
Эта функция добавляет диву красный цвет фона. Но пока она не работает, потому что ее еще нужно дополнительно привязать к элементу. Нам не нужно, чтобы фоновый цвет добавлялся уже при загрузке страницы, наша цель – добавить его при клике. Значит, наше событие – клик. Пишем в html:
<div onclick = "addStyles()"></div>
Атрибут onclick дает возможность указать имя функции, которая будет применяться к элементу при клике на него. Соответственно, мы указываем ту функцию, которую только что написали. Не забывайте круглые скобки. Остается проверить.
Да, все работает. Библиотека jQuery подключена и мы даже написали свой первый веб-сценарий. В следующих статьях я буду описывать jQuery и ее возможности: селекторы, фильтры, работу с css, добавление атрибутов и т.д. Если вам интересно, подписывайтесь.