Выборка элементов
Cелекторы
Одним из важных функциональностей jQuery является выборка элементов. Чтобы что-то делать с элементами, манипулировать ими, применять к ним методы
jQuery, нам надо сначала их получить. Библиотека предоставляет нам удобный способ выбора элементов, основанный на селекторах.
Нам достаточно передать в функцию jQuery селектор и мы можем получить нужный нам элемент, который соответствует данному селектору. Например,
если необходимо получить все эелементы img, то мы можем использовать следующее выражение: $("img").
В данном случае "img" будет выступать в качестве селектора.
Рассмотрим основные селекторы jQuery, которые используются для выборки элементов.
Базовые селекторы jQuery
Шаблон селектора | Описание | Пример |
$("*") | Выборка всех элементов страницы | Например, выражение |
$("Element") | Выборка всех элементов с данным именем тега |
|
$("#id") | Выборка элемента с данным значением атрибута id |
|
$(".class") | Выборка всех элементов с данным значением атрибута class |
|
$("selector1,selector2,selectorN") | Выборка всех элементов, которые соответствуют указанным селекторам | Например, у нас есть такой код:
<div class="apple"></div>
<div class="apple"></div>
<div class="orange"></div>
<div class="banana"></div> то селектор |
Конкретизация выбора
Мы можем использовать сразу несколько селекторов, чтобы более детально настроить выборку элементов. Например, у нас есть такая веб-страница:
<!DOCTYPE html>
<html>
<head>
<title>Мир jQuery</title>
</head>
<body>
<h2>Словарь</h2>
<table id="tab">
<tr class="tabhead"><td><p>Слово</p></td><td><p>Перевод</p></td></tr>
<tr><td><p>table</p></td><td><p>таблица</p></td></tr>
<tr><td><p>apple</p></td><td><p>яблоко</p></td></tr>
</table>
<script src="jquery-1.10.1.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
$("#tab").css('background-color', 'silver');
});
</script>
</body>
</html>
В данном случае мы используем селектор #tab, то есть выбираем нашу таблицу, которая имеет id=tab. Выражение css('background-color', 'silver')
устанавливает цвет элемента - в данном случае серебряный.
Запустив данную страничку в веб-браузере мы получим следующую картину:
Но мы также можем использовать набор селекторов, чтобы более детально произвести действие. Например, нам надо, чтобы была закрашена только первая
строка, которая имеет атрибут class="tabhead". Тогда мы можем использовать следующий селектор: $("#tab .tabhead"). В этом
случае селектор выберет элемент с class="tabhead", который находится в элементе с id="tab".
При этом мы можем для сужения выборки использовать множество различных селекторов, например: $("div#menu a.redStyle"). К примеру
данный селектор может найти например такой элемент:
<div id="menu"> <a href="m.tml" class="redStyle">Ссылка на сайт</a> </div>
В данном случае мы применили иерархический селектор, который подразумевает, что элемент по второму селектору должен находиться в элементе по первому селектору. Но кроме того, мы можем также применить еще ряд иерархических селекторов:
Шаблон селектора | Описание | Пример |
родительский_селектор > дочерний_селектор | Выборка всех элементов, которые соответстуют второму селектору и являются дочерними для элементов первого селектора |
Например, чтобы получить элемент ссылки в предыдущем примере мы можем использовать селектор |
селектор1 + селектор2 | Выборка элементов с селектором 'селектор2', которые располагаются непосредственно за элементами 'селектор1'. Причем оба элемента должны находиться на одном уровне |
Например, у нас есть следующий блок ссылок: <div id="menu"> <a href="1.html" class="open">1.html</a> <a href="2.html" class="closed">2.html</a> <a href="3.html">3.html</a> <a href="4.html" class="open">4.html</a> <a href="5.html" class="closed">5.html</a> <a href="6.html" class="open">6.html</a> </div> Тогда селектор |
селектор1 ~ селектор2 | Выборка элементов с селектором 'селектор2', которые располагаются на одном уровне с элементами с селектором 'селектор1'. |
Например, у нас есть следующий блок ссылок: <div id="menu"> <a href="1.html" class="open">1.html</a> <a href="2.html" class="closed">2.html</a> <a href="3.html">3.html</a> <a href="4.html" class="open">4.html</a> <a href="5.html" class="closed">5.html</a> <a href="6.html" class="open">6.html</a> </div> Тогда селектор |
Селекторы атрибутов
Чтобы сузить поиск кроме базовых и иерархических селекторов, рассмотренных выше, мы можем применять селекторы атрибутов. В данном случае jQuery будет возвращать элементы в зависимости от значений и определения указанных атрибутов.
Шаблон селектора | Описание | Пример |
[attr] | Выборка всех элементов с атрибутом attr | Например, выражение |
[attr='value'] | Выборка всех элементов, у которых значение атрибута attr равно value | Например, выражение |
[attr^='value'] | Выборка всех элементов, у которых значение атрибута attr начинается со строки value | Например, выражение |
[attr$='value'] | Выборка всех элементов, у которых значение атрибута attr оканчивается на строку value | Например, выражение |
[attr~='value'] | Выборка всех элементов, у которых атрибут attr имеет список значений, разделенных пробелом, и одно из этих значений равно value | Например, выражение |
[attr*='value'] | Выборка всех элементов, у которых значение атрибута attr имеет имеет подстроку value | Например, выражение |
[attr|='value'] | Выборка всех элементов, у которых значение атрибута attr представляет либо значение value, либо список значений, разделенных дефисами, и первое значение в этом списке равно value | Например, выражение |
Контекст селекторов
Выше мы использовали такую запись для выборки элемента: $(селектор). Данное выражение просматривало все дерево DOM на соответствие элемента селектору. Однако мы можем ограничить поиск, применив контекст поиска. Контекст представляет собой селектор, в рамках которого наждо производить выборку элементов. Например, у нас есть такая веб-страница:
<!DOCTYPE html>
<html>
<head>
<title>Мир jQuery</title>
</head>
<body>
<div id="menu">
<p><a href="1.html" class="open">Ссылка 1</a></p>
<p><a href="2.html" class="open">Ссылка 2</a></p>
</div>
<p><a href="3.html" class="open">Ссылка 3</a></p>
<script src="jquery-1.10.1.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
$(".open", "div#menu").css('background-color', 'silver');
});
</script>
</body>
</html>
На странице у нас три ссылки, у всех у них определен один и тот же класс, но две из них находятся в элементе div и именно их мы хотим получить.
Тогда мы используем выражение $(".open", "div#menu") - здесь второй параметр-селектор будет являться контекстом выборки.
А результатом в данном случае будет следующая страница:
Важно не путать это выражение с выборкой по множеству селекторов, например, $(".open, div#menu ") - это разные выражения, которые будут давать разный результат.
- Глава 1. Введение в jQuery
- Глава 2. Выборка элементов
- Глава 3. Манипуляция элементами в jQuery
- Глава 4. Работа со структурой страницы
- Глава 5. События jQuery
- Глава 6. Технология AJAX
- Глава 7. Эффекты и анимация в jQuery
- Глава 8. jQuery UI