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

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

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

Например:

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

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

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

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

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");

Порой бывает необходимо, обратиться к какому-либо элементу страницы, у которого не прописан class или ID, не имея возможности добавить class или ID в html. CSS Обратиться к любому элементу по атрибутам – вот выход из ситуации.

Часто такие ситуации складываются, когда html код генерируется внешним подключаем script, и не может быть изменен вами. Но при этом его необходимо стилизовать, или изменить вид на CSS.

Итак, есть такая штука, как селекторы по атрибутам html. С этой помощью можно на CSS обратиться к любому элементу по атрибутам. Атрибуты – это те самые атрибуты тэгов html, которые src, href, data-*, title, name, rel, alt и др.

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

Рассмотрим примеры: CSS Обратиться к любому элементу по атрибутам

Например, если у нас есть пиксельная иконка, которую генерирует код PayPal, и на мобильной версии её нужно скрыть (потому, что сильно мешает). Тогда достаточно просто можно это сделать, на чистом CSS:

img{ display: none; }

Или, например, нужно скрыть все элементы с title, который начинается на «Отправлено «. Так и сделаем:

... ... ... div{ display: none; }

Всего есть несколько таких селекторов:

  • – все элементы, у которых есть такой атрибут
  • – все элементы, у которых атрибут точно = значению
  • – все элементы, у которых атрибут содержит значение (должно быть целое слово)
  • – все элементы, у которых атрибут начинается значением (должно быть целое слово)
  • – все элементы, у которых атрибут начинается значением (может быть не целое слово
  • – все элементы, у которых атрибут заканчивается значением (может быть не целое слово)
  • – все элементы, у которых атрибут содержит значение (может быть набор символов, а не целое слово)

Селекторы по атрибутам тега - это специальные селекторы, привязывающие стиль к тегу на основании, присутствует ли в нем определенный атрибут или имеет ли он определенное значение.

Селекторы по атрибутам тега используются не сами по себе, а только в совокупности со стилями переопределения тега или комбинированными стилями. Их записывают сразу после основного селектора без всяких пробелов и берут в квадратные скобки.

Селектор вида

[] { }

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

Пример:

TD { background-color: grey }

Этот стиль будет привязан к ячейкам таблицы, теги которых имеют атрибут ROWSPAN, т. е. к ячейкам, объединенным по горизонтали.

Селектор вида

[=] { }

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

Пример:

TD { background-color: grey }

Данный стиль будет привязан к ячейкам таблицы, теги которых имеют атрибут ROWSPAN со значением 2, т. е. к двойным ячейкам, объединенным по горизонтали.

Селекторы вида

[~=
] { }

[|=
] { }

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

Пример:

TD { background-color: grey }
TD { border: thin dotted black }

Эти стили будут привязаны к ячейкам таблицы, теги которых имеют атрибут ROWSPAN со значениями 2 и 3, т. е. к двойным и тройным ячейкам, объединенным по горизонтали.

Селектор вида

[^=] { }

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

Пример:

IMG { margin: 5px }

Этот стиль будет привязан к графическим изображениям, теги которых имеют атрибут SRC со значением, начинающимся с подстроки "http://www.pictures.ru", т. е. к изображениям, взятым с Web-сайта http://www.pictures.ru.

Селектор вида

[$=] { }

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

Пример:

IMG { margin: 10px }

Данный стиль будет привязан к графическим изображениям, теги которых имеют атрибут SRC со значением, заканчивающимся подстрокой "gif", т. е. к изображениям формата GIF.

Селектор вида

[*=] { }

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

Пример:

IMG { margin: 10px }

Этот стиль будет привязан к графическим изображениям, теги которых имеют атрибут SRC со значением, включающим подстроку "/picts/", т. е. к изображениям, взятым из папки picts Web-сайта, откуда они загружены.

Псевдоэлементы

Псевдоэлементы - разновидность специальных селекторов, привязывающих стиль к определенному фрагменту элемента Web-страницы. Таким фрагментом может быть первый символ или первая строка в абзаце.

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

{ }

Псевдоэлемент::first-letter привязывает стиль к первой букве текста в элементе Web-страницы, если ей не предшествует встроенный элемент, не являющийся текстом, например, изображение.

Пример:

P::first-letter { font-size: larger }

Этот стиль будет привязан к первой букве абзаца.

Псевдоэлемент ::first-line привязывает стиль к первой строке текста в элементе Web-страницы:

P::first-line { text-transform: uppercase }

Данный стиль будет привязан к первой строке абзаца.

Псевдо-элементы позволяют стилизовать определенные части документа. Например псевдо-элемент::first-line предназначен для добавления стилей только к первой строке указанного элемента. В спецификации CSS3 псевдо-элементы начинаются с двойного двоеточия - ":: ":

P::first-letter { font-size: 120%; }

Двойное двоеточие было введено в CSS3 для визуального различия псевдо-классов и псевдо-элементов. Однако, псевдо-элементы, которые были добавлены еще в CSS2 (такие как: first-letter, first-line, before и after), могут быть записаны и с одним двоеточием, такой синтаксис использовался до появления спецификации CSS3 и поддерживается всеми браузерами. Синтаксис с двойным двоеточием поддерживается только в новых версиях браузеров и в обязательном порядке должен применяться только к псевдо-элементу::selection, который был добавлен в CSS3.

Примечание: каждый селектор может содержать только один псевдо-элемент, который должен быть определен в самом конце селектора: #header .menu span::first-letter { color: green; }

Псевдо-элемент::first-letter

Псевдо-элемент::first-letter позволяет применить стиль к первой букве в тексте родительского элемента. Например, для стилизации первой буквы в абзаце нам бы пришлось заключить ее в элемент и применить стиль к нему:

Название документа .firstletter { font-size: 150%; font-weight: bold; }

Наш текст

Попробовать »

Или мы можем стилизовать первую букву в тексте с помощью псевдо-элемента::first-letter, в этом случае нам не придется добавлять лишний элемент в HTML-разметку:

Название документа p::first-letter { font-size: 150%; font-weight: bold; }

Наш текст

Попробовать »

Псевдо-элемент::first-line

Псевдо-элемент::first-line применяет стиль к первой строке текста в элементе:

P { width: 200px; } p::first-line { color: blue; } Попробовать »

Особенность псевдо-элемента::first-line состоит в том, что он будет стилизовать только первую строку, ширина которой будет зависеть от ширины элемента, то есть на более маленьких экранах или при уменьшении окна браузера будет меняться и ширина первой строки, но ее оформление будет оставаться неизменным.

Псевдо-элементы::before и::after

Для добавления генерируемого содержимого в документ используются псевдо-элементы::before и::after. С их помощью можно разместить генерируемое содержимое до и после содержимого в указанном элементе. Для определения содержимого, которое будет добавлено, используется CSS свойство content.

Допустим, у нас есть достаточно большой по объему текст, он содержит ссылки, но по оформлению они практически никак не отличаются от остального текста. И нам нужно перед каждой ссылкой поместить небольшую иконку, которая будет указывать пользователям, что это ссылка:

A { text-decoration: none; color: black; } a::before { content: url("link.png"); } Попробовать »

Селекторы атрибутов

Селекторы атрибутов поддерживаются всеми современными браузерами (исключение составляет IE6, хотя его уже нельзя отнести к современным браузерам, стоит учитывать тот факт, что некоторые пользователи все еще его используют. Поэтому, если вам необходимо написать код, одинаково хорошо работающий во всех браузерах, включая IE6, то советуем вам воздержаться от использования селекторов атрибутов).

Селекторы атрибутов позволяют выбрать определенный элемент без использования идентификатора или класса. Для обращения к элементу, нужно всего лишь знать, содержит ли нужный элемент определенный атрибут:

Img { border: 1px solid red; }

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

  • элемент[атрибут^="значение"] ^= означает "начинается с...".
  • элемент[атрибут$="значение"] - селектор атрибута с совпадением по подстроке. Оператор $= означает "заканчивается на...".
  • элемент[атрибут*="значение"] - селектор атрибута с совпадением по подстроке. Оператор *= означает "содержит подстроку...".

В качестве примера приведем оформление ссылок, ссылающихся на внешний ресурс, электронный адрес и файл с расширением.pdf:

A { padding-left: 20px; background-image: url("img1.png"); background-repeat: no-repeat; } a { padding-left: 20px; background-image: url("img2.png"); background-repeat: no-repeat; } a { padding-left: 20px; background-image: url("img3.png"); background-repeat: no-repeat; } Попробовать »

В подобных ситуациях селекторы атрибутов полезно использовать для внесения привлекательных дополнений в дизайн ваших веб-страниц.

Соответствует всем элементам с атрибутом attribute равным value . Если value состоит из нескольких слов, между которыми есть пробелы, то нужно заключать value в кавычки. Если value не содержит пробелов — кавычки не обязательны.

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

Замечание 1 : Несмотря на то, что с помощью селектора можно находить элементы по аттрибутам class или id, более правильным будет использовать специальные селекторы по классу и идентификатору . Это касается и многих атрибутов в элементах форм, для которых существуют отдельные селекторы.

Замечание 2 : Во всех версиях jQuery, начиная с 1.2, использование символа "@" перед аттрибутом не нужно.

В действии

Все элементы, которые имеют подсказку (аттрибут title) с текстом "Не влезай - убьет" будут окрашены в желтый цвет с красными рамками:

~lt~!DOCTYPE html~gt~ ~lt~html~gt~ ~lt~head~gt~ ~lt~script src="http://code.jquery.com/jquery-latest.js"~gt~~lt~/script~gt~ ~lt~style~gt~ div, span { display: block; width: 50px; height: 50px; float: left; padding: 15px; margin: 5px; background-color: #eee; font-size: 20pt; } ~lt~/style~gt~ ~lt~/head~gt~ ~lt~body~gt~ ~lt~div title="Не влезай - убьет"~gt~ 1 ~lt~/div~gt~ ~lt~div title="А тут безопасно"~gt~ 2 ~lt~/div~gt~ ~lt~span title="Не влезай - убьет"~gt~ 3 ~lt~/span~gt~ ~lt~script~gt~ $("") .css({"border":"3px solid red", "background-color": "#ffcc00"}); ~lt~/script~gt~ ~lt~/body~gt~ ~lt~/html~gt~