Merge pull request #1 from adambard/master

ff

1 files changed, 127 insertions, 0 deletions

diff --git a/ru-ru/jquery-ru.html.markdown b/ru-ru/jquery-ru.html.markdown
new file mode 100644
index 00000000..471b4e24
--- /dev/null
+++ b/ru-ru/jquery-ru.html.markdown
@@ -0,0 +1,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> элементов в массив
+});
+
+
+```