From 6d8c4b191128721aa82c8deaf9fb56cc1cccd5c9 Mon Sep 17 00:00:00 2001 From: Ev Bogdanov Date: Thu, 30 Aug 2018 18:42:55 +0300 Subject: [PATCH 1/7] Start translating jQuery into Russian --- ru-ru/jquery-ru.html.markdown | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) create mode 100644 ru-ru/jquery-ru.html.markdown diff --git a/ru-ru/jquery-ru.html.markdown b/ru-ru/jquery-ru.html.markdown new file mode 100644 index 00000000..d91f14a7 --- /dev/null +++ b/ru-ru/jquery-ru.html.markdown @@ -0,0 +1,19 @@ +--- +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 + + +``` From cf3736c7f1965c7756ca9126428580f302dcb139 Mon Sep 17 00:00:00 2001 From: Ev Bogdanov Date: Thu, 30 Aug 2018 22:55:47 +0300 Subject: [PATCH 2/7] Translate topic: Selectors --- ru-ru/jquery-ru.html.markdown | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/ru-ru/jquery-ru.html.markdown b/ru-ru/jquery-ru.html.markdown index d91f14a7..b99be215 100644 --- a/ru-ru/jquery-ru.html.markdown +++ b/ru-ru/jquery-ru.html.markdown @@ -16,4 +16,16 @@ jQuery — это библиотека JavaScript, которая помогае ```js +/////////////////////////////////// +// 1. Селекторы + +// Для получения элемента в jQuery используются селекторы +var page = $(window); // Получить страницу целиком + +// В качестве селектора может выступать CSS-селектор +var paragraph = $('p'); // Получить все

элементы +var table1 = $('#table1'); // Получить элемент с идентификатором 'table1' +var squares = $('.square'); // Получить все элементы с классом 'square' +var square_p = $('p.square') // Получить

элементы с классом 'square' + ``` From d8beb0651810ea77d31ef5b337d5863ee1ace72c Mon Sep 17 00:00:00 2001 From: Ev Bogdanov Date: Thu, 30 Aug 2018 23:53:46 +0300 Subject: [PATCH 3/7] Translate topic: Events and Effects (part I) --- ru-ru/jquery-ru.html.markdown | 29 +++++++++++++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/ru-ru/jquery-ru.html.markdown b/ru-ru/jquery-ru.html.markdown index b99be215..473418e1 100644 --- a/ru-ru/jquery-ru.html.markdown +++ b/ru-ru/jquery-ru.html.markdown @@ -28,4 +28,33 @@ var table1 = $('#table1'); // Получить элемент с идентиф var squares = $('.square'); // Получить все элементы с классом 'square' var square_p = $('p.square') // Получить

элементы с классом '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); // Когда сдвинули курсор с элемента + ``` From 656ef60a392e5d94000aa5ad5150bbc0ddac279c Mon Sep 17 00:00:00 2001 From: Ev Bogdanov Date: Fri, 31 Aug 2018 00:57:46 +0300 Subject: [PATCH 4/7] Translate topic: Events and Effects (part II) --- ru-ru/jquery-ru.html.markdown | 42 +++++++++++++++++++++++++++++++++++ 1 file changed, 42 insertions(+) diff --git a/ru-ru/jquery-ru.html.markdown b/ru-ru/jquery-ru.html.markdown index 473418e1..47571589 100644 --- a/ru-ru/jquery-ru.html.markdown +++ b/ru-ru/jquery-ru.html.markdown @@ -57,4 +57,46 @@ $('#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); + ``` From df78ed16d458989986eac7d0d2ee71e531f9c505 Mon Sep 17 00:00:00 2001 From: Ev Bogdanov Date: Fri, 31 Aug 2018 01:38:51 +0300 Subject: [PATCH 5/7] Translate topic: Manipulation --- ru-ru/jquery-ru.html.markdown | 26 +++++++++++++++++++++++++- 1 file changed, 25 insertions(+), 1 deletion(-) diff --git a/ru-ru/jquery-ru.html.markdown b/ru-ru/jquery-ru.html.markdown index 47571589..54c91bf5 100644 --- a/ru-ru/jquery-ru.html.markdown +++ b/ru-ru/jquery-ru.html.markdown @@ -43,7 +43,7 @@ function onAction() { } $('#btn').click(onAction); // Обработчик события сработает при клике -// Другие распространенные события: +// Другие распространённые события: $('#btn').dblclick(onAction); // Двойной клик $('#btn').hover(onAction); // Наведение курсора $('#btn').focus(onAction); // Фокус @@ -99,4 +99,28 @@ tables.fadeTo(2000, 0.1, myFunction); // Прозрачность меняетс // Метод 'animate' позволяет делать более продвинутую анимацию tables.animate({"margin-top": "+=50", height: "100px"}, 500, myFunction); + +/////////////////////////////////// +// 3. Манипуляции + +// Манипуляции похожи на эффекты, но позволяют добиться большего +$('div').addClass('taming-slim-20'); // Добавить класс 'taming-slim-20' ко всем

элементам + +// Часто встречающиеся методы манипуляций +$('p').append('Hello world'); // Добавить в конец элемента +$('p').attr('class'); // Получить атрибут +$('p').attr('class', 'content'); // Установить атрибут +$('p').hasClass('taming-slim-20'); // Проверить наличие класса +$('p').height(); // Получить или установить высоту элемента + +// Во многих этих методах получение информации вернёт значение ТОЛЬКО для первого элемента +$('p').height(); // Получить высоту только для первого

элемента + +// Метод 'each' позволяет пройтись по всем выбранным элементам +var heights = []; +$('p').each(function() { + heights.push($(this).height()); // Добавить высоту всех

элементов в массив +}); + + ``` From d9d04d38d85133243521e5b61383daf252ed462a Mon Sep 17 00:00:00 2001 From: Ev Bogdanov Date: Fri, 31 Aug 2018 01:54:17 +0300 Subject: [PATCH 6/7] A better explanation of the Manipulation topic --- ru-ru/jquery-ru.html.markdown | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/ru-ru/jquery-ru.html.markdown b/ru-ru/jquery-ru.html.markdown index 54c91bf5..d6661836 100644 --- a/ru-ru/jquery-ru.html.markdown +++ b/ru-ru/jquery-ru.html.markdown @@ -113,10 +113,11 @@ $('p').attr('class', 'content'); // Установить атрибут $('p').hasClass('taming-slim-20'); // Проверить наличие класса $('p').height(); // Получить или установить высоту элемента -// Во многих этих методах получение информации вернёт значение ТОЛЬКО для первого элемента -$('p').height(); // Получить высоту только для первого

элемента -// Метод 'each' позволяет пройтись по всем выбранным элементам +// Во многих методах вам доступна информация ТОЛЬКО о первом элементе из выбранных +$('p').height(); // Вы получите высоту только для первого

элемента + +// Метод 'each' позволяет это исправить и пройтись по всем выбранным вами элементам var heights = []; $('p').each(function() { heights.push($(this).height()); // Добавить высоту всех

элементов в массив From b622673dae3441f1260401fbb44d90e0e4aea6a2 Mon Sep 17 00:00:00 2001 From: Ev Bogdanov Date: Fri, 31 Aug 2018 02:08:20 +0300 Subject: [PATCH 7/7] Slightly improve text for JS learning --- ru-ru/jquery-ru.html.markdown | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ru-ru/jquery-ru.html.markdown b/ru-ru/jquery-ru.html.markdown index d6661836..471b4e24 100644 --- a/ru-ru/jquery-ru.html.markdown +++ b/ru-ru/jquery-ru.html.markdown @@ -11,7 +11,7 @@ filename: jquery-ru.js jQuery — это библиотека JavaScript, которая помогает "делать больше, писать меньше". Она выполняет множество типичных JavaScript-задач, упрощая написание кода. jQuery используется крупными компаниями и разработчиками со всего мира. Она упрощает и ускоряет работу с AJAX, с событиями, с DOM и со многим другим. -Поскольку jQuery является библиотекой JavaScript, сначала вам следует [изучить JavaScript](https://learnxinyminutes.com/docs/ru-ru/javascript-ru/). +Поскольку jQuery является библиотекой JavaScript, вам следует начать с [изучения JavaScript](https://learnxinyminutes.com/docs/ru-ru/javascript-ru/). ```js