37. Базовый синтаксис jQuery
jQuery – это JavaScript-библиотека, фокусирующаяся на взаимодействии JavaScript, HTML и CSS.
Что умеет jQuery
- Обращаться к любому элементу DOM (объектной модели документа) и не только обращаться, но и манипулировать ими.
- Работать с событиями.
- Легко осуществлять различные визуальные эффекты.
- Работать с AJAX (очень полезная технология, позволяющая общаться с сервером без перезагрузки страницы, но пока мы ее трогать не будем).
- Имеет огромное количество JavaScript плагинов, предназначенных для создания элементов пользовательских интерфейсов.
Как это работает
Сначала надо скачать саму библиотеку на сайте разработчиков или с нашего сайта, при необходимости разархивировать и перенести ее (библиотеку) в ту же папку, где лежат наши html-страницы (это необязательно, но адреса для всех последующих примеров будут написаны, исходя из такой структуры).
Теперь нам надо подключить jQuery к html-странице. Для этого, как вы помните, в html существует тег <script>, который и отвечает за подключение внешних файлов скриптов (html - урок 2). Добавим этот тег в html-страницу (так же мы подключали страницу script.js с функциями js):
<html>
<head>
<title>jQuery</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
</body>
</html>
* Обратите внимание на имя файла. Здесь используется библиотека jquery-1.2.6, но Вы можете скачать более свежую версию, а потому цифры у Вас могут отличаться.*
Итак, у нас в папке лежат html-страница, страница со стилями (style.css), страница с js-функциями (script.js) и библиотека jQuery (jquery-1.2.6.js). Давайте сделаем вот такой пример (пощелкайте по кнопкам):
Эффекты jQuery
Давайте посмотрим, как это сделано. На html-странице у нас должно быть три прямоугольника (div-ы) и три кнопки:
<html>
<head>
<title>jQuery</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<h2>Эффекты jQuery</h2>
<div id="kv1" >1</div>
<div id="kv2" >2</div>
<div id="kv3" >3</div>
<button onclick="addEffect1()">Эффект Show()</button>
<button onclick="addEffect2()">Эффект SlideDown()</button>
<button onclick="addEffect3()">Эффект Animate()</button>
</body>
</html>
Оформим внешний вид и сделаем прямоугольники невидимыми с помощью CSS. Код style.css:
#kv1, #kv2, #kv3{
width:80px;
height:100px;
float:left;
background:red;
margin:5px;
color:white;
display:none;
}
Теперь самое интересное, на странице script.js пишем код функций, которые будут срабатывать при нажатии на кнопки:
function addEffect1(){
$("#kv1:hidden").show();
}
function addEffect2(){
$("#kv2:hidden").slideDown("slow");
}
function addEffect3(){
$("#kv3: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-код и т.д. Здесь же могут быть указаны какие-либо события.
свойства действия - если они предусмотрены действием.
