• Главное
• Радуга
• Как худеть
• Как бросить курить
• Сăмах
• Как создать сайт
• Лада приора
• Электросварка

• HTML
• CSS
• Web-диз
• JavaScript
• PHP
• jQuery
• SEO
• MySQL
• XML

Функция 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>

Теперь, чтобы прочувствовать действия нашей функции 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>

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

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

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