Достаточно интересные методы -

1

.eq()

1

.index()

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

Метод index

Работа метода

1

.index()

Синтаксис метода

1

.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>

Сделать выборку всех элементов

1

li

1

li

1

.cinque

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

Найти элемент с классом

1

.sei

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

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

Метод eq

Метод

1

.eq()

1

.index()

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

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

… изменит содержимое второго по счету элемента

1

li

1

$('li')

Методы eq и index

Рассмотренные выше примеры использования методов

1

.eq()

1

.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-код, написанный выше, читается таким образом:

• сделать выборку всех элементов с классом

  1	.test__item

• при клике мыши на любом из этих элементов выполнить функцию:
  • сделать выборку всех элементов

    1

    li

  • вернуть индекс активного элемента из выборки -

    1	$(this).index()

  • вернуть активный элемент по его индексу -

    1	.eq($(this).index())

  • для возвращенного элемента

    1	.eq($(this).index())

    изменить его содержимое на значение его индекса -

    1	html($(this).index())

  • всем соседним (sibling) элементам установить значение в -

    1	.siblings().html("test item link")

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

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

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

1

.has()

1

.hasClass()

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

Метод .has()

Метод

1

.has()

1

.has()

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

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

То есть: всем элементам

1

li

1

a

1

.active

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

Этот метод чем-то похож на метод

1

.parent()

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

… что читается таким образом: всем элементам

1

li

1

a

1

.active

Напомню, что метод

1

.has()

.has('selector')

Метод .hasClass()

Метод

1

.hasClass()

1

has()

Во-первых, как понятно из имени метода

1

.hasClass()

То есть, синтаксис метода

1

.hasClass()

.hasClass('class')

Во-вторых, метод

1

.hasClass()

1

true

1

false

1

.has()

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

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

… что читается таким образом: если элементы

1

li

1

.active

1

a

1

li

1

.activeLink

1

a

1

.inactiveLink

Стоит обратить внимание, что в случае метода

1

.hasClass()

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

1

.has()

1

.hasClass

На этом все.

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

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

1

.find(selector)

1

.find(element)

1

element

1

element

1

.find(jQuery object)

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

• вернет все элементы

  1

  span

  , находящиеся внутри div-элементов:

$('div').find('span')

• вернет все элементы с классом

  1

  .bigBlock

  , находящиеся внутри div-элементов:

$('div').find('.bigBlock')

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

1

.find()

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

$('div span')

Метод

1

.find()

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

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

Так же

1

.find()

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

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

Работа метода

1

.find()

1

.children()

Отличие заключается в том, что

1

.find()

1

.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-свойство

1

display

1

display

1

width

1

height

1

opacity

1

margin

1

padding

После скрытия элемента значение его CSS-свойство становится равным

1

dispaly: none

1

display

1

none

1

duration

1

callback

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

• мгновенно скроет элемент с идентификатором

  1

  #leftFit

  .

$("#leftFit").hide();

• мгновенно покажет элемент с идентификатором

  1

  #leftFit

  :

$("#leftFit").show();

• в течении 1/3 секунды скроет элемент с идентификатором

  1

  #leftFit

  :

$("#leftFit").hide(300);

• в течении 600 миллисекунд вернет видимость элементу с идентификатором

  1

  #leftFit

  :

$("#leftFit").show("slow")

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

1

slideUp()

1

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.');
  });
});

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

• http://jquery.page2page.ru
• http://jquery-docs.ru
• http://api.jquery.com

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

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

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

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

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

Функция on()

Функция

1

.on()

1

.on()

.on(event, eventHandler);

… здесь

1

event

1

blur

1

focus

1

focusin

1

focusout

1

load

1

resize

1

scroll

1

unload

1

click

1

dblclick

1

mousedown

1

mouseup

1

mousemove

1

mouseover

1

mouseout

1

mouseenter

1

mouseleave

1

change

1

select

1

submit

1

keydown

1

keypress

1

keyup

1

error

…

1

eventHandler

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

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

… или так -

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

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

То есть, при клике мыши (событие

1

click

1

#foo

1

alert

Другими словами, вызывая функцию

1

.on()

1

.on()

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

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

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

Важное замечание: функция

1

.on()

1

.live()

1

.bind()

1

.delegate()

В принципе, на этом можно остановиться, говоря о функции

1

.on()