Авторский знак. Авторский знак. Seosait21.ru Есть у человека надежда. Пока не поздно. Вгрызайся и изучай.

октябрь 2020
Пн Вт Ср Чт Пт Сб Вс
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31


Чувашия-это моя Россия

Функция before().

Возможность добавить HTML-кодов до открывающего тега выбранного нами элемента, блока предоставляет нам функция before(), то есть функция before() вставляет какое-то содержание являющемся аргументом данной функции before()( хотите назовите методом) перед каждым элементом выбранного набора элементов документа. Элементы ( теги), перед которыми необходимо вставлять, обязаны существовать уже в документе (в рекомендациях не разрешается вставлять один элемент перед другим выбранным элементом, если его нет на странице сайта).

Допустим при вводе пароля пользователем нужно вывести предупреждение ввиде: 'Будьте внимательны и не сохраняйте пароль в своем компьютере!!!'. У нас имеется выборка < input type="text" name="password" id="password"> перед которым хотим разместить наше предупреждение. Тогда составляем такой код программ для своего бесплатного сайта:

                   < script type="text/javascript">$(document).ready(function(){
                   $('#password').before('< span>Будьте внимательны и
                   не сохраняйте пароль в своем компьютере!!!< /span>< br/>');
                   });
                   < /script>

запускаем программу и увидим, что данный код выведет на страницу сайта предупреждение при вводе пароля:

                     
              < span>Будьте внимательны и не сохраняйте пароль в своем компьютере!!!< /span>< br>
              < input type="text" name="password" id="password">

перевод строки < br/> вставили, чтобы наше предупреждение находилось над пустой белой клеткой ввода пароля.

Такие функции ярко демонстрируют свои свойства при выборе в качестве элементов блоки списков, не важно сортированные или несортированные, при создании выпадающих меню и при многих других случаях. Допустим на данной странице Вашего сайта имеются два сортированных списка в таком виде: 

                      < 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>
  1. Первая строка из первого списка.
  2. Вторая строка из первого списка.

  1. Первая строка из второго списка.
  2. Вторая строка из второго списка.
  3. Третья строка из второго списка.

Теперь, чтобы прочувствовать действия нашей функции before() сделаем следующее. Перед первой строчкой первого списка ( строки зеленого цвета) добавим первую строку из второго блока списков ( строки красного цвета). Будьте внимательны при постановке задачи.

Ну, что же вводную мы получили. Давайте реализовывать нами задуманное.

Сначала должны определить выбираемый элемент с его содержимым, то есть первую строку < li class="stroka" style="color: #F00">Первая строка из второго списка.< /li>. Это будет объект $('.spisok_l2 li:first'). Объектом, над которым будем совершать действия будет $('spisok_l1 li:first') и свяжем наш объект ( конечно, через точку) с нашей функцией before(), в аргументе которого будет содержание первой строчки второго списка. Тогда наш код программы будет выглядеть так ( конечно, было бы правильнее и универсальнее, если бы мы программу оформляли через переменные, но, пока не будем Вас запутывать):

                      < script type="text/javascript">$(document).ready(function(){
                      $('spisok_l1 li:first')
                      .before($('.spisok_l2 li:first'));
                      });
                      < /script>

И после запуска программы Вы увидите следующую расстановку в списках:

  1. Первая строка из первого списка.
  2. Вторая строка из первого списка.

  1. Первая строка из второго списка.
  2. Вторая строка из второго списка.
  3. Третья строка из второго списка.

Заметьте, так как у нас список сортированный, то сразу после добавления первая строка первого списка становится второй по номеру строкой в первом списке, хотя текст остается прежним.


seosait21.ru
HTML

seosait21.ru
CSS

seosait21.ru
Web-диз.
HTML ссылка CSS ссылка ...

seosait21.ru
JavaScript

seosait21.ru
PHP

seosait21.ru
JQuery
JavaScript ссылка PHP ссылка JQuery ссылка

seosait21.ru
SEO.

seosait21.ru
MySQL

seosait21.ru
XML
... ... ...

обратно на главную     назад    дальше     вперед

ПОНРАВИЛОСЬ?
ПОДЕЛИСЬ с ДРУЗЬЯМИ: