Памятка jQuery. Простые примеры скриптов на jQuery. Ссылки на полезные сайты по jQuery

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

Полезные ресурсы по jQuery в сети:

  • jquery.com — официальный сайт jQuery на котором можно найти саму библиотеку в нескольких вариантах (Production или Development + все предыдущие версии) и документацию к ней.
  • jqueryui.com — ветка официального сайта, на нем можно найти множество (просто глаза разбегаются) готовых элементов для сайта на jQuery. На мой взгляд этот сайт один из самых полезных в сети по библиотеке jQuery, оттуда можно многое почерпнуть.
  • jquerymobile.com — еще одна ветка официального сайта. На этом сайте можно найти полезную информацию о разработке сайтов на jQuery для мобильных устройств.
  • jquery.page2page.ru — отличный справочник по jQuery с удобной навигацией и понятными примерами кода. Если у вас возникают вопросы по какой-нибудь функции, действию или свойству, то вам на этот сайт. Кроме всего прочего можно скачать локальную версию справочника, что очень удобно.
  • wisdomweb.ru — неплохой интернет-справочник по JS/jQuery/AJAX/DOM/JSON/CSS3/HTML5. Хоть информации и очень много, навигация радует.
  • slyweb.ru/jquerymain — тоже хороший справочник по jQuery, но на мой взгляд он уступает двум предыдущим. На нем можно найти неплохую информацию не только по jQuery, но и по CSS3. Развернутое меню позволит быстро добраться до нужного свойства или метода.

Как начать пользоваться jQuery?
Для того чтобы начать пользоваться jQuery нужно скачать эту библиотеку (желательно с официального и самую свежую версию), поместить ее в проект (обычно она хранится в папке со скриптами, например в ../js) и подключить ее в документе вот таким образом:

1
<script type="text/javascript" src="../js/jquery.js">script>

После этого можно начинать использовать jQuery. Я бы рекомендовал использовать следующую конструкцию при написании скриптов на jQuery:

1
2
3
$(document).ready(function () {
 // ваш код
});

Этот код позволяет выполнять код скрипта (небольшая тавтология получилась) только после полной загрузки страницы, т.е. только после того как загрузятся все ее элементы и сформируется полная объектная модель документа (DOM — Document Object Model). Если не использовать этот код, то некоторые конструкции могут работать не правильно.

После того как мы все подключили и правильно оформили будем разбираться с общей схемой работы библиотеки jQuery. Она состоит из трех частей: 1 — выбор объектов документа с которыми нужно что-то сделать (использование селекторов), 2 — привязывание к этим выбранным объектам нужных нам событий и 3 — написание кода для привязанных к объектам событий (например скрытие или изменение свойств). Рассмотрим каждый пункт по порядку.

Селекторы jQuery.
Селекторы — это одна из главных частей jQuery и к счастью очень простая (впрочем, как и вся библиотека). Стоит сразу сказать что синтаксис селекторов практически полностью совпадает с синтаксисом CSS (каскадных таблиц стилей). Вот примеры селекторов, которыми часто приходится пользоваться в различных ситуациях:

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
// выбор элемента страницы по ее 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 — событие перехода выхода со страницы (например переход на другую или закрытие браузера), нужно отметить что это событие работает не во всех браузерах.

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

Код скрипта:

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
 "content-type" content="text/html; charset=utf-8" />
 Пример работы с JQUERY
 
 
 
 
"testForm" style="border: 2px solid red; margin: 0 auto; width: 500px; text-align: center;">
 "myString" type="text" style="width: 500px;" placeholder="Введите сюда любую строку" />
 "displayText" type="submit" value="Вывести значение поля на экран" />
 "clearTextBox" type="submit" value="Очистить поле от всех значений (двойной клик)" />
 
"hideTextBox" type="submit" value="Спрятать поле" />
 
 
 
 

"statusTextBox">

 

На этом я думаю закончить статью, т.к. она уже и так стала большой. Хотелось бы еще вместить сюда больше различных элементов jQuery (анимацию, методы работы с AJAX и т.д.), но тогда читать эту статью будет совсем неудобно. Если я где-нибудь «накрутил» в коде или чего-то очень важного не дописал, то жду комментариев, все подправлю. Удачи в использовании jQuery, изучайте эту библиотеку, она того стоит.