Главная › Справочники › Справочник jQuery API › jQuery для начинающих ›

Введение в jQuery для начинающих

Это базовое руководство, которое может помочь вам начать разработку на jQuery. Оно предназначено именно для начинающих JavaScript-программистов, которые собираются перейти с чистого JavaScript на активное использование jQuery. Оно также подойдет для изучения программирования в HTML с нуля.

Рассмотрим простой пример:

<!doctype html>
<html>
  <head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
    </script>
  </head>
  <body>
    <a href="http://jquery.com/">jQuery</a>
  </body>
</html>

Чтобы подключить библиотеку jQuery, нужно указать путь к файлу библиотеки в атрибуте src тега script. Например, если jquery.js находится в той же директории что и HTML-файл, то можно использовать такой способ:

<script type="text/javascript" src="jquery.js"></script>

Если же скрипт библиотеки находится в корне папке scripts, которая находится в корне сайта, то нужно указать:

<script type="text/javascript" src="/scripts/jquery.js"></script>

О том, какую версию jQuery лучше скачать, узнайте из статьи "Где скачать jQuery?".

Запуск кода после загрузки документа

Первая вещь, которую делает большинство программистов на JavaScript, — это добавление кода, похожего на этот:

window.onload = function(){ alert("тест"); }

Внутри функции находится код, который нужно запустить сразу после загрузки страницы. Однако, это проблематично, так как код JavaScript не будет запущен, пока не загрузятся все изображения на странице (включая рекламные баннеры).

Для решения этой проблемы в jQuery существует простая функция, которая проверяет документ на окончание загрузки, эта функция известна как событие ready:

$(document).ready(function(){
  // Код JavaScript
});

В следующем примере внутри события ready происходит добавление обработчика события click для ссылки на странице:

$(document).ready(function(){
  $("a").click(function(event){
    alert("Спасибо за посещение!");
  });
});

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

Для события click и большинства других событий существует возможность предотвращения поведения по умолчанию. Для того чтобы предотвратить переход по ссылке, в нашем случае на сайт jquery.com, нужно вызвать метод event.preventDefault() в обработчике события:

$(document).ready(function(){
  $("a").click(function(event){
    alert("Ссылка на сайт jquery.com");
    event.preventDefault();
  });
});

Законченный пример

Следующий пример показывает целую HTML-страницу с кодом jQuery. Обратите внимание, что файл библиотеки jQuery загружается из хранилища Google's CDN. Также написанный скрипт включен в элемент <head>, но рекомендуется размещать его в отдельном файле и ссылаться на него с помощью атрибута src элемента script.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript">
  </script>
  <script type="text/javascript">
    $(document).ready(function(){
      $("a").click(function(event){
        alert("As you can see, the link no longer took you to jquery.com");
        event.preventDefault();
      });
    });
  </script>
</head>
<body>
  <a href="http://jquery.com/">jQuery</a>
</body>
</html

Добавление и удаление класса HTML

Важное замечание: Остальные примеры jQuery на этой странице должны помещаться внутрь события ready, для того чтобы они выполнялись после загрузки документа. Подробнее о событии ready написано выше.

Ещё один распространненный вариант использования jQuery — добавление (или удаление) класса.

Для начала создадим правило CSS в теге style элемента head:

<style type="text/css">
  a.test { font-weight: bold; }
</style>

Теперь вызовем функцию addClass для добавления класса к ссылке:

$("a").addClass("test");

Все элементы a на странице изменят шрифт на жирный.

Для удаления класса используется функция removeClass:

$("a").removeClass("test");

Заметьте, что HTML позволяет добавлять несколько классов к одному элементу.

Визуальные эффекты

В jQuery доступна пара полезных эффектов, позволяющих сделать ваш веб-сайт более привлекательным. Изменим обработчик события click для ссылок:

$("a").click(function(event){
  event.preventDefault();
  $(this).hide("slow");
});

Теперь при нажатии на любую ссылку она медленно исчезнет.

Callback-функции

Callback — это такая функция, которая указывается в качестве аргумента к другой функции и запускается после завершения работы этой другой функции. Важно понять, как правильно передавать callback-функцию в качестве аргумента.

Callback-функция без аргументов

Для callback-функции без аргументов можно передать её таким образом:

$.get('myhtmlpage.html', myCallBack);

Обратите внимание на то, что второй параметр является просто названием callback-функции без кавычек и круглых скобок (это не строка).

Callback-функция с аргументами

Чтобы использовать callback-функцию с аргументами, нужно написать подобный код:

$.get('myhtmlpage.html', function(){
  myCallBack(param1, param2);
});

Такой код не приведет к желаемому результату, он является НЕправильным:

$.get('myhtmlpage.html', myCallBack(param1, param2));

Проблема в том, что в примере выше функция myCallBack(param1, param2) выполняется до передачи в качестве аргумента. Javascript и jQuery ожидает в качестве аргумента указатель на функцию, такой как например в функции setTimeout. Поэтому приходится использовать так называемые неименованные функции (anonimous functions) в виде конструкции function(){ }.

Как больше узнать о jQuery

Для начинающих разработчиков jQuery будет полезным просто просмотреть все функции и методы, которые предоставляет эта библиотека. Именно с этого стоит начать, так как зная функции, которые можно применить к конкретным случаям можно значительно сократить время разработки приложения.

Чтобы увеличить свой багаж знаний о jQuery вы можете обратиться к остальной документации по jQuery на этом сайте.