Достаточно интересные методы - .eq() и .index(), особенно в сочетании друг с другом. Поэтому и решил объединить рассмотрение этих методов. Каждый по отдельности - методы просты и мало показательны.

Но для начала вкратце (по другому и не получиться) опищу каждый из методов, по возможности своими словами.

Метод index

Работа метода .index() проста - он возвращает индекс (порядковый номер) указанного элемента среди группы ему подобных.

Синтаксис метода .index() также простой:

index([element])

или

.index(selector)

И пример для иллюстрации:

<ul class="test">
  <li class="primo">
    <a href="#" class="test__link">test item link</a>
  </li>
  <li class="secondo">
    <a href="#" class="test__link">test item link</a>
  </li>
  <li class="tetro">
    <a href="#" class="test__link">test item link</a>
  </li>
  <li class="quattro">
    <a href="#" class="test__link">test item link</a>
  </li>
  <li class="cinque">
    <a href="#" class="test__link">test item link</a>
  </li>
  <li class="sei">
    <a href="#" class="test__link">test item link</a>
  </li>
  <li class="sedici">
    <a href="#" class="test__link">test item link</a>
  </li>
  <li class="ten">
    <a href="#" class="test__link">test item link</a>
  </li>
</ul>

Сделать выборку всех элементов li и вернуть индекс элемента li с классом .cinque:

var listIndex = $('.cinque');
console.log('Index of ' + $('li').index(listIndex));

Найти элемент с классом .sei среди соседних элементов и вернуть его индекс:

console.log('Index of ' + $('.sei').index());

Как видим, способы получения индекса элемента разные, а результат один.

Метод eq

Метод .eq() прямопротивоположен методу .index(). Этот метод возвращает элемент (как объект) по его индексу (порядковому номеру).

Если взять предыдущую HTML-разметку, то такой javascript-код:

$('li').eq(1).html("Secondo");

… изменит содержимое второго по счету элемента li на “Secondo”. Почему второго? Как можно догадаться, результатом выборки $('li') является массив элементов; а в массиве индексирование элементов начинается с нуля (0).

Методы eq и index

Рассмотренные выше примеры использования методов .eq() и .index() просты и понятны. И неинтересны.

Гораздо более интеерсным примером является случай объединения обоих методов в jQuery-цепочке.

Приведу такой гипотетический пример:

<ul class="test">
  <li class="test__item primo">
    <a href="#" class="test__link">test item link</a>
  </li>
  <li class="test__item secondo">
    <a href="#" class="test__link">test item link</a>
  </li>
  <li class="test__item tetro">
    <a href="#" class="test__link">test item link</a>
  </li>
  <li class="test__item quattro">
    <a href="#" class="test__link">test item link</a>
  </li>
  <li class="test__item cinque">
    <a href="#" class="test__link">test item link</a>
  </li>
  <li class="test__item sei">
    <a href="#" class="test__link">test item link</a>
  </li>
  <li class="test__item sedici">
    <a href="#" class="test__link">test item link</a>
  </li>
  <li class="test__item">
    <a href="#" class="test__link">test item link</a>
  </li>
</ul>
$('.test__item').click(function(){
  $('li').eq($(this).index()).html($(this).index()).siblings().html("test item link");
});

Javascript-код, написанный выше, читается таким образом:

  • сделать выборку всех элементов с классом .test__item
  • при клике мыши на любом из этих элементов выполнить функцию:
    • сделать выборку всех элементов li
    • вернуть индекс активного элемента из выборки - $(this).index()
    • вернуть активный элемент по его индексу - .eq($(this).index())
    • для возвращенного элемента .eq($(this).index()) изменить его содержимое на значение его индекса - html($(this).index())
    • всем соседним (sibling) элементам установить значение в - .siblings().html("test item link")

Пример рабочий, поэтому его можно свободно попробовать.

В принципе, на этом все.


Два очень похожих метода библиотеки jQuery, служащих для фильтрации выборки - метод .has() и метод .hasClass().

И действительно, оба этих метода похожи между собой. Чтобы было понятно, лучше сразу перейду к примерам.

Метод .has()

Метод .has() фильтрует элементы, имеющие в своем составе указанные в .has() селекторы.

Простой пример:

$(li).has(a).addClass(active);

То есть: всем элементам li, имеющим в качестве потомков (в своем составе) элемент a, присвоить класс .active.

На лицо, как бы это сказать, обратная фильтрация - справа налево. Обычно все методы библиотеки jQuery работают слева направо.

