Только для читателей Lifeexample возможно открыть интернет-магазин на Moguta.CMS со скидкой в 15%

<<< Сериализация php || Всплывающее окно jQuery >>>

Библиотека jQuery

09.04.2012
Библиотека jQuery

Здравствуйте, уважаемые читатели блога LifeExample, давненько в статье "Пишем интернет магазин на PHP" я ставил себе цель разобраться самому и поведать вам о замечательном инструменте – библиотеке jQuery. Сегодня пришло время сдержать обещание и рассказать о том, что же представляет собой библиотека jQuery и как начать работать с ней.

Многие называют этот инструмент фрэймворком, это не правильно, хотя от названия назначения данного инструмента не меняется, и он остается необходимым сегодня для функционирования практически любого стоящего веб-проекта. На самом деле библиотека jQuery — это единственный JavaScript файл, содержащий в себе набор функций дающих быстрый доступ к любому элементу DOM, а также предоставляющих удобный интерфейс для работы с технологией AJAX.

Кто совсем ничего не слышал о jQuery, приведу примеры использования данного инструмента. Как правило, эта библиотека используется для создания анимационных эффектов на страницах, таких как:

  • Выпадающее и плавающее меню;
  • Фото галерея;
  • Всплывающее окно;
  • Всевозможные слайдеры;
  • Перемещающиеся блоки;
  • Изменение прозрачности элементов;
  • Подсвечивание текста и переливание его цвета разными оттенками;

Второе важное характерное для jQuery применение, наблюдается в создании AJAX элементов, т.е. тех элементов страницы, которые отсылают на сервер данные и получают ответ, без перезагрузки страницы. К примерам таких элементов можно отнести: форму управление корзиной для интернет магазина, пагинацию страниц, вывод информера погоды, и многое другое.

На момент публикации данной статьи актуальной версией библиотеки jQuery являлась версия 1.7.2. Скачать свежую версию библиотеки можно на официальном сайте абсолютно бесплатно.

Попробуем начать работу и напишем простенький скрипт с использованием jQuery библиотеки.

Начало работы с библиотекой jQuery

Если вы еще не скачали библиотеку, скачайте ее с официального сайта:

Cкачать библиотеку jQuery

Поместите скачанный файл в папку сайта, в которой вами уже должна быть создана index.html страничка. Скопируйте ниже приведенный код в содержимое index.html.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <script type="text/javascript" src="jquery-1.7.2.js"></script>
    <script>
    $(document).ready(function(){
     alert("Библиотека jQuery готова к работе!");
    });
    </script>
  </head>
  <body>
  Контент страницы
  </body>
</html>

Запустите скрипт, и убедитесь, что jQuery уже работает. При обновлении страницы мы получаем надпись "Библиотека jQuery готова к работе!". Это значит, что мы все сделали правильно. Если вы не получаете такое сообщение, то внимательно смотрите на название и расположение файла с библиотекой, возможно версия будет отличаться и тогда нужно будет подкорректировать строку инициализации файла:

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

Теперь немного усовершенствуем код, и напишем первый простой плагин:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
  <script type="text/javascript" src="jquery-1.7.2.js"></script>
  <script>
  $(document).ready(function(){
   var text = $('#hide_text');//присваиваем переменной text блок с id=hide_text
   text.hide();//скрываем полученный блок
   $('.button').click(function(){ // при клике на HTML элемент с классом button
    text.show(200);// показываем скрытый блок с задержкой 200 милисекунд
   });
  });
  </script>
  </head>
  <body>
  <h1>Контент страницы</h1>
  <a href="#" class="button">Нажмите, чтобы показать текст</a>
  <div id="hide_text">Демонстрационный скрытый текст</div>
  </body>
</html>

Перезагрузите страничку и посмотрите, что у нас вышло. Когда DOM сформирован, в событии ready мы получаем содержимое блока с id = hide_text , и сразу же скрываем его методом hide().

(Все события предоставляемые библиотекой 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:

1
2
3
4
5
6
7
8
9
<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.

Чтобы не пропустить публикацию следующей статьи подписывайтесь на рассылку по E-mail или RSS ленту блога.

Подписаться на RSS
Нравится
,
jQuery & JavaScript примеры

Комментарии

  • Alexey
    09.04.2012

    А значок доллара в JQ что означает?
    Спасибо.

    Ответить
  • Mark
    09.04.2012

    Значок доллара $ — это спец символ заменяющий слово jQuery, и необходимый для работы событий библиотеки jQuery.
    Например, можно рассмотренный в статье скрипт, написать так:

    1
    2
    3
    4
    5
    6
    7
    jQuery(document).ready(function(){
       var text = jQuery('#hide_text');//присваиваем переменной text блок с id=hide_text
       text.hide();//скрываем полученный блок
      jQuery('.button').click(function(){ // при клике на HTML элемент с классом button
        text.show(200);// показываем скрытый блок с задержкой 200 милисекунд
       });
      });

    А можно используя спецсимвол — $. Кстати говоря, использование знака $ , можно встретить практически везде, в отличии от приведенного выше варианта.

    Ответить
  • Дiмка
    13.07.2012

    Марк, подскажи пожалуйста, инетресурсы (желательно на русском)где можно ближе познакомиться с этой библиотекой, изучить ее основы.

    Ответить
    • Mark
      13.07.2012

      Из того чем я пользовался при знакомстве с Jquery:

      Документация на русском — _http://jquery-docs.ru/
      Примеры — http://ruseller.com/lessons.php?rub=32

      Ну и конечно yandex и google.

  • bismuth
    30.07.2012

    а как прикрутить вот это к jQuery? А то мне дал один человек, а как пользоваться я не понял(( то что вы здесь описываете (мы получаем надпись «Библиотека jQuery готова к работе!».) это я смог прикрепить к шаблону на двишке джумла 2.5 а это я не знаю помогите разобраться))
    заранее спасибо

    =================================================================

    при помощи javascript и библиотеки jquery. скрипт можно взять в исходном коде.
    вот пример:

    здесь код вашей рекламы

    <!—
    function payForFiles(){
    var hid,tak,elems,num,pat,j,i;
    hid = document.getElementById("hidden");
    tak = new Array();
    elems = document.getElementsByTagName('A');
    num = elems.length;
    pat = new RegExp("(^|\\b)( здесь домен ссылки из рекламы. например: domain (без .com) это для того чтобы реклама открывалась в новой вкладке )(\\b|$)");
    j = 0;
    for (i=0;i

    function showdiv(){
    jQuery(«#hidden»).show(«»);
    }

    здесь ссылка которую вы прячите

    также вам придется скачать и подключить библиотеку jquery

    Ответить
    • Mark
      31.07.2012

      все скрипты на js и jqery нужно помещать между тегами <script> </script>
      Тот тот который вы вложили — не валидный, т.е. не рабочий.

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

    Подписаться на комментарии к этой статье по RSS

    Публикации
    Избранное
    Яндекс.Метрика