JQuery

slick – слайдер (плагин) https://kenwheeler.github.io/slick/

`https://html5book.ru/vvedenie-v-jquery/`
`https://easings.net/uk – смягчение анимации jquery`
`https://devionity.com/uk/courses/dive-into-ajax/jquery-ajax-methods – ajax`
`http://jquery.page2page.ru/index.php5`

``
`https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js`
`https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js`

`СПРАВОЧНИК:`
`http://jquery.page2page.ru/index.php5/%D0%97%D0%B0%D0%B3%D0%BB%D0%B0%D0%B2%D0%BD%D0%B0%D1%8F_%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D0%B0`

`jQuery(); // Главная функция для использования всех возможностей jQuery.`
`$(); // Псевдоним функции jQuery() с тем же набором функционала.`

`jQuery(document).ready(function() {`
`…`
`});`
`или`
`$(function(){`

`});`

`$(“li”).css(“color”, “red”);`
`$(“*”).css({`
`“color”: “red”,`
`“font-style”: “italic”,`
`“font-weight”: “bold”,`
`“position”: “relative”`
`});`

`$(“#output”).text(`На странице ${$(“li”).length} элементов li`);`

`$(“p, ul”).css(“color”, “red”); – все эл-ты p и ul`

`$(“p”).add(“ul”).css(“color”, “red”).end().css(“font-size”, “40px”) -———————————- ??????`
`$(“div p”).css(“color”, “red”); – Выбор всех параграфов, вложенным в тег “div”.`
`$(“p + div”).css(“color”, “red”); – Выбор всех элементов “div”, которым непосредственно предшествует элемент “p” на том же уровне вложенности.`
`$(“div > span”).css(“color”, “red”); – Выбор всех элементов “span”, являющимися прямыми потомками элементов “div”.`
`$(“div:has(li)”).css(“background”, “red”); – Выбор всех элементов с именем тега div, имеющим хотя бы один вложенный элемент с именем тега ul.`
`$(“p.red”).css(“color”, “red”); – Выбор всех элементов “p” с именем класса “red”.`
`$(“#red”).css(“color”, “red”); – Выбор всех элементов “p” с идентификатором “red”.`
`$(“span ~ p”).css(“color”, “red”); – Выбор всех элементов “p”, которым предшествует элемент “span” на том же уровне вложенности`
`$(“a[target]”).css(“color”, “red”); – Выбор всех элементов “a”, с атрибутом “target”, имеющим любое значение`
`$(“input[type=text]”).val(“admin”); – Метод val() – метод, который позволяет получить значение атрибута “value” первого элемента в наборе соответствующих селектору элементов или установить новое значение (переданное в качестве аргумента) для всех елементов, подходящих под выборку.`
`$(“a[href^=‘https://’]”).css(“color”, “red”); // Выбор всех элементов “a”, с атрибутом “href”, который начинается c “http://”`
`$(“a[href$=‘.com’]”).css(“color”, “blue”); // Выбор всех элементов “a”, с атрибутом “href”, который заканчивается на “.com”`
`$(“a[href*=‘html’]”).css(“color”, “green”); // Выбор всех элементов “a”, с атрибутом “href”, который содержит “html”`

`$(“p:odd”).css(“background-color”, “red”); – выбор всех нечетных по значению элементов`
`$(“p:even”).css(“background-color”, “red”); – выбор всех четных по значению элементов`
`$(“li:first”).css(“color”, “blue”);`
`$(“li:last”).css(“color”, “red”);`
`$(“li:first-child”).css(“color”, “blue”); – выбор первого дочернего элемента`
`$(“li:last-child”).css(“color”, “red”);`
`$(“div p:only-child”).css(“color”, “blue”); – выбор единственных дочерних элементов`
`:nth-child(n) – Выбирает n-ый дочерний элемент`
`:nth-child(even) – Выбирает все четные дочерние элементы`
`:nth-child(odd) – Выбирает все нечетные дочерние элементы`
`:nth-child(an+b) – В круглых скобках выражение, где a и b целые числа, а n — счетчик, который автоматически принимает значение 0,1,2…`
`:eq(индекс) – выбор элемента по индексу.`
`// :gt(индекс) – все элементы, индекс которых больше указаного.`
`// :lt(индекс) – все элементы, индекс которых меньше указаного.`
`:not(n) – выберет все элементы из массива выборки кроме тех, которые соответствуют “n”.`
`:header – получение всех заголовков.`

`$(“:animated”) – возвращает элементы, в которых происходит анимация.`
`// метод hide(n) – скрывает выбранные элементы за n секунд.`

`$(“p:contains(‘ECMAScript’)”).css(“background-color”, “red”); – фильтр, который выбирает все элементы, в которых встречается указанный текст.`
`:empty – выбирает все элементы в которых отсутствует содержимое`
`$(“div:has(img)”).css(“background-color”, “red”); – фильтр выбирает все элементы, которые содержат указанный в параметрах элемент`

`$(“E[AttrName~=‘value’]”); – выбор всех элементов E с атрибутом AttrName содержащим value в списке значений, разделенных пробелом`
`//$(“img[alt~=‘new’]”).css(“border”, “4px solid #005cf2”);`
`$(“img[alt|=‘new’]”).css(“border”, “4px solid #005cf2”);`

`$(“E[AttrName~=‘value’]”); – выбор всех элементов E с атрибутом AttrName содержащим value в списке значений, разделенных пробелом`
`$(“img[alt~=‘new’]”).css(“border”, “4px solid #005cf2”);`
`$(“img[alt|=‘new’]”).css(“border”, “4px solid #005cf2”);`

