Одним из важных функциональностей jQuery является выборка элементов. Чтобы что-то делать с элементами, манипулировать ими, применять к ним методы
jQuery, нам надо сначала их получить. Библиотека предоставляет нам удобный способ выбора элементов, основанный на селекторах.
Нам достаточно передать в функцию jQuery селектор и мы можем получить нужный нам элемент, который соответствует данному селектору. Например,
если необходимо получить все эелементы img
, то мы можем использовать следующее выражение: $("img")
.
В данном случае "img" будет выступать в качестве селектора.
Рассмотрим основные селекторы 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 ")
- это разные выражения, которые будут давать разный результат.