mirror of
https://github.com/adambard/learnxinyminutes-docs.git
synced 2024-12-25 10:25:23 +00:00
124 lines
7.3 KiB
Markdown
124 lines
7.3 KiB
Markdown
---
|
||
category: framework
|
||
framework: 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> элементов в массив
|
||
});
|
||
```
|