Манипуляции с атрибутами в jQuery
Метод attr() получает или устанавливает значение атрибута элемента на странице. Если элемент не имеет такого атрибута, то возвращается значение undefined.
Получить значение атрибута в jQuery
Получение значения атрибута style у всех элементов, найденных селектором "p".
$(function () {
var style = $("p").attr("style");
});
<p style="color: grey; font-weight: bold;">
Получение значения атрибута style
</p>
Добавить атрибут в jQuery
Метод attr("имя_атрибута","значение") умеет добавлять новые атрибуты элементам. Установим значения атрибута "class" у всех параграфов, независимо от того, имеет ли параграф класс .oneClass.
$(function () {
$("p").attr("class", "oneClass");
});
.oneClass {
color: purple;
}
<p>
Добавление нового атрибута
</p>
<p class="oneClass">
Добавление нового атрибута с классом
</p>
<p>
Добавление нового атрибута
</p>
Удалить атрибут в jQuery
Метод removeAttr() - удаляет указаный атрибут элемента. Удаляет стили у всех параграфов "p".
Пример 1
$(function () {
$("p").removeAttr("style");
});
Пример 2
Удаляет все стили у параграфов при событии клик.
$(document).ready(function(){
$("button").click(function(){
$("p").removeAttr("style");
});
});
<p style="font-size:120%;color:red">Первый параграф.</p>
<p style="font-weight:bold;color:blue">Второй параграф.</p>
<button>Удалить все стили атрибута</button>
Атрибуты input в jQuery
Метод val() - возвращает значение атрибута value у выбранного элемента формы.
$("button").click(function(){
$("input:text").val("Александр Пушкин");
});
<p>Автор: <input type="text" name="user"></p>
<button>Записать в поле ввода</button>
Добавить класс к элементу в jQuery
Метод addClass() - добавляет класс к указанным элементам страницы и не заменяет уже существующие.
$(function () {
$("#one").addClass("orange");
$("#two").addClass("red");
$("#three").addClass("teal");
});
<style>
.orange {
color: orange;
}
.red {
color: red;
}
.teal {
color: teal;
}
</style>
<p id="one">
Оранжевый текст
</p>
<p id="two">
Красный текст
</p>
<p id="three">
Голубой текст
</p>
Метод removeClass() - удаляет выбранные классы у элементов на странице.
$(function () {
$(".one").removeClass("orange");
});
Переключатель классов на jQuery
Метод toggleClass() добавляет или удаляет заданный класс по принципу переключателя (добавляет, если элемент не содержит класса, и удаляет, если класс есть).
$(function () {
$("#toggle").on("click", toggle);
function toggle() {
$("p").toggleClass("classOn");
}
});
<style>
.classOn {
color: green;
}
</style>
<p class="classOn">
Удаляет класс
</p>
<p>
Добавляет класс
</p>
<input type="button" value="Toggle" id="toggle"/>
-
Создано 11.02.2019 10:58:37
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.