Атрибуты элементов и CSS -- JQuery для начинающих

Третья глава онлайн-учебника "JQuery для начинающих". Оглавление здесь.

Атрибуты элементов и CSS

Рассмотрим методы для работы с атрибутами DOM-элементов. Это простейшие методы, которые могут изменить цвет, размер, местоположение элемента, а также его класс, адрес ссылки, имя и любые другие свойства.

1. Универсальным методом для работы со свойствами стилей (например, margin, border, font, width) является css():
   • .css(property) — получение значения CSS свойства (возвращает текущее значение, а не прописанное в CSS файле по указанному селектору)
   • .css(property, value) — установка значения CSS свойства
   • .css({key: value, key:value}) — установка нескольких значений
   • .css(property, function(index, value) { return value }) — тут для установки значения используется функция обратного вызова (ссылка), index это порядковый номер элемента в выборке, value — старое значение свойства

   Примеры:

   $("#my").css('color') // получаем значение цвета шрифта
   
   $("#my").css('color', 'red') // устанавливаем значение цвета шрифта
   
   // установка нескольких значений
   $("#my").css({
       'color':'red',
       'font-size':'14px',
       'margin-left':'10px'
   })
   
   // альтернативный синтаксис
   $("#my").css({
       color:'red',
       fontSize:'14px',
       marginLeft:'10px',
   })
   
   // используя функцию обратного вызова
   $("#my").css('height', function(i, value){
       return parseFloat(value) * 1.2;
   });

2. Если речь идёт о стилях, следует добавить сюда методы для работы с классами addClass(), hasClass(), removeClass(), toggleClass():
   • .addClass(className) — добавление класса элементу
   • .addClass(function(index, currentClass){ return className }) — добавление класса используя aункцию обратного вызова
   • .hasClass(className) — проверка на причастность к определённому классу
   • .removeClass(className) — удаление класса
   • .removeClass(function(index, currentClass){ return className }) — удаление класса используя функцию обратного вызова
   • .toggleClass(className) — переключение класса
   • .toggleClass(className, switch) — переключение класса по флагу switch>
   • .toggleClass(function(index, currentClass, switch){ return className }, switch) — переключение класса используя функцию обратного вызова

   В приведённых методах в качестве « className » может быть строка, содержащая список классов через пробел.

   Наиболее часто используются методы, напрямую указывающие имя класса. К изучению методов, использующих функцию обратного вызова, мы рекомендуем вам обратиться по необходимости.

   Примеры:

   // добавляем несколько классов за раз
   $("#my").addClass('active notice')
   
   // переключаем несколько классов
   $("#my").toggleClass('active notice')
   
   // работает вот так (похоже на классовый XOR):
   <div id="my" class="active notice"> → <div id="my" class="">
   <div id="my" class="active">
   → <div id="my" class="notice">
   <div id="my" class=""> → <div id="my" class="active notice">
   
   // аналогично предыдущему примеру
   $("#my").toggleClass('active')
   $("#my").toggleClass('notice')
   
   // проверяем наличие класса(-ов)
   $("#my").hasClass('active')
   
   // удаляем несколько классов за раз
   $("#my").removeClass('active notice')

3. Для работы с остальными атрибутами html-элементов используют метод attr():
   • .attr(attrName) — получение значения атрибута
   • .attr(attrName, attrValue) — установка значения атрибута (также можно использовать hash, либо функцию обратного вызова)
   • .removeAttr(attrName) — удаление атрибута

   Атрибуты – это всё то, что мы видим внутри угловых скобочек, когда пишем HTML код:

   // В данном примере это href, title, class
   <a href="#top" title="anchor" class="simple">To Top</a>

   Примеры:

   // получение альтернативного текста картинки
   var altText = $('img').attr('alt')
   
   // изменение адреса картинки
   $('img').attr('src', '/images/default.png')
   
   // установка адреса и текста ссылки
   $('a#my').attr({
       'href':'http://anton.shevchuk.name',
       'title':'My Personal Blog',
   });

4. Кроме атрибутов, также есть свойства элементов, к ним относится
   « selectedIndex », « tagName », « nodeName », « nodeType » , « ownerDocument »,
   « defaultChecked » и « defaultSelected ». Для работы со свойствами используем методы из семейства .prop() :
   • .prop(propName) — получение значения свойства
   • .prop(propName, propValue) — установка значения свойства (также можно использовать hash, либо функцию обратного вызова)
   • .removeProp(propName) — удаление свойства

   ВНИМАНИЕ! Запомните следующее – для отключения элементов формы, и для проверки/изменения состояния чекбоксов мы всегда используем метод .prop(). Несмотря на то, что в HTML есть атрибуты « disabled » и « checked », используем .prop().