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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
|
---
category: tool
tool: jquery
contributors:
- ["Sawyer Charles", "https://github.com/xssc"]
translators:
- ["Ev Bogdanov", "https://github.com/evbogdanov"]
lang: ru-ru
filename: jquery-ru.js
---
jQuery — это библиотека JavaScript, которая помогает "делать больше, писать меньше". Она выполняет множество типичных JavaScript-задач, упрощая написание кода. jQuery используется крупными компаниями и разработчиками со всего мира. Она упрощает и ускоряет работу с AJAX, с событиями, с DOM и со многим другим.
Поскольку jQuery является библиотекой JavaScript, вам следует начать с [изучения JavaScript](https://learnxinyminutes.com/docs/ru-ru/javascript-ru/).
```js
///////////////////////////////////
// 1. Селекторы
// Для получения элемента в jQuery используются селекторы
var page = $(window); // Получить страницу целиком
// В качестве селектора может выступать CSS-селектор
var paragraph = $('p'); // Получить все <p> элементы
var table1 = $('#table1'); // Получить элемент с идентификатором 'table1'
var squares = $('.square'); // Получить все элементы с классом 'square'
var square_p = $('p.square') // Получить <p> элементы с классом 'square'
///////////////////////////////////
// 2. События и эффекты
// jQuery прекрасно справляется с обработкой событий
// Часто используемое событие — это событие документа 'ready'
// Вы можете использовать метод 'ready', который сработает, как только документ полностью загрузится
$(document).ready(function(){
// Код не выполнится до тех пор, пока документ не будет загружен
});
// Обработку события можно вынести в отдельную функцию
function onAction() {
// Код выполнится, когда произойдёт событие
}
$('#btn').click(onAction); // Обработчик события сработает при клике
// Другие распространённые события:
$('#btn').dblclick(onAction); // Двойной клик
$('#btn').hover(onAction); // Наведение курсора
$('#btn').focus(onAction); // Фокус
$('#btn').blur(onAction); // Потеря фокуса
$('#btn').submit(onAction); // Отправка формы
$('#btn').select(onAction); // Когда выбрали элемент
$('#btn').keydown(onAction); // Когда нажали клавишу
$('#btn').keyup(onAction); // Когда отпустили клавишу
$('#btn').keypress(onAction); // Когда нажали символьную клавишу (нажатие привело к появлению символа)
$('#btn').mousemove(onAction); // Когда переместили курсор мыши
$('#btn').mouseenter(onAction); // Когда навели курсор на элемент
$('#btn').mouseleave(onAction); // Когда сдвинули курсор с элемента
// Вы можете не только обрабатывать события, но и вызывать их
$('#btn').dblclick(); // Вызвать двойной клик на элементе
// Для одного селектора возможно назначить несколько обработчиков событий
$('#btn').on(
{dblclick: myFunction1} // Обработать двойной клик
{blur: myFunction1} // Обработать исчезновение фокуса
);
// Вы можете перемещать и прятать элементы с помощью методов-эффектов
$('.table').hide(); // Спрятать элемент(ы)
// Обратите внимание: вызов функции в этих методах всё равно спрячет сам элемент
$('.table').hide(function(){
// Сначала спрятать элемент, затем вызвать функцию
});
// Вы можете хранить селекторы в переменных
var tables = $('.table');
// Некоторые основные методы для манипуляций с документом:
tables.hide(); // Спрятать элемент(ы)
tables.show(); // Показать элемент(ы)
tables.toggle(); // Спрятать/показать
tables.fadeOut(); // Плавное исчезновение
tables.fadeIn(); // Плавное появление
tables.fadeToggle(); // Плавное исчезновение или появление
tables.fadeTo(0.5); // Изменение прозрачности
tables.slideUp(); // Свернуть элемент
tables.slideDown(); // Развернуть элемент
tables.slideToggle(); // Свернуть или развернуть
// Все эти методы принимают скорость (в миллисекундах) и функцию обратного вызова
tables.hide(1000, myFunction); // Анимация длится 1 секунду, затем вызов функции
// В методе 'fadeTo' вторым параметром обязательно идёт прозрачность
tables.fadeTo(2000, 0.1, myFunction); // Прозрачность меняется в течение 2 секунд до 0.1, затем вызывается функция
// Метод 'animate' позволяет делать более продвинутую анимацию
tables.animate({"margin-top": "+=50", height: "100px"}, 500, myFunction);
///////////////////////////////////
// 3. Манипуляции
// Манипуляции похожи на эффекты, но позволяют добиться большего
$('div').addClass('taming-slim-20'); // Добавить класс 'taming-slim-20' ко всем <div> элементам
// Часто встречающиеся методы манипуляций
$('p').append('Hello world'); // Добавить в конец элемента
$('p').attr('class'); // Получить атрибут
$('p').attr('class', 'content'); // Установить атрибут
$('p').hasClass('taming-slim-20'); // Проверить наличие класса
$('p').height(); // Получить или установить высоту элемента
// Во многих методах вам доступна информация ТОЛЬКО о первом элементе из выбранных
$('p').height(); // Вы получите высоту только для первого <p> элемента
// Метод 'each' позволяет это исправить и пройтись по всем выбранным вами элементам
var heights = [];
$('p').each(function() {
heights.push($(this).height()); // Добавить высоту всех <p> элементов в массив
});
```
|
