• Страница 1 из 1
  • 1
Форум » II.jQuery » Базовое знакомство с jQuery » Установка и чтение атрибутов элементов (Меняем значение атрибута элемента)
Установка и чтение атрибутов элементов
1 Функции jQuery для манипулирования с атрибутом класса элемента

Функция .addClass() добавляет элементу конкретный класс. Подключается после выборки jQuery, затем функции передаётся строка, в которой записано имя класса, который нужно добавить элементу.

Например, чтобы всем ссылкам, ведущим за пределы вашего сайта, добавить класс outLink:

Код
$('a[href^ = "http://"]').addClass('outLink');


и тогда, к примеру, ссылка:

Код
<a href="http://site.ru">Перейти на сайт</a>


станет выглядеть так:

Код
<a href="http://site.ru" class="outLink">Перейти на сайт</a>


Функция addClass() не исключает уже имеющегося у элемента класса, а добавляет к нему еще один.


Функция .removeClass() противоположна предыдущей и удаляет указанный ею класс у элемента.

Например, имеем блок div с классом news и идентификатором hotNews:

Код
<div class='news' id='hotNews'>
  /* здесь содержимое блока */
</div>


удалим у этого блока имеющийся класс:

Код
$('#hotNews').removeClass('news');

Изменить / Удалить

2 Функция-переключатель .toggleClass()

Представим, что на странице сайта есть некий переключатель стилей страницы, её оформления. И когда этот переключатель включен, добавляется класс элементу body, за счёт чего меняется оформление страницы.
Когда вы щёлкаете по переключателю снова, этот класс у элемента body удаляется, оформление меняется на прежнее.

Зададим для переключателя идентификатор changeStyle, а переключаемому классу имя altStyle и напишем следующий код:

Код
$('#changeStyle').click(function() {
  $('body').toggleClass('altStyle');
});


Функция .toggleClass() при каждом щелчке либо удаляет, либо добавляет класс altStyle.

На демо-страничке вы можете посмотреть такой переключатель в действии.

Изменить / Удалить

3 Функция css()

С помощью данной функции можно изменять css-свойства элемента: добавить границу, цвет фона, установить ширину, задать расположение и т.д.

Использовать функцию css() можно разными путями:

- для нахождения текущего значения свойства css нужного элемента

- для установления свойства css нужного элемента

- для настройки нескольких свойств css одновременно

Чтобы определить текущее значение какого-либо свойства css, имя этого свойства нужно передать функции css().
Например, чтобы узнать цвет фона блока с идентификатором active:

Код
$('#active').css('background-color');


результат можно сохранить в переменную:

Код
var colorActive = $('#active').css('background-color');

Изменить / Удалить

4 Чтобы присвоить элементу свойство css, нужно передать функции css() два аргумента: имя css-свойства и его значение.
Например, чтобы увеличить размер шрифта для элемента body до 200% :

Код
$('body').css('font-size','200%');


или, к примеру, чтобы изменить отступ в элементе с классом quoteMessage на 100 пикселов:

Код
$('.quoteMessage').css('padding',100);


При использовании функции css(), вы можете применять сокращённую запись css-свойств, например, чтобы установить чёрную рамку в 1px для всех абзацев с классом news, пишем так:

Код
$('p.news').css('border','1px solid black');

Изменить / Удалить

5 Изменение css-свойств исходя из текущего значения

В качестве примера: допустим, что на странице сайта есть кнопка, при нажатии на которую размер шрифта увеличивается в два раза.
Как это реализовать?

1. сначала нужно считать текущее значение шрифта на странице

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

3. умножить полученное значение на 2

А теперь всё это в виде кода:

Код
var baseFont = $('body').css('font-size');

baseFont = parseInt(baseFont);

$('body').css('font-size', baseFont * 2);

Изменить / Удалить

6 Изменение нескольких css-свойств одновременно

Как можно изменить несколько свойств одного элемента? Допустим, так:

Код
$('#main').css('background-color','#FCFCFC');

$('#main').css('border','2px solid #999999');


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

Гораздо более правильный вариант, использовать связывание функций:

Код
$('#main').css('background-color','#FCFCFC').css('border','2px solid #999999');


как видим, в данном случае браузеру нужно будет всего один раз выбрать элемент, после чего дважды выполнить функцию css().

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

Объектная константа (или литерал объекта) - это список пар свойство : значение.
Например:

Код
{
'background-color' : '#FCFCFC',
'border' : '2px solid #999999'
}


для использования объектной константы просто передаём её функции css(). Допустим, нам нужно изменить цвет фона и установить рамку для элемента с идентификатором main:

Код
$('#main').css({
'background-color' : '#FCFCFC',
'border' : '2px solid #999999'
});

Изменить / Удалить

7 Чтение, установка и удаление атрибутов

В jQuery есть две функции общего применения для работы с атрибутами html:

функция attr() - c её помощью можно считывать указанный атрибут html-элемента. Эта функция возвращает значение атрибута, установленное в html.

Например, можно узнать адрес ссылки на файл изображения, находящийся в каком-то блоке с идентификатором gallery и сохранить его в переменной imageLink:

Код
var imageLink = $('#gallery img').attr('src');


А передав в качестве второго аргумента функции attr() путь к иному изображению, вы замените им изображение существующее, то есть измените свойство src элемента img:

Код
$('#gallery img').attr('src','здесь адрес нового изображения');


Хотите удалить атрибут элемента?

Функция removeAttr() позволяет удалить атрибут элемента. Например, удаляем свойство bgColor элемента body:

Код
$('body').removeAttr('bgColor');

Изменить / Удалить

Форум » II.jQuery » Базовое знакомство с jQuery » Установка и чтение атрибутов элементов (Меняем значение атрибута элемента)
  • Страница 1 из 1
  • 1
Поиск: