diff options
Diffstat (limited to 'ru-ru')
| -rw-r--r-- | ru-ru/jquery-ru.html.markdown | 127 | ||||
| -rw-r--r-- | ru-ru/markdown-ru.html.markdown | 55 |
2 files changed, 155 insertions, 27 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> элементов в массив +}); + + +``` diff --git a/ru-ru/markdown-ru.html.markdown b/ru-ru/markdown-ru.html.markdown index ff7a0cc3..579a9a20 100644 --- a/ru-ru/markdown-ru.html.markdown +++ b/ru-ru/markdown-ru.html.markdown @@ -36,13 +36,14 @@ lang: ru-ru Markdown является надмножеством HTML, поэтому любой HTML-файл является корректным документом Markdown. - ```markdown + ```md <!-- Это позволяет использовать напрямую любые элементы HTML-разметки, такие, например, как этот комментарий. Встроенные в документ HTML-элементы не затрагиваются парсером Markdown и попадают в итоговый HTML без изменений. Однако следует понимать, что эта же особенность не позволяет использовать разметку Markdown внутри HTML-элементов --> +``` ## Заголовки @@ -50,7 +51,7 @@ HTML-элементы от <h1> до <h6> размечаются очень пр текст, который должен стать заголовком, предваряется соответствующим количеством символов "#": -```markdown +```md # Это заголовок h1 ## Это заголовок h2 ### Это заголовок h3 @@ -60,7 +61,7 @@ HTML-элементы от <h1> до <h6> размечаются очень пр ``` Markdown позволяет размечать заголовки <h1> и <h2> ещё одним способом: -```markdown +```md Это заголовок h1 ================ @@ -72,7 +73,7 @@ Markdown позволяет размечать заголовки <h1> и <h2> Текст легко сделать полужирным и/или курсивным: -```markdown +```md *Этот текст будет выведен курсивом.* _Так же, как этот._ @@ -87,7 +88,7 @@ __И этот тоже.__ В Github Flavored Markdown, стандарте, который используется в Github, текст также можно сделать зачёркнутым: -```markdown +```md ~~Зачёркнутый текст.~~ ``` @@ -96,7 +97,7 @@ __И этот тоже.__ Абзацами являются любые строки, следующие друг за другом. Разделяются же абзацы одной или несколькими пустыми строками: -```markdown +```md Это абзац. Я печатаю в абзаце, разве это не прикольно? А тут уже абзац №2. @@ -108,7 +109,7 @@ __И этот тоже.__ Для вставки принудительных переносов можно завершить абзац двумя дополнительными пробелами: -```markdown +```md Эта строка завершается двумя пробелами (выделите, чтобы увидеть!). Над этой строкой есть <br />! @@ -116,7 +117,7 @@ __И этот тоже.__ Цитаты размечаются с помощью символа «>»: -```markdown +```md > Это цитата. В цитатах можно > принудительно переносить строки, вставляя «>» в начало каждой следующей строки. А можно просто оставлять их достаточно длинными, и такие длинные строки будут перенесены автоматически. > Разницы между этими двумя подходами к переносу строк нет, коль скоро @@ -133,7 +134,7 @@ __И этот тоже.__ одного из символов «*», «+» или «-»: (символ должен быть одним и тем же для всех элементов) -```markdown +```md * Список, * Размеченный * Звёздочками @@ -154,7 +155,7 @@ __И этот тоже.__ В нумерованных списках каждая строка начинается с числа и точки вслед за ним: -```markdown +```md 1. Первый элемент 2. Второй элемент 3. Третий элемент @@ -164,7 +165,7 @@ __И этот тоже.__ любое число в начале каждого элемента, и парсер пронумерует элементы сам! Правда, злоупотреблять этим не стоит :) -```markdown +```md 1. Первый элемент 1. Второй элемент 1. Третий элемент @@ -173,7 +174,7 @@ __И этот тоже.__ Списки могут быть вложенными: -```markdown +```md 1. Введение 2. Начало работы 3. Примеры использования @@ -184,7 +185,7 @@ __И этот тоже.__ Можно даже делать списки задач. Блок ниже создаёт HTML-флажки. -```markdown +```md Для отметки флажка используйте «x» - [ ] Первая задача - [ ] Вторая задача @@ -197,7 +198,7 @@ __И этот тоже.__ Фрагменты исходного кода (обычно отмечаемые тегом `<code>`) выделяются просто: каждая строка блока должна иметь отступ в четыре пробела либо в один символ табуляции. -```markdown +```md Это код, причём многострочный ``` @@ -205,7 +206,7 @@ __И этот тоже.__ Вы также можете делать дополнительные отступы, добавляя символы табуляции или по четыре пробела: -```markdown +```md my_array.each do |item| puts item end @@ -215,7 +216,7 @@ __И этот тоже.__ не выделяя код в блок. Для этого фрагменты кода нужно обрамлять символами «`»: -```markdown +```md Ваня даже не знал, что делает функция `go_to()`! ``` @@ -237,7 +238,7 @@ end Разделители (`<hr>`) добавляются вставкой строки из трёх и более (одинаковых) символов «*» или «-», с пробелами или без них: -```markdown +```md *** --- - - - @@ -251,18 +252,18 @@ end текст ссылки, заключив его в квадратные скобки, и сразу после — URL-адрес, заключенный в круглые -```markdown +```md [Ссылка!](http://test.com/) ``` Также для ссылки можно указать всплывающую подсказку (`title`), используя кавычки внутри круглых скобок: -```markdown +```md [Ссылка!](http://test.com/ "Ссылка на Test.com") ``` Относительные пути тоже возможны: -```markdown +```md [Перейти к музыке](/music/). ``` @@ -290,7 +291,7 @@ Markdown также позволяет размечать ссылку в вид Разметка изображений очень похожа на разметку ссылок. Нужно всего лишь добавить перед ссылкой восклицательный знак! -```markdown +```md  ``` Изображения тоже могут быть оформлены, как сноски. @@ -301,20 +302,20 @@ Markdown также позволяет размечать ссылку в вид ## Разное ### Автоссылки -```markdown +```md Ссылка вида <http://testwebsite.com/> эквивалентна [http://testwebsite.com/](http://testwebsite.com/) ``` ### Автоссылки для адресов электронной почты -```markdown +```md <foo@bar.com> ``` ### Экранирование символов -```markdown +```md Я хочу напечатать *текст, заключённый в звёздочки*, но я не хочу, чтобы он был курсивным. Тогда я делаю так: \*Текст, заключённый в звёздочки\* @@ -324,7 +325,7 @@ Markdown также позволяет размечать ссылку в вид В Github Flavored Markdown для представления клавиш на клавиатуре вы можете использовать тег `<kbd>`. -```markdown +```md Ваш компьютер завис? Попробуйте нажать <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Del</kbd> ``` @@ -334,7 +335,7 @@ Markdown также позволяет размечать ссылку в вид да и синтаксис имеют не слишком удобный. Но если очень нужно, размечайте таблицы так: -```markdown +```md | Столбец 1 | Столбец 2 | Столбец 3 | | :----------- | :----------: | -----------: | | Выравнивание | Выравнивание | Выравнивание | @@ -342,7 +343,7 @@ Markdown также позволяет размечать ссылку в вид ``` Или более компактно -```markdown +```md Столбец 1|Столбец 2|Столбец 3 :--|:-:|--: Выглядит|это|страшновато... |