С помощью фильтра 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();
});