Атрибуты элементов и CSS -- JQuery для начинающих
Primary tabs
Третья глава онлайн-учебника "JQuery для начинающих". Оглавление здесь.
Атрибуты элементов и CSS
Рассмотрим методы для работы с атрибутами DOM-элементов. Это простейшие методы, которые могут изменить цвет, размер, местоположение элемента, а также его класс, адрес ссылки, имя и любые другие свойства.
- Универсальным методом для работы со свойствами стилей (например, 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; });
- Если речь идёт о стилях, следует добавить сюда методы для работы с классами 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')
- Для работы с остальными атрибутами 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', });
- Кроме атрибутов, также есть свойства элементов, к ним относится
« selectedIndex », « tagName », « nodeName », « nodeType » , « ownerDocument »,
« defaultChecked » и « defaultSelected ». Для работы со свойствами используем методы из семейства .prop() :- .prop(propName) — получение значения свойства
- .prop(propName, propValue) — установка значения свойства (также можно использовать hash, либо функцию обратного вызова)
- .removeProp(propName) — удаление свойства
ВНИМАНИЕ! Запомните следующее – для отключения элементов формы, и для проверки/изменения состояния чекбоксов мы всегда используем метод .prop(). Несмотря на то, что в HTML есть атрибуты « disabled » и « checked », используем .prop().
- Log in to post comments
- 3679 reads
vedro-compota
Wed, 12/13/2017 - 12:42
Permalink
data() для работы с нестандартными атрибутами
Если на этом про работу с атрибутами всё, то небоходимо добавить примеры работы с data-атрибутами
_____________
матфак вгу и остальная классика =)