Как создать свой сайтУроки jQuery → Урок 1. Что такое jQuery, основные понятия и возможности

jQuery - Урок 1. Что такое 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

1
2
3
Давайте посмотрим, как это сделано. На 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-код и т.д. Здесь же могут быть указаны какие-либо события.

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

На сегодня пожалуй все, в следующем уроке будем изучать селекторы.



Следующий урок Вернуться в раздел 
Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.