elviento

8 лет назад

jQuery в деталях. Манипуляции с CSS, атрибутами и классами.

Привет, друзья!

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

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

Для работы над внешним видом DOM-элементов на странице вам потребуются совсем небольшой "джентельменский" набор:

Методы для работы с CSS

.css() - Пожалуй это основной инструмент, для работы с атрибутами стилей элемента. У него имеется как минимум 4 разновидности для получения либо установки css-свойств:

Структура	Описание
`.css(property)`	Получить значение CSS-свойства
`.css(property, value)`	Установить значение CSS-свойства
`.css({key1:value1, key2:value2})`	Установить множество значений
`.css(property, function(index, value){ return value; })`	Установить через callback-функцию.

Давайте посмотрим, как это будет работать на примерах.

Добавим на страницу стили:

<style>
        div { 
            width:80px; 
            height:80px; 
            margin:10px; 
            float:left; 
            font-size: 0.60em;
            text-align: center;
            color: white;
        }
        div:nth-child(1){
            background-color: goldenrod;
        } 
        div:nth-child(2){
            background-color: coral;
        } 
        div:nth-child(3){
            background-color: yellowgreen;
        } 
</style>

И три пустых блока div:

<div></div>
<div></div>
<div></div>

Теперь выведем значение background-color для каждого блока div:

$(function(){
     for(i=0; i<3; i++){
          var div = $('div:eq('+i+')');
          div.text(div.css('background-color'));
      }             
});

В этом примере мы в обычном цикле последовательно прошлись по всем элементам div и считали значение атрибута background-color. В результате мы видим, что div.css('background-color') возвращает требуемое значение в rgb представлении.

А теперь, воспользуемся вариантом для установки дополнительный атрибутов .css({key1:value1, key2:value2}). Давайте добавим рамку и закруглим углы у наших блоков.

for(i=0; i<3; i++){
      var div = $('div:eq('+i+')');
      div.text(div.css('background-color'))
         .css({'border-radius':'10px', 'border':'3px solid grey'});
}

Помимо функции .css() существует еще ряд узконаправленных методов для работы с параметрами элементов .width(); .height(); .show();.position(); (ширина, высота, видимость, позиция итп). Многие из них дублируют работу .css() с тем или иным атрибутом стилей и я решил их вынести в отдельный урок.

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

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

Структура	Описание
`.addClass(className)`	Добавляет классы элементам на странице
`.removeClass(className)`	Удаляет классы у элементов
`.hasClass(className)`	Проверяет наличие классов у элементов
`.toggleClass(className)`	Изменяет наличие классов у элементов на противоположное.

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

Поиздеваемся над знакомыми нам квадратиками, но перед этим добавим в стили один класс:

.yellow-circle{
      border-radius: 50px !important;
      background-color: yellow !important;      
}
.kick-left{
      margin-left: -96px;
}

Заметим, что дополнительное свойство !important обязательно, т.к. у элементов уже есть собственные свойства border-radius и background-color, а в противном случае они просто не изменятся.

А теперь jQuery код:

// вначале пробежимся в цикле и раскрасим блоки
for(i=0; i<3; i++){
      var div = $('div:eq('+i+')');
      div.css({'border-radius':'10px', 'border':'3px solid grey'});
}  
// а теперь добавим среднему квадрату классы yellow-circle и kick-left
$('div:eq(1)').addClass('yellow-circle kick-left');

Проверим как работает toggleClass:

$('div:eq(1)').toggleClass('kick-left');

Класс kick-left просто "открепился" и элемент встал на свое место посередине, а если опять применить toggleClass(), то класс заново добавится.

А вот если нам нужно узнать, есть ли у элемента какой-либо класс, конечно же надо использовать метод hasClass()

Проверить результат можно через консоль:

console.log($('div:eq(1)').hasClass('yellow-circle'));

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

Работа с атрибутами

Часто возникает необходимость поменять "на лету" значение какого-нибудь атрибута у элемента. Например src у тега <img> или title у него же.
Для этого служит семейство методов .attr, их структура и назначение практически идентична методам .css() только оперируют они атрибутами элемента, а не стилями.

Структура	Описание
`.attr(attrName)`	возвращает значение атрибута attrName у выбранных элементов. Если выбрано несколько элементов, то значение будет взято у первого.
`.removeAttr(attrName)`	удаляет атрибут attrName у всех элементов.
`.attr(attrName, value)`	атрибуту attrName будет присвоено значение value, у всех выбранных элементов.
`.attr({attrName1:value1, attrName2:value2, ...})`	группе атрибутов attrName1, attrName2, ... будут присвоены значения value1, value2, ..., у всех выбранных элементов.
`.attr(attrName, function(index, value))`	Установить значение атрибута через callback-функцию.

Теперь проверим, как работать с атрибутами.

Добавим HTML-код в тело документа, это будет картинка с удаленного сервера и простая кнопка:

<img src="http://blog.vetatlas.ru/wp-content/uploads/1439018528463.jpg"/>
<button>Показать URL картинки</button>

И пропишем между тегами <script> следующий код:

// здесь мы назначаем обработчик для клика курсора по картинке
$('img').click(function(){

      // а здесь манипулируем атрибутом src меняя при этом адрес картинки
      $(this).attr('src', 'http://www.molomo.ru/img/1/6/3.jpg');
});

В результате при клике картинок получим смену изображений, благодаря функции .attr(attrName, value):

Давайте теперь проверим на практике, как получить значение атрибута.

Допишем jQuery код к предыдущему фрагменту кода:

// при клике по кнопке
$('button').click(function(){

       // покажем значение атрибута src у картинки
       alert($('img').attr('src'));

});

Результат будет ожидаемым - при смене картинки, изменилось значение атрибута src, который мы получили через .attr(attrName):

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

.prop() - Возвращает или изменяет значение свойств выбранных элементов страницы.

Структура	Описание
`.prop(propName)`	возвращает значение свойства propName у выбранных элементов.
`.prop(propName, value)`	во всех выбранных элементах, свойство propName примет значение value.
`.prop({propName1:value1, propName2:value2, ...})`	во всех выбранных элементах изменит значения группы свойств propName1, propName2, ... сделав их равными value1, value2, ... соответственно.
`.prop(propName, function(index, value))`	изменение свойств выбранных элементов, через ф-ю обратного вызова.

Давайте посмотрим как работают эти методы на примере.

Создаем в HTML-документе кнопку и чекбокс:

<input type="button" id="button" value="Проверить" disabled/><br/>
<input type="checkbox" id="active_button"/> Активировать кнопку

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

Затем добавим jQuery код для кнопки и чекбокса.

// при нажатии на чекбокс, удалить у кнопки свойство disabled 
$('#active_button').click(function(){
         $('#button').prop('disabled', false);
});

// а здесь мы удостоверимся, что кнопка активная, запустив при нажатии всплывающее сообщение
$('#button').click(function(){
         alert('Теперь я активная кнопка!');
});

Мы видим, что при нажатии на чекбокс кнопка становится активной.