jQuery для начинающих

jQuery для начинающих

21 день осталось до наступления Нового года, у нас в офисе нет интернета, поэтому я решил написать первую часть урока «jQuery для начинающих». Нулевую его часть вы можете прочесть по ссылке jQuery для начинающих
С горем пополам, но выбирать элементы на странице мы немного научились, сегодня же речь пойдет о том, как выбрать более специфичные элементы – элементы, которые невозможно выбрать с применением штатных средств CSS(2,3), или это сделать намного сложнее, чем воспользоваться функциями jQuery.
По большей части нам приходится работать с набором элементов: будь то все параграфы, объединенные общим классом, все текстовые поля формы, вложенные неупорядоченные списки. Поэтому сейчас мы разберем как же управляться с этими наборами. В первую очередь мы научимся определять количество элементов в наборе, для этого существует 2 возможности: первая – это свойство length, второе – метод jQuery size(). На пример, у нас на странице имеется множество параграфов, мы хотим подсчитать их количество

1
alert($('p').size());

или просто

1
alert($('p').length);

Порой приходится находить элементы по его индексу, когда не хватает базовых селекторов аля :first или :last – это тоже просто
Чтобы получить элемент набора по индексу, а наборы – это и есть обычные массивы JavaScript, можно также воспользоваться 2 методами:
1)

1
$('a[href$=.rar]')[0]

- получаем первую (индексы начинаются с 0) ссылку, указывающую на архив rar, конструкция [свойство$=значение] отыскивает элементы, «свойство», которых заканчивается на «значение». Это можно использовать, чтобы прикрепить красивую иконку к ссылке, тогда уж точно пользователь будет знать, что произойдет тыкни он в эту ссылку.
2)

1
$('a[href^=http://]').get(2)

- команда jQuery (получаем третью внешнюю ссылку, индекс, как вы уже знаете, начинается с нуля)
Если параметр не определен, то возвраются все элементы набора в виде массива JavaScript. Если определен, то только элемент с заданным индексом.

Команда index наоборот получает индекс заданного элемента, если ей не удалось отыскать, то возвращает -1.
Допустим нам вдруг понадобилось и очень срочно отыскать индекс картинки с идентификатором ‘logo’, все тоже очень просто, просто напишем

1
var nLogo = $('img').index($('img#logo'));

теперь в переменной nLogo индекс нашей картинки среди множество картинок на странице.

Иногда нам не хватает просто выбрать один набор, пусть то параграфы или картинки, иногда хочется манипулировать и тем, и другим, и это мы уже почти можем, осталось только освоить новую команду add, синтаксис которой, впрочем как и все в jQuery, очень просто

1
$('набор1').add('набор2');

Как только мы освоили эту команду, нам вдруг уж очень захотелось сделать побольше и хидер, и футер нашего сайта на 10 пикселей, а открывать css-файл, нам по тем или иным причинам не хочется. Тоже не вопрос

1
$('#header').add('#footer').css("height", function() { return $(this).height() + 10 + 'px'; });

Не страшитесь столь нагроможденной конструкции, она всего лишь извлекает значение старой высоты и прибавляет 10px. Подробнее мы разберем ее дальше.

Но не всегда же прибавляеть наборы, скажите вы, правильно, иногда их следует немного сузить, чем мы незамедлительно и займемся. В нашем распоряжении команда not, которая удаляет из набора элементы, заданные у нее в параметре.
Допустим нам хочется скрыть все картинки, но лого оставить на виду, ну гордимся мы своим логотипом, нарисованным горе-фрилансером за 3$.

1
$('img').not($('img#logo')).hide();

Сейчас же я хотел немного отступиться от темы наборов и рассказать вам маленький секрет. А заключается он в том, что jQuery помимо того, что очень прост и взваливает на себя всю грязную работу, он еще и делает это специфически, а именно цепочками, коих насчитываться может великое множество. На пальцах это будет выглядеть примерно так
Взять_все_картинки.нарисовать_к_ним_рамочку().добавить_в_набор_все_параграфы.сделать_побольше_отступ().удалить_из_набора_все_:first-элементы.обернуть_все_div-ом
То, есть очень многое можно записать в одну строчку, в которой потом сам черт ногу сломает, но все таки одна =)

К команде not еще очень хорошо подходит filter, который может принимать в параметре либо функцию, которая и будет фильтровать элементы по специфическим признакам, либо строку, в который задается условие для исключающихся элементов из набора.

1
$('a').addClass('underline').filter('[href^=http://]').addClass('internal');

Берем все ссылки и добавляем к ним класс .underline, потом исключаем из этого набора внешние ссылки (внутренние как правило, встречаются без предварительного http://) и добавляем к ним класс .internal, выделяющий внутренние ссылки. Команду filter с функцией в качестве параметра мы рассмотрим чуть позже.

А как же мне найти элементы, являющиеся родителем для данного элемента или поиск элементов в зависимости от иерархического расположения. Эти методы представляют нам большую широту выбора элементов на основе их расположения в дереве DOM (объектная модель документа).
Не буду вдаваться в подробности тут, просто приведу это методы с кратким пояснением
children() – как понятно из названия, возвращает только «детей» заданного набора, т.е. дочерние элементы
contents() – чтобы получить содержимое данного набора пользуемся этим методом
next() – следующий подумаете вы, и будете абсолютно правы, следующие элементы идущий по соседству с нашим набором (не путайте с «детьми»)
parents() – прям отцы и дети какие-то, все правильно возвращаем родительсие элементы данного набора
prev() – то же, что и next(), только предыдущие
Еще есть некоторые, но я пока рассматривать не буду их.

Что же делать нам, когда хочется немного сузить наш набор, и произвести необходимые действия с самим набором, и с отфильтрованной его частью. Поможет нам метод поиска find(), осуществляющий поиск по заданному селектору.

1
$('img').addClass('bordered').find('.myphoto').hide()

- все картинки будут иметь рамку, а фото самого себя мы спрячем.

А вдруг нам захочется просто узнать существуют ли элементы, отвечающие следующему условию, что делать тогда? И тут разработчики jQuery позаботились о нас. Метод is – ответ на данный вопрос.

1
if ($('*').is('a')) alert('ссылка найдена');

Диалоговое окно мы увидим лишь в случае, если среди всех элементов на странице (‘*’) имеется хоть одна ссылка (‘a’).

Рассмотрим последний метод в этой части, а именно метод end(), позволяющий сделать своего рода откат – возврат на одну ступень вверх в стеке выбираемых наборов, т.е.

1
$('p:first').addClass('decorate').find('a').hide().end().css('opacity', 0.8);

Выбираем сначала первый абзац, добавляем к нему класс, затем выбираем из первого абзаца все ссылки и скрываем их, после этого возвращаемся к первоначальному набору, первый параграф в данном примере и делаем его менее непрозрачным.

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