На этом уроке познакомимся с тем как найти элементы на странице по атрибуту.

В jQuery выборка элементов по атрибуту выполнена в соответствии со спецификацией CSS.

Когда Вы используете атрибуты для выбора элементов, учитывайте то, что некоторые атрибуты могут иметь несколько значений, разделенных между собой пробелом.

Например:

... ... ... // Выбрать элементы a, имеющие атрибут $("a");

Значение атрибута в выражении селектора должно быть заключено в кавычки. Осуществляется это одним из следующих способов:

• двойные кавычки внутри одинарных кавычек: $("a") .
• одинарные кавычки внутри двойных кавычек: $("").
• экранированные одинарные кавычки внутри одинарных кавычек: $("a") .
• экранированные двойные кавычки внутри двойных кавычек: $("a") .

В jQuery поиск элементов по атрибуту можно осуществить с помощью различных селекторов. Кроме этого Вы можете использовать для выбора элементов комбинацию из нескольких селекторов атрибутов. В этом случае будут выбраны только те элементы, которые отвечают каждому из указанных селекторов.

Выбирает элементы, которые имеют указанный атрибут (name) со значением, равным заданной строки (value) или начинающимся с этой строки (value), за которой следует дефис.

Например, выбрать все элементы div , которые имеют атрибут class со значением, равным alert или начинающимся с alert- .

...

... ... ... ... ... //Выберет все элементы div, которые имеют атрибут class со //значением alert или со значением, начинающимся с alert- $("div");

Выбирает элементы, который имеют указанный атрибут (name) со значением, содержащим заданную подстроку (value).

Например: выбрать все элементы, которые имеют атрибут href, содержащий в качестве своего значения подстроку youtube:

... ... ... //Выберет элементы, которые имеют атрибут href со значением //содержащим подстроку youtube $("");

Выбирает элементы, которые имеют указанный атрибут (name) со значением, содержащим заданное значение (value) как одно из его значений (т.е. отделенно от другого значения пробелом) или равным этому значению (value).

Например, выбрать все элементы а, которые имеют атрибут class со значением, содержащим значение btn как одно из его значений (т.е. отделено от другого знаения пробелом) или равным btn:

... ... Отправить ... ... $("a");

Выбирает элементы, которые имеют указанный атрибут (name) со значением, которое заканчивается заданным значением (value).

Например, выбрать все элементы, которые имеют атрибут href , заканчивающийся на ".zip".

... ... ... //выберет все элементы а, у которых значение атрибута href заканчивается на.zip $("a");

Выбирает элементы, у которых указанный атрибут (name) имеет значение value .

Например, выбрать все элементы, которые атрибут type со значением button:

Информация о заказе $("");

Выбирает элементы, которые не имеют указанный атрибут (name) или имеют указанный атрибут (name), но он не содержит заданного значения (value).

Например, выбрать элементы a , которые не имеют атрибут rel или имеют его, но он не содержит значение nofollow.

... ... ... ... $("a");

Выбирает элементы, которые имеют указанный атрибут (name) со значением, начинающимся с заданного значения (value).

Например, выбрать все элементы а, имеющие класс btn и атрибут href со значением, начинающимся с "http".

... ... ... $("a.btn");

Выбирает элементы, которые имеют указанный атрибут (name). Значение данного атрибута (name) может быть любым.

Например, выбрать изображения (img), имеющие атрибут alt:

$("img");

- выбирает элементы, у которых указанные атрибуты (name1 и name2) имеют соответствующие значения (Value1 и Value2).

При необходимости вы можете использовать комбинации различных селекторов атрибутов для выбора элементов. В этом случае будут выбраны только те элементы, которые соответствуют всем указанным селекторам:

$(""); //attr1 - селектор атрибута 1 //attr2 - селектор атрибута 2 //attrN - селектор атрибута N

Например, выбрать элементы a , имеющие атрибут id , атрибут href начинающийся с http и атрибут class со значением, содержащим значение btn как одно из его значений или равным btn:

... ... $("a");

Метод имеет три вариант использования:

Осуществляет поиск элементов внутри выбранных элементов, оставляя те, которые содержатся в заданном объекте jQuery.

Осуществляет поиск элемента element внутри выбранных элементов. Параметр element задается в виде DOM-элемента.

Примеры использования:

Вышеуказанные примеры хороши лишь в качестве демонстрации возможностей метода.find() . Например, искать span-элементы, лежащие внутри div"ов правильнее так:

$("div span")

Find() же удобно использовать, когда некоторые элементы уже найдены, и вам необходимо осуществить поиск элементов внутри них:

// найдем все ul-элементы на странице var $ulElements = $("ul"); // ----- какой то код... ----- // найдем li-элементы с классом userBox, внутри $ulElements $ulElements.find("li.userBox");

Так же, .find() удобен для использования в цепочках методов:

$("ul") // найдем все ul-элементы на странице.addClass("listElements") // добавим ul"ам класс listElements .find("li.userBox") // найдем li-элементы с классом userBox, внутри ul"ов.remove(); // и удалим их

Последнее обновление: 1.11.2015

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

Рассмотрим основные селекторы jQuery, которые используются для выборки элементов.

Мы можем использовать сразу несколько селекторов, чтобы более детально настроить выборку элементов. Например, у нас есть такая веб-страница:

Мир jQuery Словарь

В данном случае мы используем селектор #tab, то есть выбираем нашу таблицу, которая имеет id=tab. Выражение css("background-color", "silver") устанавливает цвет элемента - в данном случае серебряный.

Запустив данную страничку в веб-браузере мы получим следующую картину:

Но мы также можем использовать набор селекторов, чтобы более детально произвести действие. Например, нам надо, чтобы была закрашена только первая строка, которая имеет атрибут class="tabhead". Тогда мы можем использовать следующий селектор: $("#tab .tabhead") . В этом случае селектор выберет элемент с class="tabhead", который находится в элементе с id="tab".

При этом мы можем для сужения выборки использовать множество различных селекторов, например: $("div#menu a.redStyle") . К примеру данный селектор может найти например такой элемент:

Ссылка на сайт

В данном случае мы применили иерархический селектор, который подразумевает, что элемент по второму селектору должен находиться в элементе по первому селектору. Но кроме того, мы можем также применить еще ряд иерархических селекторов:

Чтобы сузить поиск кроме базовых и иерархических селекторов, рассмотренных выше, мы можем применять селекторы атрибутов. В данном случае jQuery будет возвращать элементы в зависимости от значений и определения указанных атрибутов.

Выше мы использовали такую запись для выборки элемента: $(селектор). Данное выражение просматривало все дерево DOM на соответствие элемента селектору. Однако мы можем ограничить поиск, применив контекст поиска. Контекст представляет собой селектор, в рамках которого наждо производить выборку элементов. Например, у нас есть такая веб-страница:

Мир jQuery jQuery(document).ready(function(){ $(".open", "div#menu").css("background-color", "silver"); });

На странице у нас три ссылки, у всех у них определен один и тот же класс, но две из них находятся в элементе div и именно их мы хотим получить. Тогда мы используем выражение $(".open", "div#menu") - здесь второй параметр-селектор будет являться контекстом выборки. А результатом в данном случае будет следующая страница:

Важно не путать это выражение с выборкой по множеству селекторов, например, $(".open, div#menu ") - это разные выражения, которые будут давать разный результат.