В сегодняшней статье, мы закончим изучение селекторов JQuery, как и в прошлой статье, рассмотрев пару интересных примеров их использования. Прочитав статью, вы научитесь применять селекторы, для стилизации ячеек, строк или заголовков таблиц, а также искать и находить элементы по заданному значению.
Специальные селекторы
К большому разнообразию CSS и XPath селекторов, JQuery добавляет еще и свои собственные селекторы. Большинство этих селекторов позволяет выбирать элементы, как говорится, из расположения. Синтаксис этих селекторов подобен синтаксису CSS-псевдо классов, когда селектор начинается с двоеточия (:)
Например, если нам нужно выбрать элементы второго уровня , из соответствующего набора div-ов с примененным к ним стилем horizontal, мы должны написать следующее:
[javascript]
($(‘div.horizontal:eq(1)’))
[/javascript]
Заметим, что eq(1) получает элемент второго уровня из набора, потому что Java-Script массив нумеруется с нуля, то есть первый элемент 0, второй 1 и т.д. Для контраста, CSS нумеруется с единицы, поэтому CSS-селектор подобный этому $(‘div:nth-child(1)’), получит первый div-элемент, являющей дочерним от своего родителя.
Стилизация чередующихся строк
Два наиболее полезных из специальных селекторов библиотеки JQuery – это :odd и :even. Давайте посмотрим, как можно использовать эти селекторы для раскрашивания таблицы в полоску, возьмем следующую таблицу:
[html]
<table>
<tr>
<td>As You Like It</td>
<td>Comedy</td>
<td></td>
</tr>
<tr>
<td>All’s Well that Ends Well</td>
<td>Comedy</td>
<td>1601</td>
</tr>
<tr>
<td>Hamlet</td>
<td>Tragedy</td>
<td>1604</td>
</tr>
<tr>
<td>Macbeth</td>
<td>Tragedy</td>
<td>1606</td>
</tr>
<tr>
<td>Romeo and Juliet</td>
<td>Tragedy</td>
<td>1595</td>
</tr>
<tr>
<td>Henry IV, Part I</td>
<td>History</td>
<td>1596</td>
</tr>
<tr>
<td>Henry V</td>
<td>History</td>
<td>1599</td>
</tr>
</table>
[/html]
Теперь добавим два класса в css файл, один для нечетных строк, и один четных:
[css]
.odd {
background-color: #ffc; /* желтый цвет для нечетных ячеек */
}
.even {
background-color: #cef; /* синий цвет для четных ячеек */
}
[/css]
И наконец напишем JQuery-код, добавляющий классы к ячейкам таблицы (тег <tr>):
[javascript]
$(document).ready(function() {
$(‘tr:odd’).addClass(‘odd’);
$(‘tr:even’).addClass(‘even’);
});
[/javascript]
Вот этот небольшой фрагмент кода, может представить таблицу следующим образом:
На первый взгляд, может показаться что строки раскрашены наоборот. Однако, также как и селектор :eq(), селекторы :odd() и :even(), используют JavaScript нумерацию, начинающуюся с нуля. Следовательно, первая строчка 0 (четная), вторая 1 (нечетная) и т.д.
Стоит отметить, что мы можем увидеть неожиданные результаты, если таблиц на странице несколько. Например, если фоновый цвет последней строчки нашей таблицы является, синим, то первая строка следующей таблицы будет выкрашена в желтый цвет. Как обойти эту проблему будет рассказано позже, а пока просто следует запомнить.
Для того чтобы узнать как действует последний специальный селектор, давайте представим что нам нужно выделить в таблице строчку, содержащую только пьесы Генри. Для начала как обычно добавляем класс в CSS-файл, содержащий полужирное начертание и красный цвет шрифта:
[css]
.table-heading{
background: lime;
}
[/css]
И добавляем одну строчку, к уже написанному нами коду JQuery, использующую селектор :contains():
[javascript]
$(document).ready(function() {
$(‘tr:odd’).addClass(‘odd’);
$(‘tr:even’).addClass(‘even’);
$(‘td:contains("Henry")’).addClass(‘highlight’);
});
[/javascript]
Итак, мы видим нашу прекрасную полосатую таблицу, с ярко выделенными пьесами Генри.
Следует признать, что расцвечивание элементов на странице, можно проводить и без JQuery, или любого другого программирования на клиенте. Но, несмотря на это, JQuery вместе с CSS, это отличная альтернатива, для стилизации динамического контента страницы.
Методы доступа к DOM
JQuery селекторы, изученные нами, позволяли получать наборы элементов, так как мы перемещались вниз по дереву DOM, и фильтровали полученные результаты. Если бы это был единственный метод доступа к данным, наши возможности были бы весьма ограничены.
Существует множество случаев, когда получения родителя или предка элемента, имеет важное значение. И в этом случае может сыграть методы доступа к DOM. С этими методами мы сможем с легкостью двигаться вверх, вниз и даже кругом, по дереву элементов.
Некоторые из этих методов, весьма похожи на селекторные выражения, вот например строку, в который мы раскрашивали нечетные строки таблицы $(‘tr:odd’).addClass(‘odd’), легко можно переписать с использованием метода .filter(), следующим образом:
[javascript]
$(‘tr’).filter(‘:odd’).addClass(‘odd’);
[/javascript]
Хотя по большей части, эти два метода получения элементов дополняют друг друга. Давайте снова взглянем на нашу полосатую таблицу и увидим, что именно возможно получить с этими методами.
Ну, во-первых, таблица вполне может иметь строку заголовка, поэтому давайте дополним ее еще одной строкой tr, в которую внесем два элемента th, вместо тегов td:
[html]
<tr>
<th>Title</th>
<th>Category</th>
</tr>
[/html]
Ну что ж, давайте, стилизуем заголовок таблицы, назначив ему зеленый фоновый цвет, вместо положенного светло-синего цвета. Также представим, что пользователь хочет видеть красный полужирный цвет, только в названиях категорий представленных пьес.
Стилизация заголовка таблицы
Задача стилизации заголовка таблицы может быть выполнена следующим способом. Мы можем найти все элементы th, получить их родительский контейнер tr, и раскрасить его. Затем с помощью комбинации CSS, XPath и специальных селекторов JQuery, оставшиеся элементы, можно выбрать действием от обратного, то есть мы выберем все элементы tr, не содержащие в себе дочерних элементов th, и назначим им нужный стиль.
В результате получится следующее:
[javascript]
$(document).ready(function() {
$(‘th’).parent().addClass(‘table-heading’);
$(‘tr:not([th]):even’).addClass(‘even’);
$(‘tr:not([th]):odd’).addClass(‘odd’);
$(‘td:contains("Henry")’).addClass(‘highlight’);
});
[/javascript]
Здесь для получения родителя тега th, мы используем метод parent(), потому что точно знаем, что у нас есть только одна строка tr, содержащая в себе элементы th.
С остальными строками все еще проще, сначала мы выбрали все элементы tr, не содержащие в себе элементов th, а затем применили к ним фильтр :odd() и :even(). Заметьте, что порядок расположения селекторов очень важен, наша таблица выглядела бы совсем по-другому если бы мы написали $(‘tr:odd:not([th])’), вместо положенного $(‘tr:not([th]):odd’).
Стилизация ячейки по категории
Со стилизацией наименования пьес, еще проще, главное правильно поставить задачу. То есть фактически нам нужно найти ячейку, содержащую слово «Henry», и применить нужный стиль к ячейке находящейся по соседству, то есть в столбце «Category». Для этого мы напишем соответствующий селектор и применим метод next():
[javascript]
$(document).ready(function() {
$(‘th’).parent().addClass(‘table-heading’);
$(‘tr:not([th]):even’).addClass(‘even’);
$(‘tr:not([th]):odd’).addClass(‘odd’);
$(‘td:contains("Henry")’).next().addClass(‘highlight’);
});
[/javascript]
Теперь с применением вышеперечисленных стилей, наша таблица будет выглядеть вот так:
Метод next() применяет нужный нам стиль в пределах одного контейнера только к следующему элементу. А теперь представим, что в нашей таблице появится третий столбик, в котором будет содержаться год издания пьесы. Раскрасить текст всех ячеек, строки содержащий слово «Henry», можно сделать несколькими способами:
1. Получить ячейку, содержащую слово «Henry», и применить стиль ко всем ее «родственным» элементам с помощью метода siblings(). Этот метод выбирает элементы, содержащиеся в одном родительском контейнере
[javascript]
$(‘td:contains("Henry")’).siblings().addClass(‘highlight’);
[/javascript]
2. Получить ячейку, содержащую слово «Henry», получить ее родителя (tr), затем найти все ячейки внутри родителя, порядковый номер которых больше нуля (где ноль это первая ячейка), и добавить им нужный класс:
[javascript]
$(‘td:contains("Henry")’).parent().find(‘td:gt(0)’).addClass(‘highlight’);
[/javascript]
3. Получить ячейку, содержащую слово “Henry”, получить ее родителя (tr), затем найти все ячейки внутри родителя, не содержащих в себе строк «Henry», и добавить им нужный класс:
[javascript]
$(‘td:contains("Henry")’).parent().find(‘td’).not(‘:contains("Henry")’) ).addClass(‘highlight’);
[/javascript]
4. Получить ячейку, содержащую слово “Henry”, получить ее родителя (tr), затем найти вторую дочернюю ячейку, применить к ней нужный класс, сбросить на начало, найти третью дочернюю ячейку и применить к ней нужный класс:
[javascript]
$(‘td:contains("Henry")’).parent().find(‘td:eq(1)’).addClass(‘highlight’).end().find(‘td:eq(2)’).addClass(‘highlight’);
[/javascript]
Все эти способы приведут к одинаковому результату:
Если быть честным, не все из представленных способов комбинации селекторных выражений и методов рекомендованы. Фактически четвертый способ совершенно нелепый. Это просто пример, иллюстрирующий насколько гибкими могу быть методы доступа к DOM.
Сцепление
Все четыре представленных метода демонстрируют способность JQuery к сцеплению. JQuery умеет выбирать один или множество элементов, и производить над ними одно или множество действий. Для примера можно переписать четвертый метод, в виде семи линий, каждая из которых имеет свой собственный комментарий, а работать они при этом будут как одна строка:
[javascript]
$(‘td:contains("Henry")’) //получить все ячейки содержащие "Henry"
.parent() //получить их родителя
.find("td:eq(1)") //найти внутри родительского контейнера вторую ячейку
.addClass("highlight") //применить к ней класс "highlight"
.end() //вернуться на этап нахождения родительского контейнера, ячейки содержащей "Henry"
.find("td:eq(2)") //найти внутри родительского контейнера третью ячейку
.addClass("highlight"); //добавить к ней класс "highlight"
[/javascript]
Конечно эта статья, немного сложнее для понимания чем предыдущие, но если разобрать на примерах, то на самом деле все не так страшно как кажется.
Leave a Reply