Возвращает или изменяет значения css-величин у выбранных элементов страницы. Функция имеет четыре варианта использования:
возвращает значение css-величины styleName у выбранного элемента. Если выбрано несколько элементов, то значение будет взято у первого.
css-величине styleName будет присвоено значение value , у всех выбранных элементов.
группе css-величин styleName1, styleName2, ... будут присвоены значения value1, value2, ... , у всех выбранных элементов.
css-величине styleName будет присвоено значение, возвращенное пользовательской функцией. Функция вызывается отдельно, для каждого из выбранных элементов. При вызове, ей передаются следующие параметры: index — позиция элемента в наборе , value — текущее значение css-величины styleName у элемента.
Примеры использования:
Замечание : важно отметить, что используя метод.css(styleName) вы получите значения css-величины только первого элемента из всех выбранных. Если вам нужны значения всех элементов, то следует использовать конструкции типа .map() или .each() .
найдем среди списка планет родную землю и выделим ее зеленым цветом:
~lt~!DOCTYPE html~gt~ ~lt~html~gt~ ~lt~head~gt~ ~lt~script src="http://code.jquery.com/jquery-latest.js"~gt~~lt~/script~gt~ ~lt~style~gt~ #list{ width:260px; } .item{ width: 250px; height: 20px; float: left; margin: 1px; padding: 3px; background-color: #EEEEEE; list-style-type:none; } ~lt~/style~gt~ ~lt~/head~gt~ ~lt~body~gt~ ~lt~ul id="list"~gt~ ~lt~li class="item"~gt~Меркурий~lt~/li ~gt~ ~lt~li class="item"~gt~Венера~lt~/li ~gt~ ~lt~li class="item"~gt~Земля~lt~/li ~gt~ ~lt~li class="item"~gt~Марс~lt~/li ~gt~ ~lt~li class="item"~gt~Юпитер~lt~/li ~gt~ ~lt~li class="item"~gt~Сатрурн~lt~/li ~gt~ ~lt~li class="item"~gt~Уран~lt~/li ~gt~ ~lt~li class="item"~gt~Нептун~lt~/li ~gt~ ~lt~li class="item"~gt~Плутон~lt~/li ~gt~ ~lt~/ul~gt~ ~lt~script~gt~ $("#list .item").css("background-color", function(i,val){ if($(this).text() == "Земля") return "#cceecc"; else return val; }); ~lt~/script~gt~ ~lt~/body~gt~ ~lt~/html~gt~
В jQuery имеется три категории методов: одни манипулируют с элементами, подходящими по шаблону; вторые возвращают значения элемента, а третьи изменяют сами элементы.
Сегодня рассмотрим методы, которые используются для CSS-стилей.
Итак, чтобы добавить какому-либо элементу стиль, необходимо воспользоваться следующим методом:
.css(name,value)
Пример:
$("div").css("border", "1px solid blue");
Данная инструкция обведет div синей рамкой.
В качестве параметров здесь используются названия и значения, применимые в : , font-style, color и т.д.
Если необходимо задать для элемента несколько CSS-правил, то лучше использовать следующую конструкцию:
.css({properties})
Пример:
$("div").css({ border:"1px solid blue", fontWeight:"bolder", backgroundColor:"red" });
Данная инструкция обведет div синей рамкой, сделает фон красным, а текст - жирным.
Обратите внимание, что для сложносоставных свойств CSS вроде font-weight и background-color используются иэ эквиваленты из JS: fontWeight, backgroundColor и т.д.
Перечислим другие методы для работы со стилями:
Пример:
$("p:last").addClass("main");
Данная инструкция добавит класс main к последнему элементу параграфа.
Пример:
$("p:even").removeClass("main");
Данная инструкция удалит класс main из всех четных параграфов.
Пример:
$("p").toggleClass("main");
Данная инструкция удалит класс main из всех параграфов, если он присутствует. И добавит этот класс, если он отсутствует.
Пример:
var offDiv=$("div").offset();
Данная инструкция позволяет получить для элемента. Чтобы получить значения конкретного свойства, нужно использовать следующие свойства: offset.left для отступа слева и offset.top - для отступа сверху.
Пример:
$("div").height(); $("div").height(200);
Данная инструкция позволяет получить (первая строка) и задать (вторая строка) высоту элемента.
Пример:
$("div").width(); $("div").width(200);
Данная инструкция позволяет получить (первая строка) и задать (вторая строка) ширину элемента.
Еще пример:
var widDiv=$("div").width(); $("div.fir").width(300);
Первая строка запишет в переменную widDiv значение ширины первого div-а. Вторая инструкция задаст div-ам класса fir ширину в 300 пикселов.
Это очень интересная особенность методов jQuery: они используются, как для задания параметров (когда принимаются 2 аргумента), так и для получения значений этих параметров (если передается один аргумент).
Вкладка 1
Вкладка 2
Вкладка 3
Вкладка 4
Итак, html-код страницы следующий:Вкладка 1
Вкладка 2
Вкладка 3
Вкладка 4
Как видно, все вкладки имеют единый стиль, определяемый классом vkl, а выделенная вкладка имеет класс selected. Внешний вид пропишем на странице style.cssVkl{ float:left; width:140px; height:28px; background:#E5BA83; color:white; font-size:20px; border-right:1px solid white; padding-left:10px; } #content{ width:603px; height:100px; background:#CCA675; } .selected{ background:#CCA675; }
Осталось самое интересное, а именно функция chang():
function chang(s){ $(".selected").removeClass("selected"); $(s).addClass("selected"); }
Итак, как же работает эта функция? Сначала ищется элемент, который имеет класс selected, и этот класс у него убирается. Затем (вторая строка) выделенному элементу (он находится по id, переданному в функцию в качестве параметра s) добавляется класс selected. Вот так все просто.
В следующем уроке узнаем, как с помощью jQuery вставлять целые куски html-кода на страницу и манипулировать ими.
Добрый всем день. Сегодня как я и обещал в уроке рассмотрим методы, которые используются для управления CSS
стилями с помощью jQuery
.
Напомню, что с помощью стилей мы можем не только определять внешний вид элемента на веб странице, но и управлять его положением, показывать и скрывать его по своему желанию, изменять размер, да и много еще чего. Образно говоря, тот кто получает доступ к управлению стилями CSS , тот управляет самой веб страницей! А jQuery такую возможность своим пользователям предоставляет!
В jQuery имеется три категории методов: одни манипулируют с отобранными элементами, другие возвращают значения элемента, а третьи изменяют сами элементы.
Чтобы добавить какому-либо элементу стиль, необходимо воспользоваться следующим методом: .css(name,value)
Давайте, пока мы не ушли далеко от верха страницы, поменяем стиль у названия статьи. Сделаем его, к примеру, красного цвета:
.$("#title".css("color", "#cc0000");
В этом примере я отобрал элемент с идентификаторм id="title"
, который отвечает за отображение названия сайта и добавил стиль т.е. цвет. А кнопки отвечают за применение или возврат стиля по умолчанию.
В качестве параметров могут используются названия и значения, применимые в CSS: background, border, font-style, color
и т.д.
Если необходимо задать для элемента несколько CSS -правил, то лучше использовать следующую конструкцию:
.css({properties})
$("#text").css({ "color" : "blue", "fontStyle" : "italic", "font-weight" : 900 });
Данная инструкция сделает у предыдущего параграфа цвет текста синим, а насыщенность шрифта установит равной 900.
Обратите внимание, что для сложно-составных свойств CSS вроде font-weight и background-color также используются их эквиваленты из JvaScript: fontWeight, backgroundColor и т.д.
Для демонстрации других методов работы со стилями я воспользуюсь помощью разноцветных квадратов, которые уже неоднократно сослужили мне службу в таких уроках как и .
Напомню код и стили для их создания:
HTML код:
Стили CSS:
DivRel {position:relative; width:600px; height:275px; border:dotted 1;} .big {position:absolute; width:200px; height:200px; left:200px; top:50px; background-color:red; border:solid 1px white; color:white; text-align:right; z-index:1;} .red {position:absolute; width:100px; height:100px; left:200px; top:50px; background-color:red; border:solid 1px white; color:white; text-align:right; z-index:1;} .green {position:absolute; width:100px; height:100px; left:250px; top:75px; background-color:green; border:solid 1px white; color:white; text-align:right; z-index:2;} .blue {position:absolute; width:100px; height:100px; left:300px; top:100px; background-color:blue; border:solid 1px white;color:white; text-align:right; z-index:3; cursor:pointer;}
Рассмотрим удаление и присвоение какому-либо элементу CSS
-класса:
.removeClass(class)
.addClass(class)
$("#style2").click(function(){ $("#divRel1 > div:first").removeClass(); }); $("#rstyle2").click(function(){ $("#divRel1 > div:first").addClass("big"); });
Данная инструкция по нажатию на кнопку: "Удалить класс" , удалит класс у первого дочернего элемента содержащегося в идентификаторе id="divRel1" и добавит к нему класс class="big" после нажатия на кнопку: "Добавить класс" .
Следующий метод добавляет указанный класс к элементу, если его нет, или удаляет этот класс, если элемент уже имеет его:
.toggleClass(class)
Попробуйте покликать мышкой в пределах рамки обрамляющей цветные квадраты. Цвет фона будет попеременно меняться.
$("#divRel1").click(function () { $(this).toggleClass("yellow"); });
А получить (первая строка) и задать (вторая строка) ширину и высоту элемента элемента соответственно можно с помощью методов:
.width()
.width(value)
.height()
.height(value)
$("#divRel1 > div:last").toggle(function(){ $ (this).width(200).height(170); },function(){ $ (this).width(100).height (100); });
Продемонстрированный выше код отбирает последний :last элемент идентификатора id="divRel1" и с помощью переключателя toggle меняет или восстанавливает значение по умолчанию при клике на синий квадрат. Для подсказки в стилях определено свойство: cursor:pointer .
Это очень интересная и важная особенность методов jQuery : они используются, как для задания параметров, так и для получения значений этих параметров .
Но и это еще не все! jQuery
позволяет, в случае необходимости удалить CSS
-файл, связанный с HTML
-страницей и привязать новый:
$("link").attr("href", "Alternative.css");
Попробуйте поменять, по вашему усмотрению, стили или код jQuery . Интересно, что у вас получится?
Дата: 2011-06-28
Tweet | Нравится |
Комментарии к заметке:
Отличная статья. Все понятно. Спасибо.
Именно для этого мы и набираем удалённых сотрудников, которые будут выполнять работу, то есть ставить лайки и получить за это деньги.
Вам достаточно просто зарегистрироваться на нашем сервисе. > www.oplata-vklike.tk <
Предлагаем Вам работу без вложений, на системе автоматического приёма и обработки заказов.
Мы предоставляем:
Наш лицезионный софт.
- документы со всей необходимой доп. информацией.
- постоянная техническая поддержка.
Оплата от 5500 в день. Выплаты ежедневно.
Более подробная информация на нашем сайте >> obrabotka.zarplatt.ru <<
Наш сервис предоставляет настоящие лайки на фото заказчиков, которые готовы платить за качество.
Чтобы стать нашим удалённым сотрудником и начать ставить лайки, зарабатывая при этом 45 рублей за 1 поставленный лайк,
Достаточно просто зарегистрироваться на нашем сервисе. > http://oplata-vklike.tk/ <
Вывод заработанных средств ежедневно в течении нескольких минут.
Стабильная работа с обучением, высокая зарплата!
Вы работаете дома! Полностью честно и прозрачно;
Доступно для всех - неважно кто вы и какой у вас опыт работы в интернете!
Вы будете зарабатывать: свыше четырёх тысяч рублей в день!
Сложность: Несложно!
Оплата: - уже на следующий деньги у вас на счету!
Ознакомтесь с условиями на нашем сайте. > realno-money.tk < Скопируйте и вставьте в адресную строку Вашего браузера.
Наш сервис предоставляет настоящие лайки на фото заказчиков, которые готовы платить за качество.
Именно для этого мы и набираем удалённых сотрудников, которые будут выполнять работу, то есть ставить лайки и зарабатывать за это деньги.
Чтобы стать нашим удалённым сотрудником и начать ставить лайки, зарабатывая при этом 45 рублей за 1 поставленный лайк,
Вам достаточно просто зарегистрироваться на нашем сервисе. > oplata-vklike.tk <
Вывод заработанных средств ежедневно в течении нескольких минут.
работы через интернет, с ежедневными выплатами до 11 000 руб.
Пройдите регистрацию на нашем сайте. > www.airline-rabota.tk <
Предлагаю. Увлекательную работу в интернете. Без опыта. Уверенный доход от 5000 руб. в сутки. Эта система доходчива абсолютно всем.
Вам не обязательно работать целыми сутками! Вполне достаточно уделять работе пару часов в день.
Прекратите думать, о том что в Всемирной паутине зарабатывать нельзя, в Инете зарабатывать можно!
Лёгкими и понятными для всех способами. Самое главное, честно!
Режим работы, устанавливаете самостоятельно.
Более подробная информация у нас на сайте. > http://oplata-vklike.tk < скопируйте и вставьте в адресную строку вашего браузера.
Именно для этого мы и набираем удалённых сотрудников, которые будут выполнять работу, то есть ставить лайки и зарабатывать за это деньги.
Чтобы стать нашим удалённым сотрудником и начать ставить лайки, зарабатывая при этом 45 рублей за 1 поставленный лайк,
Достаточно просто зарегистрироваться на нашем сервисе. > http://oplata-vklike.tk/ <
Вывод заработанных средств ежедневно в течении нескольких минут.
Уникальный сервис помощи получения кредита от частного инвестора, а так же кредитных организаций. Подходит как компаниям, так и частным лицам.
Займ от частного инвестора.
Наша компания помогает встретиться инвестору и заёмщику.
Прямой контакт с инвестором
Любая кредитная история
Нужен только паспорт
Работаем с частными лицами и фирмами
Любой регион
Сумма от 5,000 до 50,000,000 руб
Процент одобрения 97%
Преимущества:
Без залога и поручительства!
- Ставка - всего от 1% в месяц!
- Без скрытых платежей и комиссий!
Оформите заявку у нас на сайте. > www.ch-investor.tk <
Наш сервис предоставляет настоящие лайки на фотографии заказчиков, которые готовы платить за качество.
Именно для этого мы и набираем удалённых сотрудников, которые будут выполнять работу, то есть ставить лайки и зарабатывать за это деньги.
Чтобы стать нашим удалённым сотрудником и начать ставить лайки, зарабатывая при этом 45 рублей за 1 поставленный лайк,
Достаточно просто зарегистрироваться на нашем сервисе. > http://oplata-vklike.tk/ <
Вывод заработанных средств ежедневно в течении нескольких минут.
Ведущая компания в России и странах СНГ по продаже авиабилетов «Airline»
Крупнейшая международная компания по продаже А/В билетов
срочно набирает сотрудников на постоянную основу для несложной
работы через интернет, с ежедневными выплатами от 11 000 руб.
Работая в нашей компании Вы получаете:
Соблюдение трудового кодекса
- Полный соцпакет, оплачиваемый отпуск, больничный, санаторий.
- Каждый наш сотрудник на дому гарантированно получает высокий доход. руб. в день.
- Гарантированные стабильные выплаты заработанных денег.
- Выплаты происходят ежедневно на банковские карты или электронные кошельки.
Пройдите регистрацию у нас на сайте. > http://airline-rabota.tk/ <
Без вложений, опыт и профессиональные навыки не требуются!
Библиотека jQuery позволяет управлять свойствами и атрибутами элементов обернутого набора, изменяя первоначальные значения. Можно устанавливать новые свойства, получать и изменять значения первоначальных свойств. Удаляя или добавляя классы, можно динамически изменять стиль отображения элементов.
Добавляет указанный класс (или несколько классов) к каждому элементу обернутого набора. Чтобы данный метод сработал, необходимо заранее создать стиль для добавляемого класса. Метод не удаляет старый класс, а просто добавляет новый.
AddClass(имя класса) имя класса — одно или больше имен класса, отделённых друг от друга пробелами. .addClass(функция) функция — возвращает одно или более имен класса, разделенных пробелом, которые будут добавлены к существующим. В качестве аргумента принимает индекс элемента в наборе и существующее имя класса(ов).
Удаляет указанное имя класса(ов) у всех элементов обернутого набора.
RemoveClass(имя класса) имя класса — необязательный параметр, одно или более имен класса, разделенных пробелом. Если имя класса не указано, метод удаляет все существующие классы у элементов набора. Если имя класса задано — удаляет только указанный класс. .removeClass(функция) функция — возвращает одно или более имен класса, разделенных пробелом, которые будут удалены из существующих. В качестве аргумента принимает индекс элемента в наборе и старое имя класса(ов).
Добавляет или удаляет один или более классов из каждого элемента в наборе. Каждый элемент обернутого набора проверяется отдельно. Метод добавляет указанное имя класса, если оно отсутствует в элементе, и удаляет у тех элементов, где оно присутствует. Используется для переключения визуального представления элементов.
ToggleClass(имя класса) имя класса — одно или более имен класса, разделенных пробелами, которые будут переключаться для каждого элемента набора. .toggleClass(имя класса, логическое значение) имя класса — одно или более имен класса, разделенных пробелами, которые будут переключаться для каждого элемента набора. логическое значение — устанавлвает, добавить или удалить указанный класс. Значение true добавляет класс, false — удаляет. .toggleClass(логическое значение) логическое значение — необязательный параметр, устанавливает, будут ли переключаться классы каждого элемента набора. .toggleClass(функция, логическое значение) функция — возвращает имя класса, которое будет переключаться для каждого элемента набора. В качестве аргументов получает индекс элемента в наборе и старое значение класса. логическое значение — необязательный параметр, устанавливает, будут ли переключаться классы каждого элемента набора.
Проверяет наличие указанного имени класса хотя бы у одного элемента в соответствующем наборе. Возвращает true , если хотя бы один из элементов в наборе имеет проверяемое имя класса, в противном случае — false .
HasClass(имя класса) имя класса — строка с именем класса для поиска.
Метод получает значение атрибута первого элемента набора или устанавливает одно или более значений атрибутов для элементов набора.
Удаляет указанный атрибут у каждого элемента обернутого набора.
RemoveAttr(имя атрибута) имя атрибута — строка, определяющая атрибут для удаления.
Возвращает вычисляемое значение свойства стиля для первого элемента в обернутом наборе или устанавливает одно или несколько CSS-свойств для каждого элемента набора.
Css(имя свойства) имя свойства — строка с именем свойства, возвращает его вычисляемое значение для первого элемента набора. .css(имена свойств) имена свойств — массив свойств, возвращает их вычисляемые значения для первого элемента набора. .css(имя свойства, значение) имя свойства значение — строка или число, которые будут установлены в качестве значения указанного свойства для всех элементов обернутого набора. .css(имя свойства, функция) имя свойства — строка с именем свойства. функция — в качестве аргументов функции передается индекс элемента в наборе и старое значение свойства. Возвращаемое значение будет установлено для всех элементов набора. .css(объект свойств) объект свойств — добавляет CSS-свойства, имена которых определены как ключи в переданном объекте, в связанные с ними значения для всех элементов в соответствующем наборе.
Возвращает текущее значение ширины для первого элемента в наборе или устанавливает ширину для каждого элемента набора. Единица измерения по умолчанию px . Метод можно использовать в случае, если полученное значение будет использоваться в математических расчетах. Размеры вычисляются без учета отступов и толщины рамки, без указания единицы измерения. При изменении размеров окна браузера размеры элемента могут изменяться.
Width() Метод вызывается без параметров. Возвращает текущее значение ширины для первого элемента в наборе без указания единицы измерения. .width(значение) значение — целое числовое значение или строка-значение ширины, которое будет установлено для каждого элемента набора. .width(функция) функция — принимает в качестве аргумента индекс элемента и старое значение свойства, возвращаемое значение будет установлено как ширина для всех элементов.
Возвращает текущее значение высоты для первого элемента в наборе или устанавливает высоту для каждого элемента набора.
Height() Метод вызывается без параметров. Возвращает текущее значение высоты для первого элемента в наборе. .height(значение) значение — целое числовое значение или строка-значение высоты, которое будет установлено для каждого элемента набора. .height(функция) функция — принимает в качестве аргумента индекс элемента и старое значение свойства, возвращаемое значение будет установлено как высота для всех элементов.
Возвращает ширину первого элемента в обернутом наборе с учетом отступов padding или устанавливает ее для каждого элемента обернутого набора.
InnerWidth() Метод вызывается без параметров. Возвращает текущее значение внутренней ширины для первого элемента в наборе. .innerWidth(значение) значение — целое числовое значение, которое будет установлено для каждого элемента набора. .innerWidth(функция) функция
Возвращает высоту первого элемента в обернутом наборе с учетом отступов padding .
InnerHeight() Метод вызывается без параметров. Возвращает текущее значение внутренней высоты для первого элемента в наборе. .innerHeight(значение) значение — целое числовое значение, которое будет установлено для каждого элемента набора. .innerHeight(функция) функция — принимает в качестве аргумента индекс элемента и старое значение свойства, возвращаемое значение будет установлено как внутренняя ширина для всех элементов набора.
Возвращают ширину первого элемента в обернутом наборе. В эти размеры входят толщина рамки и ширина отступа.
OuterWidth(логическое значение) логическое значение
Возвращают высоту первого элемента в обернутом наборе. В эти размеры входят толщина рамки и ширина отступа.
OuterHeight(логическое значение) логическое значение — необязательное значение, если установлено true , значение margin учитывается, в противном случае нет.
Получает текущие координаты первого элемента или устанавливает координаты для каждого элемента. Возвращает объект JavaScript со свойствами left и top , содержащими координаты первого элемента в px обернутого набора относительно начала документа. Метод применяется только к видимым элементам.
Offset() Метод вызывается без параметров.
Возвращает объект JavaScript со свойствами left и top , содержащими координаты первого элемента в px обернутого набора относительно ближайшего родительского элемента. Метод применяется только к видимым элементам.
Position() Метод вызывается без параметров.