На этом уроке познакомимся с тем как найти элементы на странице по атрибуту.
В 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");
Библиотека jQuery позволяет управлять свойствами и атрибутами элементов обернутого набора, изменяя первоначальные значения. Можно устанавливать новые свойства, получать и изменять значения первоначальных свойств. Удаляя или добавляя классы, можно динамически изменять стиль отображения элементов.
Манипулирование свойствами и атрибутами элементов 1. Добавление и удаление класса 1.1. Метод.addClass()Добавляет указанный класс (или несколько классов) к каждому элементу обернутого набора. Чтобы данный метод сработал, необходимо заранее создать стиль для добавляемого класса. Метод не удаляет старый класс, а просто добавляет новый.
AddClass(имя класса) имя класса — одно или больше имен класса, отделённых друг от друга пробелами. .addClass(функция) функция — возвращает одно или более имен класса, разделенных пробелом, которые будут добавлены к существующим. В качестве аргумента принимает индекс элемента в наборе и существующее имя класса(ов).
1.2. Метод.removeClass()Удаляет указанное имя класса(ов) у всех элементов обернутого набора.
RemoveClass(имя класса) имя класса — необязательный параметр, одно или более имен класса, разделенных пробелом. Если имя класса не указано, метод удаляет все существующие классы у элементов набора. Если имя класса задано — удаляет только указанный класс. .removeClass(функция) функция — возвращает одно или более имен класса, разделенных пробелом, которые будут удалены из существующих. В качестве аргумента принимает индекс элемента в наборе и старое имя класса(ов).
1.3. Метод.toggleClass()Добавляет или удаляет один или более классов из каждого элемента в наборе. Каждый элемент обернутого набора проверяется отдельно. Метод добавляет указанное имя класса, если оно отсутствует в элементе, и удаляет у тех элементов, где оно присутствует. Используется для переключения визуального представления элементов.
ToggleClass(имя класса) имя класса — одно или более имен класса, разделенных пробелами, которые будут переключаться для каждого элемента набора. .toggleClass(имя класса, логическое значение) имя класса — одно или более имен класса, разделенных пробелами, которые будут переключаться для каждого элемента набора. логическое значение — устанавлвает, добавить или удалить указанный класс. Значение true добавляет класс, false — удаляет. .toggleClass(логическое значение) логическое значение — необязательный параметр, устанавливает, будут ли переключаться классы каждого элемента набора. .toggleClass(функция, логическое значение) функция — возвращает имя класса, которое будет переключаться для каждого элемента набора. В качестве аргументов получает индекс элемента в наборе и старое значение класса. логическое значение — необязательный параметр, устанавливает, будут ли переключаться классы каждого элемента набора.
1.4. Метод.hasClass()Проверяет наличие указанного имени класса хотя бы у одного элемента в соответствующем наборе. Возвращает true , если хотя бы один из элементов в наборе имеет проверяемое имя класса, в противном случае — false .
HasClass(имя класса) имя класса — строка с именем класса для поиска.
2. Изменение атрибутов элементовМетод получает значение атрибута первого элемента набора или устанавливает одно или более значений атрибутов для элементов набора.
2.1. Метод.attr() .attr(имя атрибута) имя атрибута — возвращает значение атрибута первого элемента в обернутом наборе. Если атрибут отсутствует, возвращает undefined . .attr(имя атрибута, значение) имя атрибута значение — строка или число, которое будет добавлено как значение атрибута для всех элементов обернутого набора. .attr(атрибуты) атрибуты — значения, которые копируются из свойств объекта, будут установлены для всех элементов обернутого набора. .attr(имя атрибута, функция) имя атрибута — задает имя атрибута, для которого будет установлено указанное значение. функция — в качестве аргументов принимает индекс элемента в наборе и старое значение атрибута. Возвращаемое значение будет установлено в качестве значения атрибута. 2.2. Метод.removeAttr()Удаляет указанный атрибут у каждого элемента обернутого набора.
RemoveAttr(имя атрибута) имя атрибута — строка, определяющая атрибут для удаления.
3. Изменение свойств элемента 3.1. Метод.css()Возвращает вычисляемое значение свойства стиля для первого элемента в обернутом наборе или устанавливает одно или несколько CSS-свойств для каждого элемента набора.
Css(имя свойства) имя свойства — строка с именем свойства, возвращает его вычисляемое значение для первого элемента набора. .css(имена свойств) имена свойств — массив свойств, возвращает их вычисляемые значения для первого элемента набора. .css(имя свойства, значение) имя свойства значение — строка или число, которые будут установлены в качестве значения указанного свойства для всех элементов обернутого набора. .css(имя свойства, функция) имя свойства — строка с именем свойства. функция — в качестве аргументов функции передается индекс элемента в наборе и старое значение свойства. Возвращаемое значение будет установлено для всех элементов набора. .css(объект свойств) объект свойств — добавляет CSS-свойства, имена которых определены как ключи в переданном объекте, в связанные с ними значения для всех элементов в соответствующем наборе.
4. Получение и изменение размеров и координат элемента 4.1. Метод.width()Возвращает текущее значение ширины для первого элемента в наборе или устанавливает ширину для каждого элемента набора. Единица измерения по умолчанию px . Метод можно использовать в случае, если полученное значение будет использоваться в математических расчетах. Размеры вычисляются без учета отступов и толщины рамки, без указания единицы измерения. При изменении размеров окна браузера размеры элемента могут изменяться.
Width() Метод вызывается без параметров. Возвращает текущее значение ширины для первого элемента в наборе без указания единицы измерения. .width(значение) значение — целое числовое значение или строка-значение ширины, которое будет установлено для каждого элемента набора. .width(функция) функция — принимает в качестве аргумента индекс элемента и старое значение свойства, возвращаемое значение будет установлено как ширина для всех элементов.
4.2. Метод.height()Возвращает текущее значение высоты для первого элемента в наборе или устанавливает высоту для каждого элемента набора.
Height() Метод вызывается без параметров. Возвращает текущее значение высоты для первого элемента в наборе. .height(значение) значение — целое числовое значение или строка-значение высоты, которое будет установлено для каждого элемента набора. .height(функция) функция — принимает в качестве аргумента индекс элемента и старое значение свойства, возвращаемое значение будет установлено как высота для всех элементов.
4.3. Метод.innerWidth()Возвращает ширину первого элемента в обернутом наборе с учетом отступов padding или устанавливает ее для каждого элемента обернутого набора.
InnerWidth() Метод вызывается без параметров. Возвращает текущее значение внутренней ширины для первого элемента в наборе. .innerWidth(значение) значение — целое числовое значение, которое будет установлено для каждого элемента набора. .innerWidth(функция) функция
4.4. Метод.innerHeight()Возвращает высоту первого элемента в обернутом наборе с учетом отступов padding .
InnerHeight() Метод вызывается без параметров. Возвращает текущее значение внутренней высоты для первого элемента в наборе. .innerHeight(значение) значение — целое числовое значение, которое будет установлено для каждого элемента набора. .innerHeight(функция) функция — принимает в качестве аргумента индекс элемента и старое значение свойства, возвращаемое значение будет установлено как внутренняя ширина для всех элементов набора.
4.5. Метод.outerWidth()Возвращают ширину первого элемента в обернутом наборе. В эти размеры входят толщина рамки и ширина отступа.
OuterWidth(логическое значение) логическое значение
4.6. Метод.outerHeight()Возвращают высоту первого элемента в обернутом наборе. В эти размеры входят толщина рамки и ширина отступа.
OuterHeight(логическое значение) логическое значение — необязательное значение, если установлено true , значение margin учитывается, в противном случае нет.
4.7. Метод.offset()Получает текущие координаты первого элемента или устанавливает координаты для каждого элемента. Возвращает объект JavaScript со свойствами left и top , содержащими координаты первого элемента в px обернутого набора относительно начала документа. Метод применяется только к видимым элементам.
Offset() Метод вызывается без параметров.
4.8. Метод.position()Возвращает объект JavaScript со свойствами left и top , содержащими координаты первого элемента в px обернутого набора относительно ближайшего родительского элемента. Метод применяется только к видимым элементам.
Position() Метод вызывается без параметров.
Псевдо-элементы позволяют стилизовать определенные части документа. Например псевдо-элемент::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; } Попробовать »
В подобных ситуациях селекторы атрибутов полезно использовать для внесения привлекательных дополнений в дизайн ваших веб-страниц.
Практически все верстальщики знают о существовании селекторов атрибутов css и хоть раз да встречали у себя в коде конструкции из разряда input, но лишь избранные единицы знают, что на самом деле их существует 7 разновидностей, каждая из которых открывает достаточно широкие возможности по отбору тегов из кода нашей страницы.
Описание селектора атрибутов CSSОсновная цель – отбор тегов из html кода страницы по определенному атрибуту, группе атрибутов или их значению.
Синтаксис – квадратные скобки внутри которых находится название атрибута.
Классификация и использование селекторов атрибутов По наличию атрибута[ title] { text- decoration: underline; }
Позволяет отобрать все элементы у которых задан атрибут с определенным названием. В нашем примере все теги у которых прописан title станут подчеркнутыми.
По точному значению атрибутаinput[ type= "submit" ] { background- color: green; }
Пожалуй наиболее часто встречающаяся разновидность данного атрибута. Задает точное соответствие. Будут выбраны только те input, у которых атрибут type задан submit.
По частичному значению атрибутаp[ class ~= "useful" ] { color: red; }
Позволяет отобрать элементы, среди заданных значений которых присутствует наше. Для лучшего понимания поясню на примере: все p у которых среди заданных классов встречается useful попадут под данный селектор. (“useful superText”- попадет, “useful”- попадет, “superText”- не попадет).
Селектор классов по сути является частным случаем данного селектора атрибутов.
По конкретным значениям атрибутов[ lang|= "en" ] { font- style: italic; }
Отбор по атрибуту значение которого равно значению селектора или же содержит в себе данное значение с идущим после него дефисом.
Чтобы лучше понять скажу, что в примере элементы с lang="en", lang="en-us", lang="en-au" будут выбранны, а с lang="ru", lang="english" нет.
По началу значения атрибута[ alt^= "pony" ] { margin- bottom: 20px; }
Отберет атрибуты значение которых начинается с заданного нами. Пояснения: alt=”ponyLand”, alt=”pony can fly”, alt=”pony” – будут выбраны, alt=”I want pony” – не будет выбрано.
По окончанию значения атрибутаВ целом принцип действия аналогичен предыдущему атрибуту, но на этот раз значение должно быть в конце атрибута.
img[ src$= ".png" ] { width: 150px; }
В примере будут выбраны все изображения, ссылающиеся на файлы.png.
По подстроке в значении атрибутаЛогичным после двух предыдущих будет селектор, который выбирает элементы в которых встречается интересное нам значение вне зависимости от его расположения внутри атрибута.
a[ href*= "сайт" ] { font- size: 120 %; }
Выберутся все элементы включающие в себя интересную нам подстроку..ru” уже нет. из 5 )
Селекторы CSS являются значимым ингредиентом при разработке веб сайта. Они привязывают код CSS к разметке HTML. Сколько различных шаблонов селекторов вы регулярно используете?
Скорее всего, немного. Обычно список ограничивается простыми селекторами элементов HTML, классов и идентификаторов. Но возможных селекторов значительно больше.
В этом и последующем уроках будет представлено 42 варианта селекторов, которые могут существенно улучшить ваш код.
В данной серии уроков мы рассмотрим следующие типы селекторов:
- Селекторы атрибутов — используем атрибуты HTML для выбора элементов.
- Комбинаторы — комбинирование селекторов для более точного указания элементов.
- Псевдо классы — элементы, которые мы можем использовать при определенных условиях.
Комбинаторы и псевдо классы будут рассмотрены в последующих уроках серии.
Для начала взглянем на простые селекторы.
Примечание: в скобках указана версия CSS, в которой появился селектор.
Простые селекторыПростые селекторы включают селектор типа, универсальный селектор, селектор атрибута, селектор класса, селектор идентификатора и псевдо класс (псевдо класс будет рассмотрен в следующем уроке
Селектор типа (1) E (соответствует любому элементу типа E ) — Мы можем использовать любой элемент HTML в селекторе.
Универсальный селектор (2) * (соответствует любому элементу) — Если есть стиль, который нужно использовать для всех элементов на странице, то используем данный селектор.
Селектор класса (1) .class (соответствует элементу с классом class) — любой набор стилей, который можно использовать для любых элементов, обладающих определенным классом.
Селектор идентификатора (1) #myid (соответствует элементу с идентификатором myid) — любой набор стилей, который используется только для одного элемента с определенным идентификатором.
Скорее всего, вы используете простые селекторы в своей работе, и они не нуждаются в подробном описании. Давайте рассмотрим селекторы атрибутов, которые могут быть вам мало знакомы по причине редкого использования.
Селекторы атрибутовСелекторы атрибутов были введены в CSS2 и расширены в CSS3.
E (2) — соответствует элементу E с атрибутом “foo”.
E (2) — соответствует элементу E, атрибут которого “foo” имеет значение “bar”.
A { color: green }
E (2) — соответствует элементу E, который имеет атрибут “foo” со значением в виде списка, разделенного пробелом, и одним значением соответствующим “bar".
A {color: green}
E (3) — соответствует элементу E, который имеет атрибут “foo” со значением, начинающимся со строки “bar”.
A {color: green}
E (3) — соответствует элементу E, который имеет атрибут “foo” со значением, заканчивающимся строкой “bar".
A {color: green}
Вторая ссылка будет иметь зеленый цвет, так как значение атрибута href заканчивается строкой "php" . Данный селектор может быть отличным средством для выделения ссылок с определёнными типами файлов.
E (3) — соответствует элементу E, который имеет атрибут “foo” со значением, содержащим строку “bar”.
A {color: green}
E (3) — соответствует элементу E, атрибут которого “foo” имеет значение в виде списка, разделенного тире и начинающегося (слева направо) с “en”.
A {color: green}
Множественный селектор атрибутовМожно объединять несколько селекторов атрибутов вместе:
A {color: green}
Приведенный в примере селектор соответствует первой ссылке, так как только у нее есть в списке значений атрибута обе указанных строки.
Атрибуты или классы и идентификаторы?Каково же преимущество использования атрибутов перед классами и идентификаторами?
Если добавлять атрибут специально для использования селектора, то преимуществ нет.
Но многие элементы разметки HTML имеют атрибуты для других целей. href и очень часто - атрибут title . Изображения всегда имеют атрибут alt . Элементы формы используют атрибут type . В коде HTML задействовано большое количество атрибутов. Почему бы не использовать преимущества селекторов атрибутов для них?
Кроме того, HTML5 имеет новый атрибут - data , который также может нести двойную нагрузку.
Селекторы атрибутов могут избавить код HTML от лишних классов и идентификаторов.
