Как подключить jQuery
Опубликовано: 01.11.2017
Сначала надо скачать саму библиотеку (которая находится в разделе " программы "), разархивировать и перенести в ту же папку, где лежат ваши 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.