Второй урок мы проведем, рассматривая более подробно способы обращения к элементам при работе с jQuery. Это совсем несложно.
Как для выделенного элемента отыскать родительский? Это возможно осуществить несколькими способами.
Для примера нам послужит код
[sourcecode language=’xml’]A header with a link inside.
A paragraph in the div
Как можно выделить h2?
[sourcecode language=’jscript’]$(‘h2′).[/sourcecode]Как мы выбираем div?
[sourcecode language=’jscript’]$(‘div’).[/sourcecode]Если необходимая страница имеет более сложную структуру, то нужно применить команду .parent():
[sourcecode language=’jscript’]$(‘h2′).parent(); //тем самым мы выбираем div[/sourcecode]А как найти, наоборот, не родительский элемент, а дочерний?
[sourcecode language=’jscript’]$(‘h2 a’);[/sourcecode]На самом деле все немного сложнее. Неважно почему, не будем вдаваться в подробности, но запись приведенной формы работает не корректно. Поэтому тоже самое можно сделать по-другому, с помощью команды .children():
[sourcecode language=’jscript’](‘h2′).children(); //выбирает нашу ссылку[/sourcecode]В случае с несколькими дочерними элементами можно:
[sourcecode language=’jscript’]$(‘h2’).children(‘a’); //выбирает все ссылки внутри h2[/sourcecode]Перейдем к рассмотрению ненумерованного списка.
[sourcecode language=’xml’]- Item 1
- Item 2
- Item 3
- Item 4
- Item 5
В этом списке все пункты нужно выбрать таким образом:
[sourcecode language=’jscript’]$(‘li’);[/sourcecode]Или с помощью новой функции:
[sourcecode language=’jscript’]$(‘ul’).children();[/sourcecode]Наши действия обычно будут зависеть от определенной ситуации.
К примеру, если у нас на странице имеются списки двух видов – ol и ul, а нам необходим конкретный элемент списка, то в данном случае следует использовать функцию eq():
[sourcecode language=’jscript’]$(‘li’).eq(2); //выбираем item 3 (поскольку отсчёт, как мы помним, начинается с 0)[/sourcecode]Важно: число в скобках eq() всегда должно быть на единицу меньше, чем порядковый номер нужного элемента.
Важно понять, что в jQuery все действия будут выполняться по очереди, или по цепочке.
[sourcecode language=’jscript’]$(‘ul’).children(‘li’).eq(3).animate({…});[/sourcecode]При помощи этого кода будут выполнены эти шаги:
1. $(‘ul’) => Выберет список ul на странице.
2. children(‘li’) => выберет дочерний элемент.
3. eq(3) => выберет в каждом списке четвертый элемент.
4 animate({…}) => осуществит анимацию выбранного элемента. Более подробно работа с анимацией будет рассматриваться в следующей части.
Поскольку особенностью функции .children() является ее обращение исключительно к дочернему элементу, необходимо изучить возможность jQuery, которые позволяют «копнуть» более глубоко.
Рассмотрим это на нашем прежнем примере
[sourcecode language=’xml’]A header with a link inside.
A paragraph in the div
Выбираем div
[sourcecode language=’jscript’]$(‘div’);[/sourcecode]Далее для выбора ссылок из тега h2, расположенном в нашем div’е, можно было бы записать:
[sourcecode language=’jscript’]$(‘div’).children(‘h2’).children(‘a);[/sourcecode]В принципе, это правильно. Но можно было сделать и покороче, применив функцию find():
[sourcecode language=’jscript’]$(‘div’).find(‘a’)[/sourcecode]Эта функция не остановится на одном элементе, а продолжит поиск, пока не будут найдены все ссылки внутри div’а.
Теперь изучим возможности обращения к соседним элементам, находящимся на одном уровне с нашим – в данном случае это h2 и p.
Нам помогут команды next(), nextAll(), prev(), prevAll()
[sourcecode language=’jscript’]$(‘h2’).next(); //выбирается следующий параграф (соседа)$(‘h2’).nextAll(); //выбираются все следующие соседи.
$(‘p’).prev(); //выбирается предыдущий сосед (h2)
$(‘p’).prevAll(); //выбираются все предыдущие соседи.[/sourcecode]
И напоследок, функция siblings().
Создаем новый HTML блок:
[sourcecode language=’xml’]A paragraph
A heading
A bigger heading
[/sourcecode]Выделяем всех соседей, начиная с самого первого параграфа:
[sourcecode language=’jscript’]$(‘p’).nextAll();[/sourcecode]Если же мы уже находимся на h2, то для выбора всех соседей h2:
[sourcecode language=’jscript’]$(‘h2′).siblings();[/sourcecode]В данной функции могут содержаться аргументы:
[sourcecode language=’jscript’]$(‘h2’).siblings(‘p’) // выбираеи всех соседей, которые являются параграфами[/sourcecode]В завершение.
Для включения jQuery в любое место страницы, необходимо просто добавить код
[sourcecode language=’jscript’]$(document).ready(function() {…});[/sourcecode]Далее – убеждаемся, что после загрузки всей страницы код пройдет обработку – в противном случае не будет исключена возможность манипулирования элементами во время загрузки.
Во избежание этого нужно обернуть код в такую оболочку:
[sourcecode language=’jscript’]$(document).ready(function() {//заносим сюда весь наш jQuery код
});[/sourcecode]
