Добавление или связывание функций.

Когда нужно произвести над элементами несколько операций подряд и при этом не разводить писанину, тогда применяется метод связывания функциий при создании сайта. Таким элементом выступает точка. Общий вид добавления функций одна за другой выглядит следующим образом: $('селектор').функция1().функция2(). ...функцияN();

Вот, конкретный пример. Пусть имеется какой-то блок размером 300х250 с синей рамкой < div style="width: 300px; height: 250px; border: 1px #309">< /div>.

Вы хотите этот пустой блок уменьшить и сдвинуть на середину страницы, дать фон какой-то, внутри написать текст красными буквами, например: " Зравствуйте!", надпись разместить в середине блока сверху, рамку сделать двойным и покрасить в красный цвет. Вот, сколько действий Вы задумали. Тут просто объяснить нам пришлось написать полных три строчки.

Ну, посмотрим как будет выглядеть программа наша для реализации нашей идеи:

                    
                    < script type="text/javascript">$(document).ready(function(){
                    $('#kar').width(220).height(100).text('Здравствуйте!').css({
                    "background-color": "#FDB", "color": "#F00", "border": "5px double #F00",
                    "margin": "20px auto", "text-align": "center"
                    });
                    });
                    < /script>

Выражение < script type="text/javascript">$(document).ready(function(){});< /script> это у нас постоянное нужное выражение, чтобы библиотека jQuery подождала загрузку браузера, прежде чем запустить сценарии написанной программы( так называемая скриптовая оболочка jQuery). Значит коды программы хода выполнения наших действий следующие:

                  
                  $('#kar').width(220).height(100).text('Здравствуйте!').css({
                    "background-color": "#FDB", "color": "#F00", "border": "5px double #F00",
                    "margin": "20px auto", "text-align": "center"
                    });
              

Как видите программа написана в одну строчку без обрывов и состоит из всего-то одного выбранного нами элемента и из четырех функций библиотеки jQuery, а именно, посмотрите выделим эти функции:

                   $('#kar')
                   .width(220)
                   .height(100)
                   .text('Здравствуйте!')
                   .css({
                    "background-color": "#FDB", "color": "#F00", "border": "5px double #F00",
                    "margin": "20px auto", "text-align": "center"
                    });

На первой строчке Вы видите выборку селектора с идентификатором id="kar" блока div.

Далее .width(220) свойство задает новое значение ширины блока.

Далее .height(100) свойство определяет новое значение высоты блока.

Функция .text('Здравствуйте!') вставляет любой текст в элемент, в данном случае блок с идентификатором id="kar".

Функция css() удивительная функция определяющая все параметры стилистического оформления любого элемента на страницах Вашего сайта. Правда знакомое что-то. Видите в фигурных скобках мы задали фон блока - "background-color": "#FDB", цвет текста - "color": "#F00", параметры рамки блока - "border": "5px double #F00" ( толщину рамки, форму рамки, цвет рамки), задали поля между нашим блоком и левой и правой колонками страницы сайта - "margin": "20px auto", верхние и нижние поля по 20px, левое и правое поле поставили на автовыбор, чтобы наш блок сдвинуть на середину колонки и сдвинули текст на середину блока - "text-align": "center".

Легко и просто. Предельно ясно и понятно. Что мы хотели с Вами сделать, то и сделали. Составляется программа, как видите, чрезвычайно удобно и легко. Вспомните первую страницу темы, где смена одного изображения на другое в кодах JavaScript у нас заняла целую страницу. Тут и трех страниц бы не хватило. У нас разместилось в одну небольшую строчку.

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

Теперь остается посмотреть, что у нас получается, как наша синяя рамочка превращается нами задуманный блок:

Таким образом, связывая функции через точку можно организовать очень компактный код программы на языке jQuery при создании бесплатного сайта.

Теперь ВНИМАНИЕ! посмотрите на свойства .width(220), .height(100) эти же табличные значения каскадных стилей CSS. Значит ширину и высоту Вы можете задавать через параметры width и height функции css() ( так называемый литерал объекта функции css()), то есть Вы без ущерба для Вашей программы можете убрать функции .width(220), .height(100) и задать новые значения для ширины и высоты блока через параметра ( литералы объекта) стилевой функции css(). Давайте так и сделаем и посмотрим. Только для разнообразия поменяем фон блока, толщину рамки, размеры выбирем другие:

                     < script type="text/javascript">$(document).ready(function(){
                     $('#dut')
                     .text('Здравствуйте!')
                     .css({ 
                     "background-color": "#FDE", 
                     "color": "#F00", 
                     "border": "5px #DAE", 
                     "width": 350, "height": 60, 
                     "margin": "20px auto", 
                     "text-align": "center"
                     });
                     });
                     < /script>

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
... ... ...

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