|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Как создать сайт?
Как создать свой сайт легко и просто, имеются библиотеки html, css, php, javascript, jquery, web-график. автор: Васильев Олег Никандрович. КАК СОЗДАТЬ САЙТ
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Нажимай и поддержи.
|
Функции wrap(), unwrap().Есть в библиотеке jQuery много полезных и нужных функций для простого и быстрого добавления, удаления, изменения HTML-кодов на страницах Вашего сайта. Такие как next(), append(), prepend(), before(), after(), html(), attr(), remove(), replaceWith(). В этот ряд нужных функций можно прибавить функции wrap(), unwrap(). Функция wrap() заключает каждый элемент выборки на странице сайта в пару HTML-тегов. Например, имеется абзац p: < p>какой-то абзац p< /p> Тогда после связывания нашей функции wrap() с абзацом p в виде $('p').wrap('< div>< /div>')получаем следующее выражение: < div> < p>какой-то абзац p< /p> < /div> Для того чтобы убрать родительский тег у абзаца p Вы должны будете написать следующий код с функцией unwrap(): $('p').unwrap() Как Вы видите, для того чтобы убрать родительский тег не требуется в функции unwrap() указывать значение аргумента. Рассмотрим более сложный случай для использования функции wrap(). Предположим. У Вас вдруг возникло желание сделать необычные подписи под изображениями на странице сайта. Сначала Вы выбираете нужные изображения с каким-то классом или наоборот все изображения, находящиеся на странице сайта. Можно выбрать изображения, находящиеся в отдельной папке вне страницы сайта, конечно, для этого Вы должны обратиться к данной папке по абсолютному адресу папки. Потом заключаете изображения в тег < div> c классом izo. Далее в этот тег class="izo" добавляете теги абзаца p с переменной caption. Немного измените по своему вкусу теги div и p с помощью таблиц стилей CSS, то есть применяя функцию css() к этим классам izo( проделайте это самостоятельно - не сложная процедура связывания функции css(), где аргументами будут стили элементов). Вот, алгоритм действий для такого задания: $('img').each(funtion() { // сохранение ссылки на текущее изображение var $this=$(this); // получения свойства alt для подписи var caption=$this.attr('alt'); // добавление HTML-тега $this.wrap('< div class="izo">< /div>') .after('< p>'+caption+'< /p>'); }); // конец функции each(). Объект $('img') выбирает все изображения на странице сайта. Далее при помощи функции each(), где аргументом этой функции является анонимная функция обходим все изображения в цикле шаг за шагом. В переменной $this текущее изображение сохраняется в каждом шаге цикла. В переменной caption сохраняется значение атрибута alt. Код программы $this.wrap('< div class="izo">< /div>').after('< p>'+caption+'< /p>'); каждое найденное изображение заключает в блок с классом izo и после этого добавляет в данный блок абзац p со значением alt данного изображения, то есть подписывает это изображение. Далее Вы легко можете добавлять другие функции для изменения стилей блока и подписи изображений. Здесь коды программы оформлены через переменные, так правильнее составлять программы. Если хотите написать в одну строку, то, пожалуйста: $('img').each(funtion() { $(this).wrap('< div class="izo">< /div>') .after('< p>'+'$(this).attr("alt")'+'< /p>'); }); // конец функции each(). так писать коды программ не желательно, сложно и запутано, хотя получается короче, но будут лишние проблемы. Функция wrap() заключает элементы выборки в теги, которые Вам необходимы. Функция unwrap(), наоборот, убирает родительский тег.
обратно на главную назад дальше вперед ПОНРАВИЛОСЬ?
|
Спокойной поздней ночи!
фотограф
Оля Леман свадьбы и торжества. нажмите сюда ![]() |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Сайт создан 04.12.2013г. © Права на сайт у Олега Васильева.
Копирование сайта при указании ссылки на источник. |