Май - Xakep Online

coding
Раскрывающиеся новости
Многоуровневое меню
элементов. Приведу описание нашей формы
без таблиц разметки:
Элементы формы без разметки
HTML
HTML для очистки
Теги
Атрибуты
Зачищенный HTML
Очистить
Как видишь, функциональность небольшая, но
нам достаточная. Мы будем удалять ненужные
атрибуты и очищать бесполезные пустые тэги.
Первое действие я подробно распишу, так как
на его примере можно посмотреть, как парсить
HTML с помощью jQuery.
Прежде всего надо получить текст из поля
ввода с идентификатором source. Затем нужно
получить на его основе объект jQuery. Я сделал
это с помощью невидимого контейнера resdiv.
Оформить это лучше в виде отдельной функции
getUserHtml():
Тело функции getUserHtml()
JavaScript
$(document.body).append("");
var htmlToClean =
$("#source").val();
$("#resdiv").html(htmlToClean);
Для парсинга HTML мы, разумеется, воспользуемся
функцией $(…), но искать объекты нам надо
не по всему документу, а только в контейнере
resdiv, поэтому обязательно придется указать
второй параметр у функции $(…) в качестве контекста
поиска. Осталось уточнить, что работать
со значением элементов форм нужно методом
val(), а весь код необходимо поместить в конструкцию
$(document).ready:
Тело функции getUserHtml()
JavaScript
$("#clean").click(function() {
getUserHtml();
$("*", $("#resdiv")).
each(function() {
attrsToClean = ("#attrsToClean").
val().split(" ")
for (attr in attrsToClean)
{
$(this).removeAttr(
attrsToClean[attr]);
}
});
$("#result").val($("#resdiv").
html());
return false;
});
Итак, что же мы натворили нашими программистскими
руками? Сперва мы повесили
обработчик клика на кнопку «Очистить».
В нем мы вызываем функцию
getUserHtml, которую описали выше.
Далее мы находим все HTML-элементы в
контейнере resdiv. Для извлечения строки
атрибутов из поля ввода attrsToClean используем
метод val() и разбиваем атрибуты
пробелами. Пробегаясь по всем атрибутам
из списка, удаляем их. Результат помещаем
в поле ввода result. И все! Удалять
стоит атрибуты lang, style и class. Также
можно посмотреть, какие атрибуты любит
добавлять твой визуальный редактор. Что
касается ненужных тэгов, например span
после Word’а, то их проще всего удалять
регулярными выражениями. Это и останется
тебе на самостоятельную работу, потому что
к jQuery имеет мало отношения ;).
Заканчиваем
Ух, много дел свершено, мало кода написано,
лепота! Надеюсь, мне удалось не только объяснить
основные принципы работы фреймворка
jQuery, но и показать на конкретных примерах,
как написать приложения. Вторая моя
надежда связана с тобой: попробуй написать
код из статей (или, в крайнем случае, возьми
его с диска) и задействуй его у себя на сайте
или блоге. z
Философское отступление, или мысли программиста вслух
Последствия применения jQuery в качестве фреймворка при разработке веб-приложений на стороне клиента сразу бросаются в глаза. HTMLкод
становится чистым, кристально чистым, как в рекламе стирального порошка :). Это происходит, из-за отсутствия, во-первых необходимости
прописывать события внутри HTML-кода, а во-вторых «лишних» классов, которые могут быть добавлены динамически. Тем не менее, всегда могут
пострадать пользователи с отключенным JavaScript. И последнее, что стоит отметить, — это отсутствие HTML для декорирования. Ярким примером
может быть создание скругленных уголков у элементов, когда при обычном подходе используются вложенные контейнеры.
Следующее, что бросается в глаза, — это уменьшение количества кода. Тут, в первую очередь, играет роль мощный механизм поиска нужных элементов.
И конечно же нельзя забыть об автоматизации множества рутинных действий с помощью фреймворка jQuery.
xàêåð 05 /101/ 07
/
131