В прошлых статьях мы рассмотрели, каким образом можно создать необходимые выборки. Теперь же мы перейдем к их управлению. Мы можем устанавливать и изменять стилевые правила CSS, а также работать непосредственно с элементами DOM. Начнем мы с управления CSS.
Управление CSS
Благодаря моим предыдущим примерам, вы уже знакомы с функцией css(). Данная функция используется для присвоения стандартных CSS правил, таких как background (фон), border(рамка) и т.д. Любое правило, существующее в CSS таблицах, всегда можно установить через функцию css(). Помимо этого, с помощью данной функции вы также можете найти и получить различные CSS правила.
Attributes API jQuery включает в себя и другие, не менее полезные функции, предназначенные для манипулирования CSS стилями. Три следующие функции — addClass, .removeClass и .toggleClass — предлагают богатые возможности по приданию динамичности вашему WordPress сайту. Рассмотрим подробнее функции для управления CSS стилями:
.css(‘property’, ‘value’) | jQuery(«.post») .css(«background», «#f60»); | Добавляет или изменяет CSS правила у выбранных элементов |
.addClass(‘className’) | jQuery(«.post») .addClass(«sticky»); | Добавляет класс или несколько классов к каждому из выбранных элементов |
.removeClass(‘className’) | jQuery(«.post») .removeClass(«sticky»); | Удаляет класс или несколько классов у каждого из выбранных элементов |
.toggleClass(‘className’, switch-optional) | jQuery(«.post») .toggleClass(«sticky»); | Переключает класс или несколько классов у выбранных элементов в зависимости от их текущего состояния. Если класс уже существует, он будет удален, иначе — добавлен. |
.hasClass(‘className’) | jQuery(«.post») .hasClass(«sticky»); | Возвращает логическое значение true или false, если указанный класс (или несколько классов) существуют у каждого из выбранных элементов. |
В качестве примера мы сделаем все записи в блоге прилепленными, т.е. присвоим им класс .sticky с помощью функции addClass():
... jQuery(".post").addClass("sticky"); ...
Результат представлен на изображении: