fix(guide): simplify directory structure

This commit is contained in:
Mrugesh Mohapatra
2018-10-16 21:26:13 +05:30
parent f989c28c52
commit da0df12ab7
35752 changed files with 0 additions and 317652 deletions

View File

@@ -0,0 +1,31 @@
---
title: jQuery
localeTitle: JQuery
---
## JQuery
![logo](https://upload.wikimedia.org/wikipedia/en/thumb/9/9e/JQuery_logo.svg/250px-JQuery_logo.svg.png "Логотип jQuery")
jQuery является наиболее широко используемой библиотекой JavaScript и используется в более чем половине всех основных веб-сайтов.
jQuery упрощает использование веб-разработки, предоставляя ряд «вспомогательных» функций. Они помогают разработчикам быстро писать взаимодействия с DOM (Document Object Model) без необходимости вручную записывать как можно больше JavaScript.
jQuery добавляет глобальную переменную со всеми приложенными библиотеками. Соглашение об именах состоит в том, чтобы эта глобальная переменная `$` . набрав `$.` у вас есть все методы jQuery.
## пример
Когда пользователь нажимает кнопку, все
элементы будут скрыты:
```javascript
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
```
#### Больше информации
* [Главная страница jQuery](https://jquery.com/)

View File

@@ -0,0 +1,47 @@
---
title: jQuery Ajax Get Method
localeTitle: Метод jQuery Ajax Get
---
## Метод jQuery Ajax Get
Отправляет асинхронный запрос HTTP GET для загрузки данных с сервера. Его общая форма:
```javascript
jQuery.get( url [, data ] [, success ] [, dataType ] )
```
* `url` : единственный обязательный параметр. Эта строка содержит адрес для отправки запроса. Возвращенные данные будут игнорироваться, если не указан другой параметр.
* `data` : простой объект или строка, отправленная на сервер с запросом.
* `success` : функция обратного вызова выполняется, если запрос завершается успешно. В качестве аргумента требуется вернуть возвращаемые данные. Он также передает текстовый статус ответа.
* `dataType` : тип данных, ожидаемых от сервера. По умолчанию используется Intelligent Guess (xml, json, script, text, html). Если этот параметр предоставлен, также необходимо предоставить обратный вызов успеха.
#### Примеры
Запросите `resource.json` с сервера, отправьте дополнительные данные и проигнорируйте возвращаемый результат: \`\` \`Javascript $ .get ('http://example.com/resource.json', {category: 'client', type: 'premium'});
```
Request `resource.json` from the server, send additional data, and handle the returned response (json format):
```javascript
$.get('http://example.com/resource.json', {category:'client', type:'premium'}, function(response) {
alert("success");
$("#mypar").html(response.amount);
});
```
Вышеприведенный пример также может быть записан как: \`\` \`Javascript $ .get ('http://example.com/resource.json', {category: 'client', type: 'premium'}) .done (function (response) { предупреждение ( "успех"); . $ ( "# Mypar") HTML (response.amount); });
```
### jQuery.ajax()
`$.get( url [, data ] [, success ] [, dataType ] )` is a shorthand Ajax function, equivalent to:
```javascript
$.ajax({
url: url,
data: data,
success: success,
dataType: dataType
});
```
`$.ajax()` предоставляет множество дополнительных опций, все из которых находятся [здесь](http://api.jquery.com/jquery.ajax/) .
#### Дополнительная информация:
Для получения дополнительной информации посетите [официальный сайт jQuery.get](https://api.jquery.com/jquery.get/) .

View File

@@ -0,0 +1,67 @@
---
title: jQuery Ajax Post Method
localeTitle: Метод jQuery Ajax Post
---
## Метод jQuery Ajax Post
Отправляет асинхронный запрос HTTP POST для загрузки данных с сервера. Его общая форма:
```javascript
jQuery.post( url [, data ] [, success ] [, dataType ] )
```
* url: единственный обязательный параметр. Эта строка содержит адрес для отправки запроса. Возвращенные данные будут проигнорированы, если не указан другой параметр
* data: простой объект или строка, которая отправляется на сервер с запросом.
* success: функция обратного вызова, которая выполняется, если запрос successs.it принимает в качестве аргумента возвращаемые данные. Он также передает текстовый статус ответа.
* dataType: тип данных, ожидаемых от сервера. По умолчанию используется Intelligent Guess (xml, json, script, text, html). если этот параметр предоставлен, то также должен быть предоставлен обратный вызов успеха.
#### Примеры
```javascript
$.post('http://example.com/form.php', {category:'client', type:'premium'});
```
запрашивает `form.php` с сервера, отправляет дополнительные данные и игнорирует возвращенный результат
```javascript
$.post('http://example.com/form.php', {category:'client', type:'premium'}, function(response){
alert("success");
$("#mypar").html(response.amount);
});
```
запрашивает `form.php` с сервера, отправляет дополнительные данные и обрабатывает возвращенный ответ (формат json). Этот пример можно записать в таком формате:
```javascript
$.post('http://example.com/form.php', {category:'client', type:'premium'}).done(function(response){
alert("success");
$("#mypar").html(response.amount);
});
```
Следующий пример отправляет форму с использованием Ajax и помещает результаты в div \`\` \`html jQuery.post demo
// Attach a submit handler to the form $( "#searchForm" ).submit(function( event ) { // Stop form from submitting normally event.preventDefault(); // Get some values from elements on the page: var $form = $( this ), term = $form.find( "input\[name='s'\]" ).val(), url = $form.attr( "action" ); // Send the data using post var posting = $.post( url, { s: term } ); // Put the results in a div posting.done(function( data ) { var content = $( data ).find( "#content" ); $( "#result" ).empty().append( content ); }); });
```
The following example use the github api to fetch the list of repositories of a user using jQuery.ajax() and put results in a div
```
HTML
// Attach a submit handler to the form $( "#userForm" ).submit(function( event ) { // Stop form from submitting normally event.preventDefault(); // Get some values from elements on the page: var $form = $( this ), username = $form.find( "input\[name='username'\]" ).val(), url = "https://api.github.com/users/"+username+"/repos"; // Send the data using post var posting = $.post( url, { s: term } ); //Ajax Function to send a get request $.ajax({ type: "GET", url: url, dataType:"jsonp" success: function(response){ //if request if made successfully then the response represent the data $( "#result" ).empty().append( response ); } }); });
```
### jQuery.ajax()
`$.post( url [, data ] [, success ] [, dataType ] )` is a shorthand Ajax function, equivalent to:
```
Javascript $ .ajax ({ тип: «POST», url: url, данные: данные, успех: успех, dataType: dataType }); \`\` \`
`$.ajax()` предоставляет дополнительные опции, которые можно найти [здесь.](http://api.jquery.com/jquery.ajax/)
#### Дополнительная информация:
Для получения дополнительной информации посетите [официальный сайт](https://api.jquery.com/jquery.post/)

View File

@@ -0,0 +1,30 @@
---
title: jQuery Animate
localeTitle: jQuery Анимация
---
## jQuery Анимация
Метод анимации jQuery позволяет легко создавать простые анимации, используя только несколько строк кода. Основная структура следующая:
```javascript
$(".selector").animate(properties, duration, callbackFunction());
```
Для аргумента `properties` вам нужно передать объект javascript, с помощью свойств CSS, которые вы хотите оживить как ключи, и значения, которые вы хотите оживить как значения. В течение `duration` вам нужно ввести количество времени в миллисекундах, которое должна выполнить анимация. Функция `callbackFunction()` выполняется после завершения анимации.
### пример
Простой пример будет выглядеть так:
```javascript
$(".awesome-animation").animate({
opacity: 1,
bottom: += 15
}, 1000, function() {
$(".different-element").hide();
});
```
#### Дополнительная информация:
Для получения дополнительной информации посетите [официальный сайт](http://api.jquery.com/animate/)

View File

@@ -0,0 +1,102 @@
---
title: Click Method
localeTitle: Метод Click
---
# Метод Click
Метод jQuery Click запускает функцию при нажатии элемента. Эта функция известна как «обработчик», потому что она обрабатывает событие click. Функции могут влияют на элемент HTML, привязанный к клику, используя метод jQuery Click, или они могут полностью изменить что-то еще. Наиболее часто используемая форма:
```javascript
$("#clickMe").click(handler)
```
Метод click использует функцию обработчика в качестве аргумента и выполняет его каждый раз, когда `#clickMe` элемент `#clickMe` . Функция обработчика получает параметр, известный как [eventObject,](http://api.jquery.com/Types/#Event) который может быть полезен для управления действием.
#### Примеры
Этот код показывает предупреждение, когда пользователь нажимает кнопку:
```html
<button id="alert">Click Here</button>
```
```javascript
$("#alert").click(function () {
alert("Hi! I'm an alert");
});
```
[jsFiddle](https://jsfiddle.net/pL63cL6m/)
[EventObject](http://api.jquery.com/Types/#Event) имеет некоторые встроенные методы, в том числе `preventDefault()` , который делает именно то, что он говорит, - останавливается событие по умолчанию для элемента. Здесь мы помещаем якорный тег в качестве ссылки:
```html
<a id="myLink" href="www.google.com">Link to Google</a>
```
```javascript
$("#myLink").click(function (event) {
event.preventDefault();
});
```
[jsFiddle](https://jsfiddle.net/dy457gbh/)
#### Дополнительные способы воспроизведения с помощью метода click
Функция обработчика также может принимать дополнительные данные в виде объекта:
```javascript
jqueryElement.click(usefulInfo, handler)
```
Данные могут быть любого типа.
```javascript
$("element").click({firstWord: "Hello", secondWord: "World"}, function(event){
alert(event.data.firstWord);
alert(event.data.secondWord);
});
```
Вызов метода click без функции обработчика запускает событие click:
```javascript
$("#alert").click(function () {
alert("Hi! I'm an alert");
});
$("#alert").click();
```
Теперь, всякий раз, когда страница загружается, событие click будет срабатывать, когда мы вводим или перезагружаем страницу и показываем назначенное предупреждение.
Также вы должны использовать .on ('click', ...) над .click (...), потому что первый может использовать меньше памяти и работать для динамически добавленных элементов.
[jsFiddle](https://jsfiddle.net/gspk6gxt/)
#### Распространенные ошибки
Событие click привязывается только к элементам, находящимся в настоящее время на DOM во время привязки, поэтому любые добавленные впоследствии элементы не будут связаны. Чтобы связать все элементов в DOM, даже если они будут созданы позднее, используйте метод `.on()` .
Например, этот пример метода click:
```javascript
$( "element" ).click(function() {
alert("I've been clicked!");
});
```
Можно изменить это на примере метода:
```javascript
$( document ).on("click", "element", function() {
alert("I've been clicked!");
});
```
#### Дополнительная информация:
Для получения дополнительной информации посетите [официальный сайт](https://api.jquery.com/click/#click) .

View File

@@ -0,0 +1,58 @@
---
title: CSS Method
localeTitle: Метод CSS
---
## Метод CSS
Метод jQuery `.css()` получает значение свойства вычисленного стиля для первого элемента в наборе согласованных элементов или задает один или несколько свойств CSS для каждого согласованного элемента.
### Получение
Чтобы вернуть значение указанного свойства CSS, используйте следующий синтаксис:
```js
$(selector).css(propertyName);
```
Например:
```js
$('#element').css('background');
```
Примечание. Здесь мы можем использовать любой селектор css, например: элемент (селектор HTML-тегов), .element (селектор классов), #element (селектор ID).
### настройка
Чтобы установить указанное свойство CSS, используйте следующий синтаксис:
```js
$(selector).css(propertyName,value);
```
Например:
```js
$('#element').css('background','red');
```
Чтобы установить несколько свойств CSS, вам нужно использовать синтаксис литерала объекта следующим образом:
```js
$('#element').css({
'background': 'gray',
'color': 'white'
});
```
Если вы хотите изменить свойство, помеченное более чем одним словом, обратитесь к этому примеру:
Чтобы изменить `background-color` элемента
```js
$('#element').css('background-color', 'gray');
```
#### Дополнительная информация:
Документация: [api.jquery](http://api.jquery.com/css/)

View File

@@ -0,0 +1,56 @@
---
title: jQuery Effects Hide Method
localeTitle: jQuery Эффекты Скрыть метод
---
## Метод jQuery Hide
В своей простейшей форме **.hide ()** немедленно скрывает согласованный элемент без анимации. Например:
```javascript
$(".myclass").hide()
```
скроет все элементы, класс которых является классом _myclass_ . Можно использовать любой селектор jQuery.
### .hide () как метод анимации
Благодаря своим возможностям, **.hide ()** может анимировать ширину, высоту и непрозрачность согласованных элементов одновременно.
* Продолжительность может быть задана в миллисекундах, или с использованием литералов медленной (600 мс) и быстрой (200 мс). например:
```javascript
$("#myobject").hide(800)
```
* Можно указать функцию, которая будет вызываться после завершения анимации, по одному на каждый согласованный элемент. Этот обратный вызов в основном полезен для объединения разных анимаций. Например
```javascript
$("p").hide( "slow", function() {
$(".titles").hide("fast");
alert("No more text!");
});
```
* More options exist, please refer to the official website for further details.
### .toggle() method
To show / hide elements you can use ```toggle()``` method. If element is hidden ```toggle()``` will show it and vice versa.
Usage:
```
Javascript $ ( "MyClass"). Переключения () \`\` \`
### .slideDown ()
Этот метод анимирует высоту согласованных элементов. Это приводит к тому, что нижние части страницы скользят вниз, что позволяет выявить предметы. Применение:
```javascript
$(".myclass").slideDown(); //will expand the element with the identifier myclass for 400 ms.
$(".myclass").slideDown(1000); //will expand the element with the identifier myclass for 1000 ms.
$(".myclass").slideDown("slow"); //will expand the element with the identifier myclass for 600 ms.
$(".myclass").slideDown("fast"); //will expand the element with the identifier myclass for 200 ms.
```
#### Дополнительная информация:
Метод JQuery hide () на [официальном сайте](http://api.jquery.com/hide/)

View File

@@ -0,0 +1,45 @@
---
title: jQuery Effects Show Method
localeTitle: Метод отображения эффектов jQuery
---
## Метод отображения эффектов jQuery
В своей простейшей форме **.show ()** немедленно отображает согласованный элемент без анимации. Например:
```javascript
$(".myclass").show();
```
покажет все элементы, класс которых является классом _myclass_ . Можно использовать любой селектор jQuery.
Однако этот метод не переопределяет `!important` в стиле CSS, например `display: none !important` .
### .show () как метод анимации
Благодаря своим параметрам **.show ()** может анимировать ширину, высоту и непрозрачность согласованных элементов одновременно.
* Продолжительность может быть задана в миллисекундах, или с использованием литералов медленной (600 мс) и быстрой (200 мс). например:
```javascript
$("#myobject").show("slow");
```
* Можно указать функцию, которая будет вызываться после завершения анимации, по одному на каждый согласованный элемент. например
```javascript
$("#title").show( "slow", function() {
$("p").show("fast");
});
```
* More options exist, please refer to the official website for further details.
### .slideDown() method
This method animates the height of the matched elements. This causes lower parts of the page to slide down, making way for the revealed items.
Usage:
```
Javascript $ ( "MyClass"). SlideDown (). // будет расширять элемент с идентификатором myclass за 400 мс. $ ( "MyClass") slideDown (1000). // будет расширять элемент с идентификатором myclass за 1000 мс. $ ( "MyClass "). SlideDown (" медленные"). // будет расширять элемент с идентификатором myclass за 600 мс. $ ( "MyClass ") slideDown (" быстрый"). // будет расширять элемент с идентификатором myclass за 200 мс. \`\` \`
#### Дополнительная информация:
Метод JQuery Show () на [официальном сайте](http://api.jquery.com/show/)

View File

@@ -0,0 +1,11 @@
---
title: jquery Event Method
localeTitle: Метод события jquery
---
## Метод события jquery
Эти методы используются для регистрации поведения, которое вступит в силу, когда пользователь взаимодействует с браузером, и для дальнейшего управления этими зарегистрированными поведением.
#### Дополнительная информация:
https://api.jquery.com/category/events/

View File

@@ -0,0 +1,16 @@
---
title: jQuery Hover Method
localeTitle: Метод JQuery Hover
---
# Метод JQuery Hover
Метод hquery hover представляет собой комбинацию событий `mouseenter` и `mouseleave` . Синтаксис таков:
```
$(selector).hover(inFunction, outFunction);
```
Первая функция, inFunction, будет выполняться при `mouseenter` события `mouseenter` . Вторая функция является необязательной, но будет работать, когда `mouseleave` событие `mouseleave` . Если указана только одна функция, другая функция будет выполняться как для событий `mouseenter` и для `mouseleave` .
### Больше информации
Более подробную информацию можно найти [здесь](https://www.w3schools.com/jquery/event_hover.asp) .

View File

@@ -0,0 +1,40 @@
---
title: HTML Method
localeTitle: Метод HTML
---
# Метод HTML
Метод JQuery `.html()` получает содержимое элемента HTML или задает содержимое элемента HTML.
## Получение
Чтобы вернуть содержимое элемента HTML, используйте этот синтаксис:
```javascript
$('selector').html();
```
Например:
```javascript
$('#example').html();
```
## настройка
Чтобы установить содержимое элемента HTML, используйте этот синтаксис:
```javascript
$('selector').html(content);
```
Например:
```javascript
$('p').html('Hello World!');
```
Это установит содержимое всех элементов `<p>` в Hello World!
### Больше информации

View File

@@ -0,0 +1,19 @@
---
title: Mousedown Method
localeTitle: Метод Mousedown
---
# Метод Mousedown
Событие mousedown происходит при нажатии левой кнопки мыши. Чтобы вызвать событие mousedown для выбранного элемента, используйте этот синтаксис: `$(selector).mousedown();`
Однако большую часть времени метод mousedown используется с функцией, связанной с событием mousedown. Вот синтаксис: `$(selector).mousedown(function);` Например:
```
$(#example).mousedown(function(){
alert("Example was clicked");
});
```
Этот код сделает предупреждение страницы «Пример был нажат» при нажатии кнопки #example.
### Больше информации

View File

@@ -0,0 +1,136 @@
---
title: jQuery Selectors
localeTitle: Селекторы jQuery
---
## Селекторы jQuery
jQuery использует селектор стиля CSS для выбора частей или элементов HTML-страницы. Затем он позволяет вам что-то делать с элементами, использующими методы или функции jQuery.
Чтобы использовать один из этих селекторов, введите знак доллара и круглые скобки после него: `$()` . Это сокращает функцию `jQuery()` . Внутри круглых скобок добавьте элемент, который вы хотите выбрать. Вы можете использовать одиночные или двойные кавычки. После этого добавьте точку после круглых скобок и метод, который вы хотите использовать.
В jQuery селектора классов и идентификаторов похожи на классы в CSS.
Ниже приведен пример метода jQuery, который выбирает все элементы абзаца и добавляет к ним класс «selected»:
```javascript
<p>This is a paragraph selected by a jQuery method.</p>
<p>This is also a paragraph selected by a jQuery method.</p>
$("p").addClass("selected");
```
В jQuery селектора классов и идентификаторов те же, что и в CSS. Если вы хотите выбрать элементы с определенным классом, используйте точку ( `.` ) И имя класса. Если вы хотите выбрать элементы с определенным идентификатором, используйте символ хеша ( `#` ) и имя идентификатора. Обратите внимание, что HTML не чувствителен к регистру, поэтому лучше придерживаться разметки HTML и CSS-селекторов в нижнем регистре.
Выбор по классам:
```javascript
<p class="p-with-class">Paragraph with a class.</p>
$(".p-with-class").css("color", "blue"); // colors the text blue
```
Выбор по ID:
```javascript
<li id="li-with-id">List item with an ID.</li>
$("#li-with-id").replaceWith("<p>Socks</p>");
```
Вы также можете выбрать определенные элементы вместе со своими классами и идентификаторами:
### Выбор по классам
Если вы хотите выбрать элементы с определенным классом, используйте точку (.) И имя класса.
```html
<p class="pWithClass">Paragraph with a class.</p>
```
```javascript
$(".pWithClass").css("color", "blue"); // colors the text blue
```
Вы также можете использовать селектор классов в сочетании с именем тега, чтобы быть более конкретным.
```html
<ul class="wishList">My Wish List</ul>`<br>
```
```javascript
$("ul.wishList").append("<li>New blender</li>");
```
### Выбор по идентификатору
Если вы хотите выбрать элементы с определенным значением идентификатора, используйте символ хеша (#) и имя идентификатора.
```html
<li id="liWithID">List item with an ID.</li>
```
```javascript
$("#liWithID").replaceWith("<p>Socks</p>");
```
Как и в случае с селектором классов, это также можно использовать в сочетании с именем тега.
```html
<h1 id="headline">News Headline</h1>
```
```javascript
$("h1#headline").css("font-size", "2em");
```
### Селекторы, которые действуют как фильтры
Существуют также селекторы, которые действуют как фильтры - они обычно начинаются с двоеточий. Например, `:first` селектор выбирает элемент, который является первым дочерним элементом его родителя. Ниже приведен пример неупорядоченного списка с некоторыми элементами списка. Селектор jQuery под списком выбирает первый элемент `<li>` в списке - элемент списка «Один», а затем использует метод `.css` чтобы превратить текст в зеленый.
```html
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
```
```javascript
$("li:first").css("color", "green");
```
**Примечание.** Не забывайте, что применение CSS в JavaScript не является хорошей практикой. Вы всегда должны указывать свои стили в файлах css.
Другой селектор фильтрации `:contains(text)` , выбирает элементы с определенным текстом. Поместите текст, который вы хотите совместить в круглых скобках. Вот пример с двумя параграфами. Селектор jQuery берет слово «Moto» и меняет цвет на желтый.
```html
<p>Hello</p>
<p>World</p>
```
```javascript
$("p:contains('World')").css("color", "yellow");
```
Аналогично, `:last` селектор выбирает элемент, который является последним дочерним элементом его родителя. В селекторе JQuery ниже выбирается последний элемент `<li>` в списке - элемент списка «Три», а затем используется метод `.css` чтобы повернуть текст в желтый цвет.
`$("li:last").css("color", "yellow");`
**Примечание.** В селекторе jQuery `World` находится в одинарных кавычках, потому что он уже находится внутри пары двойных кавычек. Всегда используйте одиночные кавычки внутри двойных кавычек, чтобы избежать непреднамеренного окончания строки.
**Несколько селекторов** В jQuery вы можете использовать несколько селекторов для применения одних и тех же изменений более чем к одному элементу, используя одну строку кода. Вы делаете это, разделяя различные идентификаторы запятой. Например, если вы хотите установить цвет фона трех элементов с идентификаторами cat, dog и rat соответственно красным, просто выполните:
```
$("#cat,#dog,#rat").css("background-color","red");
```
Это лишь некоторые из селекторов, доступных для использования в jQuery. Дополнительную информацию см. В разделе «Дополнительная информация» на веб-сайте jQuery.
#### Дополнительная информация:
* [Полный список селекторов jQuery](http://api.jquery.com/category/selectors/)