Ограничение доступа Ролевой механизм Загрузка модулей410013796724260
|
Перейти к содержанию jQuery
Селектор jQueryВыборка элементов объектной модели документа DOM является ключевым аспектом jQuery. Как было отмечено на странице описания библиотеки, функция jQuery и её псевдоним $ являются оберткой для всех селекторов : // использование функции jQuery jQuery(<selector>); // использование псевдонима $ $(<selector>); В заключении статьи представлены примеры селекторов. А сейчас рассмотрим описание jQuery-селектора на примере. Пример jquery-02.htmlРассмотрим простой пример выборки четных/нечетных строк в таблице с выделением их фонового цвета, т.е. попробуем представить подсветку строк таблицы в виде «зебры». Описание страницы jquery-02.html имеет следующий вид : Скрыть листинг
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Выборка элементов JQuery</title>
</head>
<body>
<h3>Выборка элементов JQuery</h3>
<div id="common">
<table id="milk" style="border-collapse:collapse;
border:1px solid #aaa;"
cellpadding="3" cellspacing="3" border="1">
<thead><tr>
<th>Наименование</th>
<th>Количество</th>
<th>Цена</th>
<th>Стоимость</th></tr>
</thead>
<tbody>
<tr><td>Молоко</td>
<td>2 л</td>
<td>35 руб/л</td>
<td>70 руб</td></tr>
<tr><td>Кефир</td>
<td>1.5 л</td>
<td>40 руб/л</td>
<td>60 руб</td></tr>
<tr><td>Ряженка</td>
<td>1 л</td>
<td>48 руб/л</td>
<td>48 руб</td></tr>
<tr><td>Йогурт</td>
<td>0.5 л</td>
<td>44 руб/кор</td>
<td>44 руб</td></tr>
</tbody>
</table>
</div>
</body>
</html>
Обратите внимание, что таблица имеет идентификатор id="milk", секцию thead с заголовками колонок и секцию tbody со строками. Это важный аспект для выделения определенных строк в конкретной таблице. В браузере страница имеет вид, представленный на следующем скриншоте. 
Все, что нам нужно сделать с интерфейсом страницы, так это выделить фон четных/нечетных строк с помощью библиотеки jQuery. После того, как будет реализована данная функция, интерфейс страницы примет следующий вид : 
Чтобы реализовать чрезстрочную фоновую подсветку таблицы включим в контент страницы библиотеку jQuery и файл со скриптами jquery-02.js. Подробно о включении в страницу библиотеки и внешнего файла со скриптами jQuery представлено здесь. Поэтому сразу же перейдем к описанию листинга скриптового файла jquery-02.js. Листинг jquery-02.jsНиже представлен контент файла.
$(document).ready(function() {
// alert(jQuery('#milk tbody tr').length + ' elements');
$('#milk tbody tr:even').css('background-color','#eee');
});
Оболочка функции (document–ready) контролирует загрузку библиотеки jQuery, после которой сразу же выполняется код функции (подробнее). Перейдем к рассмотрению содержимого функции. Закоментированную строку с функцией alert, открывающую окно с сообщением, можно использовать для отладки кода. Для выборки элементов объектной модели документа DOM применяется как функция jQuery, так и её псевдоним $. В скобках определяются атрибуты выбираемых элементов. В самом простом виде выборку абзаца, элементов div, заголовков h2 или поля input можно выполнить следующими селекторами : Простая выборка
$('p')
$('div')
$('h2')
$('input')
В нашем примере нам необходимо выделить строки в таблице. Поскольку таблица имеет идентификатор id="milk", то в селекторе следует использовать символ '#'. Элементы с операндом class="milk" необходимо выбирать селектором с символом точки, т.е. $('.milk'). Представим наш селектор следующим образом :
$('#milk tr')
В селектор включаем таблицу с идентификатором id="milk" и строки (tr). При таком селекторе будут выделены все строки таблицы, расположенные в секциях thead и tbody. Функция alert при данном селекторе сообщит о наличии 5 строк таблицы, включая строку с заголовком. Чтобы исключить строку заголовка включим в селектор секцию tbody (обратите внимание на последовательность операндов) :
$('#milk tbody tr')
Данный селектор выделит 4 строки таблицы. Чтобы выделить только четные строки (отсчет от 0), то необходимо в селектор включить фильтр, который прикрепляется к элементу (в нашем случае tr) и обозначается символом двоеточия ':'. После фильтра определяется его наименование. Фильтр :even позволяет выбрать только четные строки, а :odd – нечетные. Теперь наш селектор принял окончательный вид :
$('#milk tbody tr:even')
Чтобы выделить первую, последнюю или определеную строку выборки jQuery имеет фильтры :first, :last, :eq(n). Таким образом, при выборке элементов объектной модели документа DOM в селектор последовательно включили идентификатор таблицы #milk, раздел tbody и строки с фильтром tr:even. А теперь представим, что таблица имеет не идентификатор id="milk", а class="milk". При этом, на странице может быть несколько таблиц с таким class'ом, т.е. таблиц с одним стилем представления. Чтобы, в этом случае, выделить строки только в одной таблице, включим ее в раздел <div id="common"> ...</div> и наш селектор будет иметь следующий вид :
$('#common .milk tbody tr:even')
После того, как нужные элементы DOM выбраны, выполняется действие .css c определенными параметрами, т.е. определяется стиль представления. Поскольку использование jQuery для работы со стилями буду рассматривать в ближайшее время отдельно, то здесь на этом не останавливаюсь, и перехожу к множественной выборки элементов. Множественная выборка элементовjQuery позволяет одним оператором выбрать множество элементов. Это удобно, поскольку позволяет выбрать элементы в разных частях страницы одним оператором. Для выбора множества элементов необходимо их включить в селектор с разделителем в виде запятой. Так, например, если необходимо выбрать элементы div, заголовки h4 и поля input, селектор примет вид :
$('div,h4,input')
В большинстве случаев, представленных на странице знаний достаточно, чтобы выбрать один элемент или группу связанных элементов DOM включением в селектор имени элемента, его идентификатора id и/или атрибута класса class. Продолжение статьи связано с фильтрацией наборов(filter()) и поиском элементов в наборе (find()), а также формированием новых наборов различными методами (.end(), .andSelf(), .nextAll(), .prevAll(), .parent.children()). Примеры селекторов jQuery
Связанные страницыОписание библиотеки jQueryФильтрация наборов и поиск элементов jQuery методами filter и find Загрузка скриптов из внешнего файла Действия и обработчики событий jQuery CSS в сочетании с jQuery | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||