Как подключить jquery?

jqueryПриветствую вас, уважаемый читатель. Сегодня я расскажу, как подключить 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:

Да, это реклама, но надеюсь, она будет полезна вам. GetUniq это сервис для вебмастеров и всех работающих с трафиком людей, с помощью которого можно выгоднее пополнять счета в кабинетах рекламных сетей, таких как Яндекс.Директ, MyTarget, ВК Таргет и другие. Без использования сервиса вам придется заплатить 1180 рублей за пополнение счета в Директе на 1000, а используя возможности Getuniq за эти же 1180 на ваш счет поступит 1100-1200 рублей! То же самое для всех других сетей. Я сам уже начал использовать и порекомендовал всем знакомым вебмастерам, рекомендую и вам. При желании, по этой ссылке вы можете почитать мой обзор сервиса.
<div onclick = "addStyles()"></div>

Атрибут onclick дает возможность указать имя функции, которая будет применяться к элементу при клике на него. Соответственно, мы указываем ту функцию, которую только что написали. Не забывайте круглые скобки. Остается проверить.
подключение jquery
Да, все работает. Библиотека jQuery подключена и мы даже написали свой первый веб-сценарий. В следующих статьях я буду описывать jQuery и ее возможности: селекторы, фильтры, работу с css, добавление атрибутов и т.д. Если вам интересно, подписывайтесь.

Добавить комментарий