На странице описания библиотеки jQuery было отмечено, что скрипты вызова функций библиотеки можно включить как в тело (<body />) описания страницы, так и загрузить из внешнего файла. В приведенном на странице примере скрипты jQuery были включены в тело страницы. Здесь мы рассмотрим вопрос загрузки скриптов из внешнего файла.

Для того, чтобы загрузить скрипты из файла на страницу необходимо включить в заголовок WEB-страницы (раздел head) соответствующее описание с тегом script. Допустим, что скрипты jQuery описаны в файле jquery-01.js. Тогда код страницы будет имеет следующий вид :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>JQuery example</title>
    <script type="text/javascript" src="jquery-1.4.min.js"></script>
    <script type="text/javascript"src="jquery-01.js"></script>
  </head>
  <body>
      <h3>Пример jQuery</h3>
      <div id="id1">Полный текст первого абзаца</div>
      <div class="id1">Полный текст второго абзаца</div>
  </body>
</html>

Проверка загрузки сриптов jQuery из файла

Ниже представлен листинг файла со скриптами jquery-01.js в виде функции с набором операторов jQuery. Полное описание формата вызова функции jQuery представлено на странице Библиотека jQuery.

$(document).ready(function() {
    // Скрыть все div's на странице
    jQuery('div').filter('#id1').hide();

    // Определить тексты внутри всех div's
    jQuery('div').filter('#id1').text('Сокращенный текст');

    // Добавить атрибут со значением обновления всех div's
    $('div').filter('#id1').addClass("updatedContent");

    // Изменить стиль текста всех div's
    $('div').filter('#id1').css('font-style', 'italic');

    // Включить отображение всех div's на странице
    $('div').filter('#id1').show();
});

Библиотека jQuery имеет встроенное событие, связанное с проверкой полной загрузки библиотеки. Это реализуется выражением $(document).ready(...), представленное в виде оболочки вокруг описания функции.

Идиома document–ready может быть использована в упрощенном виде :

$(function() {
  alert('jQuery is loaded');
});

Событие document–ready имеет такой же формат, как и оператор jQuery : селектором здесь выступает document, в качестве действия выступает ready, а роль параметра играет функция (function), которая запускает выполнение определенного программного кода сразу же, после полной загрузки библиотеки/страницы.

Связанные страницы

Описание библиотеки jQuery
Выбор элементов из объектной модели документа DOM
Фильтрация наборов и поиск элементов jQuery методами filter, find