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

Опубликовано: 01.11.2017

видео Как подключить jQuery

Основы jQuery - Введение в jQuery

Сначала надо скачать саму библиотеку (которая находится в разделе " программы "), разархивировать и перенести в ту же папку, где лежат ваши html-страницы.



Теперь нам надо подключить jQuery к html-странице. Для этого, как вы помните, в html существует тег <script>, который и отвечает за подключение внешних файлов скриптов. Добавим этот тег в html-страницу, так же как мы подключали файл «script.js» с функциями js:

Файл: «index.html»
<html> <head> <title>jQuery</title> <link rel="stylesheet" type="text/css" href="cascade.css"> <script type="text/javascript" src="jquery-1.7.1.js"></script> <script type="text/javascript" src="script.js"></script> </head> <body> </body> </html>

Обратите внимание на имя файла. Здесь используется библиотека jquery-1.7.1, но Вы можете скачать более свежую версию, а потому цифры у Вас могут отличаться.


Видеокурс JQuery. Урок 7. Библиотека JQuery UI

Итак, у нас в папке лежат html-страница, страница со стилями (cascade.css), страница с js-функциями (script.js) и библиотека jQuery (jquery-1.7.1.js). Давайте сделаем вот такой пример (пощелкайте по кнопкам):

Эффекты jQuery

1

2

3

Эффект Show() Эффект SlideDown() Эффект Animate()

Давайте посмотрим, как это сделано. На html-странице у нас должно быть три прямоугольника (div-ы) и три кнопки:


GeekBrains JS Урок 7 | jQuery UI

Файл: «index.html»
<html> <head> <title>jQuery</title> <link rel="stylesheet" type="text/css" href="cascade.css"> <script type="text/javascript" src="jquery-1.7.1.js"></script> <script type="text/javascript" src="script.js"></script> </head> <body> <h2>Эффекты jQuery</h2> <div id="xy1">1</div> <div id="xy2">2</div> <div id="xy3">3</div> <button onclick="addEffect1()">Эффект Show()</button> <button onclick="addEffect2()">Эффект SlideDown()</button> <button onclick="addEffect3()">Эффект Animate()</button> </body> </html>

Оформим внешний вид и сделаем прямоугольники невидимыми с помощью CSS.