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

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

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

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

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

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

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

Установка и чтение атрибутов элемента

Установка и чтение атрибутов элемента

Библиотека jQuery хороша не только в добавлении, удалении и изменении элементов. Часто нам приходится изменять значение атрибута элемента: добавлять класс элемента или изменять CSS-свойство. Мы можем также получить значение атрибута, например, узнать куда ведет отдельно взятая ссылка.

Классы

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

Библиотека jQuery предлагает некоторые функции для манипуляции атрибутом класса элемента.

Функция addClass()

Функция добавляет элементу конкретный класс. Мы вводим функцию после выборки jQuery и передаем ей строку, представляющую собой имя класса, который надо добавить. Для наглядности, давайте изменим HTML-код нашей тестовой страницы и добавим туда три кнопки button сразу после тега body.

<input id="but1" type="button" value="Добавить класс blp">
<input id="but2" type="button" value="Удалить класс blp">
<input id="but3" type="button" value="Добавить/удалить класс blp">

Давайте изменим класс всем элементам имеющим на веб-странице класс .foo. Для этого будем использовать следующий код:

$(".foo").addClass("blp");

После нажатия на кнопку "Добавить класс", мы увидим как текст, где у элементов класс .foo изменит цвет.

Функция removeClass()

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

$(".foo").removeClass("blp");

После нажатия на кнопку "Удалить класс", мы увидим, что на странице все вернулось в первоначальное положение.

Функция toggleClass()

Функция с помощью, которой можно включать или отключать отдельные классы, т.е. добавлять класс, если его еще нет, или удалять имеющийся класс. Сделаем мы это с помощью следующего кода:

$(".foo").toggleClass("blp");

Поможет нам в этом кнопка "Добавить/удалить класс"


$(document).ready(function() {
$("#but1").click(function(){
$(".foo").addClass("blp");
});
$("#but2").click(function(){
$(".foo").removeClass("blp");
});
$("#but3").click(function(){
$(".foo").toggleClass("blp");
});
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Методы addClass, removeClass, toggleClass</title>
<style type="text/css">
#form div {display:block; margin:25px 10px}
#form label{
text-align: right;
margin-right: 10px;
vertical-align: text-top;
}
.blp
{
color:blue;
font-size:25px;
}
</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(){
$(".foo").addClass("blp");
});
$("#but2").click(function(){
$(".foo").removeClass("blp");
});
$("#but3").click(function(){
$(".foo").toggleClass("blp");
});
})
</script>
</head>

<body>
<div id="pin">Кликни меня</div>
<div id="form">
<p>Привет всем!</p>
<p class="foo">Другой абзац, но уже с классом.</p>
<p><span>Этот контейнер SPAN .</span></p>
<p id="bar">Абзац с идентификатором
<span class="foo">А этот контейнер SPAN внутри него.</span>
</p>
<input id="but1" type="button" value="Добавить класс blp"> <br><br>
<input id="but2" type="button" value="Удалить класс blp"> <br><br>
<input id="but3" type="button" value="Добавить/удалить класс blp"><br><br>


<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>

Чтение и изменение свойств CSS

Функция css()

Эта функция позволяет изменять свойства CSS определенного элемента, т.е. вместо того, чтобы применять к элементу стиль класса, можно непосредственно добавлять границу, цвет фона, устанавливать ширину или задавать расположение. Другими словами в нашем распоряжении вся таблица свойств CSS.

Для определения текущего значения свойства CSS достаточно передать имя свойства функции css().

Итак будем эксперементировать. Для этого изменим название кнопок button и проверим как работае функция css() на нашей веб-странице:

<input id="but1" type="button" value="Вывести значение свойства color абзаца с классом foo" /><br>
<input id="but2" type="button" value="Изменить цвет абзацев внутри, которых span"/><br>
<input id="but3" type="button" value="Установить у первого абзаца несколько свойств "/><br>
<input id="text1" type="text" style="width:180px" value="Введите размер шрифта в пикс."/>
<input id="but4" type="button" value="Изменить размер шрифта абзаца с #bar на указанный" /><br>

Чтобы узнать свойство color абзаца с классом foo, применим следующий код:

$("#but1").click(function(){ alert ($("p.foo").css("color")); });

Чтобы изменить цвет абзацев, внутри которых находится элемент span, применим следующий код:

$("#but2").click(function(){ $("p span").css("color","red"); }); })

