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


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

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

Для этого нам 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-функцию.

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

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


        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;
        } 

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

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

$(function(){
     for(i=0; i<3; i++){
          var div 
          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.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.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-код в тело документа, это будет картинка с удаленного сервера и простая кнопка:


<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  id="button"  disabled/><br/>
<input  id="active_button"/> Активировать кнопку     

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

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

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

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

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

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

Желаю вам плодотворной учебы и приятного общения!


Содержание прошлых уроков:

Вступление
Селекторы и поиск элементов
Фильтры
Оптимизация поиска


Всегда рад Вашему вниманию, голосуйте и комментируйте.


Подписывайтесь, дальше здесь будет очень интересно.







Оригинал поста создан 25-02-2017 14:02:42 UTC


3740932 Новая рубрика "Гражданин Земли" в блоге Mapala
3741041 Приезжайте в гости к брату в Верхотурье.ч.1.Мужики тороватые и мужики вороватые.
3741130 ДНЕВНИК СТУДЕНТКИ: Равновесие Нэша и визуальная репрезентация игр
3741153 Мир растений (пробный пост + конкурс на название)
3741235 Терри Джонс / Aлан Эрейра ,,Варвары''
3741443 Урок 1. Модули VBA. Первый макрос.
3741580 Выявление клонов. Эпизод Второй.
3741895 Два дня на выставке "Охота и Рыболовство на Руси".
3742069 Цветное небо над ночным городом
3742169 Бипедализм. Почему на двух ногах?
3742193 jQuery в деталях. Оптимизация поиска.
3742285 jQuery в деталях. Манипуляции с CSS, атрибутами и классами.
3742512 Голос - меняет людей!
3742512 Что для меня Голос? Или ответ Хейтерам и Сомневающимся.
3742686 Ланка - relax. Зоопарк на прогулке

Прежде чем писать комментарий прочитайте О ПРОЕКТЕ
Поддержите проект донатом!


Comments 0