Сначала надо скачать саму библиотеку (которая находится в разделе «программы«), разархивировать и перенести в ту же папку, где лежат ваши 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, но Вы можете скачать более свежую версию, а потому цифры у Вас могут отличаться.
Итак, у нас в папке лежат html-страница, страница со стилями (cascade.css), страница с js-функциями (script.js) и библиотека jQuery (jquery-1.7.1.js). Давайте сделаем вот такой пример (пощелкайте по кнопкам):
Эффекты jQuery
| 1 2 3
|
Давайте посмотрим, как это сделано. На html-странице у нас должно быть три прямоугольника (div-ы) и три кнопки:
Файл: «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.
Код cascade.css:
Файл: «cascade.css»
#xy1, #xy2, #xy3{
width="99%";
height:80px;
float:left;
background:red;
margin:5px;
color:white;
display:none;
} |
Теперь самое интересное, на странице script.js пишем код функций, которые будут срабатывать при нажатии на кнопки:
Файл: «script.js»
function addEffect1(){
$("#xy1:hidden").show();
}
function addEffect2(){
$("#xy2:hidden").slideDown("slow");
}
function addEffect3(){
$("#xy3:hidden").show().animate( {
fontSize:"36px"
} , 3000 );
} |
Что же делают эти функции?
Функция addEffect1() видит $ (знак доллара) и понимает, что это jQuery, затем она видит («#kv1:hidden») и понимает, что ей нужно найти элемент с id=»kv1″, обладающий свойством hidden (невидимый). Далее она видит .show() и понимает, что найденный элемент надо сделать видимым.
Функция addEffect2() видит $ (знак доллара) и понимает, что это jQuery, затем она видит («#kv2:hidden») и понимает, что ей нужно найти элемент с id=»kv2″, обладающий свойством hidden (невидимый). Далее она видит .slideDown(«slow») и понимает, что найденный элемент надо медленно («slow») отобразить сверху-вниз (slideDown).
Функция addEffect3() видит $ (знак доллара) и понимает, что это jQuery, затем она видит («#kv3:hidden») и понимает, что ей нужно найти элемент с id=»kv3″, обладающий свойством hidden (невидимый). Далее она видит .show() и понимает, что найденный элемент надо сделать видимым. Затем она видит .animate( {fontSize:»36px»} , 3000 ) и понимает, что размер шрифта нужно за 3 секунды (3000) увеличить до 36 пикселей (fontSize:»36px»)
Вот так собственно и работает jQuery. Посмотрите какие короткие у нас функции и представьте какими бы они были, если бы мы решили написать их на чистом javascript. Ну разве ли jQuery не прелесть? О том, как делать графические эффекты, анимацию, перетягивать и сортировать предметы и вообще работать с этой библиотекой и пойдет речь в последующих уроках.
В конце же этого урока хотелось бы поговорить об основных понятиях jQuery. Приблизительно синтаксис оператора jQuery можно представить следующим образом:
$(«селектор»).действие(«свойства действия»);
где селектор — элемент или элементы, с которыми мы будем что-либо делать.
действие — что именно мы будем делать с выбранными элементами. Мы можем добавить какой-либо эффект, css-стиль, изменить html-код и т.д. Здесь же могут быть указаны какие-либо события.
свойства действия — если они предусмотрены действием.
Олег Здравствуйте уважаемая администрация сайта и посетители сайта. ЯЫ пришёл за помощью, так как у меня не получается подключить js-файл. Сразу объясню, тот метод, который у Вас здесь описан он работает во всех браузерах, но к большому моему сожалению, я делаю html-страницу для заложенного браузера в платформу 1С Предприятие 8.2, а он как на зло, не хочет воспринимать код, типа: . Поковыряв немного маны в инете нашёл такую конструкцию: , которая идеально работает. Но как видно из второго примера, мне приходится использовать прямые пути и у меня никак не получается их сделать относительными. Пробовал разные варианты конструкции Может кто сталкивался с подобным, поделитесь, если не трудно.