Сайт Вадима Аниканова

Памятка 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, например <div id="objectID"></div>
$('#objectID');
 
// выбор элемента по классу оформления, например <div class="className"></div>
$('.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
<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>

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

Тэги: на, по, или, можно, jquery, сети, сайт, найти, информацию, полезную, официального, справочник

Copyright © 2013. All Rights Reserved.

Yandex-metrika