jQuery — это библиотека JavaScript, которая помогает «делать больше, писать меньше». Она выполняет множество типичных JavaScript-задач, упрощая написание кода. jQuery используется крупными компаниями и разработчиками со всего мира. Она упрощает и ускоряет работу с AJAX, с событиями, с DOM и со многим другим.
Поскольку jQuery является библиотекой JavaScript, вам следует начать с изучения JavaScript.
1///////////////////////////////////
2// 1. Селекторы
3
4// Для получения элемента в jQuery используются селекторы
5var page = $(window); // Получить страницу целиком
6
7// В качестве селектора может выступать CSS-селектор
8var paragraph = $('p'); // Получить все <p> элементы
9var table1 = $('#table1'); // Получить элемент с идентификатором 'table1'
10var squares = $('.square'); // Получить все элементы с классом 'square'
11var square_p = $('p.square') // Получить <p> элементы с классом 'square'
12
13
14///////////////////////////////////
15// 2. События и эффекты
16// jQuery прекрасно справляется с обработкой событий
17// Часто используемое событие — это событие документа 'ready'
18// Вы можете использовать метод 'ready', который сработает, как только документ полностью загрузится
19$(document).ready(function(){
20 // Код не выполнится до тех пор, пока документ не будет загружен
21});
22// Обработку события можно вынести в отдельную функцию
23function onAction() {
24 // Код выполнится, когда произойдёт событие
25}
26$('#btn').click(onAction); // Обработчик события сработает при клике
27
28// Другие распространённые события:
29$('#btn').dblclick(onAction); // Двойной клик
30$('#btn').hover(onAction); // Наведение курсора
31$('#btn').focus(onAction); // Фокус
32$('#btn').blur(onAction); // Потеря фокуса
33$('#btn').submit(onAction); // Отправка формы
34$('#btn').select(onAction); // Когда выбрали элемент
35$('#btn').keydown(onAction); // Когда нажали клавишу
36$('#btn').keyup(onAction); // Когда отпустили клавишу
37$('#btn').keypress(onAction); // Когда нажали символьную клавишу (нажатие привело к появлению символа)
38$('#btn').mousemove(onAction); // Когда переместили курсор мыши
39$('#btn').mouseenter(onAction); // Когда навели курсор на элемент
40$('#btn').mouseleave(onAction); // Когда сдвинули курсор с элемента
41
42
43// Вы можете не только обрабатывать события, но и вызывать их
44$('#btn').dblclick(); // Вызвать двойной клик на элементе
45
46// Для одного селектора возможно назначить несколько обработчиков событий
47$('#btn').on(
48 {dblclick: myFunction1} // Обработать двойной клик
49 {blur: myFunction1} // Обработать исчезновение фокуса
50);
51
52// Вы можете перемещать и прятать элементы с помощью методов-эффектов
53$('.table').hide(); // Спрятать элемент(ы)
54
55// Обратите внимание: вызов функции в этих методах всё равно спрячет сам элемент
56$('.table').hide(function(){
57 // Сначала спрятать элемент, затем вызвать функцию
58});
59
60// Вы можете хранить селекторы в переменных
61var tables = $('.table');
62
63// Некоторые основные методы для манипуляций с документом:
64tables.hide(); // Спрятать элемент(ы)
65tables.show(); // Показать элемент(ы)
66tables.toggle(); // Спрятать/показать
67tables.fadeOut(); // Плавное исчезновение
68tables.fadeIn(); // Плавное появление
69tables.fadeToggle(); // Плавное исчезновение или появление
70tables.fadeTo(0.5); // Изменение прозрачности
71tables.slideUp(); // Свернуть элемент
72tables.slideDown(); // Развернуть элемент
73tables.slideToggle(); // Свернуть или развернуть
74
75// Все эти методы принимают скорость (в миллисекундах) и функцию обратного вызова
76tables.hide(1000, myFunction); // Анимация длится 1 секунду, затем вызов функции
77
78// В методе 'fadeTo' вторым параметром обязательно идёт прозрачность
79tables.fadeTo(2000, 0.1, myFunction); // Прозрачность меняется в течение 2 секунд до 0.1, затем вызывается функция
80
81// Метод 'animate' позволяет делать более продвинутую анимацию
82tables.animate({"margin-top": "+=50", height: "100px"}, 500, myFunction);
83
84
85///////////////////////////////////
86// 3. Манипуляции
87
88// Манипуляции похожи на эффекты, но позволяют добиться большего
89$('div').addClass('taming-slim-20'); // Добавить класс 'taming-slim-20' ко всем <div> элементам
90
91// Часто встречающиеся методы манипуляций
92$('p').append('Hello world'); // Добавить в конец элемента
93$('p').attr('class'); // Получить атрибут
94$('p').attr('class', 'content'); // Установить атрибут
95$('p').hasClass('taming-slim-20'); // Проверить наличие класса
96$('p').height(); // Получить или установить высоту элемента
97
98
99// Во многих методах вам доступна информация ТОЛЬКО о первом элементе из выбранных
100$('p').height(); // Вы получите высоту только для первого <p> элемента
101
102// Метод 'each' позволяет это исправить и пройтись по всем выбранным вами элементам
103var heights = [];
104$('p').each(function() {
105 heights.push($(this).height()); // Добавить высоту всех <p> элементов в массив
106});