![]() |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Как создать сайт?
Как создать свой сайт легко и просто, имеются библиотеки html, css, php, javascript, jquery, web-график. автор: Васильев Олег Никандрович. КАК СОЗДАТЬ САЙТ
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Функция append().Функция Функция добавляет код внутрь каждого подходящего элемента. Работа функции append() заключается в добавлении HTML-кодов в качестве последнего дочернего элемента выбранного для замены блока, элемента при создании своего сайта. Таким образом, функция append() вставляет (добавляет) фрагмент HTML разметки ( или создаваемые по ходу выполнения элементы), или перемещает существующие элементы, определяемые с помощью параметра source, позади существующего содержимого элементов в выборке jQuery (позади всех дочерних элементов). По простому говоря, метод .append() добавляет код внутрь каждого выбранного и притом подходящему этому элементу. Есть немного отличающаяся функция appendTo(), которая перемещает все элементы набора jQuery в конец содержимого каждого элемента, определяемого с помощью параметра destination (позади всех дочерних элементов. Допустим мы выбрали блок: < div id="nav"> < h3>Здесь находится меню страницы.< /h3> < /div> и хотим добавить строку как последний элемент в этом блоке < p>Здравствуйте, уважаемые читатели!< /p>, тогда пишем : $('#nav').append('< p>Здравствуйте, уважаемые читатели!< /p>'); запускаем сценарий и наша функция append() произведет следующее: < div id="nav"> < h3>Здесь находится меню страницы.< /h3> < p>Здравствуйте, уважаемые читатели!< /p> < /div> Абзац p будет последним элементом в блоке div и будет находиться перед закрывающимся тегом < /div>. Потому как абзац p есть дочерний элемент блока div ( div > p) Посмотрим еще пример: Пусть на данной странице Вашего сайта имеются два сортированных списка в таком виде: < ol class="spisok l1"> < li class="stroka" style="color: #090">Первая строка из первого списка.< /li> < li class="stroka" style="color: #090">Вторая строка из первого списка.< /li> < /ol> < ol class="spisok l2"> < li class="stroka" style="color: #F00">Первая строка из второго списка.< /li> < li class="stroka" style="color: #F00">Вторая строка из второго списка.< /li> < li class="stroka" style="color: #F00">Третья строка из второго списка.< /li> < /ol>
следующие две строки кодов программ будут одинаковы, хотя Вы видите разные функции append() и appendTo() : $('.spisok').append('< li class="stroka" style="color: #FC0">Проверочная строка.< /li>'); $('< li class="stroka" style="color: #F6C">Проверочная строка.< /li>').appendTo($('.spisok')); в обоих случаях элемент списка с текстом "Проверочная строка." будет добавлен в конец элементов с классом spisok. Чтобы Вы могли заметить и оценить, что каждая функция действует, я тестовые строки " Проверочная строка" раскрасил по-разному. Результат действия функциии $('.spisok').append('< li class="stroka" style="color: #FC0">Проверочная строка.< /li>'); покрасил в желтую строчку. Результат действия функции $('< li class="stroka" style="color: #F6C">Проверочная строка.< /li>').appendTo($('.spisok')); в оранжевую строку. Таким образом, строка " Проверочная строка" отображается дважды в одном списке, но разными цветами: желтым и оранжевым. В результате, текст нашей страницы станет следующим: < ol class="spisok l1"> < li class="stroka">Первая строка из первого списка.< /li> < li class="stroka">Вторая строка из первого списка.< /li> < li class="stroka">Проверочная строка.< /li> < li class="stroka">Проверочная строка.< /li> < /ol> < ol class="spisok l2"> < li class="stroka">Первая строка из второго списка.< /li> < li class="stroka">Вторая строка из второго списка.< /li> < li class="stroka">Третья строка из второго списка.< /li> < li class="stroka">Проверочная строка.< /li> < li class="stroka">Проверочная строка.< /li> < /ol>
Заметьте,что вставляемые элементы в данном случае не скопированы, но перемещены согласно написанных кодов программы. Вот, посмотрите, на следущий пример. Напишем так ( как обычно выбранные элементы, связываем действия которые будут выполняться над элементами через точки), обращайте на это внимание, потому что у Вас должен выработаться автоматизм связывания: $('.l2').append($('.l1 li:last')); эта связка переместит последний элемент li из первого списка, в конец второго: < ol class="spisok l1"> < li class="stroka">Первая строка из первого списка.< /li> < /ol> < ol class="spisok l2"> < li class="stroka">Первая строка из второго списка.< /li> < li class="stroka">Вторая строка из второго списка.< /li> < li class="stroka">Третья строка из второго списка.< /li> < li class="stroka">Вторая строка из первого списка.< /li> < /ol>
обратно на главную назад дальше вперед ПОНРАВИЛОСЬ?
|
добрый вечер!
фотограф
Оля Леман свадьбы и торжества. нажмите сюда ![]()
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Сайт работает с 04.12.2013г. по 22-01-2021г. уже 8 лет © Права на сайт у Олега Васильева.
Копирование сайта при указании ссылки на источник. |