Селекторы jQuery.
// выбор элемента страницы по ее id, например
$(‘#objectID’);
// выбор элемента по классу оформления, например
$(‘.className’);
// выбор элемента по его названию, например p, div, input и т.д.
$(‘p’);
// выбор дочерних элементов, в примере приведена выборка тегов p, которые находятся в блоке div
$(‘div p’);
//выбор следующего элемента div после элемента страницы с id равным elementID
$(‘#elementID + div’);
// выбор всех дочерних элементов p в блоке div
$(‘div > p’);
// выбор всех картинок с шириной равной 100, таким образом можно отбирать любые элементы страницы с любыми свойствами
$(‘img[width = 100]’);
// выбор всех картинок у которых свойство width начинается с 1
$(‘img[width ^= 1]’);
// выбор всех картинок у которых свойство src заканчивается на .png
$(‘img[src $= .png]’);
// выбор всех картинок у которых в свойстве src встречается строка png
$(‘img[src *= png]’);
// выбор всех четных элементов p в блоке с идентификатором #divName, нумерация в массиве как обычно с 0, причем 0 считается четным числом
$(‘#divName p:even’);
// выбор всех нечетных элементов p в блоке с идентификатором #divName, нумерация в массиве как обычно с 0, причем 0 считается четным числом
$(‘#divName p:odd’);
// выбор всех картинок на странице кроме тех, которые находятся в блоке с id равным divImg
$(‘img:not(#divImg img)’);
// выбор всех элементов div, которые содержат в себе элементы P (параграфы)
$(‘div:has(p)’);
// выбор всех элементов p, которые содержат в себе текст «привет»
$(‘p:contains(привет)’);
// выбор первого параграфа в блоке с id равным divName
$(‘#divName p:first’);
// выбор последнего параграфа в блоке с id равным divName
$(‘#divName p:last’);
// выбор всех скрытых параграфов на странице
$(‘p:hidden’);
// выбор всех показанных параграфов на странице
$(‘p:visibility’);
Часто используемые события jQuery:
- click — событие одиночного клика левой кнопкой мыши;
- dblclick — событие двойного нажатия левой кнопкой мыши;
- mouseover — событие наведения указателя мыши на объекты страницы;
- mouseout — событие убирание указателя мыши с объекта страницы;
- mousemove — событие передвижения мыши;
- mousedown — событие при котором пользователь нажал на левую кнопку мыши и пока еще не отпустил;
- mouseup — событие отпускания кнопки мыши, т.е. продолжение события mousedown;
- submit — событие отправки формы;
- focus — событие установки фокуса на элементе (нажатие на него или выделение TAB’ом);
- blur — событие снятие фокуса (фокус получает какой-нибудь другой элемент страницы);
- change — событие изменения объекта (выбор элемента списка, ввод символов в текстовое поле и т.д.);
- reset — сброс формы;
- keypress — нажатие кнопки на клавиатуре;
- keydown — мы нажали кнопку, но еще не отпустили;
- keyup — событие «отпускания» ранее нажатой ранее клавиши;
- resize — событие изменение ширины окна браузера;
- scroll — событие прокрутки окна браузера;
- load — событие полной загрузки документа;
- unload — событие перехода выхода со страницы (например переход на другую или закрытие браузера), нужно отметить что это событие работает не во всех браузерах.
<html>
<head>
<meta http-equiv=
"content-type"
content=
"text/html; charset=utf-8"
/>
<title>Пример работы с JQUERY</title>
<script type=
"text/javascript"
src=
"jquery.js"
></script> <!--Подключаем библиотеку JQUERY-->
<script type=
"text/javascript"
>
$(document).ready(
function
() {
// привязываем событие клика к элементу страницы с id равным displayText
$(
'#displayText'
).click(
function
() {
//выводим значение элемента с id равным myString на экран с помощью функции alert
alert($(
'#myString'
).val());
});
// привязываем событие двойного клика к элементу input с параметром value начинающимся со слова "Очистить", который находится в блоке div
$(
'div input[value^=Очистить]'
).dblclick(
function
() {
// выбираем первый элемент input в блоке с id равным testForm и очищаем его значение
$(
'#testForm input:first'
).val(
''
);
});
// привязываем событие клика к объекту input который находится в блоке div, а это div тоже должен находится в блоке div
$(
'div div input'
).toggle(
function
() {
// выбираем элемент input у которого свойство type равно text и скрываем его за 2 секунды
$(
'input[type = text]'
).fadeOut(2000);
// изменяем надписать на кнопке с id равным hideTextBox на "Показать поле"
$(
'#hideTextBox'
).val(
'Показать поле'
);
},
function
() {
// выбираем элемент input у которого свойство type равно text и показываем его за 3 секунды
$(
'input[type = text]'
).fadeIn(3000);
// изменяем надписать на кнопке с id равным hideTextBox на "Спрятать поле"
$(
'#hideTextBox'
).val(
'Спрятать поле'
);
});
// привязываем событие наведения мыши к объекту с id равным myString, т.е. к текстовому полю
$(
'#myString'
).mouseover(
function
() {
// изменяем текст элемента p на "Вы НАВЕЛИ мышку на текстовое поле!"
$(
'p'
).text(
'Вы НАВЕЛИ мышку на текстовое поле!'
);
});
// привязываем событие отведения мыши к объекту с id равным myString, т.е. к текстовому полю
$(
'#myString'
).mouseout(
function
() {
// изменяем текст элемента p на "Вы УБРАЛИ мышку с текстового поля!"
$(
'p'
).text(
'Вы УБРАЛИ мышку с текстового поля!'
);
});
// привязываем событие изменение состояния к элементу select
$(
'select'
).change(
function
() {
// получаем значение выбранного элемента select (на этот раз через его id = borderDiv, а не через селетор select для примера)
var
borderDivValue = $(
'#borderDiv :selected'
).val();
// если пользователь выбрал значение "Нарисовать красную рамку", т.е. value = "red"
if
(borderDivValue ==
'red'
)
{
// указываем напрямую css свойства border-color и border-width для элемента с id = testForm
$(
'#testForm'
).css({
'border-color'
:
'red'
,
'border-width'
:
'2px'
});
}
// иначе (можно было написать else if (borderDivValue == 'green')), т.е. value = "green"
else
{
// указываем напрямую css свойства border-color и border-width для элемента с id = testForm
$(
'#testForm'
).css({
'border-color'
:
'green'
,
'border-width'
:
'5px'
});
}
/*При указании css свой есть небольшая деталь: если вы указываете свойства каких-нибудь
элементов через JQUERY, то вы обязательно должны указывать полные значения свойств, т.е.
запись "border: green 5px" работать не будет, а запись 'border-color':'green', 'border-width':'5px' будет работать корректно.*/
});
});
</script>
</head>
<body>
<!------------ Создаем блок div с id = testForm, красной рамков и выравниваем по центру----------->
<div id=
"testForm"
style=
"border: 2px solid red; margin: 0 auto; width: 500px; text-align: center;"
>
<input id=
"myString"
type=
"text"
style=
"width: 500px;"
placeholder=
"Введите сюда любую строку"
/><br />
<input id=
"displayText"
type=
"submit"
value=
"Вывести значение поля на экран"
/><br />
<input id=
"clearTextBox"
type=
"submit"
value=
"Очистить поле от всех значений (двойной клик)"
/><br />
<div><input id=
"hideTextBox"
type=
"submit"
value=
"Спрятать поле"
/></div>
<select id=
"borderDiv"
>
<option value =
"red"
>Нарисовать красную рамку</option>
<option value =
"green"
>Нарисовать зеленую рамку</option>
</select>
<!-------------Текстовый блок для вывода сообщений----------------->
<p id=
"statusTextBox"
></p>
</div>
</body>
</html>