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

январь 2021
Пн Вт Ср Чт Пт Сб Вс
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


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

Функция bind() в jQuery.

Функция bind() позволяет не только указывать событие на странице сайта и функцию для реакции на событие; функция bind()передает дополнительную информацию для использования функцией, обрабатывающее данное событие, то есть способствует тому, что одна и таже функция может действовать по-разному в зависимости от запускаемого события.

Общий вид кода функции такой:

  
                  $('#селектор').bind('событие', моиДанные, имяФункции);

Первый аргумент функции bind() - строка с именем события, тут надо писать только название функции события без ее аргументов.

Второй аргумент - данные передаваемые функцией в форме литерала объекта или переменной, содержащей литерал объекта, то есть список имен свойств и их значений { имя: 'Коля', фамилия: 'Николаев' }. Литерал объекта есть аргументы функции, представленный как список имен и их значений в виде имя двоеточие и значение имени. Аргументы можно представить в виде имен переменных, то есть сперва назначить имя переменной var strokaVar = { message: 'Вы нажали на ссылку'}, далее это имя применять как аргумет функции.

Третий аргумент - есть другая функция, выполняющая какое-то действие при запуске события. Может быть именованной или анонимной функцией function() {...}.

Первую переменную для объектной константы мы написали. Пусть вторая переменная будет такой var indexVar = { message:'Вы нажали на абзац'}; Теперь мы напишем код программы создающий всплывающее окно в ответ на событие, а сообщение будет разным в зависимости от того, какой элемент вызывал событие:

  
                   var strokaVar = { message: 'Вы нажали на ссылку'};
                   var indexVar = { message: 'Вы покидаете абзац'};
                   function showMessage(evt) {
                   alert(evt.data.message);
                   }
                   $('a').bind('click', strokaVar, showMessage);
                   $('p').bind('mouseover', indexVar, showMessage);

Функция bind() дает возможность воздействовать на события разными способами. Допустим нам нужно, чтобы у посетителей эффект-lightbox возникал и при щелкании кнопкой мыши и при нажатии клавиши клавиатуры, тогда код такой программы будет такой:

  
                      < style>p { margin: 8px; font-size:12px; }< /style>
                      < script type="text/javascript">$(document).ready(function(){
                           $('#lightbox').html('< img src="../fon/56.jpg" />')
                           .bind('click keypress', function() {
                           $('#lightbox_1'
                           .html('< img src="../chebok/dsc09536" height="350" width="500" />')
                          });
                        });
                      < /script>
                      < div style=" margin: 15px auto 15px 150px;">
                      < button id="all">Нажимайте на фото.< br/>
                      < div id="lightbox">< /div>
                      < div id="lightbox_1">< /div>
                      < /div>

Как видите, первым аргументом события функция bind() стоят имена наших событий click и keypress, разделенных пробелом (сюда можно добавить еще несколько имен событий) эти события специально выделил жирным шрифтом, при запуске которых выполняется анонимная функция.

В данном случае Вы нажимаете на маленькую картину и рядом появляется другая большая картина. Можно, конечно, и убрать было маленькую картину, но, эффект-lightbox при этом не было видно.

В одной функции bind() можно присоединить несколько событий, каждое из которых запускает различные действия:

                
                            $('#teg').bind({
                                            'click':function(){1 действие},
                                        'mouseover':function(){2 действие};
                            });

Как видите, в одной функции разные аргументы запускают анонимные функции выполняющие свои действия; обратите на знаки двоеточие до анонимной функции.


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

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

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