Авторизация:

Программисты на работе общаются двумя фразами: "непонятно" и "вроде работает".

Тренажер интуиции:

Видеокурсы:

Бесплатный видеокурс: "Cайт-визитка за 1 день"

Опрос:

Топ комментаторов:

sasha

Обращаясь в службу техподдержки, помни: там сидят такие же «чайники», как и ты сам. Просто им платят за то, чтобы они немножко шевелили мозгами.

Моя группа в контакте:

Методы для работы с CSS-стилями jQuery

В 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:140px;
    height:28px;
    background:#49A62E;
    color:white;
    font-size:20px;
    border-right:1px solid white;
    padding-left:10px;
}
#content{
    width:603px;
    height:100px;
    background:#A69927;
}
.selected{
   background:#A69927;
}

Осталось самое интересное, а именно функция chang():

function chang(s){
    $('.selected').removeClass('selected');
    $(s).addClass('selected');
}

Итак, как же работает эта функция? Сначала ищется элемент, который имеет класс selected, и этот класс у него убирается. Затем (вторая строка) выделенному элементу (он находится по id, переданному в функцию в качестве параметра s) добавляется класс selected. Вот так все просто.

1 2 3 4 5 6

Проверьте свою интуицию:

Мобильную версию можно скачать в google play

Follow @webshpargalka

Уроки:

Разделы:

В помощь:

Ещё:

Авторизация:

Тренажер интуиции:

Видеокурсы:

Опрос:

Топ комментаторов:

Моя группа в контакте:

Методы для работы с CSS-стилями jQuery

Проверьте свою интуицию:

Комментарии

Ваш комментарий