Этот метод чем-то похож на метод .parent(). В качестве примера рассмотрим такой вариант:

$(a).parent(li).addClass(active);

… что читается таким образом: всем элементам li, являющимся родителями элементов a, присвоить класс .active.

Напомню, что метод .has() работает именно с селекторами и имеет такой синтаксис:

.has(selector)

Метод .hasClass()

Метод .hasClass() очень похож по принципу действия на предыдущий метод has() - но это только кажущееся впечатление.

Во-первых, как понятно из имени метода .hasClass(), что он работает с классами, а не селекторами.

То есть, синтаксис метода .hasClass() таков:

.hasClass(class)

Во-вторых, метод .hasClass() возвращает логическое true или false, в отличие от метода .has(), который возвращает массив объектов, доступных для дальнейшей обработки.

Простой пример:

if ($(li).hasClass(active)) {
  $(li).find(a).addClass(activeLink);
} else {
  $(li).find(a).addClass(inactiveLink);
}

… что читается таким образом: если элементы li имеют класс .active, то всем элементам a, являющимся потомками элементов li, присвоить класс .activeLink; иначе всем элементам a присвоить класс .inactiveLink.

Стоит обратить внимание, что в случае метода .hasClass() имеет место быть обычный способ фильтрации элементов - слева направо; выборка сужается по мере появления новых условий.

Вот такая картина получается, с двумя этими методами - .has() и .hasClass.

На этом все.


Осуществляет поиск элементов внутри уже выбранных элементов.

Метод имеет варианты использования и соответствующий синтаксис:

.find(selector) - ищет элементы, соответствующие заданному селектору, внутри выбранных элементов.

.find(element) - осуществляет поиск элемента element внутри выбранных элементов. Параметр element задается в виде DOM-элемента.

.find(jQuery object) - осуществляет поиск элементов внутри выбранных элементов, оставляя те, которые содержатся в заданном объекте jQuery.

Примеры использования.

  • вернет все элементы span, находящиеся внутри div-элементов:
$('div').find('span')
  • вернет все элементы с классом .bigBlock, находящиеся внутри div-элементов:
$('div').find('.bigBlock')

Вышеуказанные примеры хороши лишь в качестве демонстрации возможностей метода .find().

Например, искать span-элементы, лежащие внутри div’ов правильнее будет так:

$('div span')

Метод .find() же удобно использовать, когда некоторые элементы уже найдены и необходимо осуществить поиск других элементов внутри уже найденных элементов:

// найдем все ul-элементы на странице
var $ulElements = $('ul');
// найдем li-элементы с классом .userBox внутри $ulElements
$ulElements.find('li.userBox');

// сокращенный вариант записи
var $ulElements = $('ul').find('li.userBox');

Так же .find() удобен для использования в цепочках методов:

$('ul') // найдем все ul-элементы на странице
  .addClass('listElements') // добавим ul'ам класс .listElements
  .find('li.userBox') // найдем li-элементы с классом .userBox внутри ul'ов
  .remove(); // и удалим их

// сокращенный вариант записи
$('ul').addClass('listElements').find('li.userBox').remove();

Работа метода .find() схожа с методом .children(), который осуществляет поиск подходящих дочерних элементов.

Отличие заключается в том, что .find() проводит поиск не только среди дочерних элементов, но и внутри них тоже (другими словами - поиск проходит на всех уровнях иерархии DOM, в то время как .children() ищет только на одном уровне).

Пример метода .find()

Внутри каждого ul-элемента найдем первый li-элемент и последний p-элемент:

// найдем и сохраним все ul-элементы
var $matched = $('ul');

// выделим их
$matched.addClass('matched');

// найдем внутри уже выбранных элементов все требуемые и выделим их, добавив класс .result
$matched.find('li:first, p:last').addClass('result');

// сокращенный вариант записи
var $matched = $('ul').addClass('matched').find('li:first, p:last').addClass('result');

Фильтрация элементов помощью .find()

Кроме поиска, .find() может осуществлять своеобразную фильтрацию.

var $span = $('span'); // создать переменную $span и поместить в нее результат выборки по элементам span
$('p').find($span).css('color','blue'); // найти все элементы p, среди этих найденных элементов найти все элементы span и расскрасить их

Материал статьи полностью основан на http://jquery.page2page.ru и не претендует на оригинальность.


Две функции-близнеца, предназначенные для управления видимостью элементов на странице. Это осуществляется через CSS-свойство display (замечание: по внимательном перечтении оказалось не все так просто - в этой “магии” задействованы не только CSS-свойство display, но также width, height, opacity; и даже margin и padding!).

