ресурс для начинающих веб-разработчиков
комплексные веб-услуги по созданию сайтов

Справочный материал по основным языкам программирования и верстки сайтов.

Готовая методика создания простых и сложных динамичных сайтов, с использованием PHP и MySQL.

Использование веб-редактора Adobe Dreamweaver в разработке сайтов.

Использование графических редакторов Adobe Flash, Adobe Photoshop, Adobe Fireworks в подготовке веб-графики.

Разработка веб-сайтов под "ключ".

Разработка отдельных фрагментов сайтов, консультации по вопросам верстки веб-страниц и веб-программирования.

Чтение, установка и удаление атрибутов HTML

Чтение, установка и удаление атрибутов HTML

Библиотека jQuery содержит функции общего назначения для работы с атрибутами HTML - функции attr() и removeAttr().

Функция attr()

Функция attr() позволяет читать указанный атрибут HTML-элемента.

$("селектор").attr("атрибут");

Устанавливать новое значения атрибута.

$("селектор").attr("атрибут", "новое значение");

Добавим в нашу HTML страницу следующий код:

<p><img id ="banner" src="../../images/newYear.jpg" alt=""/></p>

Изменим название у кнопок botton

<input id="but1" type="button" value="Узнать содержимое атрибута src" ><br><br>
<input id="but2" type="button" value="Изменить содержимое атрибута src"><br><br>
<input id="but3" type="button" value="Удалить атрибут src"><br><br>

Чтобы узнать содержимое арибута img применим следующий код:

$("#but1").click(function(){
alert ($("#banner").attr("src"));
});

Чтобы изменить изображение применим следующий код:

$("#but2").click(function(){
$("#banner").attr("src","../../images/newyard.png")
});
Функция removeAttr()

Для удаления атрибутов элемента используется функция removeAttr().

$("селектор").removeAttr("атрибут");

Применим ее чтобы удалить атрибут img.

$("#but3").click(function(){
$("#banner").removeAttr("src");
});

$(document).ready(function() {
$("#but1").click(function(){
alert ($("#banner").attr("src"));
});
$("#but2").click(function(){
$("#banner").attr("src","../../images/newyard.png")
});
$("#but3").click(function(){
$("#banner").removeAttr("src");
});
})
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Метды attr и removeAttr</title>
<style type="text/css">
#form div {display:block; margin:25px 10px}
#form label{
text-align: right;
margin-right: 10px;
vertical-align: text-top;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#but1").click(function(){
alert ($("#banner").attr("src"));
});
$("#but2").click(function(){
$("#banner").attr("src","../../images/newyard.png")
});
$("#but3").click(function(){
$("#banner").removeAttr("src");
});

});
</script>
</head>

<body>
<input id="but1" type="button" value="Узнать содержимое атрибута src" ><br><br>
<input id="but2" type="button" value="Изменить содержимое атрибута src"><br><br>
<input id="but3" type="button" value="Удалить атрибут src"><br><br>


<p id="par1">Кликни меня</p>
<p><img id ="banner" src="../../images/newYear.jpg" alt=""/></p>

<div id="form">
<p>Привет всем!</p>
<p class="foo">Другой абзац, но уже с классом.</p>
<p><span>Этот контейнер SPAN .</span></p>
<p id="bar">Абзац с идентификатором
<span class="foo">А этот контейнер SPAN внутри него.</span>
</p>

<form action="#" method="post" >
<fieldset>
<legend>Форма для ввода учетных данных</legend>
<label for="name">Имя</label><br />
<input name="name" type="text" /><br />
<label for="password">Пароль</label><br />
<input name="password" type="password" /><br /><br />
<label>
<input type="radio" name="loc" /> Я использую свой компьютер
</label><br />
<label>
<input type="radio" name="loc" checked="checked" />
Я использую общий компьютер
</label><br /><br />
<input type="submit" value="Войти" /><br />
<label>
<input type="checkbox" name="notify" disabled="true" />
Сохранить мои учетные данные на этом компьютере
</label><br />
</fieldset>
</form>

</div>
</body>
</html>

Функция prop()

Каждому варианту метода attr() соответствует аналогичный вариант вызова метода prop(). Различие между обоими методами состоит в том, что методы prop() имеют дело со свойствами, определяемыми объектами HTMLElement, а не со значениями атрибутов.

Синтаксис функции будет такой:

prop(имя) - возвращаяет значение указанного свойства для первого из элементов, содержащихся в объекте jQuery;

prop(имя, значение), prop(отображение) - устанавливает значение одного или нескольких свойств для всех элементов, содержащихся в объекте jQuery;

prop(имя, функция) - устанавливает значение указанного свойства для всех элементов, содержащихся в объекте jQuery, с использованием функции.


$(document).ready(function() {
$("#but1").click(function(){
alert ($("img").prop("src"));
});
$("#but2").click(function(){
alert ($("#banner").prop("alt"));
});
$("#but3").click(function(){
alert ($("#banner").prop("width"));
});
$("#but4").click(function(){
$("#banner").prop("img",$("img").css({"height":"200px", "width":"300px"}));
});

});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Метод prop</title>
<style type="text/css">
#form div {display:block; margin:25px 10px}
#form label{
text-align: right;
margin-right: 10px;
vertical-align: text-top;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#but1").click(function(){
alert ($("img").prop("src"));
});
$("#but2").click(function(){
alert ($("#banner").prop("alt"));
});
$("#but3").click(function(){
alert ($("#banner").prop("width"));
});
$("#but4").click(function(){
$("#banner").prop("img #banner",function(){$("#banner").css({"height":"200px", "width":"300px"})});
});

});
</script>
</head>

<body>
<input id="but1" type="button" value="Узнать содержимое атрибута src" ><br><br>
<input id="but2" type="button" value="Узнать содержимое атрибута alt"><br><br>
<input id="but3" type="button" value="Узнать содержимое атрибута width"> <br><br>
<input id="but4" type="button" value="Изменить атрибуты src height и width "><br><br>


<p id="par1">Кликни меня</p>
<p><img id ="banner" src="../../images/newYear.jpg" alt="С Новым годом"/></p>

<div id="form">
<p>Привет всем!</p>
<p class="foo">Другой абзац, но уже с классом.</p>
<p><span>Этот контейнер SPAN .</span></p>
<p id="bar">Абзац с идентификатором
<span class="foo">А этот контейнер SPAN внутри него.</span>
</p>

<form action="#" method="post" >
<fieldset>
<legend>Форма для ввода учетных данных</legend>
<label for="name">Имя</label><br />
<input name="name" type="text" /><br />
<label for="password">Пароль</label><br />
<input name="password" type="password" /><br /><br />
<label>
<input type="radio" name="loc" /> Я использую свой компьютер
</label><br />
<label>
<input type="radio" name="loc" checked="checked" />
Я использую общий компьютер
</label><br /><br />
<input type="submit" value="Войти" /><br />
<label>
<input type="checkbox" name="notify" disabled="true" />
Сохранить мои учетные данные на этом компьютере
</label><br />
</fieldset>
</form>

</div>
</body>
</html>