Как подключить 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:

<div onclick = "addStyles()"></div>

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

Платное/бесплатное по JavaScript/jQuery на других сайтах

Большой платный курс по JavaScript/jQuery

Уроки по javascript-фреймворку Angular 4

Премиум уроки по javascript и другим технологиям

Бесплатный курс по ReactJS для новичков

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

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: