Библиотека jQuery позволяет управлять элементами объектной модели документов DOM : скрывать и отображать их в интерфейсе страницы, изменять стиль их атрибутов. А как быть в том случае, если по каким-либо причинам библиотека jQuery не была загружена в браузер и функциональность WEB-страницы нарушается? Причин этому может быть несколько. Но наиболее распространной является отключение пользователем в браузере технологии JavaScript, которая создает дополнительную угрозу безопасности. А поскольку в основе jQuery используется JavaScript, то о блокировании данной технологии и невозможности реализации полной функциональности следует «вывести» соответствующее сообщение. При нормальном функционировании WEB-страницы предупреждающее сообщение необходимо убрать из интерфейса.

В данной статье рассмотрим следующие вопросы :

удаление существующих элементов, методы remove, contains;
добавление новых элементов в объектную модель DOM, методы insertAfter, insertBefore, prependTo, appendTo;
изменение содержимого элемента, методы html, text.

Удаление выбранного элемента

Разместим предупреждающее сообщения в коде WEB-страницы (не в скриптовом блоке), чтобы оно было доступно для всех посетителей. Затем удалим сообщение в тех браузерах, которые поддерживают JavaScript, и на страницы которых загружена jQuery.

<body>
  <!-- размещение предупреждающего сообщения -->
  <p id='no-script'>
    Для полной функциональности сайта включите JavaScript.
  </p>

  <script>
     // удаление предупреждающего сообщения
     $('#no-script).remove();
  </script>
</body>

В представленном примере реализуется функция предупреждения пользователя о необходимости включения JavaScript. Метод remove() удаляет все выбранные элементы из объектной модели документа DOM, а также все обработчики событий и данные, связанные с этими элементами. В нашем случае, этим элементов является предупреждающее сообщение. Действие remove не требует каких-либо параметров. Но, если появится необходимость, то можно конкретизировать выбранный набор. Например, из таблицы с молочной продукцией можно удалить только строки с простоквашой :

<script>
    $('#milk tr).remove(':contans("простокваша")');
</script>

В последнем примере селектор выберет все строки таблицы с идентификатором id='milk', а метод remove удалит только те строки, в которых содержится (contains) слово простокваша.

Добавление новых элементов

При описании библиотеки jQuery (селектора, действий и др.) использовалась функция выборки элементов и их модификации. Однако jQuery позволяет реализовывать и другую, не менее важную функцию – добавлять в объектную модель документа DOM новые элементы, т.е., по сути, создавать новые элементы на WEB-странице. Пример :


${<p>Новый абзац, созданный библиотекой jQuery.</p>};

При выполнении данного программного кода jQuery разбирает HTML на фрагменты DOM и добавляет новый элемент в структуру. Таким образом, можно динамически изменять контент WEB-страницы посредством jQuery.

Чтобы вставить новый элемент в нужное место библиотека включает функции insertAfter и insertBefore. Первая функция вставляет новый элемент после некоторого выбранного элемента, а вторая функция – перед элементом. На примере это выглядит следующим образом :


$('<input type="button" value="toggle" id="btnToggle">')
                                .insertAfter('warning');
$('#btnToggle').click(function() {
   $('#warning').toggle();
)};

Согласно коду jQuery методом insertAfter вставит кнопку после предупреждающего сообщения. При этом, к кнопке будет подключено действие click(), которое будет скрывать и показывать сообщение при нажатии на кнопку (метод toggle). Чтобы вставить кнопку перед сообщением необходимо использовать метод insertBefore.

Методы insertBefore и insertAfter размещают элемент на одном уровне в иерархии DOM, т.е. создается новый «элемент-брат». Чтобы добавить новый элемент в виде дочернего необходимо использовать методы prependTo и appendTo. Первый метод вставляет элемент перед предупреждающим сообщением, а второй метод – после сообщения.

$('Старт! ').prependTo('warning');
$(' Стоп!').appendTo('warning');

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

Демонстрация примера добавления элементов

Ниже представлен блок (<div>), в котором реализован описанный выше пример добавления элементов в контент страницы с использованием методов insertAfter, prependTo, appendTo.

Пример jQuery, добавление

Предупреждающее сообщение

Рассмотренные методы вставляют новые элементы в структуру DOM для всех выбранных селектором элементов. Чтобы ограничиться одним выбранным элементом можно использовать уникальный идентификатор.

Модификация содержимогo DOM-элемента

Библиотека jQuery включает методы text и html для модификации содержимого выбранного элемента объектной модели документа DOM. Действия text и html имеют схожий характер, поскольку вносят изменения в текст элемента. Рассмотрим следующий пример :


<h3 id="title">Пример jQuery</h3>
<p id="first">Текст первого абзаца</p>
<p id="second">Текст второго абзаца</p>
<p id="third">Текст третьего абзаца</p>

<input type="button" id ="actionBtn" value="Модификация" />

<script type="text/javascript">
   $(document).ready(function() {
      $('#actionBtn').click(function() {
        // инвертирование видимости второго абзаца
        $('p:first').next().toggle();

        if (!$('p:first').next().is(':visible')) {
           // отсутствие видимости 2-го абзаца
           $('h3').html('<em>Пример модификации</em>'  );
           $('p:first').text('Первый абзац'            );
           $('p:last' ).html('<em>Последний абзац</em>');
        } else {
           // видимость 2-го абзаца
           $('h3').text('<em>Пример модификации</em>'  );
           $('p:first').text('<em>Первый абзац</em>'   );
           $('p:last' ).html('Последний абзац'         );
        }
      );
   });
</script>

На странице представлены заголовок <h3>, три абзаца <p> и кнопка модификации, к которой подключено определенное действия в блоке <script />. При первом и каждом следующим нечетном нажатии на кнопку скрывается 2-ой абзац (методом toggle) и изменяются тексты заголовка и последнего абзаца :


// отсутствие видимости 2-го абзаца
$('h3').html('<em>Пример модификации</em>'  );
$('p:first').text('Первый абзац'            );
$('p:last' ).html('<em>Последний абзац</em>');

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


// видимость 2-го абзаца
$('h3').text('<em>Пример модификации</em>'  );
$('p:first').text('<em>Первый абзац</em>'   );
$('p:last' ).html('Последний абзац'         );

Методом html содержание элемента преобразуется в HTML-текст, а теги типа <em> и <strong> браузер скрывает и использует для отображения соответствующего стиля элемента. Методом text содержание элемента преобразуется в простой текст.

Демонстрация примера модификации

Ниже представлен блок <div />, в котором реализован описанный выше пример модификации контента страницы.

Пример jQuery, модификации

Первый абзац

Второй абзац

Третий абзац

Метод text можно использовать не только для преобразования содержимого элемента. При отсутствии параметров данный метод возвращает содержимое выбранного элемента :


alert($('p:first').text());

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

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