голосование
BASH
PHP
Javascript
HTML
Программы
Firebird
Майнинг
PostgreSQL
Хостинг
Железо
Ресурсы
GIT
SEO
Oracle
Python
Мобильные технологии
Ремонт
Mercurial
Заработок на сайте
Docker
Проголосуйте за категорию!
счётчик
Яндекс.Метрика

Как работать с селекторами jquery

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

Приведу вам самый простой пример. Для того чтобы схватить все блоки div вы должны использовать селектор $("div"). Обратите внимание на то, что будут выделены все блоки div. Если хотите узнать сколько таких блоков на странице, то применить функцию length. Например, $("div").length. Селектор $('.class-name') найдет все элементы с классом class-name. Точка перед началом селектора обязательна. Если вы забудете указать точку, то вернется пустой результат. $( ) — это функция для поиска элементов по заданному селектору jQuery. Подробно об изменении свойств класса читайте на странице как получить изменить свойства класса для элемента css() jquery.


<div class="left-block">1</div>
<div class="left-block">2</div>
<div class="left-block">3</div>

var count_block = $(".left-block").length;
console.log(count_block);
// вывод: 3

Теперь пример посложней. Допусти у вас несколько id и они похожи друг на друга. Как их всех схватить. Вся сложность в том, что id разные? Тут нам поможет условие в атрибуте $("div[id^='left-block']"). Есть ещё один способ перечисления атрибутов. Он заключается в перечислении атрибутов через запятую. Например, $("#left-block1, #left-block2, #left-block3"). Обратите внимание на то что строка внутри селектора становится слишком большой. Это не удобно. Можно эту запись записать по другому: $("div[id='left-block1'][id='left-block2'][id='left-block3']").


<div class="left-block1">блок 1</div>
<div class="left-block2">блок 2</div>
<div class="left-block3">блок 3</div>

$("div[id^='left-block']").css({"color": "red"});

Базовые

  • "*" - все элементы
  • ".className" - элементы с классом className
  • "#idName" - элемент (один!) с идентификатором idName
  • "tagName" - элементы с заданным именем тега

Фильтры по содержимому

  • ":contains(text)" - элементы, содержащие заданный текст
  • ":empty" - элементы без содержимого (без текста и других элементов)
  • ":has(selector)" - элементы, которые содержат хотя бы один элемент из selector
  • ":parent" - непустые элементы

Фильтры дочерних элементов. Cелекторы отфильтровывают элементы согласно их расположению в родительских элементах

  • ":first-child" - элементы, расположенные первыми в своих родительских элементах
  • ":last-child" - элементы, расположенные последними в своих родительских элементах
  • ":nth-child( )" и ":nth-child-last( )" - элементы, расположенные определенным образом в родительских элементах (четные, нечетные, идущие под заданным номером)
  • ":only-child" - элементы, являющиеся единственными потомками в своих родительских элементах
  • ":only-of-type" - элементы, являющиеся единственными, удовлетворяющими селектору, потомками в своих родительских элементах
  • ":first-of-type" - те из выбранных элементов, которые первыми встречаются в своих родительских элементах
  • ":last-of-type" - те из выбранных элементов, которые последними встречаются в своих родительских элементах
  • ":nth-first-of-type( )" и ":nth-last-of-type( )" - те из выбранных элементов, которые в определенную очередь встречаются в своих родительских элементах

Фильтры элементов форм

  • ":button" - элементы с тегом button или типом button
  • ":radio" - элементы, являющиеся переключателями
  • ":checkbox" - элементы, являющиеся флажками
  • ":text" - элементы, являющиеся текстовыми полями
  • ":password" - элементы, являющиеся полями ввода пароля
  • ":file" - элементы, являющиеся полями загрузки файлов
  • ":submit" - элементы, являющиеся кнопками отправки формы
  • ":reset" - элементы, являющиеся кнопками очистки формы
  • ":image" - элементы, являющиеся изображениями для отправки формы (input типа image)
  • ":input" - элементы, являющиеся элементами формы (с тегами input, textarea или button)
  • ":selected" - выбранные элементы (со статусом selected). Это могут быть элементы типа
  • ":focus" - элементы формы, находящиеся в фокусе
  • ":checked" - выбранные элементы (со статусом checked). Это могут быть элементы типа или
  • ":enabled" - активные элементы формы (со статусом enabled)
  • ":disabled" - неактивные элементы формы (со статусом disabled)

Комбинированные селекторы. Эти селекторы находятся в одном выражении.

  • "first, second, ..." - элементы удовлетворяющие любому из селекторов first, second
  • "outer inner" - элементы из inner, которые являются потомками (т.е. лежат внутри) элементов из outer
  • "parent > child" - элементы из child, которые являются прямыми потомками элементов из parent
  • "prev + next" - элементы из next, которые следуют непосредственно за элементами из prev
  • "prev ~ next" - элементы из next, которые следуют за элементами из prev

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

  • "[name]" - элементы, содержащие атрибут name
  • "[name = value]" - элементы, у которых значение атрибута name совпадает с value
  • "[name != value]" - элементы, у которых значение атрибута name не совпадает с value
  • "[name ^= value]" - элементы, у которых значение атрибута name начинается с value
  • "[name $= value]" - элементы, у которых значение атрибута name заканчивается на value
  • "[name *= value]" - элементы, у которых значение атрибута name содержит подстроку value
  • "[name ~= value]" - элементы, у которых значение атрибута name содержит слово value
  • "[name |= value]" - элементы, у которых значение атрибута name имеют префикс value (равен value или имеет вид: "value-*")
  • "[first][second][..." - элементы, соответствующие всем заданным условиям на атрибуты одновременно
Простые фильтры. При помощи этих фильтров можно уточнить результат других селекторов. Они очень похожи на псевдоклассы в CSS.
  • ":focus" - элемент, находящийся в фокусе
  • ":first" - первый найденный элемент
  • ":last" - последний найденный элемент
  • ":eq( )" - элемент идущий под заданным номером среди выбранных
  • ":not(selector)" - все найденные элементы, кроме указанных в selector
  • ":even" - элементы с четными номерами позиций, в наборе выбранных элементов
  • ":odd" - элементы с нечетными номерами позиций, в наборе выбранных элементов
  • ":gt( )" - элементы с индексом превышающим n
  • ":lt( )" - элементы с индексом меньшим, чем n
  • ":header" - элементы, являющиеся заголовками (с тегами h1, h2 и.т.д.)
  • ":animated" - элементы, которые в данный момент задействованы в анимации
  • ":hidden" - невидимые элементы страницы
  • ":visible" - видимые элементы страницы
  • ":lang(language)" - элементы, в которых указаны языки содержимого
  • ":root" - элемент, который является корневым в документе
просмотры: 1807, уровень: лёгкий уровень, рейтинг: 0, дата: 2015-12-26 11:04:16
проголосовать:

Комментарии:






поиск
реклама
банеры
сервис мониторинга работы сайта, мониторим HTTP, HTTPS, FTP, MYSQL, PostgreSQL, POP3, SMTP, IMAP
http://trainingweb.ru/redirect/pingadmin мониторинг сайтов сервис мониторинга работы сайта, мониторим HTTP, HTTPS, FTP, MYSQL, PostgreSQL, POP3, SMTP, IMAP
http://trainingweb.ru/redirect/domains домен RU домен RU всего за 99 рублей
http://trainingweb.ru/redirect/well_web_vps_kvm Аренда VPS KVM в Европе Мы предлагаем в аренду VPS серверы с выделенным IP-адресом, которые полностью эмулируют физический сервер.