На этом шаге мы рассмотрим организацию обхода дерева DOM.
Селекторы jQuery, изученные нами к настоящему моменту, позволяют отбирать множество элементов таким образом, что мы совершаем обход поперек и вниз по дереву DOM и фильтруем полученные результаты. Если бы селекторы были единственным способом выбора элементов, наши возможности были бы весьма ограничены (хотя, откровенно говоря, селекторы обеспечивают более высокую надежность по сравнению с обычными средствами, предоставляемыми объектной моделью документа). Во многих случаях бывает необходимо отобрать родительские или дочерние элементы, и в таких ситуациях удобно использовать методы jQuery обхода дерева DOM. С помощью этих методов мы легко можем передвигаться вверх, вниз и поперек дерева DOM.
Для некоторых методов имеются практически идентичные селекторы. Например, строку, с помощью которой мы ранее добавляли класс alt,
$('tr:odd').addClass('alt');,
$('tr').filter(':odd').addClass('alt');
Эти два способа выбора элементов в значительной степени дополняют друг друга. Кроме того, метод .filter(), в частности, обладает огромной мощью, так как способен принимать функцию в качестве аргумента. Это позволяет реализовывать сложные проверки элементов, которые должны включаться в возвращаемый набор. Например, предположим, что необходимо добавить класс ко всем внешним ссылкам. В библиотеке jQuery нет селектора для выполнения подобной операции. Без функции фильтрации нам пришлось бы явно обойти в цикле все элементы и проверить каждый из них в отдельности. С помощью следующей функции фильтрации мы по-прежнему можем опереться на механизм неявных итераций jQuery и обеспечить компактность программного кода:
$('а').filter(function() {
return this.hostname && this.hostname != location.hostname;
}).addClass('external');
Вторая строка в этом фрагменте фильтрует элементы <а> по следующим двум критериям:
- Они должны иметь атрибут href с доменным именем (this.hostname). Эта проверка используется для исключения ссылок типа mailto и подобных им.
- Доменное имя, на которое они ссылаются (снова this.hostname), не должно совпадать (!=) с доменным именем текущей страницы (location.hostname).
Если говорить более точно, метод .filter() выполняет обход совпавшего множества элементов и проверяет значение, возвращаемое функцией для каждого из них. Если функция возвращает значение false, элемент исключается из совпавшего множества. Если она возвращает значение true, элемент остается.
Теперь снова обратимся к нашей таблице, где мы выделяли чередующиеся строки, и посмотрим, какие еще операции можно реализовать с помощью методов обхода.
На следующем шаге мы рассмотрим изменение оформления отдельных ячеек.
