jQuery (3): CSS

категория: jQuery
Итак выбирать элементы каркаса с помощью jQuery мы уже умеем, теперь будем делать самое интересное - манипулировать ими, т.е. совершать над ними различные изменения c помощью css. Надеюсь с CSS уже все знакомы, даже друзья :) При необходимости сперва желательно выучить хотя бы основы. Для экспериментов нам понадобиться небольшой кусок html:
<h1 id="love">I love jQuery</h1>
<p class="main">
  If you don't know CSS, I think <span class="imposible">it's imposible</span>,
  you must read it right now.
</p>
Давайте изменим некоторые свойства CSS для елемента "span" c классом "imposible". Размер текста пусть будет 90% от реального размера, жирный, а цвет красный - "red". В этом нам поможет метод jQuery - "css":
$("span.imposible").css({"font-size": "90%", "font-weight": "bold", 
                         "color": "red"});
Для добавления нового класса выбранному элементу используется метод addClass, для удаления - removeClass, а для переключением между удалением и добавлением класса - toggleClass. Добавим к примеру к h1 id="love" класс "love", а потом удалим все классы:
$("h1#love").addClass("love");
$("h1#love").removeClass();
Еще один замечательный метод - это метод hide() - скрывание элементов, из DOM они не исчезают, а просто находятся на своем месте невидимые. И противоположный метод - появление - show(). Спрячем заголовок h1, а потом его отобразим:
$("h1").hide();
$("h1").show();
В следующий раз рассмотрим манипуляции с DOM: будем менять текст, вставлять и удалять элементы непосредственно в дереве html и много, много интересного.


blog comments powered by Disqus