Управление обработчиками событий

⇐ ПредыдущаяСтр 30 из 36Следующая ⇒

Метод jQuery one() позволяет создавать обработчики, которые могут быть вызваны лишь один раз.

$(document).ready(function(){

$(" #but1" ).one(" click", function(){alert(" Вы нажали на кнопку с id=but1" )});

});

Метод jQuery toggle() позволяет переключаться между различными обработчиками событий по щелчку мыши.

$(document).ready(function(){

$(" #but1" ).click(function(){

$(" #par1" ).css(" color", " black" );

$(" #par1" ).css(" font-size", " 1em" );

});

$(" #par1" ).toggle(function(){

$(" #par1" ).css(" color", " green" );

$(" #par1" ).css(" font-size", " 10px" ); }, function(){

$(" #par1" ).css(" color", " red" );

$(" #par1" ).css(" font-size", " 20px" ); }, function(){

$(" #par1" ).css(" color", " blue" );

$(" #par1" ).css(" font-size", " 30px" ); }, function(){

$(" #par1" ).css(" color", " black" );

$(" #par1" ).css(" font-size", " 1em" );

});

События документа/окна

Load()

Событие запускается, когда браузер загрузит все файлы веб-страницы: html-файлы, внешние css и javascript файлы, медиа-файлы. Это может быть неудобно в случае если веб-страница содержит большое количество файлов. Для решения данной проблемы можно воспользоваться функцией ready(), которая запускает скрипты сразу после загрузки html-кода.

Resize()

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

Scroll()

Событие запускается, когда пользовать использует полосы прокрутки, либо прокручивает веб-страницу с помощью колесика мыши, или же использует для этих целей клавиши клавиатуры (PgUp, PgDn, home, end).

Unload()

Событие запускается, когда пользователь собирается покинуть страницу, щелкая по ссылке для перехода на другую страницу, закрывает вкладку страницы или же окно браузера.

События форм

Blur()

Событие запускается, когда поле формы выводится из фокуса, т.е. вы ввели данные в поле формы и перешли на другое поле.

Change()

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

Focus()

Событие запускается при переходе в поле формы, при щелчке на нем кнопкой мыши или клавишей табуляции.

Reset()

Событие позволяет вернуть форму в первоначальное состояние, отменив сделанные изменения.

Select()

Событие запускается, когда вы выделяете текст внутри текстового поля формы.

Submit()

Событие запускается, когда вы отправляете заполненную форму с помощью щелчка по кнопке «Отправить» или нажатия клавиши «Enter», когда курсор помещен в текстовом поле.

Работа с деревом DOM

Библиотека jQuery содержит большое количество методов для работы с элементами DOM.

Метод text() – добавляет текстовое содержимое выбранному элементу

Метод html() – добавляет выбранному элементу содержимое, включая код html, или возвращает существующий контент

Метод val()– добавляет или возвращает значения элементов web-формы

Следующий пример демонстрирует работу указанных методов.

Метод attr() –возвращает значение атрибутов указанных элементов. Часто применяется для получения адреса ссылки.

<! DOCTYPE html>

< html>

< head>

< script src=" https: //ajax. Googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js" > < /script>

< script>

$(document).ready(function(){

$(" #click1" ).click(function(){

alert(" Результат метода test(): " + $(" #test" ).text());

});

$(" #click2" ).click(function(){

alert(" Результат метода html(): " + $(" #test" ).html());

});

< /script>

< /head>

< body>

< p id=" test" > jQuery прекрасно подходит для работы с < strong> DOM< /stong> < /p>

< button id=" click1" > text()< /button>

< button id=" click2" > html()< /button>

< /body>

< /html>

При нажатии на кнопку text(), получим всплывающее окно со следующей информацией (см. рисунок 78):

Рисунок 78 – Всплывающее окно " Результат метода test()"

Результат нажатия на кнопку html() представлен на рисунке 79

Рисунок 79– Всплывающее окно " Результат метода html()"

Применяя методы text(), html(), vall(), можно не только получить контент выбранного элемента, но и добавить новое содержимое. Следующий код изменит содержимое двух параграфов и элемента формы с использованием методов jQuery.

<! DOCTYPE html>

< html>

< head>

< script src=" https: //ajax. Googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js" > < /script>

< script>

$(document).ready(function(){

$(" #btn1" ).click(function(){

$(" #test1" ).text(" Новый текст" ); // заменим текст в параграфе с id=#test1

});

$(" #btn2" ).click(function(){

$(" #test2" ).html(" < b> Новый текст+ новая разметка< /b> " );

}); // заменим текст в параграфе с id=#test2

$(" #btn3" ).click(function(){

$(" #test3" ).val(" Новое значение" ); // заменим текст в текстовом поле с id=#test3

});

}); < /script> < /head> < body>

< p id=" test1" > Элемент №1< /p>

< p id=" test2" > Элемент №2< /p>

< p> Текстовое поле: < input type=" text" id=" test3" value=" Элемент №3" > < /p>

< button id=" btn1" > text()< /button>

< button id=" btn2" > html()< /button>

< button id=" btn3" > val()< /button>

< /body>

< /html>

Результат работы скрипта представлен на рисунке 80:

Рисунок 80 – Результат работы скрипта

Добавление новых элементов

Библиотека jQuery предлагает большое количество методов для добавления новых элементов на страницу. Рассмотрим четыре самых используемых метода.

Метод append()

Метод append() добавляет контент в конец выбранного элемента. Например, нужно добавить новый текст в конец параграфа.

$(" p" ).append(" Добавим текст в конец параграфа." );

Метод prepend()

Метод prepend() добавляет контент в начало выбранного элемента. Добавим текст в самое начало параграфа.

$(" p" ).prepend(" Добавим новый текст в начало параграфа." );

Метод after()

Метод after() добавляет контент после выбранного элемента. Добавим описание после картинки:

$(" img" ).after(" < strong> Описание после картинки< /strong> " );

Метод before()

Метод before() добавляет контент перед выбранный элементом. Добавим описание перед картинкой:

$(" img" ).before(" < strong> Описание перед картинкой< /strong> " );

Удаление элементов

Помимо добавления новых элементов в библиотеке jQuery предусмотрены методы для удаления элементов со страницы.

Метод remove()

Метод remove() удаляет выбранный элемент и всех его потомков. Удалим блок с классом help:

$(".help" ).remove();

Метод remove() позволяет также отфильтровать удаляемые элементы. К примеру удалить параграфы только с классом help:

$(" p" ).remove(".help" );

Метод empty()

Метод remove() удаляет потомков выбранного элемента. Удалим потомков блока с классом help:

$(".help" ).remove();

Примечание. Метод empty() не удаляет сам элемент, только его потомков, в то время как метод remove() удалит элемент со всеми потомками.

Методы для работы с CSS

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

Метод addClass()

Метод addClass() позволяет добавить атрибуты класса выбранному элементу. Добавим класс first блоку с идентификатором #block1:

$(" #block1" ).addClass(" first" );

Часто требуется добавить класс CSS нескольким элементам. В следующем примере добавим нескольким заголовкам класс second:

$(" h1, h2, h3" ).addClass(" second" );

Метод removeClass()

Используя метод removeClass(), можно удалить класс выбранных элементов. Удалим ранее добавленный класс second у заголовков первого, второго и третьего уровня.

$(" h1, h2, h3" ).removeClass(" second" );

Метод toogleClass()

Еще одним очень интересным методом библиотеки jQuery является метод toogleClass(). Этот метод служит для переключения классов, то есть добавляет или удаляет нужный класс выбранному элементу.

Рассмотрим работу метода на примере. Требуется менять стиль текста по нажатию на кнопку " изменить стиль":

<! DOCTYPE html>

< html>

< head>

< script src=" https: //ajax. Googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js" > < /script>

< script>

$(document).ready(function(){

$(" button" ).click(function(){

$(" p" ).toggleClass(" first" );

});

< /script>

< style>

p {color: red; font-size: 18px; font-weight: bold; }

< /style>

< /head>

< body>

< h1> Заголовок текста< /h1>

< p> Стиль этого текста будем менять< /p>

< button> Изменить стиль< /button>

< /body>

< /html>

В начале работы скрипта у параграфа нет стиля, и метод toogleClass() добавляет класс first, тем самым изменяя свойства CSS текста. На рисунке 81 представлен результат первого нажатия кнопки.

Рисунок 81– Демонстрация работы метода toogle()

Если нажать на кнопку еще раз, то метод toogleClass() удалит добавленный стиль, и текст примет свой первоначальный вид, как это видно на рисунке 82.

Рисунок 82– Демонстрация работы метода toogle()

Визуальные эффекты jQuery

Библиотека jQuery предлагает большое количество методов для создания визуальных эффектов на странице. Многие разработчики начинают пользоваться jQuery именно из-за возможностей анимации. Рассмотрим некоторые из таких методов.

Методы hide() и show()

Очень часто требуется скрыть или показать элемент на странице. Для этого в библиотеке jQuery предусмотрены методы hide() и show(). Данные методы работают со значениями свойства display, меняя их на none и обратно. В качестве первого параметра можно задать скорость анимации, для этого можно использовать одно из зарезервированных слов slow или fast, либо же указывать скорость в миллисекундах (1000 мс = 1 сек)

К примеру, нужно скрыть или показать изображение при нажатии на кнопку:

$(" #button" ).click(function(){

$(" img" ).hide(1000); // картинка будет исчезать в течение 1 секунды

});

$(" #button1" ).click(function(){

$(" img" ).show(); // картинка появится сразу же

});

⇐ Предыдущая 25 26 27 28 293031 32 33 34 Следующая ⇒