После скрытия элемента значение его CSS-свойство становится равным dispaly: none. Перед появлением элемента его CSS-свойство display изменяет свое значение на противоположное от none.

duration — продолжительность выполнения анимации (появления или скрытия). Может быть задана в миллисекундах или строковым значением ‘fast’ или ‘slow’ (200 и 600 миллисекунд). Если этот параметр не задан, анимация будет происходить мгновенно, элемент просто появится/исчезнет.

callback — функция, заданная в качестве обработчика завершения анимации (появления или скрытия).

Примеры использования:

  • мгновенно скроет элемент с идентификатором #leftFit.
$("#leftFit").hide();
  • мгновенно покажет элемент с идентификатором #leftFit:
$("#leftFit").show();
  • в течении 1/3 секунды скроет элемент с идентификатором #leftFit:
$("#leftFit").hide(300);
  • в течении 600 миллисекунд вернет видимость элементу с идентификатором #leftFit:
$("#leftFit").show("slow")

Можно скрывать и показывать элементы с помощью сворачивания/разворачивания (за счет изменения высоты). Это делают функции slideUp(), slideDown().

Медленно скрывает и раскрывает все видимые параграфы, длительность анимационных эффектов — 600 миллисекунд:

$('button').click(function () {
  $('p').hide('slow');
});

$('button').click(function() {
  $('p').show('slow');
});

Использование callback-функции:

$('#clickme').click(function() {
  $('#book').hide('slow', function() {
    alert('Animation complete.');
  });
});

$('#clickme').click(function() {
  $('#book').show('slow', function() {
    alert('Animation complete.');
  });
});

Материал данной статьи основан на ресурсах:

… и не претендует на оригинальность.


Маленькое вступление. Этой статьей я начинаю серию, посвященную работе с библиотекой jQuery. Точнее, я буду с помощью этих микро-статей самостоятельно изучать jQuery. И хотя при этом меня не оставляет постоянная мысль, что я делаю глупую и пустую работу (есть масса куда более лучших по объему и качеству ресурсов на эту тематику), все же мне так хочется. И это желание также продолжает основную идею этого бложика, его цель и смысл существования.

Смысл жизни данного бложика - быть записной книжкой для своего хозяина. Помогать ему в освоении безбрежных просторов Web по принципу “прочитал-усвоил-пересказал”. Ибо такой принцип мне кажется наиболее эффективным в деле изучения чего-то нового, особенно - если этого нового очень много.

Кроме того, мне работа с библиотекой jQuery нравиться! Она для меня - легкая и увлекательная игра; тот редкий случай, когда изучение программирования для меня дается одновременно очень легко и увлекательно. Чаще - что-то одно из двух.

Хватит лирики - переходим к практике.

Функция on()

Функция .on() является универсальным способом обработки событий на странице с помощью библиотеки jQuery. Почему универсальным? Давайте взглянем на синтаксис функции .on():

.on(event, eventHandler);

… здесь event - это стандартное событие языка JavaScript: blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error.

eventHandler - это функция, обработчик события. Она создается для указанного события.

Хватит слов - краткий пример все “расскажет” лучше всяких слов.

$(#foo).on(click, function(){
  alert(Вы нажали на элемент "foo");
});

… или так -

function myFunction(){
  alert(Вы нажали на элемент "foo");
});

$(#foo).on(click, myFunction);

То есть, при клике мыши (событие click) на элементе с идентификатором #foo запускается обработчик этого события - функция, которая в данном случае является всего лишь командой alert. Но эта функция может быть и более сложной, конечно.

Другими словами, вызывая функцию .on(), мы передаем ей два аргумента - событие (которое нужно отслеживать) и обработчик этого события. Поэтому функция .on() и называется универсальной функцией.

Существуют менее универсальные функции - одноименные (событиям) функции под каждое конкретное событие. Для сравнения, таких два примера абсолютно равнозначны, но имеют разный синтаксис:

$(#foo).click(function(){
  alert(Вы нажали на элемент "foo");
})
$(#foo).on(click, function(){
  alert(Вы нажали на элемент "foo");
});

Важное замечание: функция .on() была введена в jQuery взамен трех функций .live(), .bind(), .delegate(), которые считаются устаревшими и не поддерживаются современными версиями jQuery, начиная с версии 1.8.0.

В принципе, на этом можно остановиться, говоря о функции .on(). Для начала - этого достаточно.