Основные методы библиотеки jQuery

Методы библиотеки jQuery для работы с CSS-стилями

В jQuery работа со стилями HTML элементов осуществляется через метод css. Данный метод используется как для получения значения стилей, так и для их добавления, изменения и удаления.

Получение стиля элемента в jQuery

Синтаксис метода css:

• .css( propertyName ) // propertyName (тип: Строка) – имя CSS-свойства, значение которого нужно получить
• .css( propertyNames ) // propertyName (тип: Массив) – массив, состоящий из одного или нескольких CSS-свойств, значения которых нужно получить

Получение стиля элемента в jQuery

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

Пример. Получение цвета фона, непосредственно применённого к элементу #header:

​

Метод each

Предназначен для получения значения указанного CSS свойства или набора этих свойств у всех элементов текущего набора.

Пример. Определение значения свойства display у всех выбранных элементов и вывод их в консоль:

Получение сразу нескольких CSS свойств у элемента

Изменение и добавление стиля к элементу в jQuery

При установлении стилей с помощью метода css, они задаются ко всем элементам текущего набора.

Изменение и добавление стиля к элементу в jQuery

где:

• propertyName (тип: String) – имя CSS-свойства
• value (тип: String или Number) – значение, которое нужно установить CSS-свойству
• function – функция, результат выполнения которой будет установлен в качестве значения CSS-свойству
• Синтаксис функции:
• Function( Integer index, String value ) => String или Number
• В качестве аргументов функция получает индекс элемента (index) и текущее окончательное значение CSS-свойства (value)
• properties (тип: объект JavaScript, содержащий ноль или более пар ключ-значение) – объект, состоящий из пар DOM-свойство-значение, которые нужно установить элементу.

Пример. Добавление ко всем элементам .info серого цвета фона (background):

Применение нескольких свойств CSS

• Если необходимо применить к каждому элементу текущего набора сразу несколько CSS свойств, то в качестве параметра этого метода необходимо использовать объект JavaScript, содержащий пары 'имяСвойства' : значение.

​

Установка относительных значений

Относительные значения начинаются с += или -=. Первое выражение используется для увеличения текущего значения CSS свойства, а второе - для уменьшения.

Пример. Увеличение отступа слева и справа у элементов .container на 10px:

​

Удаление определённого стиля у элемента

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

Например, уберём у всех изображений на странице CSS свойство height:

​

Методы для работы с атрибутами

• HTML-атрибуты – это дополнительные значения для установления различных характеристик HTML-элементам в HTML-коде. С помощью них можно определённым образом настроить элемент и отрегулировать его поведение. Все атрибуты указываются внутри открытого тега и отделяются друг от друга посредством пробела.

Методы для работы с атрибутами

Методы для работы с атрибутами

В jQuery для выполнения действий над атрибутами имеется два метода:

• attr() – используется, когда нужно, узнать значение требуемого атрибута, добавить к элементу новый атрибут или изменить текущее значение некоторого атрибута на новое;
• removeAttr() – применяется для удаления определённого атрибута у элемента или набора элементов.

Получение значения атрибута

Узнать значение определённого атрибута в jQuery можно используя метод attr():

​

Пример. Получение значения атрибута href элемента #search

Изменение значения атрибута

Осуществляется с помощью метода attr().

Синтаксис attr() для установки значения одному атрибуту:

​

Установка атрибутов элементу

Удаление атрибута у элемента

В jQuery удаление атрибута обычно осуществляется с помощью метода removeAttr():

​

Пример. Удаление атрибута rel у всех ссылок на странице:

​

Методы для работы с наборами элементов

• filter - оставит в выборке только те элементы, которые соответствуют селектору, переданному этому методу в качестве параметра;
• not - отфильтрует выборку и оставит только те элементы, которые не будут соответствовать селектору;
• has - действует как своеобразный фильтр, который оставляет те элементы, у которых есть потомки, которые удовлетворяют селектору.

Фильтр (filter)

Фильтр-отрицание (not)

Фильтр по наличию потомков (has)

jQuery анимация

• Библиотека jQuery содержит несколько кросс-браузерных методов для анимации элементов, например, скольжение и плавное исчезновение, без привлечения дополнительных библиотек или плагинов. Для расширения возможностей работы с анимацией используют библиотеку jQuery UI (http://jqueryui.com), которая содержит набор интерфейсных взаимодействий, эффекты, виджеты и темы.

Метод animate()

• Эффекты, которых нет в библиотеке jQuery, можно создавать с помощью метода .animate(). Интерпретатор браузера динамически, без перезагрузки страницы, изменяет выбранные свойства на указанные значения. Анимация происходит для всех элементов обернутого набора. Чтобы добавить эффекты для конкретного элемента, нужно воспользоваться фильтрами jQuery для отбора.

Метод animate()

• Метод позволяет анимировать любое css-свойство, имеющее числовое значение, например, font-size, opacity, border-width, margin, padding, height, width, background-position и т.д. При этом имена свойств должны быть указаны слитно - fontSize, paddingLeft, или должен использоваться css-эквивалент свойства - "font-size".
• Числовые значения свойств не заключаются в кавычки.

Метод animate()

• Метод .animate()позволяет изменять css-свойства выбранных элементов с возможностью одновременной анимации нескольких свойств, задавая продолжительность анимации в миллисекундах.

$("div").animate({left: "200px", top: "200px"}, 500);

• Данная анимация одновременно применяется к свойству left, для которого задано значение 200px, и к свойству top со значением 200px, продолжительность анимации задана 500ms.

Синтаксис метода animate()

Метод .fadeIn()

Управляет прозрачностью, показывая скрытый элемент, при этом свойство opacity выбранного элемента изменяется от 0 до 1. Для этого на странице появляется необходимое пространство для элемента, при этом остальные элементы могут сдвинуться с места.

​

Метод .fadeOut()

Заставляет элемент исчезнуть, сделав его прозрачным, сохраняя на странице место, занимаемое элементом. Свойство opacity выбранного элемента изменяется от 1 до 0.

​

Метод .fadeTo()

Позволяет изменить степень прозрачности до заданного значения, например,

$("element").fadeTo("normal",.50);

​

Метод .fadeToggle()

Если элемент скрыт, то он появляется на экране, если виден, то исчезает.

​

Метод .hide()

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

​

Метод .show()

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

​

Метод .toggle()

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

​

Метод .slideDown()

Заставляет скрытый элемент появиться на веб-странице. Элемент проявляется постепенно — сначала его верхняя часть, и по мере проявления остальной части то, что находилось под элементом, сдвигается вниз. Поэтому для того, чтобы контент не перемещался по странице, можно использовать абсолютное позиционирование элемента {position:absolute;}. Если необходимо разместить данный элемент относительно другого, то задайте относительное позиционирование {position:relative;} для элемента, который окружает абсолютно позиционированный элемент.

Метод .slideUp()

Изменяет свойство height элемента, пока оно не станет равным 0, после скрывает элемент display: none;. При этом удаление начинается снизу, и если для элемента не задано позиционирование, то контент, находившийся ниже, перемещается вверх.

Метод .slideToggle()

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