голосование
PHP
jQuery
Firebird
BASH
HTML
Ресурсы
GIT
SEO
Oracle
Python
Хостинг
Программы
Проголосуйте за категорию!
счётчик
Яндекс.Метрика

Как работать с селекторами 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" - элемент, который является корневым в документе
просмотры: 641, уровень: лёгкий уровень, рейтинг: 0, дата: 2015-12-26 11:04:16
проголосовать:

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






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