Выбор первого дочернего элемента

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

С помощью фильтра first можно выбрать первый элемент на странице или в указанном теге. Этот фильтр действует аналогично фильтру eq со значением 0 eq(0).

$(": first" )

В следующем примере выбрана первая строка в таблице с идентификатором mail:

$('#mail tr: first').css('backgroundColor', '#95AFC1')

Выбор последнего дочернего элемента

С помощью фильтра last можно выбрать последний элемент на странице или в указанном теге.

$(": last" )

В следующем примере выбрана последняя строка в таблице с идентификатором mail

$('#mail tr: last').css('backgroundColor', '#95AFC1')

Выбор элемента в фокусе

С помощью фильтра focus можно выбрать выделенный элемент на странице.

$(": focus" )

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

$(" input: focus" )

Выбор элементов, идущих после указанного элемента

С помощью фильтра gt можно выбрать все элементы после указанного. Для выбора всех элементов необходимо указать индекс элемента, после которого следует выбирать объекты.

$(": gt(index)" ) В следующем примере выбраны все строки, идущие после третьей строки объекта с mail.

$(" #mail tr: gt(2)" ).css('backgroundColor', 'red')

Выбор элементов, идущих до указанного элемента

С помощью фильтра lt можно выбрать все элементы до указанного элемента. Для выбора всех элементов необходимо указать индекс элемента, до которого следует выбирать объекты.

Синтаксис: $(": lt(index)" )

В следующем примере выбраны все строки, идущие до третьей строки объекта с идентификатором mail.

$(" #mail tr: lt(2)" ).css('backgroundColor', 'red')

Фильтр по заголовкам

С помощью фильтра header можно выбрать заголовки всех уровней.

$(": header" )

В следующем примере будет выбраны все заголовки и им будет назначен фоновый цвет:

$(': header').css('backgroundColor', '#95AFC1')

В следующем примере будет найден заголовок внутри класса content и ему будет назначен размер шрифта. На заголовки вне класса content это правило действовать не будет.

$('.content: header').css('fontSize', '12px')

Выделение невидимых элементов

С помощью фильтра hidden можно выбрать элементы, которые в данный момент невидимы на странице.

Невидимым элементом считается элемент, удовлетворяющий одному из следующих правил:

- css‐ свойство display равно none;

- элементом формы с type=" hidden"

- высота или ширина элемента равна 0

Элемент находится внутри невидимого элемента и поэтому тоже невидим на странице.

Элементы с css‐ свойством visibility равным hidden, а также элементы с нулевой прозрачностью считаются видимыми, поскольку они продолжают занимать место на странице.

$(": hidden" )

В следующем примере будут выделены все скрытые строки внутри элемента с идентификатором mail.

$(" #mail tr: hidden" )

Фильтры элементов форм

Фильтр: input

С помощью фильтра: input можно выбрать все элементы формы, включая textarea, select и кнопки.

$(": input" )

Фильтр: button

С помощью фильтра button можно выбрать элементы формы, которые являются кнопками. К кнопкам относятся элементы input со значением атрибута type равным button.

$(": button" )

Фильтр: submit

С помощью фильтра submit можно выбрать элементы формы, которые являются кнопками отправить.

$(": submit " )

Фильтр: reset

С помощью фильтра reset можно выбрать элементы формы input со значением атрибута type равным reset.

$(": reset" )

Фильтр: checkbox

С помощью фильтра checkbox можно выбрать элементы формы, которые являются флажками. К флажкам, как известно, относятся элементы input со значением атрибута type равным checkbox.

$(": checkbox " )

В следующем примере выбираются все флажки на странице, и для них устанавливается атрибут выделения checked.

$(" input: checkbox" ).attr('checked', 'checked')

Фильтр: checkbox

С помощью фильтра radio можно выбрать элементы формы, которые являются кнопками - переключателями. К ним относятся элементы input со значением атрибута type равным radio.

$(": radio " )

