Привет, друзья!
На прошлых уроках мы с вами искали элементы на странице, оптимизировали выборки, а сегодня я предлагаю поговорить о том, как можно манипулировать найденными объектами, получать/присваивать/редактировать стили, классы или атрибуты элементов.
Для этого нам 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('Теперь я активная кнопка!');
});
Мы видим, что при нажатии на чекбокс кнопка становится активной.
На этом пока остановимся, до следующего урока.
Желаю вам плодотворной учебы и приятного общения!
Содержание прошлых уроков:
Вступление
Селекторы и поиск элементов
Фильтры
Оптимизация поиска
Всегда рад Вашему вниманию, голосуйте и комментируйте.
Подписывайтесь, дальше здесь будет очень интересно.
Привет!
Этот пост был выбран Академией Голоса и попал в список программы поддержки качественных образовательных постов.
Ссылка на твой пост будет опубликована в отчете Академии.
Спасибо за полезный контент (ノ◕ヮ◕)ノ*:・゚✧