Шаг 18.
Библиотека jQuery.
Селекторы. Методы обхода дерева DOM

    На этом шаге мы рассмотрим организацию обхода дерева DOM.

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

    Для некоторых методов имеются практически идентичные селекторы. Например, строку, с помощью которой мы ранее добавляли класс alt,

$('tr:odd').addClass('alt');,
можно переписать с использованием метода .filter(), как показано ниже:
$('tr').filter(':odd').addClass('alt');

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

$('а').filter(function() {
  return this.hostname && this.hostname != location.hostname; 
}).addClass('external');

    Вторая строка в этом фрагменте фильтрует элементы <а> по следующим двум критериям:

  1. Они должны иметь атрибут href с доменным именем (this.hostname). Эта проверка используется для исключения ссылок типа mailto и подобных им.
  2. Доменное имя, на которое они ссылаются (снова this.hostname), не должно совпадать (!=) с доменным именем текущей страницы (location.hostname).

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

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

    На следующем шаге мы рассмотрим изменение оформления отдельных ячеек.




Предыдущий шаг Содержание Следующий шаг