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>

</head>

<body>

</body>

</html>

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

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

Эффекты jQuery

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

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

<html>

<head>

<title>jQuery</title>

</head>

<body>

<h2>Эффекты jQuery</h2>

<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-код и т.д. Здесь же могут быть указаны какие-либо события.

свойства действия — если они предусмотрены действием.

Оставить комментарий