JavaScript. Подробное руководство, 6-е издание
Шрифт:
"h1, h2, h3" // Соответствует элементам <h1>, <h2> и <h3>
"#р1, #р2, #р3” // Соответствует элементам с id, равным р1, р2 и р3
"div.note, p.note" // Соответствует элементам <div> и <р> с class="note"
"body>p,div.note>p" // , вложенный в <body>, и <div class="note">
Обратите внимание, что синтаксис селекторов CSS и jQuery позволяет использовать круглые скобки в некоторых фильтрах в простых селекторах, но не допускает более обобщенного их использования для группировки селекторов. Нельзя поместить группу селекторов или комбинированный селектор в
(hi. h2, h3)+p // Недопустимо
h1+p, h2+p, h3+p // Следует использовать этот вариант
19.8.2. Методы выбора
В дополнение к грамматике селекторов, поддерживаемой функцией
$
, библиотека jQuery определяет несколько методов выбора. Большинство методов из библиотеки jQuery, с которыми мы встречались в этой главе до сих пор, выполняют некоторые операции над выбранными элементами. Методы выбора отличаются от них: они изменяют множество выбранных элементов, фильтруя, расширяя или используя его в качестве отправной точки для нового выбора. В данном разделе описываются эти методы выбора. Здесь вы увидите, что многие методы реализуют те же функциональные возможности, которые обеспечивает грамматика селекторов.
Самой простой является операция фильтрации выбора по позициям элементов в выбранном множестве. Метод
first
возвращает объект jQuery
, содержащий только первый выбранный элемент, а метод last
возвращает объект jQuery
, содержащий только последний выбранный элемент. Более обобщенный метод eq
возвращает объект jQuery
, содержащий единственный выбранный элемент с указанным индексом. (В версии jQuery 1.4 допускается использовать отрицательные индексы, в этом случае отсчет начинается с конца выбранного множества.) Обратите внимание, что эти методы возвращают объект jQuery
с единственным элементом, что отличает их от обычной операции индексирования массива, которая возвращает единственный элемент без объекта jQuery
, обертывающего его:
var paras = $("р");
paras.fіrst // Выберет только первый элемент <р>
paras.last // Выберет только последний элемент <р>
paras.eq(1) // Выберет второй элемент <р>
paras.eq(-2) // Выберет второй с конца элемент <р>
paras[1] // Сам второй элемент <р>
Универсальным методом фильтрации выбора по позиции является метод
slice.
Этот метод действует подобно методу Array.slice
: он принимает начальный и конечный индексы (отрицательные индексы откладываются от конца массива) и возвращает объект jQuery
, содержащий элементы с индексами от начального до конечного, не включая его. Если конечный индекс не указан, возвращаемый объект будет содержать все элементы от начального индекса и до конца:
$("p").slice(2,5) // Выберет 3-й, 4-й и 5-й элементы <р>
$("div").slice(-3) // Последние три элемента <div>
Метод
filter
является универсальным методом фильтрации и может использоваться тремя разными способами: • Если передать методу
filter
строку с селектором, он вернет объект jQuery
, содержащий только те из выбранных элементов, которые соответствуют этому селектору. • Если передать методу
filter
другой
объект jQuery
, он вернет новый объект jQuery
, содержащий пересечение множеств элементов в двух исходных объектах jQuery
. Методу можно также передать массив элементов и даже единственный элемент документа. • Если передать методу
filter
функцию-предикат, эта функция будет вызвана для каждого выбранного элемента и метод filter
вернет объект jQuery
, содержащий только те элементы, для которых функция-предикат вернет true (или любое другое истинное значение). Элемент будет передан функции в виде значения ссылки this
, а индекс элемента - в виде аргумента. (Смотрите также описание метода jQuery.grep
в разделе 19.7.)
$("div").filter(".note") // Аналогично $("div.note")
$("div").filter($(".note")) // Аналогично $("div.note")
$("div").filter(function(idx) { return idx%2==0 }) // Аналогично $("div:even")
Метод
not
действует точно так же, как метод filter,
за исключением того, что он инвертирует значение фильтра. Если передать методу not
строку с селектором, он вернет новый объект jQuery
, содержащий только те из выбранных элементов, которые не соответствуют селектору. Если передать методу not
объект jQuery
, массив элементов или единственный элемент, он вернет все выбранные элементы, кроме тех, что были явно указаны. Если передать методу not
функцию-предикат, он вызовет ее для каждого выбранного элемента, как и метод filter,
но вернет объект jQuery
, содержащий только те выбранные элементы, для которых функция возвратит false или любое другое ложное значение:
$("div").not("#header, #footer"); // Все элементы <div>, кроме двух указанных
В версии jQuery 1.4 имеется метод
has,
обеспечивающий еще один способ фильтрации выбора. Если ему передать селектор, он вернет новый объект jQuery
, содержащий только те из выбранных элементов, которые имеют потомков, соответствующих селектору. Если передать методу has
элемент документа, он вернет только те выбранные элементы, которые являются предками указанного элемента:
$("р").has("а[href]") // Абзацы, включающие ссылки
Метод
add
не фильтрует и не сужает выбор, а расширяет его. Метод add
можно вызывать с любыми аргументами (кроме функций), которые можно передавать функции $
. Он возвращает первоначальное множество выбранных элементов, плюс элементы, которые были бы выбраны (или созданы) при передаче этих же аргументов функции $
. Метод add
удаляет повторные вхождения элементов и сортирует элементы в порядке их следования в документе:
// Эквивалентные способы выбора всех элементов <div> и <р>
$("div, р") // Используется группа селекторов
$("div").add("p") // Передать методу add селектор
$("div").add($("p")) // Передать методу add объект jQuery
var paras = document.getElementsByTagName("p"); // Объект, подобный массиву
Поделиться с друзьями: