Изменение атрибутов CSS
В jQuery можно изменять и css-свойства. Для изменения атрибутов стилей предназначены следующие методы.
- css () — позволяет получить или установить значение отдельных атрибутов CSS.
Метод имеет несколько форматов.
css(Название атрибута)
css(Название атрибута, 3начение)
css(Объект с атрибутами)
css(Название атрибута, Функция обратного вызова)
Первый формат метода позволяет получить значение указанного атрибута
для первого элемента коллекции. Значение возвращается в виде строки.
Составное название атрибута может быть таким, как принято в CSS
(например, background-color) или в JavaScript (например,
backgroundColor). В качестве примера выведем цвет фона первого тега div.
alert($("div").css("background-color"));
<div id="divl" style="background-color:red">Текст</div>
<div id="div2" style="background-color:blue">Текст</div>
Результат выполнения этого примера зависит от браузера. Так браузер
Opera возвращает значение "#ff0000", в то время как браузер Internet
Explorer 7 — название цвета ("red"). Иными словами, Internet Explorer
возвращает значение, указанное в атрибуте стиля. Если указать значение "
# ff0000":
<div id="divl" style="background-color:#ff0000">Текст</div>,
то он вернет именно это значение. В случае, если цвет фона элемента не задан, то мы получим значение "transparent".
Второй формат метода css () позволяет задать значение указанного
атрибута для всех элементов коллекции. Сделаем цвет фона всех абзацев
красным.
$ ("р") .css ("background-color"., "#ff0000") ;
Метод css () возвращает указатель на коллекцию jQuery. По этой
причине мы можем изменить еще несколько атрибутов, составив цепочку
вызовов функции css (). Сделаем цвет фона всех абзацев красным, а цвет
текста — белым.
$("р") .css("backgroundColor", "red") .css("color", "#ffffff") ;
Третий формат метода css() позволяет задать сразу несколько атрибутов
за один вызов функции. Для этого атрибуты и значения должны быть
указаны следующим образом.
{
Атрибут1:
"Значение1",
Атрибут2:
"Значение2",
Атрибуты: "Значение"
}
Если название атрибута содержит дефис, то название необходимо
заключить в кавычки. Для примера сделаем цвет фона всех заголовков
первого уровня черным, цвет текста — белым, а также зададим размер и
название шрифта.
$("hi") .css ( {
backgroundColor: "#000000",
color: "#ffffff", "font-size": "18pt", font - family" : " Tahoma
}
) ;
Такой объект можно сохранить в переменной, а затем передать его в качестве параметра метода css ().
var obj = { fontSize: "18pt", fontFamily: "Tahoma" } $("hi").css(obj);
Четвертый формат метода css () позволяет выборочно задать значение
указанного атрибута, в зависимости от каких-либо условий. В параметре
Функция обратного вызова указывается ссылка на функцию следующего
формата.
function Название функции([Индекс] ) {
...
}
На каждой итерации в функцию передается ссылка (this) на текущий
DOM-элемент. Чтобы задать значение атрибуту, необходимо внутри функции
обратного вызова вернуть новое значение. Если в параметре указать
переменную, то через нее будет доступен индекс текущего элемента в
коллекции. В качестве примера сделаем так, чтобы все ссылки, имеющие
абсолютный URL-адрес, были выделены красным цветом.
$("а").css("color", function() {
var pattern = /Ahttp:\/\//i;
if (pattern.test(this.href)) {
return "red";
}
else {
return "black";
}
});
- width () и height () — позволяют получить ширину и высоту первого
элемента коллекции соответственно. Возвращают значение в виде числа. Для
примера выведем ширину и высоту доступной области окна браузера.
var w = $(window).width();
var h = $(window).height();
$ ("#divl") .html ("Ширина: " + w +
Высота: " + h) ;
В результате будет выведено, например, следующее.
Ширина: 1022
Высота: 734
В качестве еще одного примера выведем ширину и высоту элемента с
помощью методов width () и height (), а для сравнения выведем также
значения соответствующих атрибутов стиля.
var elem = $("#divl");
$("#divl") .append (<b>Значения методов: </b><br>") ;
$("#divl").append("Ширина: " + elem.width() + "
");
$("#divl").append("Высота: " + elem.height() + "
");
$( "#divl") .append ("<b>Значения атрибутов стиля: </b><br>") ;
$("#divl").append("Ширина: " + elem.css("width") + "
");
$("#divl").append("Высота: " + elem.css("height") + "
");
<div id="divl"
style="width:30Opx;height:20Opx;border:dotted;"> </div>
В результате будет выведено следующее:
Значения методов:
Ширина: 3 00
Высота: 200
Значения атрибутов стиля:
Ширина: ЗООрх
Высота: 200рх
Как видно из примера, значения атрибутов стиля содержат единицы измерения, тогда как методы возвращают значение в виде числа.
- width (3начение) и height (Значение) — позволяют задать ширину и
высоту всех элементов коллекции соответственно. Возвращают объект
jQuery. Зададим ширину всех тегов div, а затем укажем цвет фона.
$("div").width(50).css("background-color", "#ff0000");
Значением параметра может быть не только число, но и строка.
$("#divl").width("500px");
$("#div2").width("90%");
innerWidth () и innerHeight () — возвращают соответственно ширину и
высоту первого элемента коллекции. Методы учитывают значение атрибута
padding, но не учитывают толщину линии рамки.
outerWidth( [true] ) и outerHeight ( [true] ) — возвращают
соответственно ширину и высоту первого элемента коллекции. Методы
учитывают значение атрибута padding и толщину линии рамки. Если в
качестве параметра указать значение true, то методы будут также
учитывать значение атрибута margin.
Рассмотрим возможность изменения ширины и высоты элемента путем
.задания произвольных числовых значений, которые можно вводить в
текстовые поля (листинг 5.1).
Листинг 5.1.
Методы width() и height()
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Методы width() и height()</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
function showValue() {
var elem1 = $("#div1");
var msg = "Высота: " + elem1.height() + "
inner: Ширина:
";
msg += elem1.innerWidth() + " Высота: " +
elem1.innerHeight();
msg += "
outer: Ширина: " + elem1.outerWidth(true) + "
Высота: ";
msg += elem1.outerHeight(true);
$("#div2")
.html("Ширина: " + elem1.width() + " ")
.append(msg);
}
$(document).ready(function() {
$(":button").click(function() {
var w = $("#txt1").val();
var h = $("#txt2").val();
var elem = $("#div1");
if (w != "") {
w = parseInt(w);
if (!isNaN(w)) {
elem.width(w);
$("#txt1").val("");
}
else alert("Необходимо ввести число!");
}
if (h != "") {
h = parseInt(h);
if (!isNaN(h)) {
elem.height(h);
$("#txt2").val("");
}
else alert("Необходимо ввести число!");
}
showValue();
});
showValue();
});
//-->
</script>
<style>
#div1 {
padding:5px; margin:5px;
width:300px; height:200px;
border: black 2px dotted;
}
</style>
</head>
<body>
<div id="div1"></div>
<br><b>Текущие значения:</b><br>
<div id="div2"></div><br>
Ширина:<br><input type="text" id="txt1"><br>
Высота:<br><input type="text" id="txt2"><br>
<input type="button" value="Задать новые значения">
</body>
</html>
Если ввести значение и щелкнуть на кнопке Задать новые значения,
будет вызван обработчик события onclick. С помощью метода val () мы
получаем значения, введенные в текстовые поля, и сохраняем их в
переменных. Далее проверяем значения на пустоту. Если поле не пустое, то
пытаемся преобразовать строку в число. Прежде чем присвоить новое
значение, проверяем, не вернул ли метод parselnt () значение NaN, с
помощью метода isNaN ().
Далее задаем новое значение и очищаем поле ввода.
Если в поле была введена строка, а не число, то выводим
предупреждающее сообщение. Затем обновляем данные в элементе с
идентификатором div2 при помощи функции showValue (). Обратите внимание
на следующие строки.
$("#div2")
.html("Ширина: " + eleml.width() + " ")
.append(msg);
Здесь мы вначале получаем элемент, а затем выводим ширину с помощью
метода html (). После изменения содержимого элемента метод html ()
возвращает ссылку на полученный ранее элемент. По этой причине мы можем
производить с ним дальнейшие манипуляции. В данном случае мы добавили в
конец элемента значения других методов. Создание таких цепочек вызовов —
характерная особенность библиотеки jQuery. Практически все методы
возвращают объект jQuery, если, конечно, не возвращают какого-либо
другого значения. Так, например, метод width () без указания параметра
возвращает значение в виде числа, а при указании параметра — объект
jQuery.
Обратите также внимание на расположение методов в цепочке. Мы можем
указывать каждый метод в отдельной строке. Более того, можно между
вызовами методов в цепочке вставлять комментарии.
$ ("#div2")
// Выводим ширину элемента
.html("Ширина: " + eleml.width() + " ")
// Выводим остальные значения
.append(msg);
Управление классами стилей
Библиотека jQuery позволяет не только изменять определенные атрибуты
стиля, но и управлять классами. Для этого предназначены следующие
методы.
addClass (Название класса) — добавляет указанный класс всем элементам
коллекции. В качестве параметра можно указать несколько названий
классов через пробел.
removeClass ( [Название класса]) — удаляет указанный класс у всех
элементов коллекции. В качестве параметра можно указать несколько
классов через пробел. Если название класса не указано, то будут удалены
все классы.
toggleClass (Название класса [, Условие] ) — добавляет указанный
класс всем элементам коллекции, если он не был определен ранее, или
удаляет указанный класс, если он был добавлен ранее. Если в
необязательном параметре Условие задано значение true, то указанный
класс будет добавлен, а если задано значение false, то указанный класс
будет удален.
Все указанные методы в качестве значения возвращают коллекцию
элементов jQuery. Рассмотрим возможность изменения класса при наведении
курсора на элемент (листинг 5.2).
Листинг 5.2.
Методы addClass(), removeClassQ и toggleClass()
toggleClass()
<html>
<head>
<title>Методы addClass(), removeClass() и
toggleClass()</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#div1").hover(
function() { // Если навести курсор
$(this).removeClass().addClass("cls2");
},
function() { // Если убрать курсор
$(this).removeClass().addClass("cls1");
}
);
$("#div2").hover(
function() { // Если навести курсор
$(this).toggleClass("cls2");
},
function() { // Если убрать курсор
$(this).toggleClass("cls2");
}
);
});
</script>
<style>
.cls1 { color:#000000; text-decoration:none; }
.cls2 { color:#ff0000; text-decoration:underline; }
</style>
</head>
<body>
<div id="div1" class="cls1">Наведите курсор на этот
текст</div><br>
<div id="div2" class="cls1">Наведите курсор на этот
текст</div>
</body>
</html>
В этом примере мы определили два класса clslHcls2.
Класс clsl
описывает стиль элемента по умолчанию. Класс cls2 предназначен для
описания стиля элемента при наведении курсора. После формирования
структуры документа мы добавляем обработчики событий с помощью метода
hover (). В первом параметре указывается функция, которая будет вызвана
при наведении курсора. Во втором параметре указывается функция, которая
будет вызвана, если курсор убрать с элемента. Внутри этих обработчиков
текущий DOM-элемент доступен через указатель this. Если курсор будет
наведен на первую надпись, то удаляем все классы, а затем добавляем
класс cls2.
$(this).removeClass().addClass("cls2");
Если убрать курсор с элемента, то проделываем обратную операцию. Удаляем все классы и добавляем класс по умолчанию.
Вторая надпись демонстрирует применение метода toggleClass (). Если
навести курсор, то метод проверит, был ли класс cls2 добавлен ранее. В
случае отсутствия класса он будет добавлен, в противном случае удален.
По этой причине во всех событиях мы указываем одну и ту же строку.
$(this).toggleClass("cls2");
Метод hasClass (Название класса) позволяет определить, был ли
указанный класс добавлен ранее. Возвращает true, если класс был добавлен
ранее.
function checkClass(els) {
if ($("#divl").hasClass(els)) {
alert("Определен");
}
else {
alert("Нет");
}
}
checkClass("cls2"); // Нет
$("#divl").addClass("cls2");
checkClass("cls2"); // Определен
checkClass("clsl"); // Определен
<div id="divl" class="clsl">Текст</div>
При первой проверке получим сообщение, что класс cls2 не определен.
Далее добавляем класс и опять проверяем. В этом случае получим
сообщение, что класс определен для элемента с идентификатором divl.
Обратите внимание на тот факт, что добавление нового класса не удаляет
другие классы, определенные ранее.
Доступ к параметрам тегов
Для доступа к параметрам тегов предназначены следующие методы.
- attr () — позволяет получить или установить значение отдельных параметров тегов.
Метод имеет несколько форматов.
attr(Название параметра)
attr(Название параметрам 3начение)
attr(Объект с параметрами)
attr(Название параметрам Функция обратного вызова)
Первый формат метода позволяет получить значение указанного параметра
для первого элемента коллекции. Если параметр не найден, то
возвращается значение undefined. Получим значение параметра id первого
тега div.
alert($("div").attr("id")); // divl
<div id="divl">Текст</div><br>
<div id="div2">Текст</div>
Второй формат метода attr () позволяет задать значение указанного
параметра для всех элементов коллекции. В качестве примера создадим
текстовое поле, в котором по умолчанию будет подсказка пользователю.
Если поле получит фокус ввода, то подсказка должна исчезнуть. Если в
поле не было введено значение, то при потере фокуса подсказка должна
опять появиться в поле.
$("#txtl").focus(function() {
var elem = $(this);
if (elem.attr("value") == "[Введите текст]") {
elem.attr("value", "");
}
});
$("#txtl").blur(function() {
var elem = $(this);
if (elem.attr("value") == "") {
elem.attr("value", "[Введите текст]");
}
});
<input type="text" id="txtl" value="[Введите текст]">
Задать значение параметрам, которые в HTML указываются без значений, можно одним из двух способов.
$("#btnl").attr("disabled", true);
$("#btnl").attr("disabled", "disabled");
Третий формат метода attr() позволяет задать сразу несколько
параметров за один вызов метода. Для этого параметры и значения должны
быть указаны следующим образом.
{
Параметр1: "Значение1",
Параметр2: "Значение2",
Параметры: "ЗначениеЫ"
}
Зададим URL-адрес и текст подсказки всем ссылкам.
$("a").attr( {
href: "linkl.html", title: "Нажми меня"
}
) ;
Четвертый формат метода attr () позволяет выборочно задать значение
указанного параметра, в зависимости от каких-либо условий. В параметре
Функция обратного вызова указывается ссылка на функцию следующего
формата.
function Название функции ([Индекс]) {
...
}
На каждой итерации в функцию передается ссылка (this) на текущий
DOM-элемент. Чтобы задать значение параметру, необходимо внутри функции
обратного вызова вернуть новое значение. Если в параметре указать
переменную, то через нее будет доступен индекс текущего элемента в
коллекции. В качестве примера сделаем так, чтобы все ссылки, имеющие
абсолютный URL-адрес, открывались в новом окне.
$("a").attr("target", function() {
var pattern = /Ahttp:///i;
if (pattern.test(this.href) ) {
return "_blank";
}
else {
return "_self";
}
});
- removeAttr (Название параметра) — удаляет указанный параметр у
всех элементов коллекции. В качестве примера реализуем возможность
установки и снятия всех флажков при щелчках на соответствующих кнопках.
<input type="checkbox" checked>Флажок l
<br> <input type="checkbox" checked> Флажок 2
<br> <input type="button" value="Снять все флажки"
onclick="$(`:checkbox:checked`).removeAttr(`checked`);">
<input type="button" value="Установить все флажки"
onclick="$(`:checkbox`).attr(`checked`, true);">
- val () — позволяет получить или установить значение параметра value. Метод имеет несколько форматов.
val ()
val (3начение)
val (Массив)
Первый формат метода позволяет получить значение параметра value для
первого элемента коллекции. Выведем значение текстового поля.
alert($(":text").val());
Если элемент позволяет выбрать несколько значений, то метод
возвращает массив значений. Для примера получим все значения выбранных
пунктов списка с множественным выбором..
var vals = $ ( "#sell") .val() || [] ;
alert(vals.join(", ") ) ;
Следует заметить, что метод val () не дает представления, какой из
флажков или переключателей установлен, так как возвращает значение
первого элемента. Чтобы получить значение выбранного переключателя или
установленного флажка, необходимо воспользоваться селектором : checked.
Если элемент не найден, то возвращается значение undefined.
alert($(":radio:checked").val());
Второй формат метода val () позволяет задать значение всем элементам коллекции. Выведем текст в первом текстовом поле.
$(":text:first").val("Новое значение");
Третий формат метода предназначен для установки флажков, выбора
переключателя и выделения пунктов списка. В качестве параметра
необходимо передать массив значений, которые должны быть установлены.
Рассмотрим пример выбора переключателя.
$(":radio").val(["male"]);
Если найден переключатель со значением "male", то он будет выбран.
Рассмотрим пример установки нескольких флажков и выделения пунктов
списка с множественным выбором.
$(":checkbox") .val(["1", "3", "4"]) ;
$ ("select") .val(["2", "value3"]);
В качестве примера рассмотрим различные варианты получения значений и
текста пункта списка с множественным выбором (листинг 5.3).
Листинг 5.3.
Получение значений списка с множественным выбором
<html>
<head>
<title>Получение значений списка с множественным
выбором</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#btn1").click(function() { // Способ 1
var vals = $("#sel1").val() || [];
var count = vals.length;
if (count > 0) {
var elem = $("#div1").empty();
for (var i=0; i
elem.append(vals[i] + " => " +
$("#sel1 option[value=`" + vals[i] + "`]").text()
+
"
");
}
}
else {
$("#div1").html("Ничего не выделено");
}
});
$("#btn2").click(function() { // Способ 2
var sels = $("#sel1 option:selected");
var count = sels.size();
if (count > 0) {
var elem = $("#div1").empty();
for (var i=0; i
elem.append(sels.eq(i).val() + " => " +
sels.eq(i).text() + "
");
}
}
else {
$("#div1").html("Ничего не выделено");
}
});
$("#btn3").click(function() { // Способ 3
var elem = $("#div1").empty();
$("#sel1 option:selected").each(function() {
elem.append(this.value + " => " + this.text +
"<br>");
});
if (elem.text() == "") {
elem.html("Ничего не выделено");
}
});
});
</script>
</head>
<body>
<select id="sel1" size="5" multiple>
<option value="1">Элемент1</option>
<option value="2">Элемент2</option>
<option value="3">Элемент3</option>
<option value="4">Элемент4</option>
<option value="5">Элемент5</option>
</select>
<div id="div1"></div>
<input type="button" value="Способ 1" id="btn1"><br>
<input type="button" value="Способ 2" id="btn2"><br>
<input type="button" value="Способ 3" id="btn3">
</body>
</html>
Итак, в этом примере представлено три способа получения значений.
После щелчка на первой кнопке запустится соответствующий обработчик. С
помощью строки var vals = $ ("#sell") .val() || [] ; мы получаем все
значения выделенных пунктов списка.
Если ни один пункт не выбран, то присваиваем переменной пустой
массив. Далее получаем количество элементов массива и перебираем его с
помощью цикла for. На каждой итерации цикла находим элемент, значение
которого совпадает со значением выбранного пункта списка, и получаем
текст этого пункта. У этого способа есть свой недостаток. Если внутри
списка существуют пункты с повторяющимися значениями, то можно получить
текст другого пункта.
Однако повторяющееся значение — редко встречающееся явление, практически всегда значения пунктов являются уникальными.
Следующий способ демонстрирует применение селектора : selected, а
также возможность перебора элементов коллекции с помощью цикла for и
метода eq (). На каждой итерации мы передаем в метод eq () индекс
элемента в коллекции и получаем значение и текст пункта.
Наконец, последний способ позволяет полностью обойтись без циклов.
Перебор всех элементов осуществляется с помощью метода each (). На
каждой итерации внутри функции обратного вызова доступна ссылка (this)
на текущий DOM-элемент. По этой причине мы можем воспользоваться
свойствами value и text для получения значения и текста пункта
соответственно.
Вычисление положения элементов
Для вычисления положения элемента предназначены методы offset () и position (). Методы возвращают объект с двумя свойствами:
top — смещение сверху;
left — смещение слева.
Выведем положение элемента при щелчке на нем (листинг 5.4).
Листинг 5.4.
Методы offset() и position()
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Методы offset() и position()</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
$("p").one("click", function() {
var elem = $(this);
var obj1 = elem.offset();
var obj2 = elem.position();
var msg = "Offset top: " + obj1.top + " left: " +
obj1.left;
msg += " Position top: " + obj2.top + " left: " +
obj2.left;
elem.html(msg);
});
});
//-->
</script>
</head>
<body>
<p>Абзац 1</p>
<div style="margin:20px;padding:15px;border: black 2px
dotted;">
<p style="margin:10px;">Абзац 2</p>
</div>
Щелкните на абзаце
</body>
</html>
Для получения или установки значения отступа прокрутки предназначены два метода.
scroll Тор ( [3начение] ) — значение отступа прокрутки сверху. Если
пара-метр не указан, то метод возвращает числовое значение, а если
указан, то задает новое значение для всех элементов коллекции.
scrollLeft ( [3начение] ) — значение отступа прокрутки слева. Если
пара-метр не указан, то метод возвращает числовое значение, а если
указан, то задает новое значение для всех элементов коллекции.
Выведем значение отступа прокрутки после щелчка на элементе (листинг 5.5).
Листинг 5.5.
Методы scrollTop() и scrollLeft()
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Методы scrollTop() и scrollLeft()</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
$("#div1").click(function() {
var elem = $("body");
$(this)
.html("top: " + elem.scrollTop() + " left: " +
elem.scrollLeft());
elem.scrollTop(0).scrollLeft(0);
});
});
//-->
</script>
<style>
#div1 {
margin:20px;padding:15px;
width:1500px; height:1500px;
border: black 2px dotted;
background-color:silver;
}
</style>
</head>
<body>
<div id="div1">Переместите полосы прокрутки и щелкните на сером фоне, чтобы увидеть значения<br>
После щелчка значения будут приравнены к 0</div>
</body>
</html>
| 