События в jQuery

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

Веб‐ страница обладает вложенной иерархической структурой. Элементы вкладываются друг в друга вплоть до элемента body, который в свою очередь вложен в элемент html. При возникновении события на вложенном элементе, далее то же событие возникает на его родительских элементах и так до верхнего элемента. Такое поведение событий называется всплывающим, так как событие поднимается вверх по структуре веб‐ страницы.

Объект event

Объект event содержит данные о произошедшем событии. Передается во все обработчики jQuery.

Объект event отличается от стандартных объектов событий, которые получают обработчики, установленные обычными средствами JavaScript. Некоторые поля подвергаются изменению для обеспечения кроссбраузерности.

В jQuery в event добавлены дополнительные поля и методы. Следующие поля присутствуют в каждом объекте:

ü altKey,

ü attrChange,

ü attrName,

ü bubbles,

ü button,

ü cancelable,

ü charCode,

ü clientX,

ü clientY,

ü ctrlKey,

ü currentTarget,

ü data,

ü detail,

ü eventPhase,

ü fromElement,

ü handler,

ü keyCode,

ü layerX, layerY,

Определение типа события

Для определения типа событий используется свойство type объекта event.

$(" a" ).click(function(event) {

alert(event.type); // " click" });

Время запуска события

Для определения времени, когда произошло событие, используется свойство timeStamp объекта event. Время события определяется в миллисекундах от 1 января 1970 года.

event.timeStamp

Обработчики событий jQuery

Обработчики событий - это функции, код которых исполняется только после совершения определенных действий. Обработчики событий присутствовали и в JavaScript, но jQuery облегчает их использование и расширяет их функциональность.

Примеры действий, после которых выполняются обработчики:

- Курсор мыши наведен на элемент;

- Веб-страница или картинка полностью загружена;

- Изменено содержимое поля формы;

- HTML форма отправлена;

- Нажата клавиша на клавиатуре;

Общий вид определения обработчиков jQuery:

$(селектор).обработчик_события(function(){код_обработчика_события});

Обработчики событий jQuery в действии

Mouseover()

Код обработчика mouseover будет выполнен, когда курсор мыши будет наведен на элемент.

Mouseout()

Код обработчика mouseout будет выполнен, когда курсор мыши будет выведен из границ элемента.

$(document).ready(function(){ $(" p" ).mouseover(function(){$(" p" ).css(" color", " green" )}); $(" p" ).mouseout(function(){$(" p" ).css(" color", " black" )});

});

Click()

Код обработчика click будет выполнен после одинарного щелчка мыши на элементе.

Dblclick()

Код обработчика dblclick будет выполнен после двойного щелчка мыши на элементе.

$(document).ready(function(){

$(" #but1" ).click(function(){alert(" Вы нажали один раз на первую кнопку! " ); });

$(" #but2" ).dblclick(function(){alert(" Вы нажали два раза на вторую кнопку! " ); });

});

Focus()

Код обработчика focus() будет выполнен, когда элемент станет активным.

Blur()

Код обработчика blur() будет выполнен, когда элемент перестанет быть активным.

Change()

Код обработчика change() будет выполнен, при изменении содержимого элемента.

$(document).ready(function(){

$(" #el1" ).focus(function(){$(this).attr(" value", " " )});

$(" #el1" ).blur(function(){$(this).attr(" value", " Введите ФИО" )});

$(" #el2" ).change(function(){ alert(" Содержимое данного элемента было изменено." ) });

});

С помощью jQuery можно также вызывать обработчики событий привязанные к элементу.

$('#test').blur() вызовет обработчик blur у элемента с id='test'.

$(document).ready(function(){

// Зададим обработчик события, который будет выводить сообщение при нажатии на кнопку с id=but1

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

// Вызовем обработчик click у элемента с id='but1'

$(" #but1" ).click();

});

⇐ Предыдущая 24 25 26 27 282930 31 32 33 Следующая ⇒