`$(“E[AttrName!=‘value’]”); – выбор всех элементов E с атрибутом AttrName не равного value`
`$(“a[target=_blank]”).css(“background-color”, “#9bff70”);`
`$(“a[target!=_blank]”).attr(“title”, “hello”);`

`:button – фильтр, который выбирает все кнопки на странице.`
`:checkbox – фильтр для выбора всех элементов “checkbox”.`
`:checked фильтр выбирает только отмеченные флажки или переключатели`
`:disabled фильтр выбирает только элементы форм, находящиеся в неактивном состоянии`
`:enabled – фильтр выбирает только элементы форм, находящиеся в активном состоянии`
`:file – выбирает все элементы типа “file”`

`———————————————————————————————————————————-`
`http://jquery.page2page.ru/index.php5/%D0%AD%D1%84%D1%84%D0%B5%D0%BA%D1%82%D1%8B`
`———————————————————————————————————————————-`
`Прекращение текущей анимации`

`.stop()`
`Останавливает выполнение текущей анимации. Метод имеет один вариант использования:`

`.stop([clearQueue], [jumpToEnd]):jQueryv:1.2`
`Останавливает выполнение текущей анимации. После остановки анимации, следующая в очереди будет запущена автоматически, конечно, если очередь не пуста. Если необходимо остановить всю очередь, то необходимо указать true в параметре clearQueue.`

`По умолчанию, элемент останется в том положении, в котором он находился в момент вызова .stop(), а обработчик завершения анимации вызван не будет. Однако, если указать в параметре jumpToEnd значение true, то после остановки анимации, элемент примет состояние, которое он должен был принять по ее завершению. Кроме этого, будет вызван обработчик окончания анимации, конечно, если он был задан.`

`.stop([queue], [clearQueue], [jumpToEnd]):jQueryv:1.7`
`Эта версия метода отличается от предыдущей тем, что здесь, в первом параметре queue можно уточнить имя очереди, в которой необходимо остановить выполнение анимации.`

`До jQuery-1.7, переключаемые анимации, такие как .slideToggle() или .fadeToggle(), срабатывали неправильно, если несколько анимаций были запущены последовательно и предыдущая была прервана методом .stop(). В версии 1.7 это недостаток был исправлен и теперь перед запуском анимации начальные значения запоминаются, а при преждевременном прерывании переключаемой анимации происходит сброс значений.`

`Примеры`
`Рассмотрим простейший пример:`

`$(‘#foo’).animate({left:‘+=200’}, 2000); // перемещение элемента на 200 пикселей вправо, за 2 секунды`
`$(‘#foo’).slideUp(); // сворачивание элемента`
`$(‘#foo’).stop();`
`произойдет следующее: в начале, элементу с идентификатором foo будет задано два анимационных эффекта, пока первый из них будет выполняться, второй будет помещен в очередь. Но поскольку, к элементу foo будет также применен метод stop(), элемент прекратит движение вправо, и начнет следующую анимацию – сворачивание.`

`$(‘#foo’).animate({left:‘+=200’}, 2000); // перемещение элемента на 200 пикселей вправо, за 2 секунды`
`$(‘#foo’).slideUp(); // сворачивание элемента`
`$(‘#foo’).stop(true);`
`в данном случае, поскольку в методе stop, задан параметр clearQueue со значением true, кроме остановки текущей анимации, произойдет очищение очереди, поэтому сворачивания элемента не произойдет.`

`$(‘#foo’).animate({left:‘+=200’}, 2000); // перемещение элемента на 200 пикселей вправо, за 2 секунды`
`$(‘#foo’).slideUp(); // сворачивание элемента`
`$(‘#foo’).stop(true, true);`
`и наконец, вызов метода stop с параметром jumpToEnd равным true, приведет к тому, что элемент с идентификатором foo прекратит плавное движение вправо, и просто будет мгновенно перемещен в конечную точку — на 200 пикселей правее первоначального положения. А поскольку и clearQueue установлен как true, вторая анимация не запустится.`

`Управление анимацией`
`.animate()`
`Выполняет анимацию, которая была создана пользователем.`
`.queue()`
`Предоставляет/изменяет (в зависимости от параметров) очередь функций.`
`.clearQueue()`
`Очищает очередь функций.`
`.dequeue()`
`Начинает выполнение следующей функции в очереди.`
`.stop()`
`Останавливает выполнение текущей анимации.`
`.delay()`
`Приостанавливает выполнение следующих анимаций на заданное время.`
`.toggle()`
`Поочередно выполняет вызов одной из нескольких заданных функций.`
`jQuery.fx.interval`
`Содержит временной промежуток между кадрами анимации.`
`jQuery.fx.off`
`Отменяет выполнение всех анимаций.`
`Стандартные анимации`
`.hide()`
`.show()`
`Скрывает/показывает элементы на странице (за счет плавного изменения его размера и прозрачности).`
`.slideUp()`
`.slideDown()`
`Разворачивает/сворачивает элементы на странице (за счет плавного изменения высоты элементов).`
`.slideToggle()`
`Поочередно разворачивает/сворачивает элементы на странице, как это делают .slideUp() и .slideDown().`
`.fadeIn()`
`.fadeOut()`
`Скрывает/показывает элементы на странице за счет плавного изменения прозрачности.`
`.fadeTo()`
`Плавно изменяет прозрачность элементов.`
`.fadeToggle()`
`Поочередно скрывает/показывает элементы на странице, как это делают .fadeIn() и .fadeOut().`

`<!DOCTYPE html>`
``
`

`
`Bubbles`
``
``
``

``
`

`

``
``