Jquery — css() method

Simple usage

Child selects are chained to parent select. All selects must have an id attribute. Child select options must have class names which match option values of parent select. When user selects something in parent select the options in child select are updated. Options which have matching classname with parents currently selected option will stay visible. Others are hidden.

First you must include jQuery or Zepto and Chained in your code:

script src="jquery.js">script>
script src="jquery.chained.js">script>

If you are using Zepto you must also include the optional selector module.

script src="zepto.js">script>
script src="zepto-selector.js">script>
script src="jquery.chained.js">script>

Then lets assume you have the following HTML code:

select id="mark" name="mark">
    option value="">--option>
    option value="bmw">BMWoption>
    option value="audi">Audioption>
select>
select id="series" name="series">
    option value="">--option>
    option value="series-3" data-chained="bmw">3 seriesoption>
    option value="series-5" data-chained="bmw">5 seriesoption>
    option value="series-6" data-chained="bmw">6 seriesoption>
    option value="a3" data-chained="audi">A3option>
    option value="a4" data-chained="audi">A4option>
    option value="a5" data-chained="audi">A5option>
select>

You can now chain the series to mark. There are two different ways to do it. Choose yourself if you prefer more english like or shorter version. I prefer the shorter version.

$("#series").chained("#mark"); /* or $("#series").chainedTo("#mark");

Пример использования

c http-equiv="Content-Type" content="text/html;charset=UTF-8">lass="jExample">
Использование jQuery методов .slideDown() и .slideUp() (без параметров)		
		
		
	
	
		class = "hide">Скрыть
		class = "show">Отобразить

В этом примере с использованием jQuery методов .slideUp() и .slideDown() мы при нажатии на определенную кнопку плавно отображаем, или скрываем скользящим движением выбранные элементы в документе.

Результат нашего примера:


Пример использования jQuery методов .slideDown() и .slideUp() (без параметров).

Рассмотрим следующий пример в котором зададим методам .slideUp() и .slideDown() различные значения продолжительности анимации:

Использование jQuery методов .slideUp() и .slideDown() (различная скорость анимации)			
		
		
	
	
		class = "hide">Скрыть
		class = "show">Отобразить

В этом примере с использованием jQuery методов .slideUp() и .slideDown() мы при нажатии на определенную кнопку плавно скрываем, либо отображаем все элементы в документе. При этом первый элемент плавно скрывается, или отображается за 600 миллисекунд (ключевое слово ‘slow’), второй элемент за 2000 миллисекунд, а третитй за 200 миллисекунд (ключевое слово ‘fast’).

Результат нашего примера:


Пример использования jQuery методов .slideDown() и .slideUp() (различная скорость анимации).

Рассмотрим следующий пример в котором зададим методам .slideUp() и .slideDown() не только продолжительность анимации, но и укажем скорость анимации и функцию, которая будет выполнена после завершения анимации:

Использование jQuery методов .slideUp() и .slideDown() (с callback функцией)
		
		
	
	
		class = "hide">Скрыть
		class = "show">Отобразить
		
		
		
		

class =

«status»>

В этом примере с использованием jQuery методов .slideUp() и .slideDown() мы при нажатии на определенную кнопку скрываем, либо отображаем все элементы в документе. При этом мы указали для наших методов продолжительность анимации равную пол секунды (500 миллисекунд), эффект анимации происходит с одинаковой скоростью от начала до конца (linear) и функцию, которая после завершения анимации находит элемент с классом status и добавляет текстовую информацию (jQuery метод .text()).

Результат нашего примера:


Пример использования jQuery методов .slideDown() и .slideUp() (с callback функцией).

Рассмотрим следующий пример в котором передадим в качестве параметра методов .slideUp() и .slideDown() объект, содержащий различные опции, которые будут контролировать анимацию:

Использование jQuery методов .slideUp() и .slideDown() (объект с опциями в качестве параметра)
		
		
	
	
		class = "hide">Скрыть
		class = "show">Отобразить
		
		
		
		

class =

«status»>

В этом примере с использованием jQuery методов .slideUp() и .slideDown() мы при нажатии на определенную кнопку плавно скрываем, либо отображаем все элементы в документе. При этом мы в качестве параметров методов передаем объект содержащий следующие параметры:

  • продолжительность анимации равную 800 миллисекунд (duration: 800)
  • эффект анимации происходит с одинаковой скоростью от начала до конца (easing: linear)
  • функция, которая после завершения анимации находит элемент с классом status и добавляет текстовую информацию (complete: function).
  • анимация не размещается в очереди эффектов (queue: false).

Результат нашего примера:


Пример использования jQuery методов .slideDown() и .slideUp() (объект с опциями в качестве параметра).jQuery эффекты

×

Кажется, вы используете блокировщик рекламы 🙁

Этот ресурс не является коммерческим проектом и развивается на энтузиазме автора сайта, который посвящает все свое свободное время этому проекту.

Добавьте, пожалуйста, basicweb.ru в исключения блокировщика рекламы, этим вы поможете развитию проекта.

Как отключить?
Поддержать

Дополнительная информация

В большинстве случаев такое событие как «click» происходит сравнительно нечасто, и не заставляет нас задумываться о производительности, так как в этом случае это не является серьезной проблемой. Однако, такие события как «mousemove», или «scroll», могут срабатывать десятки раз в секунду, в этих случаях производительность может значительно снижаться, что может стать для нас большой проблемой.

Производительность может быть увеличена за счет сокращения объема работы, выполняемой в самом обработчике события, кэширования данных, необходимых обработчику, а не постоянного их пересчета, в том числе за счет ограничения скорости количества фактических обновлений страницы с помощью метода setTimeout().

Такие события как «focus» и «blur» по спецификации W3C не всплывают, но в jQuery определены кроссбраузерные события «focusin» и «focusout», которые подлежат всплытию. Когда события «focus», или «blur» используются для присоединения делегированных обработчиков событий, jQuery отображает имена и передает их как «focusin» и «focusout» соответственно. Для обеспечения согласованности и ясности используйте имена типов событий «focusin» и «focusout».

Во всех браузерах события «load», «scroll» и «error» (например, в элементе ) не всплывают. В Internet Explorer 8 и ниже события «paste» и «reset» не всплывают. Такие события не поддерживаются для использования с делегированием, но их можно использовать, когда обработчик событий непосредственно присоединен к элементу, генерирующему это событие.

jQuery события

offsetWidth/Height

Теперь переходим к самому элементу.

Эти два свойства – самые простые. Они содержат «внешнюю» ширину/высоту элемента, то есть его полный размер, включая рамки .

Для нашего элемента:

  • – внешняя ширина блока, её можно получить сложением CSS-ширины (, но её часть на рисунке выше отнимает прокрутка, поэтому ), полей() и рамок ().
  • – внешняя высота блока.

Метрики для невидимых элементов равны нулю.

Координаты и размеры в JavaScript устанавливаются только для видимых элементов.

Для элементов с или находящихся вне документа дерево рендеринга не строится. Для них метрики равны нулю. Кстати, и для таких элементов тоже .

Это даёт нам замечательный способ для проверки, виден ли элемент:

  • Работает, даже если родителю элемента установлено свойство .
  • Работает для всех элементов, кроме , с которым возникают некоторые проблемы в разных браузерах. Обычно, проверяются не , поэтому всё ок.
  • Считает элемент видимым, даже если позиционирован за пределами экрана или имеет свойство .
  • «Схлопнутый» элемент, например пустой без высоты и ширины, будет считаться невидимым.

jQuery синтаксис:

Синтаксис 1.4:
// выбор всех предков
$( selector ).parentsUntil()

// выбор всех предков с определенным селектором (при необходимости с доп. фильтром)
$( selector ).parentsUntil( selector )
$( selector ).parentsUntil( selector, filter )

Синтаксис 1.6:
// выбор всех предков соответствующих определенном элементу DOM или объекту jQuery (при необходимости с доп. фильтром)
$( selector ).parentsUntil( element )
$( selector ).parentsUntil( element, filter )

selector - Selector // необязательный параметр
filter - Selector // необязательный параметр
element - Element DOM или объект jQuery // необязательный параметр

link Downloading jQuery

Compressed and uncompressed copies of jQuery files are available. The uncompressed file is best used during development or debugging; the compressed file saves bandwidth and improves performance in production.
You can also download a sourcemap file for use when debugging with a compressed file.
The map file is not required for users to run jQuery, it just improves the developer’s debugger experience.
As of jQuery 1.11.0/2.1.0 the comment is not included in the compressed file.

To locally download these files, right-click the link and select «Save as…» from the menu.

jQuery

For help when upgrading jQuery, please see the upgrade guide most relevant to your version.
We also recommend using the jQuery Migrate plugin.

You can also use the slim build, which excludes the ajax and effects modules:

offsetParent, offsetLeft/Top

Ситуации, когда эти свойства нужны, можно перечислить по пальцам. Они возникают действительно редко. Как правило, эти свойства используют, потому что не знают средств правильной работы с координатами, о которых мы поговорим позже.

Несмотря на то, что эти свойства нужны реже всего, они – самые «внешние», поэтому начнём с них.

В находится ссылка на родительский элемент в смысле отображения на странице.

Уточним, что имеется в виду.

Когда браузер рисует страницу, то он высчитывает дерево расположения элементов, иначе говоря «дерево геометрии» или «дерево рендеринга», которое содержит всю информацию о размерах.

При этом одни элементы естественным образом рисуются внутри других. Но, к примеру, если у элемента стоит , то его расположение вычисляется уже не относительно непосредственного родителя , а относительно ближайшего (т.е. свойство которого не равно ), или , если такой отсутствует.

Получается, что элемент имеет в дополнение к обычному родителю в DOM – ещё одного «родителя по позиционированию», то есть относительно которого он рисуется. Этот элемент и будет в свойстве .

Свойства задают смещение относительно .

jQuery синтаксис:

Синтаксис 1.8:

deferred.then( doneFilter )
deferred.then( doneFilter, failFilter )
deferred.then( doneFilter, failFilter, progressFilter )

doneFilter - Function
failFilter - Function
progressFilter - Function

Начиная с версии jQuery 1.8 метод .then() возвращает объект Promise, который может фильтровать состояние и значения объекта Deffered с использованием функции. Обратные вызовы выполняются в порядке их добавления, другие методы объекта Promise могут быть добавлены по цепочке, включая дополнительные методы .then().

Обращаю Ваше внимание, что для всех типов аргументов допускается использование значение null, если обратный вызов этого типа не требуется. Например, метод .catch( fn ) является сокращенным вариантом метода .then( null, fn ) и соответствует его вызову

Для установки только одного типа обратного вызова без фильтрации состояния, или значений, Вы можете воспользоваться методами .done() — при изменении состояния объекта Deffered на resolved (успешное выполнение), .fail() — при изменении состояния объекта Deffered на rejected (выполнение отклонено) и .progress() (когда объект Deffered создает уведомления о ходе выполнения).

document.getElementById или просто id

Если у элемента есть атрибут , то мы можем получить его вызовом , где бы он ни находился.

Например:

Также есть глобальная переменная с именем, указанным в :

…Но это только если мы не объявили в JavaScript переменную с таким же именем, иначе она будет иметь приоритет:

Пожалуйста, не используйте такие глобальные переменные для доступа к элементам

Это поведение соответствует , но поддерживается в основном для совместимости, как осколок далёкого прошлого.

Браузер пытается помочь нам, смешивая пространства имён JS и DOM. Это удобно для простых скриптов, которые находятся прямо в HTML, но, вообще говоря, не очень хорошо. Возможны конфликты имён. Кроме того, при чтении JS-кода, не видя HTML, непонятно, откуда берётся переменная.

В этом учебнике мы будем обращаться к элементам по в примерах для краткости, когда очевидно, откуда берётся элемент.

В реальной жизни лучше использовать .

Значение должно быть уникальным

Значение должно быть уникальным. В документе может быть только один элемент с данным .

Если в документе есть несколько элементов с одинаковым значением , то поведение методов поиска непредсказуемо. Браузер может вернуть любой из них случайным образом. Поэтому, пожалуйста, придерживайтесь правила сохранения уникальности .

Только , а не

Метод можно вызвать только для объекта . Он осуществляет поиск по по всему документу.

Changes

11/18/2012 — jQuery Address 1.5

  • Introduces feature detection where possible.
  • Improves event handling.
  • Fixes various issues.
  • Adds a new subtabs sample.

05/04/2011 — jQuery Address 1.4

  • Support for jQuery 1.6.
  • Drops the internal de/encoding magic.
  • Drops the Safari 2 support.
  • Fixes various issues.
  • Updates the Express sample.

02/04/2011 — jQuery Address 1.3.2

  • Support for jQuery 1.5.
  • Issue 48: IE7 «Permission Denied» error.
  • Issue 47: Issues for non-Latin urls and State update to change title on click event.
  • Issue 40: Encoding problem in parameter().
  • Issue 38: Issue when form actions containing query variables.
  • Issue 37: Using live events for form submissions.

11/29/2010 — jQuery Address 1.3.1

  • Issue 26: Values should no longer be only strings.
  • Issue 20: Improves the encoding of special characters.
  • Fixed issue with state value detection.
  • Fixed issue with the global ajaxComplete event.

09/26/2010 — jQuery Address 1.3

  • Support for the HTML5 onpopstate/pushState/replaceState API.
  • Support for tracker function reference.
  • Support for document.domain in IE6/7.
  • Improved value encoding scheme.
  • New State and Express samples.
  • Improved jQuery UI Tabs sample.
  • Improved event cancellation.
  • GA tracker function lookup is performed only against the top window.
  • Fixes an issue with manual address changes in IE7.
  • Removes IE specific code applicable only for local testing.

07/19/2010 — jQuery Address 1.2.2

  • Issue 12: Fixes the opening of tab links in a new browser tab.
  • Issue 11: Fixes the rel attr handling for Ajax loaded links.
  • Issue 10: Cannot turn off Google Analytics page tracking.
  • Fixed lazy loading support.
  • Fixed form submission support in IE.
  • Fixed issue with the href attribute in older versions of IE.
  • Tabs sample improvements.

05/05/2010 — jQuery Address 1.2

  • New queryString, parameter and path setters.
  • New autoUpdate, crawling and wrap options.
  • New generic bind method.
  • New Accordion, Crawling and Form samples.
  • Support for hash fragments as a part of the value.
  • Basic support for forms.
  • Improved onhashchange support.
  • Switched samples to HTML5.
  • Switched to the Closure compiler.
  • JSLint compatibility.
  • Simple test suite.
  • Support for jQuery 1.4.2 and jQuery UI 1.8.

link jQuery Migrate Plugin

We have created the
to simplify the transition from older versions of jQuery. The plugin restores deprecated features and behaviors so that older code will still run properly on newer versions of jQuery. Use the uncompressed development version to diagnose compatibility issues, it will generate warnings on the console that you can use to identify and fix problems. Use the compressed production version to simply fix compatibility issues without generating console warnings.

There are two versions of Migrate. The first will help you update your pre-1.9 jQuery code to jQuery 1.9 up to 3.0. You can get that version here:

The second version helps you update code to run on jQuery 3.0 or higher, once you have used Migrate 1.x and upgraded to jQuery 1.9 or higher:

.closest( selector )Возвращает: jQuery

Описание: Для каждого элемента в наборе, получает первый элемент, который совпадает с селектором при движении вверху по DOM дереву элементов.

  • Строка содержащая выражение селектора для проверки совпадения элементов.

    • selector
      Тип:

      Строка содержащая выражение селектора для проверки совпадения элементов.

    • context
      Тип:

      DOM элемент в рамках которого соответствующий элемент может быть найден.

  • selection
    Тип: jQuery

    Объект jQuery для проверки совпадения элементов.

Учитывая, что объект jQuery представляет из себя набор DOM элементов, метод находит потомков и создает новый jQuery объект из найденных элементов. Методы и аналогичны, тем что делают обход элементов вверху по DOM дереву

Различия между ними весьма тонкие, но имеют важное значение:

Начинает обход с текущего элемента Начинает обход с родительского элемента
Делает обход вверх по DOM дереву, до тех пор пок не найдет совпадения для заданного селектора Делает обход вверх по DOM дереву, до самого верхнего элемента документа, добавляя каждый найденный элемент во временную коллекцию; затем результат фильтруется при помощи селектора если он указан
Результат выполнения — объект jQuery, содержащий ноль или один элемент для каждого элемента в изначальном наборе элементов object, в прямом порядке документа Результат выполнения — объект jQuery, содержащий ноль или больше элементов для каждого элемента в изначальном наборе элементов, в обратном порядке документа
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Предположим мы проводим поиск элементов начиная с элемента A:

1
2
3

Это изменит цвет элемента с классом level-2, так как он первым столкнется при движении вверх по DOM дереву.

Предположим мы ищем элемент :

1
2
3

Это изменит цвет элемента списка A. Метод наинает поиск с элемента для которого вызван перед процессом движения вверх по DOM дереву и останавливается когда элемент списка A соответствует селектору.

Мы можем передать DOM элемент как контекст при помощи которого будет искаться ближайший элемент.

1
2
3
4
5
6
7

Это изменит цвет элемента с классом level-2, потому как первый предок элемента списка и потомок элемента списка II. Это не изменит цвет элемента с классом level-1, поскольку он не является потомком элемента списка II.

jQuery Core — All 1.x Versions

  • jQuery Core 1.12.4 — uncompressed, minified
  • jQuery Core 1.12.3 — uncompressed, minified
  • jQuery Core 1.12.2 — uncompressed, minified
  • jQuery Core 1.12.1 — uncompressed, minified
  • jQuery Core 1.12.0 — uncompressed, minified
  • jQuery Core 1.11.3 — uncompressed, minified
  • jQuery Core 1.11.2 — uncompressed, minified
  • jQuery Core 1.11.1 — uncompressed, minified
  • jQuery Core 1.11.0 — uncompressed, minified
  • jQuery Core 1.10.2 — uncompressed, minified
  • jQuery Core 1.10.1 — uncompressed, minified
  • jQuery Core 1.10.0 — uncompressed, minified
  • jQuery Core 1.9.1 — uncompressed, minified
  • jQuery Core 1.9.0 — uncompressed, minified
  • jQuery Core 1.8.3 — uncompressed, minified
  • jQuery Core 1.8.2 — uncompressed, minified
  • jQuery Core 1.8.1 — uncompressed, minified
  • jQuery Core 1.8.0 — uncompressed, minified
  • jQuery Core 1.7.2 — uncompressed, minified
  • jQuery Core 1.7.1 — uncompressed, minified
  • jQuery Core 1.7.0 — uncompressed, minified
  • jQuery Core 1.7.0 — uncompressed, minified
  • jQuery Core 1.6.4 — uncompressed, minified
  • jQuery Core 1.6.3 — uncompressed, minified
  • jQuery Core 1.6.2 — uncompressed, minified
  • jQuery Core 1.6.1 — uncompressed, minified
  • jQuery Core 1.6.0 — uncompressed, minified
  • jQuery Core 1.5.2 — uncompressed, minified
  • jQuery Core 1.5.1 — uncompressed, minified
  • jQuery Core 1.5.0 — uncompressed, minified
  • jQuery Core 1.4.4 — uncompressed, minified
  • jQuery Core 1.4.3 — uncompressed, minified
  • jQuery Core 1.4.2 — uncompressed, minified
  • jQuery Core 1.4.1 — uncompressed, minified
  • jQuery Core 1.4.0 — uncompressed, minified
  • jQuery Core 1.3.2 — uncompressed, minified, packed
  • jQuery Core 1.3.1 — uncompressed, minified, packed
  • jQuery Core 1.3.0 — uncompressed, minified, packed
  • jQuery Core 1.2.6 — uncompressed, minified, packed
  • jQuery Core 1.2.5 — uncompressed, minified, packed
  • jQuery Core 1.2.4 — uncompressed, minified, packed
  • jQuery Core 1.2.3 — uncompressed, minified, packed
  • jQuery Core 1.2.2 — uncompressed, minified, packed
  • jQuery Core 1.2.1 — uncompressed, minified, packed
  • jQuery Core 1.2.0 — uncompressed, minified, packed
  • jQuery Core 1.1.4 — uncompressed, packed
  • jQuery Core 1.1.3 — uncompressed, packed
  • jQuery Core 1.1.2 — uncompressed, packed
  • jQuery Core 1.1.1 — uncompressed, packed
  • jQuery Core 1.1.0 — uncompressed, packed
  • jQuery Core 1.0.4 — uncompressed, packed
  • jQuery Core 1.0.3 — uncompressed, packed
  • jQuery Core 1.0.2 — uncompressed, packed
  • jQuery Core 1.0.1 — uncompressed, packed
  • jQuery Core 1.0.0 — uncompressed, packed

События мыши

Метод Описание
.click() Привязывает JavaScript обработчик событий «click» (клик левой кнопкой мыши), или запускает это событие на выбранный элемент.
.contextmenu() Привязывает JavaScript обработчик событий «contextmenu» (вызов контекстного меню на элементе — клик правой кнопкой мыши), или запускает это событие на выбранный элемент.
.dblclick() Привязывает JavaScript обработчик событий «dblclick» (двойной клик левой кнопкой мыши), или запускает это событие на выбранный элемент.
.hover() Связывает один или два обработчика событий для элемента, которые будут выполнены, когда указатель мыши находится на элементе и при его отведении.
.mousedown() Привязывает JavaScript обработчик событий «mousedown» (нажатие кнопки мыши на элементе), или запускает это событие на выбранный элемент.
.mouseenter() Привязывает JavaScript обработчик событий «mouseenter» (срабатывает, когда указатель мыши заходит на элемент), или запускает это событие на выбранный элемент.
.mouseleave() Привязывает JavaScript обработчик событий «mouseleave» (срабатывает, когда указатель мыши выходит из элемента), или запускает это событие на выбранный элемент.
.mousemove() Привязывает JavaScript обработчик событий «mousemove» (срабатывает, когда указатель мыши перемещается внутри элемента), или запускает это событие на выбранный элемент.
.mouseout() Привязывает JavaScript обработчик событий «mouseout» (срабатывает, когда указатель мыши покидает элемент), или запускает это событие на выбранный элемент.
.mouseover() Привязывает JavaScript обработчик событий «mouseover» (срабатывает, когда указатель мыши входит в элемент), или запускает это событие на выбранный элемент.
.mouseup() Привязывает JavaScript обработчик событий «mouseup» (срабатывает, когда указатель мыши находится над элементом и кнопка мыши отпущена), или запускает это событие на выбранный элемент.

getElementsBy*

Существуют также другие методы поиска элементов по тегу, классу и так далее.

На данный момент, они скорее исторические, так как более чем эффективен.

Здесь мы рассмотрим их для полноты картины, также вы можете встретить их в старом коде.

  • ищет элементы с данным тегом и возвращает их коллекцию. Передав вместо тега, можно получить всех потомков.
  • возвращает элементы, которые имеют данный CSS-класс.
  • возвращает элементы с заданным атрибутом . Очень редко используется.

Например:

Давайте найдём все в таблице:

Не забываем про букву !

Одна из самых частых ошибок начинающих разработчиков (впрочем, иногда и не только) – это забыть букву . То есть пробовать вызывать метод вместо .

Буква отсутствует в названии метода , так как в данном случае возвращает один элемент. Но вернёт список элементов, поэтому обязательна.

Возвращает коллекцию, а не элемент!

Другая распространённая ошибка – написать:

Попытка присвоить значение коллекции, а не элементам внутри неё, не сработает.

Нужно перебрать коллекцию в цикле или получить элемент по номеру и уже ему присваивать значение, например, так:

Ищем элементы с классом :

Usage with AJAX

Using Remote Version
Using the remote version is similar to what has been explained above. First include jQuery or Zepto and remote version of Chained:

script src="jquery.js">script>
script src="jquery.chained.remote.js">script>

In HTML you only need to provide option tags for the first select. Contents of other selects will be built from JSON returned by AJAX request. AJAX request is done when value of parent select changes.

select id="mark" name="mark">
    option value="">--option>
    option value="bmw">BMWoption>
    option value="audi">Audioption>
select>
select id="series" name="series">
    option value="">--option>
select>
select id="model" name="model">
    option value="">--option>
select>
select id="engine" name="engine">
    option value="">--option>
select>

In code you must use method. Second parameter is URL where the AJAX request is sent.

$("#series").remoteChained({
    parents  "#mark",
    url  "/api/series"
});

$("#model").remoteChained({
    parents  "#series",
    url  "/api/models"
});

$("#engine").remoteChained({
    parents  "#series, #model",
    url  "/api/engines"
});

When change event is triggered on parent select a GET request is sent to the given URL. This request includes the name and value of the parent in the query string. For example when users selects BMW in the first select the following request is made:

JSON data format

By default chained can handle two different formats of JSON response. Object containing key + values pairs is easy to generate. However properties of an object in JavaScript do not have an order. Depending on browser select options might appear on different order.

{
    ""  "--",
    "series-1"  "1 series",
    "series-3"  "3 series",
    "series-5"  "5 series",
    "series-6"  "6 series",
    "series-7"  "7 series",
    "selected"  "series-6"
}

If want to sort the entries on serverside to specific order use array of objects instead.

If you are accessing third party data source and do not have control over data structure you can use function. It should mutate and return the json data in one of the above formats. Example below shows how you could mutate namespaced data to a format which plugin uderstands.

{
    "data" 
}
$("#series").remoteChained({
    parents  "#mark",
    url  "/api/series",
    data function (json) {
        return json.data;
    }
});

See releases.

Значения параметров

Параметр Описание
duration Строковое или числовое значение, которое определяет, как долго анимация будет продолжаться. Значение по умолчанию 400 (в миллисекундах). Строковые ключевые слова ‘fast’ и ‘slow’ соответствуют 200 и 600 миллисекундам соответственно (высокие значения указывают на медленную анимацию, а более низкие на быструю).
easing Ключевое слово (строка), которое опряеделяет кривую скорости для анимации (используется математическая функция — кубическая кривая Безье). Без использования внешних плагинов имеет только два значения — linear (эффект анимации с одинаковой скоростью от начала до конца) и swing (эффект анимации имеет медленный старт и медленное окончание, но скорость увеличивается в середине анимации). Значение по умолчанию swing.
complete Функция, которая будет выполнена после завершения анимации, она вызывается один раз для каждого соответствующего элемента. Внутри функции, переменная this ссылается на DOM элемент к которому применяется анимация.
options
  • duration (по умолчанию: 400).
    Тип: Number, или String.
    Строковое или числовое значение, которое определяет, как долго анимация будет продолжаться (смотри выше).
  • easing (по умолчанию: swing).
    Тип: String.
    Ключевое слово (строка), которое определяет кривую скорости для анимации (смотри выше).
  • queue (по умолчанию: true).
    Тип: Boolean, или String.
    Логическое значение, которое указывает следует ли размещать анимацию в очереди эффектов. Если указано false, то анимация начнется сразу же. С версии jQuery 1.7 опция queue также может принимать строку, в этом случае анимация будет добавлена к очереди, представленной этой строкой. Когда используется пользовательское имя очереди анимации, то она не запускается автоматически, вы должны при этом использовать метод .dequeue( «имя очереди» ), чтобы запустить её.
  • specialEasing.
    Тип: PlainObject.
    Объект, содержащий одно или несколько свойств CSS, определенных параметром свойства и соответствующие им функции замедления. Добавлено в версии 1.4.
  • step.
    Тип: Function( Number now, Tween tween ).
    Функция вызывается для каждого анимируемого свойства каждого анимированного элемента. Эта функция дает возможность изменять Tween Object, чтобы изменить значение свойства, прежде чем оно будет установлено.
  • progress.
    Тип: Function.
    Функция, которая будет вызываться после каждого шага анимации, только один раз для каждого анимированного элемента, независимо от количества анимированных свойств. Добавлено в версии 1.8.
  • complete.
    Тип: Function.
    Функция (callback), которая будет выполнена после завершения анимации, она вызывается один раз для каждого соответствующего элемента (смотри выше).
  • start.
    Тип: Function (Promise Object animation).
    Функция, вызывается, когда анимация элемента начинается. Добавлено в версии 1.8.
  • done.
    Тип: Function (Promise Object animation, Boolean jumpedToEnd).
    Функция вызывается, когда анимация элемента завершается. Добавлено в версии 1.8.
  • fail.
    Тип: Function (Promise Object animation, Boolean jumpedToEnd).
    Функция вызывается, когда анимацию элемента не удается завершить. Добавлено в версии 1.8.
  • always.
    Тип: Function (Promise Object animation, Boolean jumpedToEnd).
    Функция вызывается, когда анимация элемента завершается или останавливается незавершенной. Добавлено в версии 1.8.
Ссылка на основную публикацию