Теперь установим у первого абзаца с идентификатором #bar несколько свойств сразу:

$("#but3").click(function(){ $("#par1").css({"font-size":"24px", "font-family":"Arial","color":"red" }); })

А теперь зададим шрифт в приготовленной для этого форме.

$("#text1").focus(function(){ $("#text1").val(""); }); $("#but4").click(function(){ $("#bar").css("font-size",$("#text1").val()+"px"); })

Как это работает мы узнаем позже, по мере изучения данного курса.


$(document).ready(function() {
$("#but1").click(function(){
alert ($("p.foo").css("color"));
});
$("#but2").click(function(){
$("p span").css("color","red");
});
$("#but3").click(function(){
$("#par1").css({"font-size":"24px", "font-family":"Arial","color":"red" });
});
$("#text1").focus(function(){
$("#text1").val("");
});
$("#but4").click(function(){
$("#bar").css("font-size",$("#text1").val()+"px");
});
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Метод css</title>
<style type="text/css">
#form div {display:block; margin:25px 10px}
#form label{
text-align: right;
margin-right: 10px;
vertical-align: text-top;
}
.foo{
color:hsla(229,98%,47%,1.00);
font-size:25px;
}
</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 ($("p.foo").css("color"));
});
$("#but2").click(function(){
$("p span").css("color","red");
});
$("#but3").click(function(){
$("#par1").css({"font-size":"24px", "font-family":"Arial","color":"red" });
});
$("#text1").focus(function(){
$("#text1").val("");
});
$("#but4").click(function(){
$("#bar").css("font-size",$("#text1").val()+"px");
});
});
</script>
</head>

<body>
<input id="but1" type="button" value="Вывести значение свойства color абзаца с классом foo" /><br><br>
<input id="but2" type="button" value="Изменить цвет абзацев внутри, которых span"/><br><br>
<input id="but3" type="button" value="Установить у первого абзаца несколько свойств "/><br><br>
<input id="text1" type="text" style="width:180px" value="Введите размер шрифта в пикс."/>
<input id="but4" type="button" value="Изменить размер шрифта абзаца с #bar на указанный" /><br><br>

<p id="par1">Кликни меня</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>

Методы CSS манипулирования
Таблица. Перечень функций с помощью которых можно производить различные манипуляции над оформлением элементов
Метод Пример Описание
addClass() $("селектор").addClass("имя класса"); Добавляет указанный класс или классы выбранному элементу.
css() $("селектор").css("свойство");
$("селектор").css("свойство","значение");
$("селектор").css({свойство1:значение1, свойствоN:значениеN});
Позволяет узнать текущее или установить новое значение указанному CSS свойству (или свойствам) выбранного элемента.
hasClass() $("элемент").hasClass("имя класса"); $("p").hasClass("foo") Проверяет содержит ли выбранный элемент класс с указанным именем.
height() $("элемент").height();$("элемент").height("значение"); $("p").height("10px"); Позволяет узнать текущую или установить новую высоту выбранному элементу.
offset() $("элемент").offset();
$("p").html( "left: " + $("p").offset().left + ", top: " + $("p").offset().top );
$("p").offset({top:60, left:100});
Позволяет узнать текущее или установить новое местоположение выбранного элемента относительно границ текущего документа.
position() координаты=$(селектор).position();
$("#banner").position();
alert("Координаты смещения по X: "+$("banner").position().left+"\nКоординаты смещения по Y: "+$("banner").position().top); });
Позволяет узнать текущее местоположение выбранного элемента относительно родительского.
removeClass() $(селектор).removeClass(класс) Удаляет у выбранного элемента один класс или более.
scrollLeft() текущая позиция:$(селектор).scrollLeft();
новая позиция:$(селектор).scrollLeft(новая_позиция)
Позволяет узнать текущую или установить новую позицию полосы прокрутки выбранного элемента по вертикали.
scrollTop() текущая позиция:$(селектор).scrollTop();
новая позиция:$(селектор).scrollTop(новая_позиция)
Позволяет узнать текущую или установить новую позицию полосы прокрутки выбранного элемента по горизонтали.
toggleClass() $(селектор).toggleClass(класс,переключатель); $(".foo").toggleClass("class1"); Поочередно присваивает указанные классы выбранному элементу.
width() текущее значение:$(селектор).width();
новое значение:$(селектор).width(новое_значение);
$("#banner").width(120);
Позволяет узнать текущую или установить новую ширину выбранному элементу.