Ruby on Rails c нуля!

В прошлой статье — главе мы познакомились с селекторами, а в этой мы научимся работать с атрибутами тегов: определять, переопределять, отменять их и т.д.

Проверяем имеют ли элементы определенный класс:

$('p:first').hasClass('super'); // проверяем имеет ли первый параграф класс super.

Добавляем класс определенному элементу (объекту DOM):

$("p.super").addClass("some-class"); // объявляем элементу p.super второй класс - some-class.

Удаляем определенный класс у определенного элемента:

$("p.some-class").removeClass("some-class");

Существует также функция toggleClass(), которая способна присвоить элементу или коллекции элементов один или несколько классов, или удалить один или нескольно классов:

$(function(){
  $('a:odd').toggleClass('some-class');
})

В данном примере мы каждой второй ссылке в документе присваиваем класс some-class. Если один из элементов коллекции уже имеет класс some-class, то он его лишается.

Получение значения указанного атрибута:

$(function(){
  alert($('a:first').css('color')); //rgb(144, 238, 144)
  alert($('div#content').css('width')); //350px
})

Установка значения атрибуту:

$(function(){
  alert($('a:first').css('color', 'green'));
})

Удаление определенного атрибута у выбранного элемента:

$("p").removeAttr("style")

Получение ширины и высоты элемента:

$(function(){
  var elem = $("#content");
  alert("Height: "+elem.height() + "\nWigth: "+elem.width());
})

Размеры возвращаемые функциями .width() и .height() не включают в себя размеры padding, margin и border. Для того, чтобы получить размеры включая значения padding, border и margin необходимо воспользоваться функциями .outerHeight() и .outerWidth():

$(function(){
  var elem = $("#content");
  alert("Height: "+elem.outerHeight() + "\nWigth: "+elem.outerWidth());
  alert("Height: "+elem.outerHeight(true) + "\nWigth: "+elem.outerWidth(true));//включая margin
})

Существуют также функции innerWidth() и innerHeight() для получения значений ширины и высоты включая только padding и не включая border и margin:

$(function(){
  var elem = $("#content");
  alert("Height: "+elem.innerHeight() + "\nWigth: "+elem.innerWidth());
})

Чтобы получить положение объекта относительно документа в jQuery существует функция offset(), которая возвращает объект со свойствами left и top, которые предоставляют соответственно информацию об отдаленности объекта от левого и от верхнего сторон документа:

$(function(){
  var elem = $("#content");
  var elemPos = elem.offset();
  alert(
    "Left: " + elemPos.left +
    "\nTop: " + elemPos.top
  );
})

Для того, чтобы получить положение элемента относительно но документа, но относительно родительского элемента в jQuery имеется функция position() которая ведет себя очень похоже на offset().

$(function(){
  var elem = $("#content");
  var elemPos = elem.position();
  alert(
    "Left: " + elemPos.left +
    "\nTop: " + elemPos.top
  );
})

Две очень любопытных, но мало используемых функции: scrollLeft() и scrollTop возвращают значение расположения соответственно вертикальной и горизонтальной полос прокрутки. Этими же функциями можно устанавливать значение положения полос прокрутки.

$(function(){
  var elem = $("div#content");
  alert(
    elem.scrollTop() + "\n" +
    elem.scrollLeft()
  );
})

Значение полос прокрутки возвращается в виде размера в пикселях скрытой соответственно левой или верхней стороны документа.