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