Slyweb
На разработку сайта! Скидки 50%!
Поиск CSS свойств и HTML элементов:
поиск



Все CSS свойства и HTML элементы справочника

Зачем и почему эта статья нужна Вам.

Данная статья является логическим дополнением справочника CSS, размещенного на данном сайте, так как в низу каждой страницы справочника CSS, описывающей соответствующее CSS свойство, находится дополнительный блок с методами jQuery, реализующих доступ к данному свойству. Цель статья - научить неопытных пользователей jQuery основам этого фреймовика при работе с CSS свойствами.

Оглавление. CSS и jQuery.

1. Что такое jQuery и зачем он нужен?
2. Возможности jQuery в CSS.
3. Практика. Методы jQuery для CSS свойств.
4. Заключение.

1. Что такое jQuery и зачем он нужен?

jQuery - совокупность javascript функций, упрощающих написание скриптов на javascript. По сути своей jQuery представляет собой тот же javascript.

Для того чтобы использовать jQuery необходимо подключить файл js(javascript). На сайте slyweb.ru, - на основной странице сайта или на основной странице руководства jQuery, в блоке для загрузки jquery Вы можете скачать последнюю версию jQuery.

Я рекомендую использовать последнюю минимизированную версию jQuery, хотя jQuery 1.3.2, обладает почти теми же возможностями.

Для использования jQuery на Ваших страницах подключите js файл, например:

  1.<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
Теперь перейдем к возможностям jQuery в CSS.

2. Возможности jQuery в CSS.

Прежде всего jQuery - это быстрый и легкий доступ к CSS свойствам и их модификации. Вам не что не стоит как написать:

  1.$("div").css("color","blue");
и изменить текст всех элементов DIV на голубой. Или
  1.$("div").css("width","500px");
и тем самым изменить ширину всех элементов DIV, которая теперь будет соответствовать 500px.

jQury специально разработан для ускорения написания javascript кода, сравните, чтобы достичь того же используя "чистый" javascript Вам необходимо написать следующее:

  1.document.getElementByTagName("DIV").style.color = "blue"
, или для второго случая:
  1.document.getElementByTagName("DIV").style.width = "500px".

Как видите скорость написания увеличивается, если использовать jQuery. Заранее отмечу что первые два примера можно сократить ещё. А

Огромное значение в CSS имеют селекторы, шаблоны селекторов. В jQuery любые селекторы поддерживаемые стандартом CSS3, реализованы кроссбраузерно, то есть те, из которых не поддерживаются отдельными браузерами без использования jQuery, полностью поддерживаются с использованием jQuery.

К примеру возьмём идентификаторы и классы в CSS, ни одна страница не обходится без них. Например чтобы получить коллекцию элементов DIV с классом mydiv следует написать следующий код:

  1.div = $("DIV.mydiv");
здесь мы сохранили в переменную div все элементы DIV на странице с классом mydiv. Схожим образом сохраняются элементы по идентификатору (id):
  1.div = $("DIV#mydiv"); // получить элемент с id mydiv.

Однако, некоторые элементы могут содержать атрибуты отличные от класса и от идентификатора, например name, src, href и т.д. Используя селекторы CSS в методах jQuery можно получить доступ к любому элементу используя данные атрибуты. Ниже указаны все популярные, написанные в соответствие с CSS, шаблоны селекторов в методах jQuery:

Метод jQuery Описание метода
var col = $("*").length; Шаблон CSS "*" обозначает универсальный селектор, по которому jQuery находит все элементы HTML. В переменной col будет находиться значение обозначающее количество элементов на странице:
var col = $("DIV").length; В переменной col будет находиться значение, обозначающее количество элементов DIV на странице:
var col = $("DIV P").length; В переменной col будет находиться значение, обозначающее количество элементов потомков P внутри родительского элемента DIV:
var col = $("DIV > P").length; В переменной col будет находиться значение, обозначающее количество элементов потомков P внутри родительского элемента DIV, основное отличие от предыдущего примера состоит в том, что элементы P, хотя и могут находится в элементе DIV, но являясь дочерними элементами другого элемента, не будут учитываются при подсчете:
var col = $("DIV:first-child").length; В переменной col будет находиться значение, обозначающее количество первых элементов-потомков P внутри родительского элемента DIV:
var col = $("DIV + DIV").length; В переменной col будет находиться значение, обозначающее количество элементов DIV, которые немедленно следуют за другими элементами DIV:
var col = $("DIV[foo]").length; В переменной col будет находиться значение, обозначающее количество элементов DIV, имеющих атрибуты foo:
var col = $("DIV[foo='attr']").length; В переменной col будет находиться значение, обозначающее количество элементов DIV, имеющих атрибут foo со значением равным "attr":
var col = $("DIV[foo$='attr']").length; В переменной col будет находиться значение, обозначающее количество элементов DIV, имеющих атрибут foo, заканчивающиеся на "attr":
var col = $("DIV[foo~='attr']").length; В переменной col будет находиться значение, обозначающее количество элементов DIV, имеющих атрибут foo, среди значений которых, разделённых пробелом содержится "attr":
var col = $("DIV[foo^='attr']").length; В переменной col будет находиться значение, обозначающее количество элементов DIV, имеющих атрибут foo, значение которого начинается с "attr":
var col = $("input:disabled").length; var col = $("input:enabled").length; var col = $("input:checked").length; jQuery поддерживает селектора введенные в CSS3, для элементов формы как отключенных, так и не отключенных, или отмеченных элементов (для checkbox):
var col = $("DIV:contains(Привет)").length; Наиболее интересным примером введенным CSS3 является селектор "содержимого". В этом примере будет подсчитано количество элементов DIV, содержащих текст "Привет".

