На цьому уроці познайомимося з тим як знайти елементи на сторінці по атрибуту.
В jQuery вибірка елементів по атрибуту виконана відповідно до специфікації CSS.
Коли Ви використовуєте атрибути для вибору елементів, враховуйте те, що деякі атрибути можуть мати кілька значень, розділених між собою пропуском.
Значення атрибута в вираженні селектора має бути укладена в лапки. Здійснюється це одним із таких способів:
- подвійні лапки всередині одинарних лапок: $ ( 'a # 91; rel = "nofollow" # 93;').
- одинарні лапки всередині подвійних лапок: $ ( "# 91; rel = 'nofollow' # 93;").
- екрановані одинарні лапки всередині одинарних лапок: $ ( 'a # 91; rel = \' nofollow \ '# 93;').
- екрановані подвійні лапки всередині подвійних лапок: $ ( "a # 91; rel =" nofollow "# 93;").
В jQuery пошук елементів по атрибуту можна здійснити за допомогою різних селекторів. Крім цього Ви можете використовувати для вибору елементів комбінацію з декількох селекторів атрибутів. В цьому випадку будуть обрані тільки ті елементи, які відповідають кожному із зазначених селектор.
jQuery - селектори для пошуку елементів по атрибуту
# 91; name | = "value" # 93; - вибирає елементи, які мають зазначений атрибут (name) зі значенням, рівним заданої рядки (value) або починається з цього рядка (value), за якою слідує дефіс.
Наприклад, вибрати всі елементи div. які мають атрибут class зі значенням, рівним alert або починається з alert-.
# 91; name * = "value" # 93; - - вибирає елементи, який мають вказаний атрибут (name) зі значенням, що містить задану підрядок (value).
Наприклад: вибрати всі елементи, які мають атрибут href, що містить в якості свого значення подстроку youtube:
= "Value" # 93; - вибирає елементи, які мають зазначений атрибут (name) зі значенням, що містить задане значення (value) як одне з його значень (тобто відокремлено від іншого значення прогалиною) або рівним цьому значенню (value).
Наприклад, вибрати всі елементи а. які мають атрибут class зі значенням, що містить значення btn як одне з його значень (тобто відокремлена від іншого знаеніе прогалиною) або рівним btn:
# 91; name $ = "value" # 93; - вибирає елементи, які мають зазначений атрибут (name) зі значенням, яке закінчується заданим значенням (value).
Наприклад, вибрати всі елементи, які мають атрибут href. закінчується на ".zip".
# 91; name = "value" # 93; - вибирає елементи, у яких зазначений атрибут (name) має значення value.
Наприклад, вибрати всі елементи, які атрибут type зі значенням button:
# 91; name! = "Value" # 93; - вибирає елементи, які не мають вказаний атрибут (name) або мають вказаний атрибут (name), але він не містить заданого значення (value).
Наприклад, вибрати елементи a. які не мають атрибут rel або мають його, але він не містить значення nofollow.
# 91; name ^ = "value" # 93; - вибирає елементи, які мають зазначений атрибут (name) зі значенням, що починається з заданого значення (value).
Наприклад, вибрати всі елементи а. мають клас btn і атрибут href зі значенням, що починається з "http".
# 91; name # 93; - вибирає елементи, які мають зазначений атрибут (name). Значення даного атрибута (name) може бути будь-яким.
Наприклад, вибрати зображення (img), що мають атрибут alt:
# 91; name1 = "Value1" # 93; # 91; name2 = "Value2" # 93; - вибирає елементи, у яких зазначені атрибути (name1 і name2) мають відповідні значення (Value1 і Value2).
При необхідності ви можете використовувати комбінації різних селекторів атрибутів для вибору елементів. В цьому випадку будуть обрані тільки ті елементи, які відповідають усім зазначеним селекторам:
Наприклад, вибрати елементи a. мають атрибут id. атрибут href починається з http і атрибут class зі значенням, що містить значення btn як одне з його значень або рівним btn: