Code (Java Script) $("div").click(function () {
var color = $(this).css("background-color");
$("#result").html("Цвет этого div'а <span>"
+ color + "</span>.");
});
Css (properties)Возвращает: jQuery Устанавливает значения для css-свойств всех элементов набора, используя объект, состоящий из пар ключ/значение. Это наилучший способ установить значения для сразу нескольких css-свойств всех элементов набора. Посмотрите этот пример.
Если указатель мыши проходит над параграфом, то для этого параграфа будет установлен желтый фон и жирное начертание текста. Когда же указатель мыши выходит за пределы параграфа - фон изменяется на серый, начертание текста становится нормальным, а сам текст становится синего цвета. Code (Java Script) $("p").hover(function () {
$(this).css({
backgroundColor:"yellow",
fontWeight:"bolder"
});
}, function () {
var cssObj = {
backgroundColor: "#ddd",
fontWeight: "",
color: "rgb(0,40,244)"
}
$(this).css(cssObj);
});
Css (name, value)Возвращает: jQuery Устанавливает значение одного css-свойства для всех элементов набора.
Если в качестве значения какого-либо из css-свойств используется число, оно автоматически конвертируется в значение в пикселах. В этом примере, для того чтобы изменить цвет текста любого параграфа, используется событие mouseover. Code (Java Script) $("p").mouseover(function () {
$(this).css("color","red");
});
ПозиционированиеOffset()Возвращает: Object{top,left} Для первого элемента в наборе получает текущие отступы относительно точки просмотра.
Возвращается объект, содержащий значения (целые числа) отступов сверху и слева. Этот метод работает только с видимыми элементами. В этом примере мы получаем значения отступов для второго параграфа, куда собственно эти значения и подставляем. Code (Java Script) var p = $("p:last");
var offset = p.offset();
p.html( "left: " + offset.left + ",
top: " + offset.top );
Высота и ширинаheight()Возвращает: Integer Получает текущее значение высоты в пикселах для первого элемента в наборе.
Начиная с версии jQuery 1.2, этот метод позволяет найти высоту для window и document. В этом примере мы получаем несколько значений высоты. Функция showHeight вспомогательная, просто для вывода значений в элемент div. Code (Java Script) function showHeight(ele, h) {
$("div").text("Высота элемента "
+ ele + " равна " + h + "px.");
}
$("#getp").click(function () {
showHeight("paragraph", $("p").height());
});
$("#getd").click(function () {
showHeight("document", $(document).height());
});
$("#getw").click(function () {
showHeight("window", $(window).height());
});
height(val)Возвращает: jQuery Устанавливает высоту в CSS-свойстве для каждого элемента в наборе. Если единицы измерения не определены однозначно (например «em» или «%»), тогда значение устанавливается в «px». В этом примере по клику на элементе div, для него устанавливается высота в 30px и заодно изменяется цвет. Code (Java Script) $("div").one('click', function () {
$(this).height(30)
.css({cursor:"auto", backgroundColor:"green"});
});
width()Возвращает: Integer Получает текущее значение ширины в пикселах для первого элемента в наборе. Начиная с версии jQuery 1.2, этот метод позволяет найти ширину для window и document. В этом примере мы получаем несколько значений высоты. Функция showWidth вспомогательная, просто для вывода значений в элемент div. Code (Java Script) function showWidth(ele, w) {
$("div").text("Ширина элемента "
+ ele + " равна " + w + "px.");
}
$("#getp").click(function () {
showWidth("paragraph", $("p").width());
});
$("#getd").click(function () {
showWidth("document", $(document).width());
});
$("#getw").click(function () {
showWidth("window", $(window).width());
});
width(val)Возвращает: jQuery Устанавливает ширину в CSS-свойстве для каждого элемента в наборе.
Если единицы измерения не определены однозначно (например «em» или «%»), тогда значение устанавливается в «px». В этом примере по клику на элементе div, для него устанавливается ширина в 30px и заодно изменяется цвет. Code (Java Script) $("div").one('click', function () {
$(this).width(30)
.css({cursor:"auto", "background-color":"blue"});
});
Надеюсь эта информация пригодится многим. Источник: Сайт программистов Proger.in.ua
|