Указанное количество селекторов в jQuery не является исчерпывающим, остальные методы, размещены в справочнике jQuery данного сайта, однако, некоторые селекторы CSS jQuery не поддерживает, например :not(), несмотря на то что в справочнике jQuery такой метод есть, в спецификации он имеет другой смысл.

Все вышеперечисленные примеры селекторов могут быть использованы для поиска и установки CSS свойств, следует только изменить некоторые из них соответствующим образом, например установим свойство text-decoration для всех элементов DIV, содержащих текст "Привет":

  1.$("DIV:contains(Привет)").css("text-decoration","underline");
Теперь, когда Вы знаете как правильно получить доступ к элементу, рассмотрим методы специально предназначенные для CSS.

3. Практика. Методы jQuery для CSS свойств.

Основными методами CSS следует считать:

  1. css("property","value")
  2. css({"property":"value","property":"value",...n})
  3. addClass("class")
  4. removeClass("class")
  5. hasClass("class")
  6. toggleClass("class")

Рассмотрим каждый из них:

css("property","value"). Метод устанавливает или предоставляет доступ к единичному CSS свойству. Например, ниже для элемента DIV будет установлен голубой цвет текста:

  1.$("DIV").css("color","blue");
для того чтобы получить свойство color, напишите:
  1.var color = $("DIV").css("color");

css({"property":"value","property":"value",...n}). Метод устанавливает или предоставляет доступ к нескольким CSS свойствам, хотя может использоваться для установления единичного CSS свойства. Например ниже, опять же для элемента DIV будет установлен голубой цвет текста, но уже подчеркнутого:

  1.$("DIV").css({"color":"blue","text-decoration":"underline"});

addClass("class"). Метод добавляет класс элементу, при этом метод не удаляет предшествующий класс. Пример:

  1.$("DIV").addClass("class"); // добавить всем элементам DIV класс "class"

removeClass("class"). Метод удаляет класс элемента. Пример:

  1.$("DIV").removeClass("class"); // удалить у всех элементов DIV класс "class"

hasClass("class"). Метод проверяет наличие класса возвращает true или false. Пример:

  1.$("DIV").hasClass("class");

toggleClass("class"). Метод переключает класс. Пример:

  1.$("DIV.tumble").toggleClass("class");
приведет к тому, что к элементу с классом добавится дополнительный класс "class"
  1.<div class="tumble">Some text.</div>
то есть предшествующий HTML будет выглядеть следующим образом:
  1.<div class="tumble class">Some text.</div>

В справочнике jQuery содержаться две дополнительные вариации данного метода:

  1. toggleClass(className,switch)
  2. toggleClass(function(index, class), [switch])

Первая разновидность метода переключат класс, используя счетчик. Например ниже по каждому третьему запуску данного метода будет происходить добавление класса "highlight" для элемента DIV с классом "tumble".

  1.$("DIV.tumble").toggleClass("highlight", count % 3 == 0);

Вторая разновидность метода позволяет проверять имя класса с помощью функции обратного вызова:

  1.$(document).ready(function(){
  2.
  3.$('div.foo').toggleClass(function() {
  4.
  5. if ($(this).parent().is('.bar')) {
  6. return 'happy';
  7. } else {
  8. return 'sad';
  9. }
10.});
11.
12.});

Этот пример взят из официального справочника jQuery. В нём происходит проверка класса для элемента с классом "foo", если родительский элемент данного элемента имеет класс "bar", то для текущего элемента добавляется класс "happy", иначе класс "sad".

В jQuery существуют и дублирующие методы, например height(),width(),scrollLeft(),scrollTop(). Указанные методы могут быть заменены методом css().

4. Заключение.

Материал изложенный поможет Вам разобраться в jQuery при использовании его в CSS. Успехов и до встреч!


Александр Ермаков. Хостинг - www.pwstudio.org