Здравствуйте, уважаемые читатели блога LifeExample, давненько в статье "Пишем интернет магазин на PHP" я ставил себе цель разобраться самому и поведать вам о замечательном инструменте — библиотеке jQuery. Сегодня пришло время сдержать обещание и рассказать о том, что же представляет собой библиотека jQuery и как начать работать с ней.
Многие называют этот инструмент фрэймворком, это не правильно, хотя от названия назначения данного инструмента не меняется, и он остается необходимым сегодня для функционирования практически любого стоящего веб-проекта. На самом деле библиотека jQuery — это единственный JavaScript файл, содержащий в себе набор функций дающих быстрый доступ к любому элементу DOM, а также предоставляющих удобный интерфейс для работы с технологией AJAX.
Кто совсем ничего не слышал о jQuery, приведу примеры использования данного инструмента. Как правило, эта библиотека используется для создания анимационных эффектов на страницах, таких как:
Выпадающее и плавающее меню;
Фото галерея;
Всплывающее окно;
Всевозможные слайдеры;
Перемещающиеся блоки;
Изменение прозрачности элементов;
Подсвечивание текста и переливание его цвета разными оттенками;
Второе важное характерное для jQuery применение, наблюдается в создании AJAX элементов, т.е. тех элементов страницы, которые отсылают на сервер данные и получают ответ, без перезагрузки страницы. К примерам таких элементов можно отнести: форму управление корзиной для интернет магазина, пагинацию страниц, вывод информера погоды, и многое другое.
На момент публикации данной статьи актуальной версией библиотеки jQuery являлась версия 1.7.2. Скачать свежую версию библиотеки можно на официальном сайте абсолютно бесплатно.
Попробуем начать работу и напишем простенький скрипт с использованием jQuery библиотеки.
Начало работы с библиотекой jQuery
Если вы еще не скачали библиотеку, скачайте ее с официального сайта:
Поместите скачанный файл в папку сайта, в которой вами уже должна быть создана index.html страничка. Скопируйте ниже приведенный код в содержимое index.html.
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
1
<script type="text/javascript" src="/jquery-1.7.2.js"></script>
Посмотрите на содержание приведенного кода, и вы увидите не характерную для обычного JavaScript скрипта запись:
1
2
3
$(document).ready(function(){
alert("Библиотека jQuery готова к работе!");
});
Событие ready — означает, что выполнение содержимого будет произведено только после загрузки всей страницы и окончательном формировании DOM. Если бы мы не использовали функционал библиотеки, а работали с чистым JavaScript нам вместо этого пришлось бы использовать такую запись:
1
window.onload = function(){…}
Первый скрипт на jQuery
Теперь немного усовершенствуем код, и напишем первый простой плагин:
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
(Все события предоставляемые библиотекой jQuery можно посмотреть тут: http://www.linkexchanger.su/2008/60.html)
Затем при нажатии на ссылку класса button, срабатывает обработчик событий — click() библиотеки jQuery , который событием show() показывает нам скрытый текст:
1
2
3
$('.button').click(function(){
text.show(200);
});
В этом маленьком скрипте, написанном с помощью библиотеки jQuery, мы с легкостью получили объекты DOM’a простыми конструкциями:
1
2
$('#hide_text'); // получаем блок с id= hide_text
$('.button'); // получаем элементы где class = button
Сравнение с чистым JavaScript
А теперь посмотрите, как бы мы получили тот же самый результат, если бы не использовали jQuery:
<script>
window.onload = function(){
document.getElementById('hide_text').style.display='none';
}
function visibleText(){
document.getElementById('hide_text').style.display='block';
};
</script>
<a href="#" class="button" onclick="visibleText();">Нажмите, чтобы показать текст</a>
Заметьте, тут даже нет задержки показа, а уже код смотрится намного сложнее и неказистее. Это говорит о том, что работа с библиотекой jQuery делает процесс программирования более быстрым, а код более читабельным.
Вам уважаемые читатели, как новичкам в этом деле наверняка будет интересно узнать о других доступных функциях заложенных в библиотеке jQuery, поэтому советую вам следить за публикациями новых статей с помощью RSS и e-mail подписки. В ближайших планах намечена публикация статьи о работе с AJAX и обзор доступных событий jQuery.
