В jQuery имеется три категории методов: одни манипулируют с элементами, подходящими по шаблону; вторые возвращают значения элемента, а третьи изменяют сами элементы.
Сегодня рассмотрим методы, которые используются для CSS-стилей.
Итак, чтобы добавить какому-либо элементу стиль, необходимо воспользоваться следующим методом:
.css(name,value)
Пример:
$(«div»).css(«border», «1px solid blue»); |
Данная инструкция обведет div синей рамкой.
В качестве параметров здесь используются названия и значения, применимые в CSS: background, border, 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 и т.д.
Перечислим другие методы для работы со стилями:
.addClass(class)
Пример:
$(«p:last»).addClass(«main»); |
Данная инструкция добавит класс main к последнему элементу параграфа.
.removeClass(class)
Пример:
$(«p:even»).removeClass(«main»); |
Данная инструкция удалит класс main из всех четных параграфов.
.toggleClass(class)
Пример:
$(«p»).toggleClass(«main»); |
Данная инструкция удалит класс main из всех параграфов, если он присутствует. И добавит этот класс, если он отсутствует.
.offset()
Пример:
var offDiv=$(«div»).offset(); |
Данная инструкция позволяет получить отступы слева и сверху для элемента. Чтобы получить значения конкретного свойства, нужно использовать следующие свойства: offset.left для отступа слева и offset.top — для отступа сверху.
.height(value)
Пример:
$(«div»).height(); $(«div»).height(200); |
Данная инструкция позволяет получить (первая строка) и задать (вторая строка) высоту элемента.
.width(value)
Пример:
$(«div»).width(); $(«div»).width(200); |
Данная инструкция позволяет получить (первая строка) и задать (вторая строка) ширину элемента.
Еще пример:
var widDiv=$(«div»).width(); $(«div.fir»).width(300); |
Первая строка запишет в переменную widDiv значение ширины первого div-а. Вторая инструкция задаст div-ам класса fir ширину в 300 пикселов.
Это очень интересная особенность методов jQuery: они используются, как для задания параметров (когда принимаются 2 аргумента), так и для получения значений этих параметров (если передается один аргумент).
Давайте, используя полученные знания сделаем меню с вкладками, вот такого вида (пощелкайте по вкладкам):
Эффекты jQuery
Вкладка 1 Вкладка 2 Вкладка 3 Вкладка 4 |
Итак, html-код:
<html> <head> <title>jQuery</title> <link rel="stylesheet" type="text/css" href="cascade.css"> <script type="text/javascript" src="jquery-1.7.1.js"></script> <script type="text/javascript" src="script.js"></script> </head> <body> <div> <div class="vkl" id="vkladka1" onClick="chang('#vkladka1');"> Вкладка 1 </div> <div class="vkl" id="vkladka2" onClick="chang('#vkladka2');"> Вкладка 2 </div> <div class="vkl" id="vkladka3" onClick="chang('#vkladka3');"> Вкладка 3 </div> <div class="vkl" id="vkladka4" onClick="chang('#vkladka4');"> Вкладка 4 </div> </div> <div style="clear: both"></div> <div id="content"></div> <div style="clear: both"></div> </body> </html> |
Как видно, все вкладки имеют единый стиль, определяемый классом vkl, а выделенная вкладка имеет класс selected. Внешний вид пропишем на странице cascade.css
.vkl{ float:left; width="99%"; height:28px; background:#49A62E; color:white; font-size:20px; border-right:1px solid white; padding-left:10px; } #content{ width="99%"; height:100px; background:#A69927; } .selected{ background:#A69927; } |
Осталось самое интересное, а именно функция chang():
function chang(s){ $('.selected').removeClass('selected'); $(s).addClass('selected'); } |
Итак, как же работает эта функция? Сначала ищется элемент, который имеет класс selected, и этот класс у него убирается. Затем (вторая строка) выделенному элементу (он находится по id, переданному в функцию в качестве параметра s) добавляется класс selected. Вот так все просто.
Максим Отличный сайт! Пользуюсь им частенько, т.к. пока не запомнил все наизусть. Все просто и понятно, без воды, с отличными примерами. Спасибо! )